feat: Prep work to support email_code as a second factor

Author: tmilewski

.changeset/bright-heads-start.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Prep work to support `email_code` as a second factor when necessary. (Note: Currently behind a feature flag.)

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx

@@ -8,6 +8,7 @@ import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../commo
 import { useCoreSignIn } from '../../contexts';
 import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';
 import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';
+import { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard';
 import { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard';
 import { SignInFactorTwoTOTPCard } from './SignInFactorTwoTOTPCard';
 import { determineStartingSignInSecondFactor } from './utils';
@@ -77,6 +78,15 @@ function SignInFactorTwoInternal(): JSX.Element {
       );
     case 'backup_code':
       return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+    case 'email_code':
+      return (
+        <SignInFactorTwoEmailCodeCard
+          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
+          onFactorPrepare={handleFactorPrepare}
+          factor={currentFactor}
+          onShowAlternativeMethodsClicked={toggleAllStrategies}
+        />
+      );
     default:
       return <LoadingCard />;
   }

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx

@@ -103,6 +103,10 @@ export function getButtonLabel(factor: SignInFactor): LocalizationKey {
       return localizationKeys('signIn.alternativeMethods.blockButton__totp');
     case 'backup_code':
       return localizationKeys('signIn.alternativeMethods.blockButton__backupCode');
+    case 'email_code':
+      return localizationKeys('signIn.alternativeMethods.blockButton__emailCode', {
+        identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
+      });
     default:
       throw new Error(`Invalid sign in strategy: "${factor.strategy}"`);
   }

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

@@ -1,6 +1,6 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
-import type { PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/types';
+import type { EmailCodeFactor, PhoneCodeFactor, SignInResource, TOTPFactor } from '@clerk/types';
 import React from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
@@ -17,7 +17,7 @@ import { useRouter } from '../../router';
 import { isResetPasswordStrategy } from './utils';
 
 export type SignInFactorTwoCodeCard = Pick<VerificationCodeCardProps, 'onShowAlternativeMethodsClicked'> & {
-  factor: PhoneCodeFactor | TOTPFactor;
+  factor: EmailCodeFactor | PhoneCodeFactor | TOTPFactor;
   factorAlreadyPrepared: boolean;
   onFactorPrepare: () => void;
   prepare?: () => Promise<SignInResource>;

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoEmailCodeCard.tsx

@@ -0,0 +1,33 @@
+import type { EmailCodeFactor } from '@clerk/types';
+
+import { useCoreSignIn } from '../../contexts';
+import { Flow, localizationKeys } from '../../customizables';
+import type { SignInFactorTwoCodeCard } from './SignInFactorTwoCodeForm';
+import { SignInFactorTwoCodeForm } from './SignInFactorTwoCodeForm';
+
+type SignInFactorTwoEmailCodeCardProps = SignInFactorTwoCodeCard & { factor: EmailCodeFactor };
+
+export const SignInFactorTwoEmailCodeCard = (props: SignInFactorTwoEmailCodeCardProps) => {
+  const signIn = useCoreSignIn();
+
+  const prepare = () => {
+    // TODO: Why does the BE throw an error if I simply pass
+    // the whole factor?
+    const { emailAddressId, strategy } = props.factor;
+    return signIn.prepareSecondFactor({ emailAddressId, strategy });
+  };
+
+  // TODO: Update the part, card title, etc.
+  return (
+    <Flow.Part part='emailCode2Fa'>
+      <SignInFactorTwoCodeForm
+        {...props}
+        cardTitle={localizationKeys('signIn.emailCodeMfa.title')}
+        cardSubtitle={localizationKeys('signIn.emailCodeMfa.subtitle')}
+        inputLabel={localizationKeys('signIn.emailCodeMfa.formTitle')}
+        resendButton={localizationKeys('signIn.emailCodeMfa.resendButton')}
+        prepare={prepare}
+      />
+    </Flow.Part>
+  );
+};

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -105,6 +105,7 @@ export type FlowMetadata = {
   part?:
     | 'start'
     | 'emailCode'
+    | 'emailCode2Fa'
     | 'phoneCode'
     | 'phoneCode2Fa'
     | 'totp2Fa'

packages/localizations/src/ar-SA.ts

@@ -604,6 +604,12 @@ export const arSA: LocalizationResource = {
       subtitle: 'للمتابعة إلى {{applicationName}}',
       title: 'التحقق من البريد الإلكتروني',
     },
+    emailCodeMfa: {
+      formTitle: undefined,
+      resendButton: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     emailLink: {
       clientMismatch: {
         subtitle: 'للمتابعة, قم بفتح رابط التحقق عبر نفس الجهاز والمتصفح الذي انشأت محاولة تسجيل الدخول منه',

packages/localizations/src/be-BY.ts

@@ -610,6 +610,12 @@ export const beBY: LocalizationResource = {
       subtitle: 'каб працягнуць працу ў "{{applicationName}}"',
       title: 'Праверце вашу пошту',
     },
+    emailCodeMfa: {
+      formTitle: undefined,
+      resendButton: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     emailLink: {
       clientMismatch: {
         subtitle:

packages/localizations/src/bg-BG.ts

@@ -607,6 +607,12 @@ export const bgBG: LocalizationResource = {
       subtitle: 'за да продължите към {{applicationName}}',
       title: 'Проверете вашия имейл',
     },
+    emailCodeMfa: {
+      formTitle: undefined,
+      resendButton: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     emailLink: {
       clientMismatch: {
         subtitle: undefined,

packages/localizations/src/bn-IN.ts

@@ -609,6 +609,12 @@ export const bnIN: LocalizationResource = {
       subtitle: '{{applicationName}}-এ চালিয়ে যাওয়ার জন্য',
       title: 'আপনার ইমেইল চেক করুন',
     },
+    emailCodeMfa: {
+      formTitle: undefined,
+      resendButton: undefined,
+      subtitle: undefined,
+      title: undefined,
+    },
     emailLink: {
       clientMismatch: {
         subtitle: 'চালিয়ে যেতে, যে ডিভাইস এবং ব্রাউজার থেকে আপনি সাইন-ইন শুরু করেছেন সেখানে যাচাইকরণ লিংক খুলুন',