From e1bf3b7d946d01c4b70f3413560a3d628c02394d Mon Sep 17 00:00:00 2001
From: Marek Dano <mk.dano@gmail.com>
Date: Wed, 12 Aug 2026 16:29:05 +0100
Subject: [PATCH 1/3] fix: MCP server OAuth form quick wins (read-only redirect
 URI, drop password grant) UI part

Signed-off-by: Marek Dano <mk.dano@gmail.com>
---
 .../mcp-servers/MCPServerForm.test.tsx        | 115 ++-----------
 .../mcp-servers/OAuth2Auth.test.tsx           |  80 +++++++--
 src/components/mcp-servers/OAuth2Auth.tsx     | 155 ++++++++++++------
 src/i18n/locales/en-US/common.json            |   3 +-
 src/i18n/locales/en-US/mcpServer.json         |  46 +++++-
 src/i18n/locales/es-ES/common.json            |   3 +-
 src/i18n/locales/es-ES/mcpServer.json         |  46 +++++-
 src/i18n/locales/pt-BR/common.json            |   3 +-
 src/i18n/locales/pt-BR/mcpServer.json         |  46 +++++-
 9 files changed, 322 insertions(+), 175 deletions(-)

diff --git a/src/components/mcp-servers/MCPServerForm.test.tsx b/src/components/mcp-servers/MCPServerForm.test.tsx
index fd80af2..9db9ed0 100644
--- a/src/components/mcp-servers/MCPServerForm.test.tsx
+++ b/src/components/mcp-servers/MCPServerForm.test.tsx
@@ -793,111 +793,16 @@ describe("MCPServerForm", () => {
     });
   });
 
