diff --git a/.changeset/new-plants-lick.md b/.changeset/new-plants-lick.md new file mode 100644 index 00000000000..e40cca4c253 --- /dev/null +++ b/.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 diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 70a0d710d17..966dba924da 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1851,6 +1851,7 @@ export class Clerk implements ClerkInterface { unsafeMetadata, strategy, legalAccepted, + secondFactorUrl, }: ClerkAuthenticateWithWeb3Params): Promise => { 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; } }; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx index 5a3754a9db1..87185698b00 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx +++ b/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)); }} diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 444f5f40853..ff2db91a5d8 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -1612,6 +1612,7 @@ export interface ClerkAuthenticateWithWeb3Params { unsafeMetadata?: SignUpUnsafeMetadata; strategy: Web3Strategy; legalAccepted?: boolean; + secondFactorUrl?: string; } export type JoinWaitlistParams = {