Google OAuth

Configuring Google as an authentication provider using Auth.js v5.

This guide explains how to set up Google OAuth for user authentication in NextSaaSPilot using Auth.js v5.

Prerequisites

• Database Setup: Ensure you have configured and migrated your database, as Auth.js requires an adapter (like Prisma) to store user and account information. See the Database Setup documentation.

1. Environment Variables

Add the following variables to your .env file. Create the file if it doesn't exist.

.env

AUTH_URL=http://localhost:3000
AUTH_SECRET=

# Google Provider Variables
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

• AUTH_SECRET: A random string used to encrypt JWTs and session cookies. Use the command openssl rand -base64 32 in your terminal to generate a strong one. Do not commit this file.
• AUTH_URL: Set this to your canonical URL (e.g., http://localhost:3000 for development, https://your-site.com for production).
• Replace the AUTH*GOOGLE* placeholders with the actual credentials obtained from the Google Cloud Console in the next steps.

ℹ️ Use the exact environment variable names AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET. Auth.js automatically picks up variables following the AUTH_PROVIDER-ID_ID and AUTH_PROVIDER-ID_SECRET pattern, eliminating the need to explicitly pass clientId and clientSecret in the provider configuration within lib/auth/auth-config.ts (or similar). The core AUTH_SECRET and AUTH_URL variables retain their names.

2. Google Cloud Console Setup

You need to create a Google Cloud project and configure OAuth credentials.

Video Guide

For a step-by-step walkthrough, watch this YouTube video:

Step-by-Step Written Instructions

1. Go to the Google Cloud Console and create a new project or select an existing anyone.

2. In the search bar at the top, type "APIs & Services" and select it from the results. Then, go to the "Credentials" tab within "APIs & Services".

3. Create Credentials:

   • Click Create credentials button at the top, comes up a popup then select 0Auth client ID.
   • Choose Web Application as the Application type.
   • Fill in the required information (Name).
   • Authorized JavaScript origins: Add your development and production URLs.
   • Authorized redirect URIs: This is where Google sends the user back after authentication. It must match the pattern /api/auth/callback/[provider].
     • For production: https://YOUR_DOMAIN/api/auth/callback/google
     • For development: http://localhost:3000/api/auth/callback/google
   • Click the Create Button.

4. Create OAuth Credentials:

   • Go back to "Credentials".
   • Click [+ Create Credentials] > [OAuth client ID].
   • Select Web application as the Application type.
   • Give it a name (e.g., "NextSaaSPilot Web App").
   • Authorized JavaScript origins: Add your development and production URLs.
   • http://localhost:3000 (or your local dev port)
   • https://your-domain.com (replace with your actual domain)
   • Authorized redirect URIs: This is where Google sends the user back after authentication. It must match the pattern /api/auth/callback/[provider].
   • http://localhost:3000/api/auth/callback/google
   • https://your-domain.com/api/auth/callback/google
   • Click [Create].

5. Copy Credentials: A modal will appear showing your Client ID and Client Secret. Copy these and paste them into your .env.local file as AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET.