Google OAuth Setup

The Auth UI Boilerplate supports Google OAuth out of the box. This guide walks through creating OAuth 2.0 credentials in Google Cloud Console and configuring them in your application.

Overview

Google OAuth allows users to sign in with their Google accounts. Better Auth handles the OAuth flow automatically once you provide the client ID and secret. The authentication flow works like this:

User clicks “Sign in with Google” button
They’re redirected to Google’s consent screen
After approving, Google redirects back to your app with an authorization code
Better Auth exchanges the code for user profile information
A user account is created or linked in your database

Prerequisites

A Google account
A Google Cloud project (or create a new one)
Your application running and accessible at a URL (e.g., http://localhost:3000 for local development)

Step-by-Step Configuration

Open Google Cloud Console

Navigate to the Google Cloud Console and sign in with your Google account.If you don’t have a project yet, create one:

Click the project dropdown in the top navigation
Click “New Project”
Enter a project name (e.g., “My Auth App”)
Click “Create”

Enable Google+ API

Google OAuth requires the Google+ API to fetch user profile information.

In the left sidebar, go to APIs & Services > Library
Search for “Google+ API”
Click on it and press Enable

If the Google+ API is already enabled, you’ll see “Manage” instead of “Enable”.

Configure OAuth Consent Screen

Before creating credentials, you must configure the consent screen that users see when signing in.

Go to APIs & Services > OAuth consent screen
Select External user type (unless you have a Google Workspace organization)
Click Create

Fill in the required fields:

App name: Your application’s name (e.g., “My Auth App”)
User support email: Your email address
Developer contact information: Your email address

You can leave other fields like logo and homepage URL blank for development.

Click Save and Continue
On the “Scopes” page, click Save and Continue (default scopes are sufficient)
On the “Test users” page, add your email if the app is in testing mode
Click Save and Continue, then Back to Dashboard

Create OAuth 2.0 Credentials

Now create the actual OAuth client ID and secret.

Go to APIs & Services > Credentials
Click + Create Credentials at the top
Select OAuth client ID
Choose Web application as the application type
Enter a name (e.g., “Auth UI Boilerplate”)

Configure the authorized redirect URI:

Under Authorized redirect URIs, click + Add URI

Enter your callback URL in this exact format:

http://localhost:3000/api/auth/callback/google

The redirect URI must match exactly. Better Auth uses the path /api/auth/callback/google by default.

Click Create

Copy Credentials

After creating the OAuth client, Google displays your credentials:

Client ID: A long string like 123456789-abc123.apps.googleusercontent.com
Client Secret: A shorter secret string

Copy both values. You’ll need them in the next step.

You can always view these credentials later by going to APIs & Services > Credentials and clicking on your OAuth 2.0 Client ID.

Add Credentials to .env File

Open your .env file in the project root and update these variables:

GOOGLE_CLIENT_ID=your-actual-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-actual-client-secret

Replace the placeholder values with the credentials you copied from Google Cloud Console.

Restart Development Server

For the environment variable changes to take effect, restart your Next.js dev server:

# Stop the server (Ctrl+C), then:
npm run dev

The server should start without errors if the credentials are configured correctly.

Test Google Sign-In

Navigate to your application’s login page:

http://localhost:3000/login

You should see a “Sign in with Google” button. Click it to test the OAuth flow:

You’ll be redirected to Google’s consent screen
Select your Google account
Review and approve the requested permissions
You’ll be redirected back to your app and signed in

If successful, you should see your dashboard or home page with your Google account information.

How It Works in the Code

The Google OAuth integration is configured in src/lib/auth.ts:

src/lib/auth.ts

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
  }),
  emailAndPassword: {
    enabled: true,
  },
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    },
  },
  baseURL: process.env.BETTER_AUTH_URL || "http://localhost:3000",
});

Better Auth automatically:

Handles the OAuth redirect to Google
Processes the callback with the authorization code
Fetches user profile data (email, name, profile picture)
Creates or updates the user in the user table
Links the Google account in the account table
Creates an authenticated session

Production Configuration

Before deploying to production, you must update your OAuth configuration.

Update Redirect URI

Add your production domain to the authorized redirect URIs:

Go to Google Cloud Console > APIs & Services > Credentials
Click on your OAuth 2.0 Client ID
Under Authorized redirect URIs, click + Add URI

