One Tap plugin server configuration
Add the One Tap plugin to the auth configuration by importing oneTap from 'better-auth/plugins' and passing it to the plugins array with a clientId from environment variables.
Better Auth · Plugins · all subjects
one-tap plugin
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
One Tap client plugin setup
Add the client plugin by importing oneTapClient from 'better-auth/client/plugins' and passing it to the client's plugins array with clientId and optional configuration.
One Tap default behavior
Calling authClient.oneTap() displays a One Tap popup. By default, after successful login the plugin performs a hard redirect to '/'.
One Tap button mode
To render a Sign In with Google button instead of showing the automatic prompt, pass a button object with a container property (CSS selector or HTMLElement) and optional config to authClient.oneTap().
One Tap customize redirect with onSuccess
Pass fetchOptions with an onSuccess callback to authClient.oneTap() to handle the login response without a page reload, allowing navigation via a router.
One Tap customize redirect with callbackURL
Pass a callbackURL option to authClient.oneTap() to perform a hard redirect to a different page after login.
One Tap exponential backoff for dismissed prompts
When a user dismisses the One Tap prompt, the plugin retries using exponential backoff based on promptOptions. When maximum attempts are reached without successful sign-in, the onPromptNotification callback is invoked to allow rendering alternative UI.
One Tap client configuration options
Client configuration options for One Tap: clientId (required, Google One Tap API client ID), autoSelect (default false, automatically select account if already signed in), cancelOnTapOutside (default true, cancel popup when tapping outside, may not work with FedCM active), uxMode (default 'popup', can be 'popup' or 'redirect'), context (default 'signin', can be 'signin', 'signup', or 'use'), additionalOptions (extra options for Google's initialize method), promptOptions (object with baseDelay in milliseconds default 1000, maxAttempts default 5, fedCM default true).
One Tap button configuration options
Button mode configuration: type ('standard' default or 'icon'), theme ('outline' default, 'filled_blue', or 'filled_black'), size ('large' default, 'medium', or 'small'), text ('signin_with' default, 'signup_with', 'continue_with', or 'signin'), shape ('rectangular' default, 'pill', 'circle', or 'square'), logo_alignment ('left' default or 'center' for standard button only), width (minimum button width in pixels, max 400), locale (language code like 'zh_CN').
One Tap server configuration options
Server configuration options: disableSignUp (default false, disable sign-up allowing only existing users to sign in), clientId (Google client ID for ID token audience verification, required unless socialProviders.google.clientId is configured).
One Tap Google Workspace domain restriction
The One Tap callback applies the hosted-domain restriction from socialProviders.google.hd matching the standard Google sign-in flow. When hd is set to a domain, tokens with missing or non-matching hd claim are rejected. Set hd to '*' to allow any Google Workspace hosted domain while still rejecting tokens with no hd claim. This restriction only applies when socialProviders.google is configured; One Tap with only clientId parameter has no hosted-domain restriction.
One Tap Authorized JavaScript origins requirement
Authorized JavaScript origins (e.g., http://localhost:3000, https://example.com) must be configured for the Client ID in the Google Cloud Console. This is required for the Google One Tap API to function correctly.
One Tap example - prompt mode
To display the One Tap popup, call: await authClient.oneTap();
One Tap example - button mode vanilla JS
Example rendering a Sign In with Google button in vanilla JavaScript: ```tsx <div id="google-signin-button"></div> await authClient.oneTap({ button: { container: "#google-signin-button", config: { theme: "outline", size: "large", type: "standard", text: "signin_with" } } }); ```
One Tap example - button mode React
Example rendering a Sign In with Google button in React with useRef: ```tsx import { useEffect, useRef } from "react"; function SignInButton() { const buttonRef = useRef<HTMLDivElement>(null); useEffect(() => { if (buttonRef.current) { authClient.oneTap({ button: { container: buttonRef.current, config: { theme: "filled_blue", size: "large" } } }); } }, []); return <div ref={buttonRef}></div>; } ```
One Tap example - custom redirect with onSuccess
Example avoiding hard redirect by using onSuccess callback: ```ts await authClient.oneTap({ fetchOptions: { onSuccess: () => { router.push("/dashboard"); } } }); ```
One Tap example - custom redirect with callbackURL
Example performing hard redirect to a different page: ```ts await authClient.oneTap({ callbackURL: "/dashboard" }); ```
One Tap example - onPromptNotification callback
Example handling prompt dismissal with alternative UI: ```ts await authClient.oneTap({ onPromptNotification: (notification) => { console.warn("Prompt was dismissed or skipped. Consider displaying an alternative sign-in option.", notification); // Render your alternative UI here } }); ```
One Tap example - server configuration
Example server configuration: ```ts import { betterAuth } from "better-auth"; import { oneTap } from "better-auth/plugins"; export const auth = betterAuth({ plugins: [ oneTap({ clientId: process.env.GOOGLE_CLIENT_ID as string, }), ] }); ```
One Tap example - client configuration
Example client configuration: ```ts import { createAuthClient } from "better-auth/client"; import { oneTapClient } from "better-auth/client/plugins"; export const authClient = createAuthClient({ plugins: [ oneTapClient({ clientId: "YOUR_CLIENT_ID", autoSelect: false, cancelOnTapOutside: true, context: "signin", additionalOptions: { // Any extra options for the Google initialize method }, promptOptions: { baseDelay: 1000, maxAttempts: 5 } }) ] }); ```
One Tap FedCM support and preventSilentAccess
The fedCM option in promptOptions (default true) calls navigator.credentials.preventSilentAccess() on sign-out to clear the browser's FedCM credential state. FedCM itself is managed by the Google Identity Services library and cannot be disabled.