feat(clerk-js): Handle PSU and MFA flows for <GoogleOneTap/>

.changeset/breezy-monkeys-develop.md

@@ -0,0 +1,38 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Updates related to experimental Google One Tap support
+- By default we are returning back to the location where the flow started.
+  To accomplish that internally we will use the redirect_url query parameter to build the url.
+```tsx
+<__experimental_GoogleOneTap />
+```
+
+- In the above example if there is a SIGN_UP_FORCE_REDIRECT_URL or SIGN_IN_FORCE_REDIRECT_URL set then the developer would need to pass new values as props like this
+```tsx
+<__experimental_GoogleOneTap
+  signInForceRedirectUrl=""
+  signUpForceRedirectUrl=""
+/>
+```
+
+- Let the developer configure the experience they want to offer. (All these values are true by default)
+```tsx
+<__experimental_GoogleOneTap
+  cancelOnTapOutside={false}
+  itpSupport={false}
+  fedCmSupport={false}
+/>
+```
+
+- Moved authenticateWithGoogleOneTap to Clerk singleton
+```ts
+Clerk.__experimental_authenticateWithGoogleOneTap
+```
+
+- Created the handleGoogleOneTapCallback in Clerk singleton
+```ts
+Clerk.__experimental_handleGoogleOneTapCallback
+```

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

