Documentation
Plugins
Google OAuth

Google OAuth Setup 🔐

Add secure Google authentication to your SaaS application

15 minutes
Intermediate

Overview

Google OAuth allows users to sign in to your app using their Google account. This provides:

  • Secure authentication without managing passwords
  • Access to user profile information (name, email, avatar)
  • Trusted authentication flow from Google
  • Automatic session management

1Create Google Cloud Project

  1. Go to Google Cloud Console
  2. Click "Select a project" → "New Project"
  3. Enter project name (e.g., "My SaaS App")
  4. Click "Create"
  5. Wait for project creation to complete
Create Google Cloud Project

2Configure OAuth Consent Screen

  1. In Google Cloud Console, go to "APIs & Services" → "OAuth consent screen"
  2. Select "External" user type
  3. Click "Create"
  4. Fill in the required information:
    • App name: Your SaaS app name
    • User support email: Your email
    • Developer contact: Your email
  5. Click "Save and Continue"
  6. Skip "Scopes" (click "Save and Continue")
  7. Skip "Test users" (click "Save and Continue")
  8. Review and click "Back to Dashboard"

💡 Tip: You can publish your app later for production use. For development, "External" with testing mode is sufficient.

3Create OAuth Credentials

  1. Go to "APIs & Services" → "Credentials"
  2. Click "Create Credentials" → "OAuth client ID"
  3. Select "Web application" as application type
  4. Enter name (e.g., "Production Web Client")
  5. Add Authorized JavaScript origins:
    • http://localhost:3000 (for development)
    • https://yourdomain.com (for production)
  6. Add Authorized redirect URIs:
    • http://localhost:3000/api/auth/callback/google
    • https://yourdomain.com/api/auth/callback/google
  7. Click "Create"

⚠️ Important: Make sure the redirect URI exactly matches your app's callback URL, including the protocol (http/https).

4Copy Credentials

After creating the OAuth client, you'll see a modal with your credentials:

  1. Copy the Client ID
  2. Copy the Client Secret
  3. Keep these secure - you'll need them in the next step
Client ID: 123456789-abcdefghijklmnop.apps.googleusercontent.com
Client Secret: GOCSPX-1234567890abcdefghij

5Configure Environment Variables

Add your Google OAuth credentials to your project's environment variables:

  1. Open your project's .env.local file
  2. Add the following variables:
# Google OAuth
GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_random_secret_min_32_chars

💡 Tip: Generate a secure NEXTAUTH_SECRET using: openssl rand -base64 32

6Test Authentication

  1. Start your development server: npm run dev
  2. Open http://localhost:3000
  3. Click "Sign in with Google"
  4. Select your Google account
  5. Grant permissions
  6. You should be redirected back and logged in!

✅ Success: If you see your name and avatar, Google OAuth is working correctly!

Troubleshooting

Error: redirect_uri_mismatch

The redirect URI in your Google Cloud Console doesn't match your app's callback URL.

Solution: Double-check that the redirect URI in Google Cloud Console exactly matches http://localhost:3000/api/auth/callback/google

Error: Access blocked

Your app hasn't been verified by Google yet.

Solution: Click "Advanced" → "Go to [your app] (unsafe)" during development. For production, submit your app for verification.

Error: Invalid client

Your Client ID or Client Secret is incorrect.

Solution: Verify that you copied the credentials correctly from Google Cloud Console to your .env.local file.

Next Steps

💾

Setup Database

Configure Supabase for data storage

💳

Add Payments

Integrate Paddle for subscriptions