Add your production callback URL:

https://yourdomain.com/api/auth/callback/google

Click Save

You can have multiple redirect URIs (localhost for development, production domain, staging domain, etc.).

Update Environment Variables

Set your production environment variables:

BETTER_AUTH_URL=https://yourdomain.com
NEXT_PUBLIC_BETTER_AUTH_URL=https://yourdomain.com
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

Always use HTTPS in production. Google requires HTTPS for OAuth redirect URIs unless you’re using localhost.

Publish Your App (Optional)

By default, OAuth apps are in “Testing” mode and limited to test users you explicitly add. To allow anyone to sign in:

Go to OAuth consent screen
Click Publish App
Review the requirements and click Confirm

Publishing the app may require verification if you request sensitive scopes. For basic profile and email access, verification is usually not required.

Troubleshooting

”Redirect URI Mismatch” Error

Symptom: Google shows an error page saying the redirect URI doesn’t match. Solution:

Verify the redirect URI in Google Cloud Console exactly matches: {YOUR_BASE_URL}/api/auth/callback/google
Check that BETTER_AUTH_URL in your .env matches the base URL
Ensure there are no trailing slashes

”Access Blocked: This app’s request is invalid”

Symptom: Google shows this error during sign-in. Solution:

Make sure you’ve configured the OAuth consent screen
Verify the OAuth client ID and secret are correct
Check that the Google+ API is enabled

User Not Added to Database

Symptom: OAuth flow completes, but no user is created in the database. Solution:

Verify your DATABASE_URL is correct and the database is running
Check that you’ve run npm run db:push to create the tables
Look for errors in the server console logs

”Invalid Client” Error

Symptom: Google returns an “invalid_client” error. Solution:

Double-check the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET values in your .env
Make sure there are no extra spaces or quotes around the values
Verify the credentials haven’t been deleted or regenerated in Google Cloud Console

Database Tables

When a user signs in with Google, Better Auth stores their information across multiple tables: user table:

Basic profile information (name, email, profile picture)
Created/updated timestamps

account table:

Links the Google account to the user
Stores OAuth tokens (access token, refresh token, ID token)
Records the provider ID (“google”) and account ID (Google user ID)

session table:

Active session information
Session token, expiration, IP address, user agent

See the Database Configuration guide for more details on the schema.

Adding Other OAuth Providers

Better Auth supports many other OAuth providers. To add more:

src/lib/auth.ts

socialProviders: {
  google: {
    clientId: process.env.GOOGLE_CLIENT_ID as string,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
  },
  github: {
    clientId: process.env.GITHUB_CLIENT_ID as string,
    clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
  },
  // Add more providers...
}

Check the Better Auth documentation for the full list of supported providers.

Environment Variables - Complete environment variable reference
Database Configuration - Understanding the auth database schema

Get Started

Configuration

Core Features

Backend Integration

Database

Development

Overview

Prerequisites

Step-by-Step Configuration

How It Works in the Code

Production Configuration

Update Redirect URI

Update Environment Variables

Publish Your App (Optional)

Troubleshooting

”Redirect URI Mismatch” Error

”Access Blocked: This app’s request is invalid”

User Not Added to Database

”Invalid Client” Error

Database Tables

Adding Other OAuth Providers

Build docs developers (and LLMs) love

Get Started

Configuration

Core Features

Backend Integration

Database

Development

​Overview

​Prerequisites

​Step-by-Step Configuration

​How It Works in the Code

​Production Configuration

​Update Redirect URI

​Update Environment Variables

​Publish Your App (Optional)

​Troubleshooting

​”Redirect URI Mismatch” Error

​”Access Blocked: This app’s request is invalid”

​User Not Added to Database

​”Invalid Client” Error

​Database Tables

​Adding Other OAuth Providers

​Related Documentation

Build docs developers (and LLMs) love

Overview

Prerequisites

Step-by-Step Configuration

How It Works in the Code

Production Configuration

Update Redirect URI

Update Environment Variables

Publish Your App (Optional)

Troubleshooting

”Redirect URI Mismatch” Error

”Access Blocked: This app’s request is invalid”

User Not Added to Database

”Invalid Client” Error

Database Tables

Adding Other OAuth Providers

Related Documentation