fix(clerk-js): Handle two factor redirect when authenticate with web3 (#5352)

Author: nikospapcom

.changeset/new-plants-lick.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Handle two factor redirect when authenticate with web3 and multifactor has been enabled

packages/clerk-js/src/core/clerk.ts

@@ -1851,6 +1851,7 @@ export class Clerk implements ClerkInterface {
     unsafeMetadata,
     strategy,
     legalAccepted,
+    secondFactorUrl,
   }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
     if (__BUILD_DISABLE_RHC__) {
       clerkUnsupportedEnvironmentWarning('Web3');
@@ -1860,6 +1861,9 @@ export class Clerk implements ClerkInterface {
     if (!this.client || !this.environment) {
       return;
     }
+
+    const { displayConfig } = this.environment;
+
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
     const identifier = await getWeb3Identifier({ provider });
     const generateSignature =
@@ -1869,9 +1873,24 @@ export class Clerk implements ClerkInterface {
           ? generateSignatureWithCoinbaseWallet
           : generateSignatureWithOKXWallet;
 
-    const navigate = (to: string) =>
+    const makeNavigate = (to: string) => () =>
       customNavigate && typeof customNavigate === 'function' ? customNavigate(to) : this.navigate(to);
 
+    const navigateToFactorTwo = makeNavigate(
+      secondFactorUrl || buildURL({ base: displayConfig.signInUrl, hashPath: '/factor-two' }, { stringify: true }),
+    );
+
+    const navigateToContinueSignUp = makeNavigate(
+      signUpContinueUrl ||
+        buildURL(
+          {
+            base: displayConfig.signUpUrl,
+            hashPath: '/continue',
+          },
+          { stringify: true },
+        ),
+    );
+
     let signInOrSignUp: SignInResource | SignUpResource;
     try {
       signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
@@ -1894,18 +1913,27 @@ export class Clerk implements ClerkInterface {
           signInOrSignUp.status === 'missing_requirements' &&
           signInOrSignUp.verifications.web3Wallet.status === 'verified'
         ) {
-          await navigate(signUpContinueUrl);
+          await navigateToContinueSignUp();
         }
       } else {
         throw err;
       }
     }
 
-    if (signInOrSignUp.createdSessionId) {
-      await this.setActive({
-        session: signInOrSignUp.createdSessionId,
-        redirectUrl,
-      });
+    switch (signInOrSignUp.status) {
+      case 'needs_second_factor':
+        await navigateToFactorTwo();
+        break;
+      case 'complete':
+        if (signInOrSignUp.createdSessionId) {
+          await this.setActive({
+            session: signInOrSignUp.createdSessionId,
+            redirectUrl,
+          });
+        }
+        break;
+      default:
+        return;
     }
   };
 

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

@@ -54,6 +54,7 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
             redirectUrl: redirectUrlComplete,
             signUpContinueUrl: ctx.isCombinedFlow ? 'create/continue' : ctx.signUpContinueUrl,
             strategy,
+            secondFactorUrl: 'factor-two',
           })
           .catch(err => web3CallbackErrorHandler(err, card.setError));
       }}

packages/types/src/clerk.ts

@@ -1612,6 +1612,7 @@ export interface ClerkAuthenticateWithWeb3Params {
   unsafeMetadata?: SignUpUnsafeMetadata;
   strategy: Web3Strategy;
   legalAccepted?: boolean;
+  secondFactorUrl?: string;
 }
 
 export type JoinWaitlistParams = {