HomeBytesheetsRoadmapsUI TemplatesUI ToolsStack Discussion
6 Topics
Chapter•22 Minutes

3. Configure Google OAuth Credentials

Create the Google OAuth client, configure consent and redirect URIs, and diagnose common provider errors.

Create a Google Cloud Project

Open the Google Cloud Console and create or select a project. Find Google Auth Platform or the OAuth consent configuration area; console labels may change over time.

Create a Web Application OAuth Client

In the Google Auth Platform / Clients area, create an OAuth client of type Web application. For local development add authorized JavaScript origin http://localhost:3000 and authorized redirect URI http://localhost:3000/api/auth/callback/google. For production add your real HTTPS origin and exact callback URL, e.g. https://app.your-domain.example/api/auth/callback/google.

Redirect URI must match exactly

Protocol, host, port, path, and trailing slash must match. Never use wildcard redirect URIs.

Copy Client ID and Client Secret

Copy the Client ID and Client Secret from the Google console into .env.local as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET. The Client ID identifies the OAuth client; the secret is confidential and must remain on the server.

Environment variables
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret
💡 These are placeholders. Rotate the secret in Google Cloud if it is exposed.

Understand the Google Redirect Flow

The browser starts sign-in, NextAuth redirects to Google, Google authenticates the user, then redirects to the registered callback. NextAuth validates the OAuth response, runs callbacks, and establishes the app session. Use the NextAuth session to identify the user; do not treat Google's access token as your app session.

Google OAuth sequence

Fix Google OAuth Errors

redirect_uri_mismatch: compare the exact callback URL with Google Cloud. invalid_client: verify the client ID and secret belong together. Access blocked: check audience, test-user list, and publishing status. Wrong callback host: verify NEXTAUTH_URL and reverse-proxy host/protocol settings. Restart or redeploy after changing environment variables.

Official reference

Google's OAuth documentation: https://developers.google.com/identity/protocols/oauth2/web-server