Google One Tap

Category
Components
Published

Introducing support for Google One Tap for seamless, one-click user sign-ins and sign-ups!

By leveraging Google One Tap, users can effortlessly access your services without needing to remember passwords or undergo lengthy registration steps. This strategy aims to increase user engagement and conversion rates by simplifying the sign-in process, making it easier for users to get started with your application.

Our new component

To enable this feature, all you have to do is drop the new <GoogleOneTap /> component into your React application. For applications that don't have Google OAuth already set up with custom credentials, please read our guide in order to configure it.

/app/layout.tsx
import React from "react";
import { ClerkProvider, GoogleOneTap } from "@clerk/nextjs";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Google One Tap with Clerk and Next.js</title>
      </head>
      <ClerkProvider>
        <GoogleOneTap />
        <body>{children}</body>
      </ClerkProvider>
    </html>
  );
}

For those who are interested in custom flows or would like to use the component but whose application does not run in React, they can visit our documentation page to learn more about Google One Tap and its usage with clerk-js.