Stop 12 · AuthenticationTopics · 3/10

Google Login

In short

Most Indian users already have a Gmail account. Adding Google Login means one tap to sign up, no OTP, no forgotten passwords, and a real verified email for you.

Implementing 'Sign in with Google' using Google's OAuth 2.0 provider — one of the most common social login options for consumer apps.

The jaadu shows an identity card to a smiling bank clerk who gives a thumbs up.

Think of it like this

Showing your Aadhaar at the counter

The bank doesn't re-verify you from scratch. It trusts the government's card. With Google Login, your app trusts Google's word that this person owns this email, and skips building its own verification.

Watch it happen

Continue with Google, step by step

User

Your app

Google

click Continue w/ Google

1/7The button runs a server action that calls signIn("google").

The big ideas

What you need to know

Set it up in Google Cloud

Create an OAuth client in Google Cloud Console. You get a client ID (public) and a client secret (server only).

Redirect URIs must match exactly

Google only sends users back to URLs you registered. One wrong port or a missing slash gives a redirect_uri_mismatch error.

You get an ID token

Google uses OpenID Connect, so you receive the user's email, name and picture in a signed ID token.

Use the sub as the key

Store Google's 'sub' claim as the user's stable ID. Emails can change, sub doesn't.

See it in code

Walk through the code

tsx

1// auth.ts (Auth.js / NextAuth v5)2import NextAuth from "next-auth";3import Google from "next-auth/providers/google";4export const { handlers, auth, signIn, signOut } = NextAuth({5  providers: [Google], // reads AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET6});7// components/GoogleButton.tsx8import { signIn } from "@/auth";9export function GoogleButton() {10  return (11    <form action={async () => { "use server"; await signIn("google"); }}>12      <button type="submit">Continue with Google</button>13    </form>14  );15}

1/3Import Auth.js and its ready-made Google provider.

Register http://localhost:3000/api/auth/callback/google as the redirect URI in Google Cloud. Add your live domain's version before you deploy.

Save yourself the pain

Common mistakes

Oops

Putting the Google client secret in frontend code.

Do this instead

The client ID can be public. The secret belongs only in server environment variables.

Oops

Testing only on localhost, then shipping.

Do this instead

Add your production URL to authorised redirect URIs and publish the consent screen, or real users will hit errors.

Your mission

Ship a Google button

~40 min

Quick check

A user changes their Gmail address. Which value should you have used to identify them so their account still works?

Go deeper

1Set up a Google OAuth client ID in Google Cloud Console for a test app.
2Implement it via a library (NextAuth, Firebase Auth) rather than raw OAuth first.
3Learn what user profile data Google actually returns after consent.