@@ -4,6 +4,7 @@ import {
   handleValueOrFn,
   inBrowser as inClientSide,
   is4xxError,
+  isClerkAPIResponseError,
   isHttpOrHttps,
   isValidBrowserOnline,
   isValidProxyUrl,
@@ -16,6 +17,7 @@ import {
 } from '@clerk/shared';
 import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
 import type {
+  __experimental_AuthenticateWithGoogleOneTapParams,
   ActiveSessionResource,
   AuthenticateWithMetamaskParams,
   Clerk as ClerkInterface,
@@ -1015,14 +1017,47 @@ export class Clerk implements ClerkInterface {
     return null;
   };
 
-  public handleRedirectCallback = async (
-    params: HandleOAuthCallbackParams = {},
+  public __experimental_handleGoogleOneTapCallback = async (
+    signInOrUp: SignInResource | SignUpResource,
+    params: HandleOAuthCallbackParams,
     customNavigate?: (to: string) => Promise<unknown>,
   ): Promise<unknown> => {
     if (!this.loaded || !this.#environment || !this.client) {
       return;
     }
-    const { signIn, signUp } = this.client;
+    const { signIn: _signIn, signUp: _signUp } = this.client;
+
+    const signIn = 'identifier' in (signInOrUp || {}) ? (signInOrUp as SignInResource) : _signIn;
+    const signUp = 'missingFields' in (signInOrUp || {}) ? (signInOrUp as SignUpResource) : _signUp;
+
+    const navigate = (to: string) =>
+      customNavigate && typeof customNavigate === 'function'
+        ? customNavigate(this.buildUrlWithAuth(to))
+        : this.navigate(this.buildUrlWithAuth(to));
+
+    return this._handleRedirectCallback(params, {
+      signUp,
+      signIn,
+      navigate,
+    });
+  };
+
+  private _handleRedirectCallback = async (
+    params: HandleOAuthCallbackParams,
+    {
+      signIn,
+      signUp,
+      navigate,
+    }: {
+      signIn: SignInResource;
+      signUp: SignUpResource;
+      navigate: (to: string) => Promise<unknown>;
+    },
+  ): Promise<unknown> => {
+    if (!this.loaded || !this.#environment || !this.client) {
+      return;
+    }
+
     const { displayConfig } = this.#environment;
     const { firstFactorVerification } = signIn;
     const { externalAccount } = signUp.verifications;
@@ -1032,18 +1067,17 @@ export class Clerk implements ClerkInterface {
       externalAccountStatus: externalAccount.status,
       externalAccountErrorCode: externalAccount.error?.code,
       externalAccountSessionId: externalAccount.error?.meta?.sessionId,
+      sessionId: signUp.createdSessionId,
     };
 
     const si = {
       status: signIn.status,
       firstFactorVerificationStatus: firstFactorVerification.status,
       firstFactorVerificationErrorCode: firstFactorVerification.error?.code,
       firstFactorVerificationSessionId: firstFactorVerification.error?.meta?.sessionId,
+      sessionId: signIn.createdSessionId,
     };
 
-    const navigate = (to: string) =>
-      customNavigate && typeof customNavigate === 'function' ? customNavigate(to) : this.navigate(to);
-
     const makeNavigate = (to: string) => () => navigate(to);
 
     const navigateToSignIn = makeNavigate(params.signInUrl || displayConfig.signInUrl);
@@ -1071,7 +1105,13 @@ export class Clerk implements ClerkInterface {
 
     const navigateToContinueSignUp = makeNavigate(
       params.continueSignUpUrl ||
-        buildURL({ base: displayConfig.signUpUrl, hashPath: '/continue' }, { stringify: true }),
+        buildURL(
+          {
+            base: displayConfig.signUpUrl,
+            hashPath: '/continue',
+          },
+          { stringify: true },
+        ),
     );
 
     const navigateToNextStepSignUp = ({ missingFields }: { missingFields: SignUpField[] }) => {
@@ -1091,8 +1131,16 @@ export class Clerk implements ClerkInterface {
       });
     };
 
+    if (si.status === 'complete') {
+      return this.setActive({
+        session: si.sessionId,
+        beforeEmit: navigateAfterSignIn,
+      });
+    }
+
     const userExistsButNeedsToSignIn =
       su.externalAccountStatus === 'transferable' && su.externalAccountErrorCode === 'external_account_exists';
+
     if (userExistsButNeedsToSignIn) {
       const res = await signIn.create({ transfer: true });
       switch (res.status) {
@@ -1152,6 +1200,13 @@ export class Clerk implements ClerkInterface {
       }
     }
 
+    if (su.status === 'complete') {
+      return this.setActive({
+        session: su.sessionId,
+        beforeEmit: navigateAfterSignUp,
+      });
+    }
+
     if (si.status === 'needs_second_factor') {
       return navigateToFactorTwo();
     }
@@ -1188,6 +1243,25 @@ export class Clerk implements ClerkInterface {
     return navigateToSignIn();
   };
 
+  public handleRedirectCallback = async (
+    params: HandleOAuthCallbackParams = {},
+    customNavigate?: (to: string) => Promise<unknown>,
+  ): Promise<unknown> => {
+    if (!this.loaded || !this.#environment || !this.client) {
+      return;
+    }
+    const { signIn, signUp } = this.client;
+
+    const navigate = (to: string) =>
+      customNavigate && typeof customNavigate === 'function' ? customNavigate(to) : this.navigate(to);
+
+    return this._handleRedirectCallback(params, {
+      signUp,
+      signIn,
+      navigate,
+    });
+  };
+
   public handleUnauthenticated = async (opts = { broadcast: true }): Promise<unknown> => {
     if (!this.client || !this.session) {
       return;
@@ -1203,6 +1277,29 @@ export class Clerk implements ClerkInterface {
     return this.setActive({ session: null });
   };
 
+  public __experimental_authenticateWithGoogleOneTap = async (
+    params: __experimental_AuthenticateWithGoogleOneTapParams,
+  ): Promise<SignInResource | SignUpResource> => {
+    return this.client?.signIn
+      .create({
+        // TODO-ONETAP: Add new types when feature is ready for public beta
+        // @ts-expect-error
+        strategy: 'google_one_tap',
+        googleOneTapToken: params.token,
+      })
+      .catch(err => {
+        if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
+          return this.client?.signUp.create({
+            // TODO-ONETAP: Add new types when feature is ready for public beta
+            // @ts-expect-error
+            strategy: 'google_one_tap',
+            googleOneTapToken: params.token,
+          });
+        }
+        throw err;
+      }) as Promise<SignInResource | SignUpResource>;
+  };
+
   public authenticateWithMetamask = async ({
     redirectUrl,
     signUpContinueUrl,

packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

@@ -1,46 +1,52 @@
 import { useClerk, useUser } from '@clerk/shared/react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-import { clerkInvalidFAPIResponse } from '../../../core/errors';
 import type { GISCredentialResponse } from '../../../utils/one-tap';
 import { loadGIS } from '../../../utils/one-tap';
-import { useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { useEnvironment, useGoogleOneTapContext } from '../../contexts';
 import { withCardStateProvider } from '../../elements';
 import { useFetch } from '../../hooks';
-import { useSupportEmail } from '../../hooks/useSupportEmail';
+import { useRouter } from '../../router';
 
 function _OneTapStart(): JSX.Element | null {
   const clerk = useClerk();
-  const signIn = useCoreSignIn();
   const { user } = useUser();
   const environment = useEnvironment();
+  const isPromptedRef = useRef(false);
+  const { navigate } = useRouter();
 
-  const supportEmail = useSupportEmail();
   const ctx = useGoogleOneTapContext();
+  const {
+    signInUrl,
+    signUpUrl,
+    continueSignUpUrl,
+    secondFactorUrl,
+    firstFactorUrl,
+    signUpForceRedirectUrl,
+    signInForceRedirectUrl,
+  } = ctx;
 
   async function oneTapCallback(response: GISCredentialResponse) {
+    isPromptedRef.current = false;
     try {
-      const res = await signIn.__experimental_authenticateWithGoogleOneTap({
+      const res = await clerk.__experimental_authenticateWithGoogleOneTap({
         token: response.credential,
       });
-
-      switch (res.status) {
-        case 'complete':
-          await clerk.setActive({
-            session: res.createdSessionId,
-          });
-          break;
-        // TODO-ONETAP: Add a new case in order to handle the `missing_requirements` status and the PSU flow
-        default:
-          clerkInvalidFAPIResponse(res.status, supportEmail);
-          break;
-      }
-    } catch (err) {
-      /**
-       * Currently it is not possible to display an error in the UI.
-       * As a fallback we simply open the SignIn modal for the user to sign in.
-       */
-      clerk.openSignIn();
+      await clerk.__experimental_handleGoogleOneTapCallback(
+        res,
+        {
+          signInUrl,
+          signUpUrl,
+          continueSignUpUrl,
+          secondFactorUrl,
+          firstFactorUrl,
+          signUpForceRedirectUrl,
+          signInForceRedirectUrl,
+        },
+        navigate,
+      );
+    } catch (e) {
+      console.error(e);
     }
   }
 
@@ -50,32 +56,38 @@ function _OneTapStart(): JSX.Element | null {
   /**
    * Prevent GIS from initializing multiple times
    */
-  const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+  useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
     onSuccess(google) {
       google.accounts.id.initialize({
         client_id: environmentClientID!,
         callback: oneTapCallback,
-        itp_support: true,
+        itp_support: ctx.itpSupport,
         cancel_on_tap_outside: ctx.cancelOnTapOutside,
         auto_select: false,
-        use_fedcm_for_prompt: true,
+        use_fedcm_for_prompt: ctx.fedCmSupport,
       });
 
       google.accounts.id.prompt();
+      isPromptedRef.current = true;
     },
   });
 
-  // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
   useEffect(() => {
-    if (google && !user?.id) {
-      google.accounts.id.prompt();
+    if (window.google && !user?.id && !isPromptedRef.current) {
+      window.google.accounts.id.prompt();
+      isPromptedRef.current = true;
     }
+  }, [user?.id]);
+
+  // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+  useEffect(() => {
     return () => {
-      if (google) {
-        google.accounts.id.cancel();
+      if (window.google && isPromptedRef.current) {
+        isPromptedRef.current = false;
+        window.google.accounts.id.cancel();
       }
     };
-  }, [user?.id]);
+  }, []);
 
   return null;
 }