From 7ac8251c993f301b1c2f1076492235ef619a99af Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 10 Apr 2026 13:53:19 -0400
Subject: [PATCH 1/2] chore(ui): Add OauthConsent localizations pt 1

---
 packages/localizations/src/en-US.ts           | 12 +++++++++
 packages/shared/src/types/localization.ts     | 12 +++++++++
 .../components/OAuthConsent/OAuthConsent.tsx  | 27 ++++++++++++-------
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 70ea6c728fa..1dc4688e9bc 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -294,6 +294,18 @@ export const enUS: LocalizationResource = {
     title: 'Choose an account',
     titleWithoutPersonal: 'Choose an organization',
   },
+  oauthConsent: {
+    action__allow: 'Allow',
+    action__deny: 'Deny',
+    redirectUriModal: {
+      subtitle: 'Make sure you trust {{applicationName}} and that this URL belongs to {{applicationName}}.',
+      title: 'Redirect URL',
+    },
+    scopeList: {
+      title: 'This will allow {{applicationName}} access to:',
+    },
+    subtitle: 'wants to access {{applicationName}} on behalf of {{identifier}}',
+  },
   organizationProfile: {
     apiKeysPage: {
       title: 'API keys',
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
index 5e65b15004e..e58d9c3697a 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -1252,6 +1252,18 @@ export type __internal_LocalizationResource = {
     suggestionsAcceptedLabel: LocalizationValue;
     action__createOrganization: LocalizationValue;
   };
+  oauthConsent: {
+    subtitle: LocalizationValue<'applicationName' | 'identifier'>;
+    scopeList: {
+      title: LocalizationValue<'applicationName'>;
+    };
+    action__deny: LocalizationValue;
+    action__allow: LocalizationValue;
+    redirectUriModal: {
+      title: LocalizationValue;
+      subtitle: LocalizationValue<'applicationName'>;
+    };
+  };
   unstable__errors: UnstableErrors;
   dates: {
     previous6Days: LocalizationValue<'date'>;
diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
index bc610b673a5..d61fd4af7e2 100644
--- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
@@ -2,7 +2,7 @@ import { useUser } from '@clerk/shared/react';
 import { useState } from 'react';
 
 import { useEnvironment, useOAuthConsentContext } from '@/ui/contexts';
-import { Box, Button, Flow, Grid, Text } from '@/ui/customizables';
+import { Box, Button, Flow, Grid, localizationKeys, Text } from '@/ui/customizables';
 import { ApplicationLogo } from '@/ui/elements/ApplicationLogo';
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
@@ -10,8 +10,6 @@ import { Header } from '@/ui/elements/Header';
 import { Modal } from '@/ui/elements/Modal';
 import { Tooltip } from '@/ui/elements/Tooltip';
 import { Alert, Textarea } from '@/ui/primitives';
-import { common } from '@/ui/styledSystem';
-import { colors } from '@/ui/utils/colors';
 import { LogoGroup, LogoGroupItem, LogoGroupIcon, LogoGroupSeparator } from './LogoGroup';
 import { OrgSelect } from './OrgSelect';
 import {
@@ -125,7 +123,12 @@ export function OAuthConsentInternal() {
               </LogoGroup>
             )}
             <Header.Title localizationKey={oAuthApplicationName} />
-            <Header.Subtitle localizationKey={`wants to access ${applicationName} on behalf of ${primaryIdentifier}`} />
+            <Header.Subtitle
+              localizationKey={localizationKeys('oauthConsent.subtitle', {
+                applicationName,
+                identifier: primaryIdentifier || '',
+              })}
+            />
           </Header.Root>
 
           {selectOptions.length > 0 && (
@@ -138,7 +141,11 @@ export function OAuthConsentInternal() {
 
           <ListGroup>
             <ListGroupHeader>
-              <ListGroupHeaderTitle localizationKey={`This will allow ${oAuthApplicationName} access to:`} />
+              <ListGroupHeaderTitle
+                localizationKey={localizationKeys('oauthConsent.scopeList.title', {
+                  applicationName: oAuthApplicationName,
+                })}
+              />
             </ListGroupHeader>
             <ListGroupContent>
               {displayedScopes.map(item => (
@@ -187,11 +194,11 @@ export function OAuthConsentInternal() {
             <Button
               colorScheme='secondary'
               variant='outline'
-              localizationKey='Deny'
+              localizationKey={localizationKeys('oauthConsent.action__deny')}
               onClick={onDeny}
             />
             <Button
-              localizationKey='Allow'
+              localizationKey={localizationKeys('oauthConsent.action__allow')}
               onClick={onAllow}
             />
             <Text
@@ -262,9 +269,11 @@ function RedirectUriModal({ onOpen, onClose, isOpen, redirectUri, oAuthApplicati
       <Card.Root>
         <Card.Content>
           <Header.Root>
-            <Header.Title localizationKey={`Redirect URL`} />
+            <Header.Title localizationKey={localizationKeys('oauthConsent.redirectUriModal.title')} />
             <Header.Subtitle
-              localizationKey={`Make sure you trust ${oAuthApplicationName} and that this URL belongs to ${oAuthApplicationName}.`}
+              localizationKey={localizationKeys('oauthConsent.redirectUriModal.subtitle', {
+                applicationName: oAuthApplicationName,
+              })}
             />
           </Header.Root>
           <Textarea

From eb4ebd6d7bcd831a54d1c109993195ab690684f6 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 10 Apr 2026 15:19:58 -0400
Subject: [PATCH 2/2] chore(ui): Localize OAuthConsent inline actions (#8285)

---
 packages/localizations/src/en-US.ts           |   5 +
 packages/shared/src/types/localization.ts     |   4 +
 .../components/OAuthConsent/InlineAction.tsx  |  83 ++++++++++++
 .../components/OAuthConsent/OAuthConsent.tsx  |  76 ++++-------
 .../__tests__/InlineAction.test.tsx           | 119 ++++++++++++++++++
 5 files changed, 236 insertions(+), 51 deletions(-)
 create mode 100644 packages/ui/src/components/OAuthConsent/InlineAction.tsx
 create mode 100644 packages/ui/src/components/OAuthConsent/__tests__/InlineAction.test.tsx

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 1dc4688e9bc..3b5b3e1bc61 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -297,6 +297,8 @@ export const enUS: LocalizationResource = {
   oauthConsent: {
     action__allow: 'Allow',
     action__deny: 'Deny',
+    offlineAccessNotice: " You'll stay signed in until you sign out or revoke access.",
+    redirectNotice: 'If you allow access, this app will redirect you to {{domainAction}}.',
     redirectUriModal: {
       subtitle: 'Make sure you trust {{applicationName}} and that this URL belongs to {{applicationName}}.',
       title: 'Redirect URL',
@@ -305,6 +307,9 @@ export const enUS: LocalizationResource = {
       title: 'This will allow {{applicationName}} access to:',
     },
     subtitle: 'wants to access {{applicationName}} on behalf of {{identifier}}',
+    viewFullUrl: 'View full URL',
+    warning:
+      'Make sure that you trust {{applicationName}} ({{domainAction}}). You may be sharing sensitive data with this site or app.',
   },
   organizationProfile: {
     apiKeysPage: {
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
index e58d9c3697a..094ac9cdb5b 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -1259,6 +1259,10 @@ export type __internal_LocalizationResource = {
     };
     action__deny: LocalizationValue;
     action__allow: LocalizationValue;
+    warning: LocalizationValue<'applicationName' | 'domainAction'>;
+    redirectNotice: LocalizationValue<'domainAction'>;
+    offlineAccessNotice: LocalizationValue;
+    viewFullUrl: LocalizationValue;
     redirectUriModal: {
       title: LocalizationValue;
       subtitle: LocalizationValue<'applicationName'>;
diff --git a/packages/ui/src/components/OAuthConsent/InlineAction.tsx b/packages/ui/src/components/OAuthConsent/InlineAction.tsx
new file mode 100644
index 00000000000..b8361d17cfc
--- /dev/null
+++ b/packages/ui/src/components/OAuthConsent/InlineAction.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { Text } from '@/ui/customizables';
+import { Tooltip } from '@/ui/elements/Tooltip';
+
+type InlineActionProps = {
+  text: string;
+  actionText: string;
+  onClick: () => void;
+  tooltipText: string;
+};
+
+export function InlineAction({ text, actionText, onClick, tooltipText }: InlineActionProps) {
+  const idx = text.indexOf(actionText);
+  if (idx === -1) {
+    return <>{text}</>;
+  }
+
+  let before = text.slice(0, idx);
+  let after = text.slice(idx + actionText.length);
+
+  // Pull adjacent parentheses into the action span so they don't wrap separately
+  let prefix = '';
+  let suffix = '';
+  if (before.endsWith('(')) {
+    before = before.slice(0, -1);
+    prefix = '(';
+  }
+  if (after.startsWith(')')) {
+    after = after.slice(1);
+    suffix = ')';
+  }
+
+  const actionContent = (
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <Text
+          as='span'
+          role='button'
+          tabIndex={0}
+          aria-label={tooltipText}
+          variant='caption'
+          onClick={onClick}
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onClick();
+            }
+          }}
+          sx={{
+            textDecoration: 'underline',
+            textDecorationStyle: 'dotted',
+            cursor: 'pointer',
+            outline: 'none',
+            display: 'inline-block',
+          }}
+        >
+          {actionText}
+        </Text>
+      </Tooltip.Trigger>
+      <Tooltip.Content text={tooltipText} />
+    </Tooltip.Root>
+  );
+
+  return (
+    <>
+      {before}
+      {prefix || suffix ? (
+        <Text
+          as='span'
+          sx={{ whiteSpace: 'nowrap' }}
+        >
+          {prefix}
+          {actionContent}
+          {suffix}
+        </Text>
+      ) : (
+        actionContent
+      )}
+      {after}
+    </>
+  );
+}
diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
index d61fd4af7e2..8df909f4a78 100644
--- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
@@ -2,14 +2,14 @@ import { useUser } from '@clerk/shared/react';
 import { useState } from 'react';
 
 import { useEnvironment, useOAuthConsentContext } from '@/ui/contexts';
-import { Box, Button, Flow, Grid, localizationKeys, Text } from '@/ui/customizables';
+import { Box, Button, Flow, Grid, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { ApplicationLogo } from '@/ui/elements/ApplicationLogo';
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
 import { Modal } from '@/ui/elements/Modal';
-import { Tooltip } from '@/ui/elements/Tooltip';
 import { Alert, Textarea } from '@/ui/primitives';
+import { InlineAction } from './InlineAction';
 import { LogoGroup, LogoGroupItem, LogoGroupIcon, LogoGroupSeparator } from './LogoGroup';
 import { OrgSelect } from './OrgSelect';
 import {
@@ -53,10 +53,14 @@ export function OAuthConsentInternal() {
       const { hostname } = new URL(redirectUrl);
       return hostname.split('.').slice(-2).join('.');
     } catch {
-      return '';
+      return 'https://example.com';
     }
   }
 
+  const { t } = useLocalizations();
+  const domainAction = getRootDomain();
+  const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
+
   return (
     <Flow.Root flow='oauthConsent'>
       <Card.Root>
@@ -161,30 +165,17 @@ export function OAuthConsentInternal() {
               colorScheme='warning'
               variant='caption'
             >
-              Make sure that you trust {oAuthApplicationName} {''}
-              <Tooltip.Root>
-                <Tooltip.Trigger>
-                  <Text
-                    as='span'
-                    role='button'
-                    tabIndex={0}
-                    aria-label='View full URL'
-                    variant='caption'
-                    sx={{
-                      textDecoration: 'underline',
-                      textDecorationStyle: 'dotted',
-                      cursor: 'pointer',
-                      outline: 'none',
-                      display: 'inline-block',
-                    }}
-                    onClick={() => setIsUriModalOpen(true)}
-                  >
-                    ({getRootDomain()})
-                  </Text>
-                </Tooltip.Trigger>
-                <Tooltip.Content text={`View full URL`} />
-              </Tooltip.Root>
-              {''}. You may be sharing sensitive data with this site or app.
+              <InlineAction
+                text={t(
+                  localizationKeys('oauthConsent.warning', {
+                    applicationName: oAuthApplicationName || applicationName,
+                    domainAction,
+                  }),
+                )}
+                actionText={domainAction}
+                onClick={() => setIsUriModalOpen(true)}
+                tooltipText={viewFullUrlText}
+              />
             </Text>
           </Alert>
           <Grid
@@ -208,30 +199,13 @@ export function OAuthConsentInternal() {
               colorScheme='secondary'
               variant='caption'
             >
-              If you allow access, this app will redirect you to{' '}
-              <Tooltip.Root>
-                <Tooltip.Trigger>
-                  <Text
-                    as='span'
-                    role='button'
-                    tabIndex={0}
-                    aria-label='View full URL'
-                    variant='caption'
-                    sx={{
-                      textDecoration: 'underline',
-                      textDecorationStyle: 'dotted',
-                      cursor: 'pointer',
-                      outline: 'none',
-                      display: 'inline-block',
-                    }}
-                    onClick={() => setIsUriModalOpen(true)}
-                  >
-                    {getRootDomain()}
-                  </Text>
-                </Tooltip.Trigger>
-                <Tooltip.Content text={`View full URL`} />
-              </Tooltip.Root>
-              .{hasOfflineAccess && " You'll stay signed in until you sign out or revoke access."}
+              <InlineAction
+                text={t(localizationKeys('oauthConsent.redirectNotice', { domainAction }))}
+                actionText={domainAction}
+                onClick={() => setIsUriModalOpen(true)}
+                tooltipText={viewFullUrlText}
+              />
+              {hasOfflineAccess && t(localizationKeys('oauthConsent.offlineAccessNotice'))}
             </Text>
           </Grid>
         </Card.Content>
diff --git a/packages/ui/src/components/OAuthConsent/__tests__/InlineAction.test.tsx b/packages/ui/src/components/OAuthConsent/__tests__/InlineAction.test.tsx
new file mode 100644
index 00000000000..b09e31fb299
--- /dev/null
+++ b/packages/ui/src/components/OAuthConsent/__tests__/InlineAction.test.tsx
@@ -0,0 +1,119 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+
+import { InlineAction } from '../InlineAction';
+
+const { createFixtures } = bindCreateFixtures('SignUp');
+
+describe('InlineAction', () => {
+  it('renders plain text when actionText is not found', async () => {
+    const { wrapper } = await createFixtures();
+
+    const screen = render(
+      <InlineAction
+        text='No match here'
+        actionText='missing'
+        onClick={() => {}}
+        tooltipText='tooltip'
+      />,
+      { wrapper },
+    );
+
+    expect(screen.getByText('No match here')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders text before and after the interactive span', async () => {
+    const { wrapper } = await createFixtures();
+
+    const screen = render(
+      <InlineAction
+        text='Trust this example.com please.'
+        actionText='example.com'
+        onClick={() => {}}
+        tooltipText='View full URL'
+      />,
+      { wrapper },
+    );
+
+    expect(screen.getByRole('button', { name: 'View full URL' })).toHaveTextContent('example.com');
+    expect(screen.getByText(/Trust this/)).toBeInTheDocument();
+    expect(screen.getByText(/please\./)).toBeInTheDocument();
+  });
+
+  it('wraps adjacent parentheses with the action span to prevent line-break separation', async () => {
+    const { wrapper } = await createFixtures();
+
+    const screen = render(
+      <InlineAction
+        text='Trust this (example.com). Be careful.'
+        actionText='example.com'
+        onClick={() => {}}
+        tooltipText='View full URL'
+      />,
+      { wrapper },
+    );
+
+    expect(screen.getByRole('button', { name: 'View full URL' })).toHaveTextContent('example.com');
+    // Parentheses are pulled into a nowrap wrapper
+    expect(screen.getByText(/Trust this/)).toBeInTheDocument();
+    expect(screen.getByText(/\. Be careful\./)).toBeInTheDocument();
+  });
+
+  it('fires onClick on click', async () => {
+    const { wrapper } = await createFixtures();
+    const handleClick = vi.fn();
+
+    const screen = render(
+      <InlineAction
+        text='Click on example.com here'
+        actionText='example.com'
+        onClick={handleClick}
+        tooltipText='View full URL'
+      />,
+      { wrapper },
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'View full URL' }));
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+
+  it('fires onClick on Enter keypress', async () => {
+    const { wrapper } = await createFixtures();
+    const handleClick = vi.fn();
+
+    const screen = render(
+      <InlineAction
+        text='Click on example.com here'
+        actionText='example.com'
+        onClick={handleClick}
+        tooltipText='View full URL'
+      />,
+      { wrapper },
+    );
+
+    fireEvent.keyDown(screen.getByRole('button', { name: 'View full URL' }), { key: 'Enter' });
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+
+  it('fires onClick on Space keypress', async () => {
+    const { wrapper } = await createFixtures();
+    const handleClick = vi.fn();
+
+    const screen = render(
+      <InlineAction
+        text='Click on example.com here'
+        actionText='example.com'
+        onClick={handleClick}
+        tooltipText='View full URL'
+      />,
+      { wrapper },
+    );
+
+    fireEvent.keyDown(screen.getByRole('button', { name: 'View full URL' }), { key: ' ' });
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+});