Offer Google One Tap sign-in
A sign-in page wants a low-friction Google authentication option without building a custom button or token flow.
Clerk · Component
GoogleOneTap
GoogleOneTap renders Google's One Tap UI for Clerk sign-up and sign-in. It supports configurable redirects and stays hidden when the user is already signed in.
How it works
GoogleOneTap renders Clerk's Google One Tap interface, allowing users to sign up or sign in with Google. Clerk automatically omits it for users who already have an active session; authentication redirects back to the flow's starting page unless a force redirect setting overrides it.
Syntax
<GoogleOneTap />Key points
- The default successful-authentication destination is the page that initiated the flow.
- Override the default destination with a force redirect URL prop or environment variable.
- The JavaScript SDK also supports imperative control through methods on a Clerk instance.
- openGoogleOneTap optionally accepts GoogleOneTapProps and returns no value.
- authenticateWithGoogleOneTap accepts authentication parameters and resolves to a sign-in or sign-up resource.
Common mistakes
- Google must be enabled as a social connection and configured with custom credentials before using the component.
- Do not add a separate signed-in check solely to prevent rendering; Clerk handles that case.
Example: Render Google One Tap
import { GoogleOneTap } from '@clerk/nextjs'
export default function SignInPage() {
return <GoogleOneTap />
}Render the component on a sign-in page after configuring Google with custom credentials in the Clerk Dashboard.
When to use it
Enable Google sign-up
A registration page needs to let new users create Clerk accounts using their Google identity.
Control the flow programmatically
An application needs to launch or complete One Tap authentication from custom controls or navigation logic.
Interview questions
QWhat does GoogleOneTap provide?
It renders a Google One Tap UI that supports both sign-up and sign-in. The component is intended for a Clerk application configured with Google as a social connection and custom credentials.
Follow-up: What happens for an already authenticated user? Clerk suppresses the component, so the application does not need to perform its own signed-in check before rendering it.
QHow does post-authentication navigation work?
Authentication normally redirects the user to the page where the flow began. Force redirect URL props or environment variables can replace that default destination.
Follow-up: Which redirect takes precedence? A force redirect URL is used instead of the ClerkProvider redirect URL settings.
QWhich programmatic APIs are associated with the component?
The JavaScript SDK exposes openGoogleOneTap(), closeGoogleOneTap(), and authenticateWithGoogleOneTap(). The authentication method accepts an AuthenticateWithGoogleOneTapParams value and returns a promise of either a SignInResource or SignUpResource.
Follow-up: What is handleGoogleOneTapCallback() for? It completes a redirect flow started by authenticateWithGoogleOneTap(), activates the session, and can perform custom navigation.
Related
openGoogleOneTapcloseGoogleOneTapauthenticateWithGoogleOneTaphandleGoogleOneTapCallbackGoogleOneTapPropsAuthenticateWithGoogleOneTapParamsSignInResourceSignUpResource