Localizations

packages/clerk-js/package.json

@@ -117,7 +117,7 @@
     "files": [
       {
         "path": "./dist/clerk.browser.js",
-        "maxSize": "148kB"
+        "maxSize": "152kB"
       },
       {
         "path": "./dist/clerk.headless.js",

packages/clerk-js/src/ui/Components.tsx

@@ -35,7 +35,12 @@ export type ComponentControls = {
     props?: AvailableComponentProps;
   }) => void;
   unmountComponent: (params: { node: HTMLDivElement }) => void;
-  updateProps: (params: { appearance?: Appearance | undefined; node?: HTMLDivElement; props?: unknown }) => void;
+  updateProps: (params: {
+    appearance?: Appearance | undefined;
+    options?: ClerkOptions | undefined;
+    node?: HTMLDivElement;
+    props?: unknown;
+  }) => void;
   openModal: <T extends 'signIn' | 'signUp' | 'userProfile'>(
     modal: T,
     props: T extends 'signIn' ? SignInProps : T extends 'signUp' ? SignUpProps : UserProfileProps,
@@ -67,6 +72,7 @@ interface ComponentsProps {
 
 interface ComponentsState {
   appearance: Appearance | undefined;
+  options: ClerkOptions | undefined;
   signInModal: null | SignInProps;
   signUpModal: null | SignUpProps;
   userProfileModal: null | UserProfileProps;
@@ -109,6 +115,7 @@ const componentsControls = {} as ComponentControls;
 const Components = (props: ComponentsProps) => {
   const [state, setState] = React.useState<ComponentsState>({
     appearance: props.options.appearance,
+    options: props.options,
     signInModal: null,
     signUpModal: null,
     userProfileModal: null,
@@ -134,7 +141,7 @@ const Components = (props: ComponentsProps) => {
       });
     };
 
-    componentsControls.updateProps = ({ appearance, node, props }) => {
+    componentsControls.updateProps = ({ node, props, ...restProps }) => {
       if (node && props && typeof props === 'object') {
         const nodeOptions = state.nodes.get(node);
         if (nodeOptions) {
@@ -143,7 +150,7 @@ const Components = (props: ComponentsProps) => {
           return;
         }
       }
-      setState(s => ({ ...s, appearance }));
+      setState(s => ({ ...s, ...restProps }));
     };
 
     componentsControls.closeModal = name => {
@@ -245,7 +252,7 @@ const Components = (props: ComponentsProps) => {
   return (
     <CoreClerkContextWrapper clerk={props.clerk}>
       <EnvironmentProvider value={props.environment}>
-        <OptionsProvider value={props.options}>
+        <OptionsProvider value={state.options}>
           {[...nodes].map(([node, component]) => {
             return (
               <AppearanceProvider

packages/clerk-js/src/ui/SignIn/AlternativeMethods.tsx

@@ -2,7 +2,7 @@ import { SignInFactor } from '@clerk/types';
 import React from 'react';
 
 import { useCoreSignIn } from '../../ui/contexts/';
-import { descriptors, Flex, Flow } from '../customizables';
+import { descriptors, Flex, Flow, LocalizationKey, localizationKeys } from '../customizables';
 import { ArrowBlockButton, Card, CardAlert, Footer, Header } from '../elements';
 import { useCardState } from '../elements/contexts';
 import { allStrategiesButtonsComparator, formatSafeIdentifier } from '../utils';
@@ -47,7 +47,7 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
         <CardAlert>{card.error}</CardAlert>
         <Header.Root>
           {onBackLinkClick && <Header.BackLink onClick={onBackLinkClick} />}
-          <Header.Title>Use another method</Header.Title>
+          <Header.Title localizationKey={localizationKeys('signIn.alternativeMethods.title')} />
         </Header.Root>
         {/*TODO: extract main in its own component */}
         <Flex
@@ -63,21 +63,23 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
           >
             {validFactors.map((factor, i) => (
               <ArrowBlockButton
+                textLocalizationKey={getButtonLabel(factor)}
                 elementDescriptor={descriptors.alternativeMethodsBlockButton}
                 textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
                 arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
                 key={i}
                 isDisabled={card.isLoading}
                 onClick={() => onFactorSelected(factor)}
-              >
-                {getButtonLabel(factor)}
-              </ArrowBlockButton>
+              />
             ))}
           </Flex>
         </Flex>
         <Footer.Root>
           <Footer.Action>
-            <Footer.ActionLink onClick={onHavingTroubleClick}>Get help</Footer.ActionLink>
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+              onClick={onHavingTroubleClick}
+            />
           </Footer.Action>
           <Footer.Links />
         </Footer.Root>
@@ -86,16 +88,22 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
   );
 };
 
-export function getButtonLabel(factor: SignInFactor): string {
+export function getButtonLabel(factor: SignInFactor): LocalizationKey {
   switch (factor.strategy) {
     case 'email_link':
-      return `Send link to ${formatSafeIdentifier(factor.safeIdentifier)}`;
+      return localizationKeys('signIn.alternativeMethods.blockButton__emailLink', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
     case 'email_code':
-      return `Send code to ${formatSafeIdentifier(factor.safeIdentifier)}`;
+      return localizationKeys('signIn.alternativeMethods.blockButton__emailCode', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
     case 'phone_code':
-      return `Send code to ${formatSafeIdentifier(factor.safeIdentifier)}`;
+      return localizationKeys('signIn.alternativeMethods.blockButton__phoneCode', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
     case 'password':
-      return 'Sign in with your password';
+      return localizationKeys('signIn.alternativeMethods.blockButton__password');
     default:
       throw `Invalid sign in strategy: "${factor.strategy}"`;
   }

packages/clerk-js/src/ui/SignIn/HavingTrouble.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { localizationKeys } from '../customizables';
 import { ErrorCard } from '../elements';
 import { PropsOfComponent } from '../styledSystem';
 
@@ -8,7 +9,7 @@ export const HavingTrouble = (props: PropsOfComponent<typeof ErrorCard>) => {
 
   return (
     <ErrorCard
-      cardTitle='Get help'
+      cardTitle={localizationKeys('signIn.alternativeMethods.getHelp.title')}
       onBackLinkClick={onBackLinkClick}
     />
   );

packages/clerk-js/src/ui/SignIn/SignInFactorOneCodeForm.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../ui/contexts';
 import { useSupportEmail } from '../../ui/hooks/useSupportEmail';
 import { useRouter } from '../../ui/router';
+import { LocalizationKey } from '../customizables';
 import { VerificationCodeCard, VerificationCodeCardProps } from '../elements';
 import { useCardState } from '../elements/contexts';
 import { handleError } from '../utils';
@@ -15,10 +16,11 @@ export type SignInFactorOneCodeCard = Pick<VerificationCodeCardProps, 'onShowAlt
 };
 
 type SignInFactorOneCodeFormProps = SignInFactorOneCodeCard & {
-  cardTitle: string;
-  cardSubtitle: string;
-  formTitle: string;
-  formSubtitle: string;
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton: LocalizationKey;
 };
 
 export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) => {
@@ -71,6 +73,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
       cardSubtitle={props.cardSubtitle}
       formTitle={props.formTitle}
       formSubtitle={props.formSubtitle}
+      resendButton={props.resendButton}
       onCodeEntryFinishedAction={action}
       onResendCodeClicked={prepare}
       safeIdentifier={props.factor.safeIdentifier}

packages/clerk-js/src/ui/SignIn/SignInFactorOneEmailCodeCard.tsx

@@ -2,7 +2,7 @@ import { EmailCodeFactor } from '@clerk/types';
 import React from 'react';
 
 import { useEnvironment } from '../../ui/contexts';
-import { Flow } from '../customizables';
+import { Flow, localizationKeys } from '../customizables';
 import { SignInFactorOneCodeCard, SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
 
 type SignInFactorOneEmailCodeCardProps = SignInFactorOneCodeCard & { factor: EmailCodeFactor };
@@ -14,10 +14,11 @@ export const SignInFactorOneEmailCodeCard = (props: SignInFactorOneEmailCodeCard
     <Flow.Part part='emailCode'>
       <SignInFactorOneCodeForm
         {...props}
-        cardTitle='Check your email'
-        cardSubtitle={`to continue to ${applicationName}`}
-        formTitle='Verification code'
-        formSubtitle='Enter the verification code sent to your email address'
+        cardTitle={localizationKeys('signIn.emailCode.title')}
+        cardSubtitle={localizationKeys('signIn.emailCode.subtitle', { applicationName })}
+        formTitle={localizationKeys('signIn.emailCode.formTitle')}
+        formSubtitle={localizationKeys('signIn.emailCode.formSubtitle')}
+        resendButton={localizationKeys('signIn.emailCode.resendButton')}
       />
     </Flow.Part>
   );

packages/clerk-js/src/ui/SignIn/SignInFactorOneEmailLinkCard.tsx

@@ -6,7 +6,7 @@ import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '.
 import { useMagicLink } from '../../ui/hooks/useMagicLink';
 import { useRouter } from '../../ui/router/RouteContext';
 import { EmailLinkStatusCard } from '../common';
-import { Flow } from '../customizables';
+import { Flow, localizationKeys } from '../customizables';
 import { VerificationCodeCardProps, VerificationLinkCard } from '../elements';
 import { useCardState } from '../elements/contexts';
 import { handleError } from '../utils';
@@ -83,10 +83,11 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
   return (
     <Flow.Part part='emailLink'>
       <VerificationLinkCard
-        cardTitle='Check your email'
-        cardSubtitle={`to continue to ${displayConfig.applicationName}`}
-        formTitle='Verification link'
-        formSubtitle='Use the verification link sent your email'
+        cardTitle={localizationKeys('signIn.emailLink.title')}
+        cardSubtitle={localizationKeys('signIn.emailLink.subtitle', { applicationName: displayConfig.applicationName })}
+        formTitle={localizationKeys('signIn.emailLink.formTitle')}
+        formSubtitle={localizationKeys('signIn.emailLink.formSubtitle')}
+        resendButton={localizationKeys('signIn.emailLink.resendButton')}
         onResendCodeClicked={restartVerification}
         safeIdentifier={props.factor.safeIdentifier}
         profileImageUrl={signIn.userData.profileImageUrl}

packages/clerk-js/src/ui/SignIn/SignInFactorOnePasswordCard.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../ui/contexts';
 import { useSupportEmail } from '../../ui/hooks/useSupportEmail';
 import { useRouter } from '../../ui/router/RouteContext';
-import { descriptors, Flex, Flow } from '../customizables';
+import { descriptors, Flex, Flow, localizationKeys } from '../customizables';
 import { Card, CardAlert, Footer, Form, Header, IdentityPreview } from '../elements';
 import { useCardState } from '../elements/contexts';
 import { handleError, useFormControl } from '../utils';
@@ -20,7 +20,10 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   const signIn = useCoreSignIn();
   const { navigateAfterSignIn } = useSignInContext();
   const supportEmail = useSupportEmail();
-  const passwordControl = useFormControl('password', '', { type: 'password', label: 'Password' });
+  const passwordControl = useFormControl('password', '', {
+    type: 'password',
+    label: localizationKeys('formFieldLabel__password'),
+  });
   const { navigate } = useRouter();
 
   const goBack = () => {
@@ -51,8 +54,12 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
       <Card>
         <CardAlert>{card.error}</CardAlert>
         <Header.Root>
-          <Header.Title>Enter your password</Header.Title>
-          <Header.Subtitle>to continue to {displayConfig.applicationName}</Header.Subtitle>
+          <Header.Title localizationKey={localizationKeys('signIn.password.title')} />
+          <Header.Subtitle
+            localizationKey={localizationKeys('signIn.password.subtitle', {
+              applicationName: displayConfig.applicationName,
+            })}
+          />
         </Header.Root>
         <IdentityPreview
           identifier={signIn.identifier}
@@ -70,16 +77,19 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
               <Form.Control
                 {...passwordControl.props}
                 autoFocus
-                actionLabel='Forgot password'
+                actionLabel={localizationKeys('formFieldAction__forgotPassword')}
                 onActionClicked={onShowAlternativeMethodsClick}
               />
             </Form.ControlRow>
-            <Form.SubmitButton>Continue</Form.SubmitButton>
+            <Form.SubmitButton />
           </Form.Root>
         </Flex>
         <Footer.Root>
           <Footer.Action>
-            <Footer.ActionLink onClick={onShowAlternativeMethodsClick}>Use another method</Footer.ActionLink>
+            <Footer.ActionLink
+              localizationKey={localizationKeys('signIn.password.actionLink')}
+              onClick={onShowAlternativeMethodsClick}
+            />
           </Footer.Action>
           <Footer.Links />
         </Footer.Root>

packages/clerk-js/src/ui/SignIn/SignInFactorOnePhoneCodeCard.tsx

@@ -1,8 +1,8 @@
 import { PhoneCodeFactor } from '@clerk/types';
 import React from 'react';
 
-import { useEnvironment } from '../../ui/contexts';
-import { Flow } from '../customizables';
+import { useEnvironment } from '../contexts';
+import { Flow, localizationKeys } from '../customizables';
 import { SignInFactorOneCodeCard, SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
 
 type SignInFactorOnePhoneCodeCardProps = SignInFactorOneCodeCard & { factor: PhoneCodeFactor };
@@ -14,10 +14,11 @@ export const SignInFactorOnePhoneCodeCard = (props: SignInFactorOnePhoneCodeCard
     <Flow.Part part='phoneCode'>
       <SignInFactorOneCodeForm
         {...props}
-        cardTitle='Check your phone'
-        cardSubtitle={`to continue to ${applicationName}`}
-        formTitle='Verification code'
-        formSubtitle='Enter the verification code sent to your phone number'
+        cardTitle={localizationKeys('signIn.phoneCode.title')}
+        cardSubtitle={localizationKeys('signIn.phoneCode.subtitle', { applicationName })}
+        formTitle={localizationKeys('signIn.phoneCode.formTitle')}
+        formSubtitle={localizationKeys('signIn.phoneCode.formSubtitle')}
+        resendButton={localizationKeys('signIn.phoneCode.resendButton')}
       />
     </Flow.Part>
   );

packages/clerk-js/src/ui/SignIn/SignInFactorTwoCodeForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { useCoreClerk, useCoreSignIn, useSignInContext } from '../../ui/contexts';
 import { useSupportEmail } from '../../ui/hooks/useSupportEmail';
+import { LocalizationKey } from '../customizables';
 import { useCardState, VerificationCodeCard, VerificationCodeCardProps } from '../elements';
 import { handleError } from '../utils';
 
@@ -14,10 +15,11 @@ export type SignInFactorTwoCodeCard = Pick<VerificationCodeCardProps, 'onShowAlt
 };
 
 type SignInFactorTwoCodeFormProps = SignInFactorTwoCodeCard & {
-  cardTitle: string;
-  cardSubtitle: string;
-  formTitle: string;
-  formSubtitle: string;
+  cardTitle: LocalizationKey;
+  cardSubtitle: LocalizationKey;
+  formTitle: LocalizationKey;
+  formSubtitle: LocalizationKey;
+  resendButton: LocalizationKey;
 };
 
 export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {
@@ -67,6 +69,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
       cardSubtitle={props.cardSubtitle}
       formTitle={props.formTitle}
       formSubtitle={props.formSubtitle}
+      resendButton={props.resendButton}
       onCodeEntryFinishedAction={action}
       onResendCodeClicked={prepare}
       safeIdentifier={'safeIdentifier' in props.factor ? props.factor.safeIdentifier : undefined}

packages/clerk-js/src/ui/SignIn/SignInFactorTwoPhoneCodeCard.tsx

@@ -2,7 +2,7 @@ import { PhoneCodeFactor } from '@clerk/types';
 import React from 'react';
 
 import { useCoreSignIn } from '../../ui/contexts';
-import { Flow } from '../customizables';
+import { Flow, localizationKeys } from '../customizables';
 import { SignInFactorTwoCodeCard, SignInFactorTwoCodeForm } from './SignInFactorTwoCodeForm';
 
 type SignInFactorTwoPhoneCodeCardProps = SignInFactorTwoCodeCard & { factor: PhoneCodeFactor };
@@ -21,10 +21,11 @@ export const SignInFactorTwoPhoneCodeCard = (props: SignInFactorTwoPhoneCodeCard
     <Flow.Part part='phoneCode2Fa'>
       <SignInFactorTwoCodeForm
         {...props}
-        cardTitle='Two-step authentication'
-        cardSubtitle={''}
-        formTitle='Verification code'
-        formSubtitle='Enter the verification code sent to your phone number'
+        cardTitle={localizationKeys('signIn.phoneCode2Fa.title')}
+        cardSubtitle={localizationKeys('signIn.phoneCode2Fa.subtitle')}
+        formTitle={localizationKeys('signIn.phoneCode2Fa.formTitle')}
+        formSubtitle={localizationKeys('signIn.phoneCode2Fa.formSubtitle')}
+        resendButton={localizationKeys('signIn.phoneCode2Fa.resendButton')}
         prepare={prepare}
       />
     </Flow.Part>