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;
 }

.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;
 }

.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;
 }

.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;
 }

.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;
 }

.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;
 }

.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;
 }

.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;
 }