Support for <GoogleOneTap/> (#3409)

.changeset/funny-berries-nail.md

@@ -0,0 +1,14 @@
+---
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+Add support for GoogleOneTap
+### React component
+- `<GoogleOneTap/>`
+
+ Customize the UX of the prompt
+
+```tsx
+<GoogleOneTap  cancelOnTapOutside={false}  itpSupport={false}  fedCmSupport={false}/>
+```

.changeset/mighty-dolphins-look.md

@@ -0,0 +1,37 @@
+---
+'@clerk/clerk-js': minor
+---
+
+### Use the Google One Tap component from with Vanilla JS
+- `Clerk.openGoogleOneTap({ cancelOnTapOutside: false, fedCmSupport: false, itpSupport: false })`
+- `Clerk.closeGoogleOneTap()`
+### Low level APIs for custom flows
+- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
+- `await Clerk.handleGoogleOneTapCallback()`
+
+
+We recommend using this two methods together in order and let Clerk perform the correct redirections.
+```tsx
+google.accounts.id.initialize({
+  callback: async response => {
+    const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
+    await Clerk.handleGoogleOneTapCallback(signInOrUp, {
+      afterSignInUrl: window.location.href,
+    })
+  },
+});
+```
+
+In case you want to handle the redirection and session management yourself you can do so like this
+```tsx
+google.accounts.id.initialize({
+  callback: async response => {
+    const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
+    if(signInOrUp.status === 'complete') {
+        await Clerk.setActive({
+          session: signInOrUp.createdSessionId
+        })
+    }
+  },
+});
+```

.changeset/shaggy-elephants-shop.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': minor
+---
+
+Update export snapshot tests to include `GoogleOneTap`.

.changeset/silly-mugs-type.md

@@ -0,0 +1,21 @@
+---
+'@clerk/types': minor
+---
+
+Added the following types
+```tsx
+interface Clerk {
+  ...
+  openGoogleOneTap: (props?: GoogleOneTapProps) => void;
+  closeGoogleOneTap: () => void;
+  authenticateWithGoogleOneTap: (params: AuthenticateWithGoogleOneTapParams) => Promise<SignInResource | SignUpResource>;
+  handleGoogleOneTapCallback: (
+    signInOrUp: SignInResource | SignUpResource,
+    params: HandleOAuthCallbackParams,
+    customNavigate?: (to: string) => Promise<unknown>,
+  ) => Promise<unknown>;
+  ...
+}
+
+type GoogleOneTapStrategy = 'google_one_tap'
+```

packages/chrome-extension/src/__snapshots__/exports.test.ts.snap

@@ -8,6 +8,7 @@ exports[`public exports should not include a breaking change 1`] = `
   "ClerkProvider",
   "CreateOrganization",
   "EmailLinkErrorCode",
+  "GoogleOneTap",
   "MagicLinkErrorCode",
   "MultisessionAppSupport",
   "OrganizationList",
@@ -32,7 +33,6 @@ exports[`public exports should not include a breaking change 1`] = `
   "WithClerk",
   "WithSession",
   "WithUser",
-  "__experimental_GoogleOneTap",
   "__internal__setErrorThrowerOptions",
   "isClerkAPIResponseError",
   "isEmailLinkError",

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

@@ -5,6 +5,7 @@ import {
   handleValueOrFn,
   inBrowser as inClientSide,
   is4xxError,
+  isClerkAPIResponseError,
   isHttpOrHttps,
   isLegacyFrontendApiKey,
   isValidBrowserOnline,
@@ -17,6 +18,7 @@ import {
 } from '@clerk/shared';
 import type {
   ActiveSessionResource,
+  AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   BeforeEmitCallback,
   Clerk as ClerkInterface,
@@ -28,12 +30,12 @@ import type {
   DomainOrProxyUrl,
   EnvironmentJSON,
   EnvironmentResource,
+  GoogleOneTapProps,
   HandleEmailLinkVerificationParams,
   HandleMagicLinkVerificationParams,
   HandleOAuthCallbackParams,
   InstanceType,
   ListenerCallback,
-  OneTapProps,
   OrganizationInvitationResource,
   OrganizationListProps,
   OrganizationMembershipResource,
@@ -364,6 +366,18 @@ export default class Clerk implements ClerkInterface {
     }
   };
 
+  public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'GoogleOneTap' })
+      .then(controls => controls.openModal('googleOneTap', props || {}));
+  };
+
+  public closeGoogleOneTap = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
+  };
+
   public openSignIn = (props?: SignInProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (sessionExistsAndSingleSessionModeEnabled(this, this.#environment) && this.#instanceType === 'development') {
@@ -457,30 +471,6 @@ export default class Clerk implements ClerkInterface {
     );
   };
 
-  public __experimental_mountGoogleOneTap = (node: HTMLDivElement, props?: OneTapProps): void => {
-    this.assertComponentsReady(this.#componentControls);
-
-    void this.#componentControls.ensureMounted({ preloadHint: 'OneTap' }).then(controls =>
-      controls.mountComponent({
-        name: 'OneTap',
-        appearanceKey: 'oneTap',
-        node,
-        props,
-      }),
-    );
-    // TODO-ONETAP: Enable telemetry one feature is ready for public beta
-    // this.telemetry?.record(eventComponentMounted('GoogleOneTap', props));
-  };
-
-  public __experimental_unmountGoogleOneTap = (node: HTMLDivElement): void => {
-    this.assertComponentsReady(this.#componentControls);
-    void this.#componentControls.ensureMounted().then(controls =>
-      controls.unmountComponent({
-        node,
-      }),
-    );
-  };
-
   public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted({ preloadHint: 'SignUp' }).then(controls =>
@@ -966,14 +956,47 @@ export default class Clerk implements ClerkInterface {
     return null;
   };
 
-  public handleRedirectCallback = async (
-    params: HandleOAuthCallbackParams = {},
+  public handleGoogleOneTapCallback = async (
+    signInOrUp: SignInResource | SignUpResource,
+    params: HandleOAuthCallbackParams,
     customNavigate?: (to: string) => Promise<unknown>,
   ): Promise<unknown> => {
     if (!this.#isReady || !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;
@@ -983,18 +1006,17 @@ export default 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(displayConfig.signInUrl);
@@ -1026,7 +1048,13 @@ export default 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[] }) => {
@@ -1046,6 +1074,13 @@ export default 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';
 
@@ -1108,6 +1143,13 @@ export default class Clerk implements ClerkInterface {
       }
     }
 
+    if (su.status === 'complete') {
+      return this.setActive({
+        session: su.sessionId,
+        beforeEmit: navigateAfterSignUp,
+      });
+    }
+
     if (si.status === 'needs_second_factor') {
       return navigateToFactorTwo();
     }
@@ -1144,6 +1186,25 @@ export default 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;
@@ -1159,6 +1220,25 @@ export default class Clerk implements ClerkInterface {
     return this.setActive({ session: null });
   };
 
+  public authenticateWithGoogleOneTap = async (
+    params: AuthenticateWithGoogleOneTapParams,
+  ): Promise<SignInResource | SignUpResource> => {
+    return this.client?.signIn
+      .create({
+        strategy: 'google_one_tap',
+        token: params.token,
+      })
+      .catch(err => {
+        if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
+          return this.client?.signUp.create({
+            strategy: 'google_one_tap',
+            token: params.token,
+          });
+        }
+        throw err;
+      }) as Promise<SignInResource | SignUpResource>;
+  };
+
   public authenticateWithMetamask = async ({
     redirectUrl,
     signUpContinueUrl,

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

@@ -1,6 +1,5 @@
-import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
 import type {
-  __experimental_AuthenticateWithGoogleOneTapParams,
   AttemptFirstFactorParams,
   AttemptSecondFactorParams,
   AuthenticateWithRedirectParams,
@@ -25,7 +24,6 @@ import type {
   SignInStartEmailLinkFlowParams,
   SignInStartMagicLinkFlowParams,
   SignInStatus,
-  SignUpResource,
   VerificationResource,
   Web3SignatureConfig,
   Web3SignatureFactor,
@@ -240,27 +238,6 @@ export class SignIn extends BaseResource implements SignInResource {
     }
   };
 
-  public __experimental_authenticateWithGoogleOneTap = async (
-    params: __experimental_AuthenticateWithGoogleOneTapParams,
-  ): Promise<SignInResource | SignUpResource> => {
-    return this.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 SignIn.clerk.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 authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
     const { identifier, generateSignature } = params || {};
     if (!(typeof generateSignature === 'function')) {