Google OAuth

Configuring Google as an authentication provider using Better Auth. This guide explains how to set up Google OAuth for user authentication in SaasPilot using Better Auth.

Prerequisites

• Database Setup: Ensure you have configured your database. Better Auth supports automatic database management and migrations. 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

BETTER_AUTH_URL="http://localhost:3000"
BETTER_AUTH_SECRET="your-secret-key-here"

AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"

• BETTER_AUTH_SECRET: A random string used to encrypt sessions and tokens. Use the command openssl rand -base64 32 in your terminal to generate a strong one. Do not commit this file.
• BETTER_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_ID and AUTH_GOOGLE_SECRET placeholders with the actual credentials obtained from the Google Cloud Console in the next steps.

2. Google Cloud Console Setup

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

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., "SaaSPilot 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 file as AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET.

How It Works

• User clicks the "Sign in with Google" button
• authClient.signIn.social() redirects the user to Google's OAuth consent screen
• User authorizes your application
• Google redirects back to /api/auth/callback/google with an authorization code
• Better Auth exchanges the code for user information
• Better Auth creates or updates the user account and establishes a session
• User is redirected to the specified callbackURL