feat(ui): add a "Back" action to the sign-in second factor step

.changeset/sign-in-different-account.md

@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/localizations': patch
+'@clerk/shared': patch
+---
+
+Add a "Sign in as a different account" action to the sign-in two-step verification (second factor) step. This lets a user who reached the 2FA screen with the wrong account (for example, after signing in with the wrong social account) abandon the attempt and return to the sign-in start to sign in again, instead of being stuck with no way out.

packages/localizations/src/en-US.ts

@@ -1286,6 +1286,7 @@ export const enUS: LocalizationResource = {
       subtitle: 'Your backup code is the one you got when setting up two-step authentication.',
       title: 'Enter a backup code',
     },
+    differentAccountAction: 'Sign in as a different account',
     emailCode: {
       formTitle: 'Verification code',
       resendButton: "Didn't receive a code? Resend",

packages/shared/src/types/localization.ts

@@ -551,6 +551,12 @@ export type __internal_LocalizationResource = {
       formSubtitle: LocalizationValue;
       resendButton: LocalizationValue;
     };
+    /**
+     * Footer action on the second-factor step that abandons the current sign-in
+     * attempt and returns the user to the sign-in start so they can sign in with
+     * a different account.
+     */
+    differentAccountAction: LocalizationValue;
     newDeviceVerificationNotice: LocalizationValue;
     phoneCodeMfa: {
       title: LocalizationValue;

packages/ui/src/components/SignIn/SignInFactorTwoCodeForm.tsx

@@ -46,6 +46,8 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
   const supportEmail = useSupportEmail();
   const clerk = useClerk();
 
+  const signInAsDifferentUser = () => navigate('../');
+
   // Only show the new device verification notice if the user is new
   // and no attributes are explicitly used for second factor.
   // Retained for backwards compatibility.
@@ -134,6 +136,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
       profileImageUrl={signIn.userData.imageUrl}
       identityPreviewEditButtonAriaLabel={localizationKeys('identityPreviewEditButton__identifier')}
       onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}
+      onDifferentAccountClicked={signInAsDifferentUser}
     >
       {isResettingPassword(signIn) && (
         <Text

packages/ui/src/elements/VerificationCodeCard.tsx

@@ -32,6 +32,7 @@ export type VerificationCodeCardProps = {
   onShowAlternativeMethodsClicked?: React.MouseEventHandler;
   onIdentityPreviewEditClicked?: React.MouseEventHandler;
   onBackLinkClicked?: React.MouseEventHandler;
+  onDifferentAccountClicked?: React.MouseEventHandler;
 };
 
 export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCardProps>) => {
@@ -41,7 +42,16 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
         <VerificationCodeContent {...props} />
       </Card.Content>
 
-      <Card.Footer />
+      <Card.Footer>
+        {props.onDifferentAccountClicked && (
+          <Card.Action elementId='signIn'>
+            <Card.ActionLink
+              localizationKey={localizationKeys('signIn.differentAccountAction')}
+              onClick={props.onDifferentAccountClicked}
+            />
+          </Card.Action>
+        )}
+      </Card.Footer>
     </Card.Root>
   );
 };