feat(clerk-js): Introduce experimental support for Google One Tap (#3176)

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;

.changeset/grumpy-maps-hope.md

@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Introduce experimental support for Google One Tap
+- React Component `<__experimental_GoogleOneTap/>`
+- JS `clerk.__experimental_mountGoogleOneTap(node,props)`

.changeset/two-worms-yawn.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -32,6 +32,7 @@ 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

@@ -33,6 +33,7 @@ import type {
  HandleOAuthCallbackParams,
  InstanceType,
  ListenerCallback,
+ OneTapProps,
  OrganizationInvitationResource,
  OrganizationListProps,
  OrganizationMembershipResource,
@@ -456,6 +457,30 @@ 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 =>

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

@@ -39,6 +39,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  createOrganizationUrl!: string;
  afterLeaveOrganizationUrl!: string;
  afterCreateOrganizationUrl!: string;
+ googleOneTapClientId?: string;
 
  public constructor(data: DisplayConfigJSON) {
  super();
@@ -76,6 +77,7 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
  this.createOrganizationUrl = data.create_organization_url;
  this.afterLeaveOrganizationUrl = data.after_leave_organization_url;
  this.afterCreateOrganizationUrl = data.after_create_organization_url;
+ this.googleOneTapClientId = data.google_one_tap_client_id;
  return this;
  }
 }

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

@@ -1,5 +1,6 @@
-import { deepSnakeToCamel, deprecated, Poller } from '@clerk/shared';
+import { deepSnakeToCamel, deprecated, isClerkAPIResponseError, Poller } from '@clerk/shared';
 import type {
+ __experimental_AuthenticateWithGoogleOneTapParams,
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
  AuthenticateWithRedirectParams,
@@ -24,6 +25,7 @@ import type {
  SignInStartEmailLinkFlowParams,
  SignInStartMagicLinkFlowParams,
  SignInStatus,
+ SignUpResource,
  VerificationResource,
  Web3SignatureConfig,
  Web3SignatureFactor,
@@ -238,6 +240,27 @@ 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')) {

packages/clerk-js/src/ui/Components.tsx

@@ -176,7 +176,6 @@ const Components = (props: ComponentsProps) => {
 
  componentsControls.mountComponent = params => {
  const { node, name, props, appearanceKey } = params;
-
  assertDOMElement(node);
  setState(s => {
  s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });

packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

@@ -0,0 +1,25 @@
+import type { OneTapProps } from '@clerk/types';
+import React from 'react';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+import { OneTapStart } from './one-tap-start';
+
+function OneTapRoutes(): JSX.Element {
+ return (
+ <Route path='one-tap'>
+ <Flow.Root flow='oneTap'>
+ <Switch>
+ <Route index>
+ <OneTapStart />
+ </Route>
+ </Switch>
+ </Flow.Root>
+ </Route>
+ );
+}
+
+OneTapRoutes.displayName = 'OneTap';
+
+export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

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

@@ -0,0 +1,84 @@
+import { useUserContext } from '@clerk/shared/react';
+import { useEffect } from 'react';
+
+import { clerkInvalidFAPIResponse } from '../../../core/errors';
+import type { GISCredentialResponse } from '../../../utils/one-tap';
+import { loadGIS } from '../../../utils/one-tap';
+import { useCoreClerk, useCoreSignIn, useEnvironment, useGoogleOneTapContext } from '../../contexts';
+import { withCardStateProvider } from '../../elements';
+import { useFetch } from '../../hooks';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
+
+function _OneTapStart(): JSX.Element | null {
+ const clerk = useCoreClerk();
+ const signIn = useCoreSignIn();
+ const user = useUserContext();
+ const environment = useEnvironment();
+
+ const supportEmail = useSupportEmail();
+ const ctx = useGoogleOneTapContext();
+
+ async function oneTapCallback(response: GISCredentialResponse) {
+ try {
+ const res = await signIn.__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();
+ }
+ }
+
+ const environmentClientID = environment.displayConfig.googleOneTapClientId;
+ const shouldLoadGIS = !user?.id && !!environmentClientID;
+
+ /**
+ * Prevent GIS from initializing multiple times
+ */
+ const { data: google } = useFetch(shouldLoadGIS ? loadGIS : undefined, 'google-identity-services-script', {
+ onSuccess(google) {
+ google.accounts.id.initialize({
+ client_id: environmentClientID!,
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ callback: oneTapCallback,
+ itp_support: true,
+ cancel_on_tap_outside: ctx.cancelOnTapOutside,
+ auto_select: false,
+ use_fedcm_for_prompt: true,
+ });
+
+ google.accounts.id.prompt();
+ },
+ });
+
+ // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization
+ useEffect(() => {
+ if (google && !user?.id) {
+ google.accounts.id.prompt();
+ }
+ return () => {
+ if (google) {
+ google.accounts.id.cancel();
+ }
+ };
+ }, [user?.id]);
+
+ return null;
+}
+
+export const OneTapStart = withCardStateProvider(_OneTapStart);

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../router';
 import type {
  AvailableComponentCtx,
  CreateOrganizationCtx,
+ OneTapCtx,
  OrganizationListCtx,
  OrganizationProfileCtx,
  OrganizationSwitcherCtx,
@@ -488,3 +489,16 @@ export const useCreateOrganizationContext = () => {
  componentName,
  };
 };
+
+export const useGoogleOneTapContext = () => {
+ const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
+
+ if (componentName !== 'OneTap') {
+ throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
+ }
+
+ return {
+ ...ctx,
+ componentName,
+ };
+};

packages/clerk-js/src/ui/elements/contexts/FlowMetadataContext.tsx

@@ -10,7 +10,8 @@ type FlowMetadata = {
  | 'organizationProfile'
  | 'createOrganization'
  | 'organizationSwitcher'
- | 'organizationList';
+ | 'organizationList'
+ | 'oneTap';
  part?:
  | 'start'
  | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -12,11 +12,13 @@ const componentImportPaths = {
  import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
  OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
  ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
+ OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
 
 export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
+export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
@@ -77,6 +79,7 @@ export const ClerkComponents = {
  UserProfileModal,
  OrganizationProfileModal,
  CreateOrganizationModal,
+ OneTap,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/clerk-js/src/ui/portal/index.tsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { PRESERVED_QUERYSTRING_PARAMS } from '../../core/constants';
 import { clerkErrorPathRouterMissingPath } from '../../core/errors';
+import { buildVirtualRouterUrl } from '../../utils';
 import { ComponentContext } from '../contexts';
-import { HashRouter, PathRouter } from '../router';
+import { HashRouter, PathRouter, VirtualRouter } from '../router';
 import type { AvailableComponentCtx } from '../types';
 
 type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType, 'componentName'>> = {
@@ -15,7 +16,21 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
 } & Pick<CtxType, 'componentName'>;
 
 export default class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
- render(): React.ReactPortal {
+ private elRef = document.createElement('div');
+
+ componentDidMount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.appendChild(this.elRef);
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.componentName === 'OneTap') {
+ document.body.removeChild(this.elRef);
+ }
+ }
+
+ render() {
  const { props, component, componentName, node } = this.props;
 
  const el = (
@@ -24,6 +39,13 @@ export default class Portal<CtxType extends AvailableComponentCtx> extends React
  </ComponentContext.Provider>
  );
 
+ if (componentName === 'OneTap') {
+ return ReactDOM.createPortal(
+ <VirtualRouter startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}>{el}</VirtualRouter>,
+ this.elRef,
+ );
+ }
+
  if (props?.routing === 'path') {
  if (!props?.path) {
  clerkErrorPathRouterMissingPath(componentName);

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
  CreateOrganizationProps,
+ OneTapProps,
  OrganizationListProps,
  OrganizationProfileProps,
  OrganizationSwitcherProps,
@@ -10,6 +11,7 @@ import type {
 } from '@clerk/types';
 
 export type {
+ OneTapProps,
  SignInProps,
  SignUpProps,
  UserButtonProps,
@@ -72,6 +74,10 @@ export type OrganizationListCtx = OrganizationListProps & {
  mode?: ComponentMode;
 };
 
+export type OneTapCtx = OneTapProps & {
+ componentName: 'OneTap';
+};
+
 export type AvailableComponentCtx =
  | SignInCtx
  | SignUpCtx
@@ -80,4 +86,5 @@ export type AvailableComponentCtx =
  | OrganizationProfileCtx
  | CreateOrganizationCtx
  | OrganizationSwitcherCtx
- | OrganizationListCtx;
+ | OrganizationListCtx
+ | OneTapCtx;