feat(clerk-js,types): Handle factor-one verification on sign-in (#1629)

clerk · Sep 4, 2023 · 463ff84 · 463ff84
1 parent bed5313
commit 463ff84
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 0 deletions.
diff --git a/.changeset/gentle-carpets-clap.md b/.changeset/gentle-carpets-clap.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Introduced a new `firstFactorUrl` property in sign-in callback to handle unverified emails.
diff --git a/packages/clerk-js/src/core/clerk.test.ts b/packages/clerk-js/src/core/clerk.test.ts
@@ -1229,6 +1229,40 @@ describe('Clerk singleton', () => {
         expect(mockNavigate).toHaveBeenCalledWith('/sign-up#/verify-email-address');
       });
     });
+
+    it('redirects user to first-factor if the email is claimed but the external account has an unverified email', async () => {
+      mockEnvironmentFetch.mockReturnValue(
+        Promise.resolve({
+          authConfig: {},
+          userSettings: mockUserSettings,
+          displayConfig: mockDisplayConfig,
+          isSingleSession: () => false,
+          isProduction: () => false,
+          isDevelopmentOrStaging: () => true,
+        }),
+      );
+
+      mockClientFetch.mockReturnValue(
+        Promise.resolve({
+          activeSessions: [],
+          signIn: new SignIn({
+            status: 'needs_first_factor',
+          } as unknown as SignInJSON),
+          signUp: new SignUp(null),
+        }),
+      );
+
+      const sut = new Clerk(frontendApi);
+      await sut.load({
+        navigate: mockNavigate,
+      });
+
+      await sut.handleRedirectCallback();
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/sign-in#/factor-one');
+      });
+    });
   });
 
   describe('.handleMagicLinkVerification()', () => {

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -860,6 +860,11 @@ export default class Clerk implements ClerkInterface {
 
     const navigateToSignUp = makeNavigate(displayConfig.signUpUrl);
 
+    const navigateToFactorOne = makeNavigate(
+      params.firstFactorUrl ||
+        buildURL({ base: displayConfig.signInUrl, hashPath: '/factor-one' }, { stringify: true }),
+    );
+
     const navigateToFactorTwo = makeNavigate(
       params.secondFactorUrl ||
         buildURL({ base: displayConfig.signInUrl, hashPath: '/factor-two' }, { stringify: true }),
@@ -913,6 +918,12 @@ export default class Clerk implements ClerkInterface {
       }
     }
 
+    const userHasUnverifiedEmail = si.status === 'needs_first_factor';
+
+    if (userHasUnverifiedEmail) {
+      return navigateToFactorOne();
+    }
+
     const userNeedsToBeCreated = si.firstFactorVerificationStatus === 'transferable';
 
     if (userNeedsToBeCreated) {

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
@@ -45,6 +45,7 @@ function SignInRoutes(): JSX.Element {
             afterSignUpUrl={signInContext.afterSignUpUrl}
             redirectUrl={signInContext.redirectUrl}
             continueSignUpUrl={signInContext.signUpContinueUrl}
+            firstFactorUrl={'../factor-one'}
             secondFactorUrl={'../factor-two'}
           />
         </Route>

diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
@@ -441,6 +441,12 @@ export type HandleOAuthCallbackParams = {
    */
   redirectUrl?: string | null;
 
+  /**
+   * Full URL or path to navigate during sign in,
+   * if identifier verification is required.
+   */
+  firstFactorUrl?: string;
+
   /**
    * Full URL or path to navigate during sign in,
    * if 2FA is enabled.