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

Author: nikospapcom

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

@@ -1826,6 +1826,7 @@ export class Clerk implements ClerkInterface {
     unsafeMetadata,
     strategy,
     legalAccepted,
+    secondFactorUrl,
   }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
     if (__BUILD_DISABLE_RHC__) {
       clerkUnsupportedEnvironmentWarning('Web3');
@@ -1835,6 +1836,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 =
@@ -1844,9 +1848,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({
@@ -1869,7 +1888,7 @@ export class Clerk implements ClerkInterface {
           signInOrSignUp.status === 'missing_requirements' &&
           signInOrSignUp.verifications.web3Wallet.status === 'verified'
         ) {
-          await navigate(signUpContinueUrl);
+          await navigateToContinueSignUp();
         }
       } else {
         throw err;
@@ -1878,7 +1897,7 @@ export class Clerk implements ClerkInterface {
 
     switch (signInOrSignUp.status) {
       case 'needs_second_factor':
-        await navigate('factor-two');
+        await navigateToFactorTwo();
         break;
       case 'complete':
         if (signInOrSignUp.createdSessionId) {

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

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