-  describe("OAuth Password Grant Validation", () => {
-    // Helper: open advanced settings, switch to OAuth auth, select password grant
-    const renderWithOAuthPassword = // pragma: allowlist secret
-      async () => {
-        const user = userEvent.setup();
-        renderWithRouter(<MCPServerForm {...defaultProps} />);
-        await user.click(screen.getByRole("button", { name: /Advanced settings/i }));
-        await user.click(screen.getByRole("radio", { name: /OAuth 2\.0/i }));
-        // Grant type defaults to client_credentials; switch to password
-        await user.click(screen.getByRole("combobox", { name: /Grant type/i }));
-        await user.click(screen.getByRole("option", { name: /Resource owner password/i }));
-        return user;
-      };
-
-    it("shows username and password fields when password grant is selected", async () => {
-      await renderWithOAuthPassword();
-      expect(screen.getByLabelText(/Username/i)).toBeInTheDocument();
-      expect(screen.getByLabelText(/^Password/i)).toBeInTheDocument();
-    });
-
-    it("disables the submit button when username is empty", async () => {
-      await renderWithOAuthPassword();
-      fireEvent.change(screen.getByLabelText(/^Name/i), { target: { value: "Test Server" } });
-      fireEvent.change(screen.getByLabelText(/^URL/i), {
-        target: { value: "http://localhost:3000" },
-      });
-      // Leave username empty, fill password
-      fireEvent.change(screen.getByLabelText(/^Password/i), { target: { value: "secret" } });
-      expect(screen.getByRole("button", { name: /Connect server/i })).toBeDisabled();
-    });
-
-    it("disables the submit button when password is empty", async () => {
-      await renderWithOAuthPassword();
-      fireEvent.change(screen.getByLabelText(/^Name/i), { target: { value: "Test Server" } });
-      fireEvent.change(screen.getByLabelText(/^URL/i), {
-        target: { value: "http://localhost:3000" },
-      });
-      fireEvent.change(screen.getByLabelText(/^Username/i), {
-        target: { value: "service-account" },
-      });
-      // Leave password empty
-      expect(screen.getByRole("button", { name: /Connect server/i })).toBeDisabled();
-    });
-
-    it("enables the submit button when both username and password are provided", async () => {
-      await renderWithOAuthPassword();
-      fireEvent.change(screen.getByLabelText(/^Name/i), { target: { value: "Test Server" } });
-      fireEvent.change(screen.getByLabelText(/^URL/i), {
-        target: { value: "http://localhost:3000" },
-      });
-      fireEvent.change(screen.getByLabelText(/^Username/i), {
-        target: { value: "service-account" },
-      });
-      fireEvent.change(screen.getByLabelText(/^Password/i), { target: { value: "secret" } });
-      expect(screen.getByRole("button", { name: /Connect server/i })).not.toBeDisabled();
-    });
-
-    it("marks username input as aria-invalid when username error is present", async () => {
-      await renderWithOAuthPassword();
-      fireEvent.change(screen.getByLabelText(/^Name/i), { target: { value: "Test Server" } });
-      fireEvent.change(screen.getByLabelText(/^URL/i), {
-        target: { value: "http://localhost:3000" },
-      });
-      // Only fill password, leave username empty
-      fireEvent.change(screen.getByLabelText(/^Password/i), { target: { value: "secret" } });
-
-      // Expose the field without a value and attempt form submission
-      const form = document.querySelector("form")!;
-      fireEvent.submit(form);
-
-      await waitFor(() => {
-        expect(screen.getByLabelText(/^Username/i)).toHaveAttribute("aria-invalid", "true");
-      });
-    });
-
-    it("marks password input as aria-invalid when password error is present", async () => {
-      await renderWithOAuthPassword();
-      fireEvent.change(screen.getByLabelText(/^Name/i), { target: { value: "Test Server" } });
-      fireEvent.change(screen.getByLabelText(/^URL/i), {
-        target: { value: "http://localhost:3000" },
-      });
-      fireEvent.change(screen.getByLabelText(/^Username/i), {
-        target: { value: "service-account" },
-      });
-      // Leave password empty, submit the form
-      const form = document.querySelector("form")!;
-      fireEvent.submit(form);
-
-      await waitFor(() => {
-        expect(screen.getByLabelText(/^Password/i)).toHaveAttribute("aria-invalid", "true");
-      });
-    });
-
-    it("shows inline error messages for both fields when both are empty", async () => {
-      await renderWithOAuthPassword();
-      fireEvent.change(screen.getByLabelText(/^Name/i), { target: { value: "Test Server" } });
-      fireEvent.change(screen.getByLabelText(/^URL/i), {
-        target: { value: "http://localhost:3000" },
-      });
-      fireEvent.submit(document.querySelector("form")!);
-
-      await waitFor(() => {
-        expect(screen.getByText("Username is required for password grant")).toBeInTheDocument();
-        expect(screen.getByText("Password is required for password grant")).toBeInTheDocument();
-      });
+  describe("OAuth Password Grant", () => {
+    it("does not offer the deprecated password grant for new servers", async () => {
+      const user = userEvent.setup();
+      renderWithRouter(<MCPServerForm {...defaultProps} />);
+      await user.click(screen.getByRole("button", { name: /Advanced settings/i }));
+      await user.click(screen.getByRole("radio", { name: /OAuth 2\.0/i }));
+      await user.click(screen.getByRole("combobox", { name: /Grant type/i }));
+      expect(
+        screen.queryByRole("option", { name: /Resource owner password/i }),
+      ).not.toBeInTheDocument();
     });
 
     it("does not show password-grant errors when a different OAuth grant type is selected", async () => {
diff --git a/src/components/mcp-servers/OAuth2Auth.test.tsx b/src/components/mcp-servers/OAuth2Auth.test.tsx
index 16e6727..80d2842 100644
--- a/src/components/mcp-servers/OAuth2Auth.test.tsx
+++ b/src/components/mcp-servers/OAuth2Auth.test.tsx
@@ -1,7 +1,10 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
+import { I18nProvider } from "@/i18n";
 import { OAuth2Auth } from "./OAuth2Auth";
 
+const renderWithI18n = (ui: React.ReactElement) => render(<I18nProvider>{ui}</I18nProvider>);
+
 describe("OAuth2Auth", () => {
   const defaultProps = {
     grantType: "client_credentials",
@@ -31,7 +34,7 @@ describe("OAuth2Auth", () => {
   };
 
   it("should render client_credentials fields by default", () => {
-    render(<OAuth2Auth {...defaultProps} />);
+    renderWithI18n(<OAuth2Auth {...defaultProps} />);
 
     expect(screen.getByLabelText(/Grant type/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Issuer URL/i)).toBeInTheDocument();
@@ -52,7 +55,7 @@ describe("OAuth2Auth", () => {
   });
 
   it("should render authorization_code fields", () => {
-    render(<OAuth2Auth {...defaultProps} grantType="authorization_code" />);
+    renderWithI18n(<OAuth2Auth {...defaultProps} grantType="authorization_code" />);
 
     expect(screen.getByLabelText(/Redirect URI/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Authorization URL/i)).toBeInTheDocument();
@@ -62,7 +65,7 @@ describe("OAuth2Auth", () => {
   });
 
   it("should render password fields", () => {
-    render(<OAuth2Auth {...defaultProps} grantType="password" />);
+    renderWithI18n(<OAuth2Auth {...defaultProps} grantType="password" />);
 
     expect(screen.getByLabelText(/Username/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/Password/i)).toBeInTheDocument();
@@ -72,7 +75,7 @@ describe("OAuth2Auth", () => {
   });
 
   it("should display errors for username and password in password grant", () => {
-    render(
+    renderWithI18n(
       <OAuth2Auth
         {...defaultProps}
         grantType="password"
@@ -91,7 +94,7 @@ describe("OAuth2Auth", () => {
     const onTokenUrlChange = vi.fn();
     const onScopesChange = vi.fn();
 
-    render(
+    renderWithI18n(
       <OAuth2Auth
         {...defaultProps}
         onIssuerUrlChange={onIssuerUrlChange}
@@ -128,7 +131,7 @@ describe("OAuth2Auth", () => {
     const onUsernameChange = vi.fn();
     const onPasswordChange = vi.fn();
 
-    render(
+    renderWithI18n(
       <OAuth2Auth
         {...defaultProps}
         grantType="password"
@@ -144,23 +147,24 @@ describe("OAuth2Auth", () => {
     expect(onPasswordChange).toHaveBeenCalledWith("test-pass");
   });
 
-  it("should trigger callbacks for authorization_code fields", () => {
-    const onRedirectUriChange = vi.fn();
+  it("shows a read-only derived redirect URI, lifts it into form state, and triggers the authorization URL callback", () => {
     const onAuthorizationUrlChange = vi.fn();
+    const onRedirectUriChange = vi.fn();
 
-    render(
+    renderWithI18n(
       <OAuth2Auth
         {...defaultProps}
         grantType="authorization_code"
-        onRedirectUriChange={onRedirectUriChange}
         onAuthorizationUrlChange={onAuthorizationUrlChange}
+        onRedirectUriChange={onRedirectUriChange}
       />,
     );
 
-    fireEvent.change(screen.getByLabelText(/Redirect URI/i), {
-      target: { value: "https://redirect.com" },
-    });
-    expect(onRedirectUriChange).toHaveBeenCalledWith("https://redirect.com");
+    const redirect = screen.getByLabelText(/Redirect URI/i);
+    expect(redirect).toHaveAttribute("readonly");
+    expect(redirect).toHaveValue(`${window.location.origin}/oauth/callback`);
+    expect(screen.getByRole("button", { name: "Copy to clipboard" })).toBeInTheDocument();
+    expect(onRedirectUriChange).toHaveBeenCalledWith(`${window.location.origin}/oauth/callback`);
 
     fireEvent.change(screen.getByLabelText(/Authorization URL/i), {
       target: { value: "https://auth.com/authorize" },
@@ -168,11 +172,57 @@ describe("OAuth2Auth", () => {
     expect(onAuthorizationUrlChange).toHaveBeenCalledWith("https://auth.com/authorize");
   });
 
+  it("displays a stored redirect URI verbatim without overwriting it", () => {
+    const onRedirectUriChange = vi.fn();
+
+    renderWithI18n(
+      <OAuth2Auth
+        {...defaultProps}
+        grantType="authorization_code"
+        redirectUri="https://public.example.com/oauth/callback"
+        onRedirectUriChange={onRedirectUriChange}
+      />,
+    );
+
+    expect(screen.getByLabelText(/Redirect URI/i)).toHaveValue(
+      "https://public.example.com/oauth/callback",
+    );
+    expect(onRedirectUriChange).not.toHaveBeenCalled();
+  });
+
+  it("does not set a redirect URI for non-authorization_code grants", () => {
+    const onRedirectUriChange = vi.fn();
+
+    renderWithI18n(
+      <OAuth2Auth
+        {...defaultProps}
+        grantType="client_credentials"
+        onRedirectUriChange={onRedirectUriChange}
+      />,
+    );
+
+    expect(onRedirectUriChange).not.toHaveBeenCalled();
+  });
+
+  it("only offers the password grant option when already selected (legacy)", () => {
+    const { rerender } = renderWithI18n(
+      <OAuth2Auth {...defaultProps} grantType="client_credentials" />,
+    );
+    expect(screen.queryByText(/Password grant is deprecated/i)).not.toBeInTheDocument();
+
+    rerender(
+      <I18nProvider>
+        <OAuth2Auth {...defaultProps} grantType="password" />
+      </I18nProvider>,
+    );
+    expect(screen.getByText(/Password grant is deprecated/i)).toBeInTheDocument();
+  });
+
   it("should trigger checkbox callback functions", () => {
     const onStoreTokensChange = vi.fn();
     const onAutoRefreshChange = vi.fn();
 
-    render(
+    renderWithI18n(
       <OAuth2Auth
         {...defaultProps}
         onStoreTokensChange={onStoreTokensChange}
diff --git a/src/components/mcp-servers/OAuth2Auth.tsx b/src/components/mcp-servers/OAuth2Auth.tsx
index bd0fc8a..48143a8 100644
--- a/src/components/mcp-servers/OAuth2Auth.tsx
+++ b/src/components/mcp-servers/OAuth2Auth.tsx
@@ -1,6 +1,9 @@
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox";
+import { useEffect, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -8,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useIntl } from "react-intl";
 
 interface OAuth2AuthProps {
   grantType: string;
@@ -64,6 +68,27 @@ export function OAuth2Auth({
   onPasswordChange,
   errors,
 }: OAuth2AuthProps) {
+  const intl = useIntl();
+  const derivedRedirectUri = `${window.location.origin}/oauth/callback`;
+  const displayRedirectUri = redirectUri || derivedRedirectUri;
+  const isLocalRedirect = /^https?:\/\/(localhost|127\.0\.0\.1|\[::1\])(:|\/|$)/i.test(
+    displayRedirectUri,
+  );
+  const [copied, setCopied] = useState(false);
+
+  // The displayed URI is what the OAuth app is registered with, so it has to be the value we
+  // store and send to the IdP — a display-only derivation submits no redirect_uri at all.
+  useEffect(() => {
+    if (grantType === "authorization_code" && !redirectUri) {
+      onRedirectUriChange(derivedRedirectUri);
+    }
+  }, [grantType, redirectUri, derivedRedirectUri, onRedirectUriChange]);
+
+  const handleCopyRedirect = () => {
+    void navigator.clipboard?.writeText(displayRedirectUri);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
   return (
     <div className="space-y-4">
       <div className="space-y-1">
@@ -71,46 +96,60 @@ export function OAuth2Auth({
           htmlFor="oauth-grant-type"
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
-          Grant type<span className="text-red-500">*</span>
-          <span className="sr-only">(required)</span>
+          {intl.formatMessage({ id: "mcpServer.oauth2.grantType.label" })}
+          <span className="text-red-500">*</span>
+          <span className="sr-only">{intl.formatMessage({ id: "common.required" })}</span>
         </label>
         <Select value={grantType} onValueChange={onGrantTypeChange}>
           <SelectTrigger
             id="oauth-grant-type"
             className="h-10 w-full border-neutral-300 dark:border-neutral-700"
           >
-            <SelectValue placeholder="Select grant type" />
+            <SelectValue
+              placeholder={intl.formatMessage({ id: "mcpServer.oauth2.grantType.placeholder" })}
+            />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="authorization_code">Authorization code (user login)</SelectItem>
+            <SelectItem value="authorization_code">
+              {intl.formatMessage({ id: "mcpServer.oauth2.grantType.authorizationCode" })}
+            </SelectItem>
             <SelectItem value="client_credentials">
-              Client credentials (machine to machine)
+              {intl.formatMessage({ id: "mcpServer.oauth2.grantType.clientCredentials" })}
             </SelectItem>
-            <SelectItem value="password">Resource owner password (legacy)</SelectItem>
+            {grantType === "password" && (
+              <SelectItem value="password">
+                {intl.formatMessage({ id: "mcpServer.oauth2.grantType.password" })}
+              </SelectItem>
+            )}
           </SelectContent>
         </Select>
       </div>
 
+      {grantType === "password" && (
+        <p className="text-xs text-amber-600 dark:text-amber-500">
+          {intl.formatMessage({ id: "mcpServer.oauth2.passwordDeprecated" })}
+        </p>
+      )}
+
       <div className="space-y-1">
         <label
           htmlFor="oauth-issuer-url"
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
-          Issuer URL<span className="text-red-500">*</span>
-          <span className="sr-only">(required)</span>
+          {intl.formatMessage({ id: "mcpServer.oauth2.issuerUrl.label" })}
+          <span className="text-red-500">*</span>
+          <span className="sr-only">{intl.formatMessage({ id: "common.required" })}</span>
         </label>
         <Input
           id="oauth-issuer-url"
           type="text"
           value={issuerUrl}
           onChange={(e) => onIssuerUrlChange(e.target.value)}
-          placeholder="e.g. https://auth.example.com"
+          placeholder={intl.formatMessage({ id: "mcpServer.oauth2.issuerUrl.placeholder" })}
           className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
-          {
-            "Authorization server's base URL for endpoint discovery and Dynamic Client Registration (DCR)"
-          }
+          {intl.formatMessage({ id: "mcpServer.oauth2.issuerUrl.hint" })}
         </p>
       </div>
 
@@ -118,22 +157,36 @@ export function OAuth2Auth({
         <div className="space-y-1">
           <label
             htmlFor="oauth-redirect-uri"
-            className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
+            className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
           >
-            Redirect URI<span className="text-red-500">*</span>
-            <span className="sr-only">(required)</span>
+            {intl.formatMessage({ id: "mcpServer.oauth2.redirectUri.label" })}
           </label>
-          <Input
-            id="oauth-redirect-uri"
-            type="text"
-            value={redirectUri}
-            onChange={(e) => onRedirectUriChange(e.target.value)}
-            placeholder="e.g. https://gateway.example.com/oauth/callback"
-            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
-          />
+          <div className="flex items-center gap-2">
+            <Input
+              id="oauth-redirect-uri"
+              type="text"
+              readOnly
+              value={displayRedirectUri}
+              className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 dark:border-neutral-700 dark:text-neutral-100"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              aria-label={intl.formatMessage({ id: "mcpServer.oauth2.redirectUri.copy" })}
+              onClick={handleCopyRedirect}
+            >
+              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          </div>
           <p className="text-xs text-neutral-600 dark:text-neutral-500">
-            {"Copy URI into the OAuth application's allowed redirect URI"}
+            {intl.formatMessage({ id: "mcpServer.oauth2.redirectUri.hint" })}
           </p>
+          {isLocalRedirect && (
+            <p className="text-xs text-amber-600 dark:text-amber-500">
+              {intl.formatMessage({ id: "mcpServer.oauth2.redirectUri.localWarning" })}
+            </p>
+          )}
         </div>
       )}
 
@@ -144,15 +197,16 @@ export function OAuth2Auth({
               htmlFor="oauth-username"
               className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
             >
-              Username<span className="text-red-500">*</span>
-              <span className="sr-only">(required)</span>
+              {intl.formatMessage({ id: "mcpServer.oauth2.username.label" })}
+              <span className="text-red-500">*</span>
+              <span className="sr-only">{intl.formatMessage({ id: "common.required" })}</span>
             </label>
             <Input
               id="oauth-username"
               type="text"
               value={username}
               onChange={(e) => onUsernameChange(e.target.value)}
-              placeholder="e.g. service-account"
+              placeholder={intl.formatMessage({ id: "mcpServer.oauth2.username.placeholder" })}
               aria-invalid={!!errors?.username}
               aria-describedby={errors?.username ? "oauth-username-error" : undefined}
               className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
@@ -168,8 +222,9 @@ export function OAuth2Auth({
               htmlFor="oauth-password"
               className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
             >
-              Password<span className="text-red-500">*</span>
-              <span className="sr-only">(required)</span>
+              {intl.formatMessage({ id: "mcpServer.oauth2.password.label" })}
+              <span className="text-red-500">*</span>
+              <span className="sr-only">{intl.formatMessage({ id: "common.required" })}</span>
             </label>
             <Input
               id="oauth-password"
@@ -195,18 +250,18 @@ export function OAuth2Auth({
           htmlFor="oauth-client-id"
           className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
-          Client ID
+          {intl.formatMessage({ id: "mcpServer.oauth2.clientId.label" })}
         </label>
         <Input
           id="oauth-client-id"
           type="text"
           value={clientId}
           onChange={(e) => onClientIdChange(e.target.value)}
-          placeholder="e.g. 8f3a2c1d-4b5e-4f6a-9c8d-1e2f3a4b5c6"
+          placeholder={intl.formatMessage({ id: "mcpServer.oauth2.clientId.placeholder" })}
           className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
-          Not required for servers that support Dynamic Client Registration (DCR)
+          {intl.formatMessage({ id: "mcpServer.oauth2.clientId.hint" })}
         </p>
       </div>
 
@@ -215,18 +270,18 @@ export function OAuth2Auth({
           htmlFor="oauth-client-secret"
           className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
-          Client Secret
+          {intl.formatMessage({ id: "mcpServer.oauth2.clientSecret.label" })}
         </label>
         <Input
           id="oauth-client-secret"
           type="password"
           value={clientSecret}
           onChange={(e) => onClientSecretChange(e.target.value)}
-          placeholder="e.g. a1b2c3d4e5f6"
+          placeholder={intl.formatMessage({ id: "mcpServer.oauth2.clientSecret.placeholder" })}
           className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
-          Not required for servers that support Dynamic Client Registration (DCR)
+          {intl.formatMessage({ id: "mcpServer.oauth2.clientSecret.hint" })}
         </p>
       </div>
 
@@ -235,19 +290,20 @@ export function OAuth2Auth({
           htmlFor="oauth-token-url"
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
-          Token URL<span className="text-red-500">*</span>
-          <span className="sr-only">(required)</span>
+          {intl.formatMessage({ id: "mcpServer.oauth2.tokenUrl.label" })}
+          <span className="text-red-500">*</span>
+          <span className="sr-only">{intl.formatMessage({ id: "common.required" })}</span>
         </label>
         <Input
           id="oauth-token-url"
           type="text"
           value={tokenUrl}
           onChange={(e) => onTokenUrlChange(e.target.value)}
-          placeholder="e.g. https://oauth.example.com/token"
+          placeholder={intl.formatMessage({ id: "mcpServer.oauth2.tokenUrl.placeholder" })}
           className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
-          Exchanges authorization codes or credentials for access tokens
+          {intl.formatMessage({ id: "mcpServer.oauth2.tokenUrl.hint" })}
         </p>
       </div>
 
@@ -257,19 +313,20 @@ export function OAuth2Auth({
             htmlFor="oauth-authorization-url"
             className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
           >
-            Authorization URL<span className="text-red-500">*</span>
-            <span className="sr-only">(required)</span>
+            {intl.formatMessage({ id: "mcpServer.oauth2.authorizationUrl.label" })}
+            <span className="text-red-500">*</span>
+            <span className="sr-only">{intl.formatMessage({ id: "common.required" })}</span>
           </label>
           <Input
             id="oauth-authorization-url"
             type="text"
             value={authorizationUrl}
             onChange={(e) => onAuthorizationUrlChange(e.target.value)}
-            placeholder="e.g. https://oauth.example.com/authorize"
+            placeholder={intl.formatMessage({ id: "mcpServer.oauth2.authorizationUrl.placeholder" })}
             className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
           />
           <p className="text-xs text-neutral-600 dark:text-neutral-500">
-            Where users are redirected to log in and grant access
+            {intl.formatMessage({ id: "mcpServer.oauth2.authorizationUrl.hint" })}
           </p>
         </div>
       )}
@@ -279,23 +336,23 @@ export function OAuth2Auth({
           htmlFor="oauth-scopes"
           className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
-          Scopes
+          {intl.formatMessage({ id: "mcpServer.oauth2.scopes.label" })}
         </label>
         <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          Space-separated list of OAuth scopes
+          {intl.formatMessage({ id: "mcpServer.oauth2.scopes.hint" })}
         </p>
         <Textarea
           id="oauth-scopes"
           value={scopes}
           onChange={(e) => onScopesChange(e.target.value)}
-          placeholder="e.g. repo read:user..."
+          placeholder={intl.formatMessage({ id: "mcpServer.oauth2.scopes.placeholder" })}
           className="min-h-20 focus-visible:ring-1 focus-visible:ring-offset-0"
         />
       </div>
 
       <div className="space-y-2">
         <label className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
-          Token management
+          {intl.formatMessage({ id: "mcpServer.oauth2.tokenManagement.label" })}
         </label>
         <div className="space-y-2">
           <div className="flex items-center gap-2">
@@ -308,7 +365,7 @@ export function OAuth2Auth({
               htmlFor="store-tokens"
               className="text-sm text-neutral-900 dark:text-neutral-100 cursor-pointer"
             >
-              Store access tokens for reuse
+              {intl.formatMessage({ id: "mcpServer.oauth2.tokenManagement.storeTokens" })}
             </label>
           </div>
           <div className="flex items-center gap-2">
@@ -321,7 +378,7 @@ export function OAuth2Auth({
               htmlFor="auto-refresh"
               className="text-sm text-neutral-900 dark:text-neutral-100 cursor-pointer"
             >
-              Automatically refresh expired tokens
+              {intl.formatMessage({ id: "mcpServer.oauth2.tokenManagement.autoRefresh" })}
             </label>
           </div>
         </div>
diff --git a/src/i18n/locales/en-US/common.json b/src/i18n/locales/en-US/common.json
index 2ef2627..ada38fb 100644
--- a/src/i18n/locales/en-US/common.json
+++ b/src/i18n/locales/en-US/common.json
@@ -50,5 +50,6 @@
   "common.theme.dark": "Dark mode",
   "common.theme.system": "System theme",
   "common.theme.toggle": "Toggle theme",
-  "common.button.remove": "Remove"
+  "common.button.remove": "Remove",
+  "common.required": "(required)"
 }
diff --git a/src/i18n/locales/en-US/mcpServer.json b/src/i18n/locales/en-US/mcpServer.json
index 89ba9ac..a73a57d 100644
--- a/src/i18n/locales/en-US/mcpServer.json
+++ b/src/i18n/locales/en-US/mcpServer.json
@@ -31,5 +31,49 @@
   "mcpServer.catalog.noneConnected": "No MCP server catalog options are connected.",
   "mcpServer.catalog.disabled": "Server catalog is disabled for this gateway.",
   "mcpServer.catalog.error": "Unable to load server catalog. Try again.",
-  "mcpServer.catalog.retry": "Retry"
+  "mcpServer.catalog.retry": "Retry",
+
+  "mcpServer.oauth2.grantType.label": "Grant type",
+  "mcpServer.oauth2.grantType.placeholder": "Select grant type",
+  "mcpServer.oauth2.grantType.authorizationCode": "Authorization code (user login)",
+  "mcpServer.oauth2.grantType.clientCredentials": "Client credentials (machine to machine)",
+  "mcpServer.oauth2.grantType.password": "Resource owner password (deprecated)",
+  "mcpServer.oauth2.passwordDeprecated": "Password grant is deprecated by OAuth 2.1. Migrate this MCP server to authorization_code or client_credentials.",
+
+  "mcpServer.oauth2.issuerUrl.label": "Issuer URL",
+  "mcpServer.oauth2.issuerUrl.placeholder": "e.g. https://auth.example.com",
+  "mcpServer.oauth2.issuerUrl.hint": "Authorization server's base URL for endpoint discovery and Dynamic Client Registration (DCR)",
+
+  "mcpServer.oauth2.redirectUri.label": "Redirect URI",
+  "mcpServer.oauth2.redirectUri.copy": "Copy to clipboard",
+  "mcpServer.oauth2.redirectUri.hint": "Configure your OAuth app to use this redirect URI.",
+  "mcpServer.oauth2.redirectUri.localWarning": "The server's public URL is not configured. Redirect URIs derived from localhost will not work for external OAuth providers.",
+
+  "mcpServer.oauth2.username.label": "Username",
+  "mcpServer.oauth2.username.placeholder": "e.g. service-account",
+  "mcpServer.oauth2.password.label": "Password",
+
+  "mcpServer.oauth2.clientId.label": "Client ID",
+  "mcpServer.oauth2.clientId.placeholder": "e.g. 8f3a2c1d-4b5e-4f6a-9c8d-1e2f3a4b5c6",
+  "mcpServer.oauth2.clientId.hint": "Not required for servers that support Dynamic Client Registration (DCR)",
+
+  "mcpServer.oauth2.clientSecret.label": "Client Secret",
+  "mcpServer.oauth2.clientSecret.placeholder": "e.g. a1b2c3d4e5f6",
+  "mcpServer.oauth2.clientSecret.hint": "Not required for servers that support Dynamic Client Registration (DCR)",
+
+  "mcpServer.oauth2.tokenUrl.label": "Token URL",
+  "mcpServer.oauth2.tokenUrl.placeholder": "e.g. https://oauth.example.com/token",
+  "mcpServer.oauth2.tokenUrl.hint": "Exchanges authorization codes or credentials for access tokens",
+
+  "mcpServer.oauth2.authorizationUrl.label": "Authorization URL",
+  "mcpServer.oauth2.authorizationUrl.placeholder": "e.g. https://oauth.example.com/authorize",
+  "mcpServer.oauth2.authorizationUrl.hint": "Where users are redirected to log in and grant access",
+
+  "mcpServer.oauth2.scopes.label": "Scopes",
+  "mcpServer.oauth2.scopes.hint": "Space-separated list of OAuth scopes",
+  "mcpServer.oauth2.scopes.placeholder": "e.g. repo read:user...",
+
+  "mcpServer.oauth2.tokenManagement.label": "Token management",
+  "mcpServer.oauth2.tokenManagement.storeTokens": "Store access tokens for reuse",
+  "mcpServer.oauth2.tokenManagement.autoRefresh": "Automatically refresh expired tokens"
 }
diff --git a/src/i18n/locales/es-ES/common.json b/src/i18n/locales/es-ES/common.json
index dfbe4ec..3000406 100644
--- a/src/i18n/locales/es-ES/common.json
+++ b/src/i18n/locales/es-ES/common.json
@@ -50,5 +50,6 @@
   "common.theme.dark": "Modo oscuro",
   "common.theme.system": "Tema del sistema",
   "common.theme.toggle": "Cambiar tema",
-  "common.button.remove": "Eliminar"
+  "common.button.remove": "Eliminar",
+  "common.required": "(requerido)"
 }
diff --git a/src/i18n/locales/es-ES/mcpServer.json b/src/i18n/locales/es-ES/mcpServer.json
index ae04dba..fd5236e 100644
--- a/src/i18n/locales/es-ES/mcpServer.json
+++ b/src/i18n/locales/es-ES/mcpServer.json
@@ -31,5 +31,49 @@
   "mcpServer.catalog.noneConnected": "Ninguna opción del catálogo de servidores MCP está conectada.",
   "mcpServer.catalog.disabled": "El catálogo de servidores está deshabilitado para esta puerta de enlace.",
   "mcpServer.catalog.error": "No se pudo cargar el catálogo de servidores. Inténtalo de nuevo.",
-  "mcpServer.catalog.retry": "Reintentar"
+  "mcpServer.catalog.retry": "Reintentar",
+
+  "mcpServer.oauth2.grantType.label": "Tipo de concesión",
+  "mcpServer.oauth2.grantType.placeholder": "Seleccionar tipo de concesión",
+  "mcpServer.oauth2.grantType.authorizationCode": "Código de autorización (inicio de sesión de usuario)",
+  "mcpServer.oauth2.grantType.clientCredentials": "Credenciales de cliente (máquina a máquina)",
+  "mcpServer.oauth2.grantType.password": "Contraseña del propietario del recurso (obsoleto)",
+  "mcpServer.oauth2.passwordDeprecated": "La concesión por contraseña está obsoleta en OAuth 2.1. Migre este servidor MCP a authorization_code o client_credentials.",
+
+  "mcpServer.oauth2.issuerUrl.label": "URL del emisor",
+  "mcpServer.oauth2.issuerUrl.placeholder": "p. ej. https://auth.example.com",
+  "mcpServer.oauth2.issuerUrl.hint": "URL base del servidor de autorización para el descubrimiento de endpoints y el Registro Dinámico de Clientes (DCR)",
+
+  "mcpServer.oauth2.redirectUri.label": "URI de redirección",
+  "mcpServer.oauth2.redirectUri.copy": "Copiar al portapapeles",
+  "mcpServer.oauth2.redirectUri.hint": "Configure su aplicación OAuth para usar esta URI de redirección.",
+  "mcpServer.oauth2.redirectUri.localWarning": "La URL pública del servidor no está configurada. Las URI de redirección derivadas de localhost no funcionarán con proveedores OAuth externos.",
+
+  "mcpServer.oauth2.username.label": "Nombre de usuario",
+  "mcpServer.oauth2.username.placeholder": "p. ej. service-account",
+  "mcpServer.oauth2.password.label": "Contraseña",
+
+  "mcpServer.oauth2.clientId.label": "ID de cliente",
+  "mcpServer.oauth2.clientId.placeholder": "p. ej. 8f3a2c1d-4b5e-4f6a-9c8d-1e2f3a4b5c6",
+  "mcpServer.oauth2.clientId.hint": "No es necesario para servidores que admiten el Registro Dinámico de Clientes (DCR)",
+
+  "mcpServer.oauth2.clientSecret.label": "Secreto de cliente",
+  "mcpServer.oauth2.clientSecret.placeholder": "p. ej. a1b2c3d4e5f6",
+  "mcpServer.oauth2.clientSecret.hint": "No es necesario para servidores que admiten el Registro Dinámico de Clientes (DCR)",
+
+  "mcpServer.oauth2.tokenUrl.label": "URL del token",
+  "mcpServer.oauth2.tokenUrl.placeholder": "p. ej. https://oauth.example.com/token",
+  "mcpServer.oauth2.tokenUrl.hint": "Intercambia códigos de autorización o credenciales por tokens de acceso",
+
+  "mcpServer.oauth2.authorizationUrl.label": "URL de autorización",
+  "mcpServer.oauth2.authorizationUrl.placeholder": "p. ej. https://oauth.example.com/authorize",
+  "mcpServer.oauth2.authorizationUrl.hint": "Donde se redirige a los usuarios para iniciar sesión y otorgar acceso",
+
+  "mcpServer.oauth2.scopes.label": "Alcances",
+  "mcpServer.oauth2.scopes.hint": "Lista de alcances OAuth separados por espacios",
+  "mcpServer.oauth2.scopes.placeholder": "p. ej. repo read:user...",
+
+  "mcpServer.oauth2.tokenManagement.label": "Gestión de tokens",
+  "mcpServer.oauth2.tokenManagement.storeTokens": "Almacenar tokens de acceso para reutilización",
+  "mcpServer.oauth2.tokenManagement.autoRefresh": "Actualizar automáticamente los tokens caducados"
 }
diff --git a/src/i18n/locales/pt-BR/common.json b/src/i18n/locales/pt-BR/common.json
index c451a25..4dc77a2 100644
--- a/src/i18n/locales/pt-BR/common.json
+++ b/src/i18n/locales/pt-BR/common.json
@@ -50,5 +50,6 @@
   "common.theme.dark": "Modo escuro",
   "common.theme.system": "Tema do sistema",
   "common.theme.toggle": "Alternar tema",
-  "common.button.remove": "Remover"
+  "common.button.remove": "Remover",
+  "common.required": "(obrigatório)"
 }
diff --git a/src/i18n/locales/pt-BR/mcpServer.json b/src/i18n/locales/pt-BR/mcpServer.json
index 6d5a4bc..d26ca25 100644
--- a/src/i18n/locales/pt-BR/mcpServer.json
+++ b/src/i18n/locales/pt-BR/mcpServer.json
@@ -31,5 +31,49 @@
   "mcpServer.catalog.noneConnected": "Nenhuma opção do catálogo de servidores MCP está conectada.",
   "mcpServer.catalog.disabled": "O catálogo de servidores está desabilitado para este gateway.",
   "mcpServer.catalog.error": "Não foi possível carregar o catálogo de servidores. Tente novamente.",
-  "mcpServer.catalog.retry": "Tentar novamente"
+  "mcpServer.catalog.retry": "Tentar novamente",
+
+  "mcpServer.oauth2.grantType.label": "Tipo de concessão",
+  "mcpServer.oauth2.grantType.placeholder": "Selecionar tipo de concessão",
+  "mcpServer.oauth2.grantType.authorizationCode": "Código de autorização (login do usuário)",
+  "mcpServer.oauth2.grantType.clientCredentials": "Credenciais do cliente (máquina a máquina)",
+  "mcpServer.oauth2.grantType.password": "Senha do proprietário do recurso (obsoleto)",
+  "mcpServer.oauth2.passwordDeprecated": "A concessão por senha está obsoleta no OAuth 2.1. Migre este servidor MCP para authorization_code ou client_credentials.",
+
+  "mcpServer.oauth2.issuerUrl.label": "URL do emissor",
+  "mcpServer.oauth2.issuerUrl.placeholder": "ex. https://auth.example.com",
+  "mcpServer.oauth2.issuerUrl.hint": "URL base do servidor de autorização para descoberta de endpoints e Registro Dinâmico de Clientes (DCR)",
+
+  "mcpServer.oauth2.redirectUri.label": "URI de redirecionamento",
+  "mcpServer.oauth2.redirectUri.copy": "Copiar para a área de transferência",
+  "mcpServer.oauth2.redirectUri.hint": "Configure seu aplicativo OAuth para usar esta URI de redirecionamento.",
+  "mcpServer.oauth2.redirectUri.localWarning": "A URL pública do servidor não está configurada. URIs de redirecionamento derivadas de localhost não funcionarão com provedores OAuth externos.",
+
+  "mcpServer.oauth2.username.label": "Usuário",
+  "mcpServer.oauth2.username.placeholder": "ex. service-account",
+  "mcpServer.oauth2.password.label": "Senha",
+
+  "mcpServer.oauth2.clientId.label": "ID do cliente",
+  "mcpServer.oauth2.clientId.placeholder": "ex. 8f3a2c1d-4b5e-4f6a-9c8d-1e2f3a4b5c6",
+  "mcpServer.oauth2.clientId.hint": "Não obrigatório para servidores que suportam Registro Dinâmico de Clientes (DCR)",
+
+  "mcpServer.oauth2.clientSecret.label": "Segredo do cliente",
+  "mcpServer.oauth2.clientSecret.placeholder": "ex. a1b2c3d4e5f6",
+  "mcpServer.oauth2.clientSecret.hint": "Não obrigatório para servidores que suportam Registro Dinâmico de Clientes (DCR)",
+
+  "mcpServer.oauth2.tokenUrl.label": "URL do token",
+  "mcpServer.oauth2.tokenUrl.placeholder": "ex. https://oauth.example.com/token",
+  "mcpServer.oauth2.tokenUrl.hint": "Troca códigos de autorização ou credenciais por tokens de acesso",
+
+  "mcpServer.oauth2.authorizationUrl.label": "URL de autorização",
+  "mcpServer.oauth2.authorizationUrl.placeholder": "ex. https://oauth.example.com/authorize",
+  "mcpServer.oauth2.authorizationUrl.hint": "Onde os usuários são redirecionados para fazer login e conceder acesso",
+
+  "mcpServer.oauth2.scopes.label": "Escopos",
+  "mcpServer.oauth2.scopes.hint": "Lista de escopos OAuth separados por espaço",
+  "mcpServer.oauth2.scopes.placeholder": "ex. repo read:user...",
+
+  "mcpServer.oauth2.tokenManagement.label": "Gerenciamento de tokens",
+  "mcpServer.oauth2.tokenManagement.storeTokens": "Armazenar tokens de acesso para reutilização",
+  "mcpServer.oauth2.tokenManagement.autoRefresh": "Atualizar automaticamente tokens expirados"
 }

From 71a56419b0728d9c800c04ee43cd9ceeb8b4ddf5 Mon Sep 17 00:00:00 2001
From: Marek Dano <mk.dano@gmail.com>
Date: Wed, 12 Aug 2026 16:39:14 +0100
Subject: [PATCH 2/3] fix: formatter issues

Signed-off-by: Marek Dano <mk.dano@gmail.com>
---
 src/components/mcp-servers/OAuth2Auth.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/mcp-servers/OAuth2Auth.tsx b/src/components/mcp-servers/OAuth2Auth.tsx
index 48143a8..3c5c920 100644
--- a/src/components/mcp-servers/OAuth2Auth.tsx
+++ b/src/components/mcp-servers/OAuth2Auth.tsx
@@ -322,7 +322,9 @@ export function OAuth2Auth({
             type="text"
             value={authorizationUrl}
             onChange={(e) => onAuthorizationUrlChange(e.target.value)}
-            placeholder={intl.formatMessage({ id: "mcpServer.oauth2.authorizationUrl.placeholder" })}
+            placeholder={intl.formatMessage({
+              id: "mcpServer.oauth2.authorizationUrl.placeholder",
+            })}
             className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
           />
           <p className="text-xs text-neutral-600 dark:text-neutral-500">

From 04d8bfffff89b82a16fb05bb2222388975ec0ea7 Mon Sep 17 00:00:00 2001
From: Marek Dano <mk.dano@gmail.com>
Date: Thu, 13 Aug 2026 11:53:59 +0100
Subject: [PATCH 3/3] Address comments

Signed-off-by: Marek Dano <mk.dano@gmail.com>
---
 src/components/mcp-servers/MCPServerForm.tsx  | 11 ++-
 .../mcp-servers/OAuth2Auth.test.tsx           | 84 ++++++++++++++++++-
 2 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/src/components/mcp-servers/MCPServerForm.tsx b/src/components/mcp-servers/MCPServerForm.tsx
index 9d63516..ad24e46 100644
--- a/src/components/mcp-servers/MCPServerForm.tsx
+++ b/src/components/mcp-servers/MCPServerForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { ChevronDown, CircleAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { InlineNotification } from "@/components/ui/inline-notification";
@@ -94,6 +94,13 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
     setQueryParamApiKey,
   } = useMCPServerForm(serverId);
 
+  const handleRedirectUriChange = useCallback(
+    (uri: string) => {
+      setOAuthRedirectUri(uri);
+    },
+    [setOAuthRedirectUri],
+  );
+
   const handleCancel = () => {
     setCreatedGateway(null);
     onToggle();
@@ -334,7 +341,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                   onOAuthTokenUrlChange={setOAuthTokenUrl}
                   onOAuthGrantTypeChange={setOAuthGrantType}
                   onOAuthIssuerUrlChange={setOAuthIssuerUrl}
-                  onOAuthRedirectUriChange={setOAuthRedirectUri}
+                  onOAuthRedirectUriChange={handleRedirectUriChange}
                   onOAuthAuthorizationUrlChange={setOAuthAuthorizationUrl}
                   onOAuthScopesChange={setOAuthScopes}
                   onOAuthStoreTokensChange={setOAuthStoreTokens}
diff --git a/src/components/mcp-servers/OAuth2Auth.test.tsx b/src/components/mcp-servers/OAuth2Auth.test.tsx
index 80d2842..b99fde4 100644
--- a/src/components/mcp-servers/OAuth2Auth.test.tsx
+++ b/src/components/mcp-servers/OAuth2Auth.test.tsx
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import { I18nProvider } from "@/i18n";
 import { OAuth2Auth } from "./OAuth2Auth";
 
@@ -236,4 +236,84 @@ describe("OAuth2Auth", () => {
     fireEvent.click(screen.getByLabelText(/Automatically refresh expired tokens/i));
     expect(onAutoRefreshChange).toHaveBeenCalled();
   });
+
+  describe("copy button interaction", () => {
+    beforeEach(() => {
+      Object.assign(navigator, {
+        clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
+      });
+    });
+
+    it("copies the redirect URI to clipboard when the copy button is clicked", async () => {
+      renderWithI18n(<OAuth2Auth {...defaultProps} grantType="authorization_code" />);
+
+      const copyButton = screen.getByRole("button", { name: /Copy to clipboard/i });
+      await act(async () => {
+        fireEvent.click(copyButton);
+      });
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        `${window.location.origin}/oauth/callback`,
+      );
+    });
+
+    it("shows a check icon immediately after clicking copy and reverts after 2 s", async () => {
+      vi.useFakeTimers();
+
+      renderWithI18n(<OAuth2Auth {...defaultProps} grantType="authorization_code" />);
+
+      const copyButton = screen.getByRole("button", { name: /Copy to clipboard/i });
+      await act(async () => {
+        fireEvent.click(copyButton);
+      });
+
+      // The button is still present (aria-label unchanged; icon swap is visual-only)
+      expect(copyButton).toBeInTheDocument();
+
+      await act(async () => {
+        vi.advanceTimersByTime(2000);
+      });
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe("localhost warning", () => {
+    it("shows a localhost warning when the derived redirect URI points to localhost", () => {
+      // jsdom sets window.location.origin to 'http://localhost'
+      renderWithI18n(<OAuth2Auth {...defaultProps} grantType="authorization_code" />);
+
+      expect(
+        screen.getByText(/Redirect URIs derived from localhost will not work/i),
+      ).toBeInTheDocument();
+    });
+
+    it("does not show the localhost warning when a non-localhost stored redirect URI is used", () => {
+      renderWithI18n(
+        <OAuth2Auth
+          {...defaultProps}
+          grantType="authorization_code"
+          redirectUri="https://public.example.com/oauth/callback"
+        />,
+      );
+
+      expect(
+        screen.queryByText(/Redirect URIs derived from localhost will not work/i),
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows the localhost warning when a stored redirect URI points to 127.0.0.1", () => {
+      renderWithI18n(
+        <OAuth2Auth
+          {...defaultProps}
+          grantType="authorization_code"
+          redirectUri="http://127.0.0.1:8080/oauth/callback"
+        />,
+      );
+
+      expect(
+        screen.getByText(/Redirect URIs derived from localhost will not work/i),
+      ).toBeInTheDocument();
+    });
+  });
 });