Google OAuth Setup for Convex Auth

This guide will help you set up Google OAuth for your Convex Auth implementation.

Prerequisites

• A Google account
• Access to Google Cloud Console
• Your Convex deployment URL

Steps

1. Create a Google Cloud Project

1. Go to Google Cloud Console
2. Click on the project dropdown (top left)
3. Click "New Project"
4. Name your project (e.g., "PromptNow Auth")
5. Click "Create"

2. Enable Google+ API

1. In the Google Cloud Console, go to "APIs & Services" > "Library"
2. Search for "Google+ API"
3. Click on it and then click "Enable"

3. Create OAuth 2.0 Credentials

1. Go to "APIs & Services" > "Credentials"

2. Click "Create Credentials" > "OAuth client ID"

3. If prompted, configure the OAuth consent screen:

   • Choose "External" for user type
   • Fill in the required fields:
     • App name: "PromptNow" (or your app name)
     • User support email: Your email
     • Developer contact information: Your email
   • Add scopes: email, profile, openid
   • Add test users if needed
   • Save and continue

4. Back in "Create OAuth client ID":

   • Application type: "Web application"
   • Name: "PromptNow Web Client"
   • Authorized JavaScript origins:
     • http://localhost:3003 (for local development)
     • Your production URL when deployed
   • Authorized redirect URIs:
     • https://standing-bird-371.convex.site/api/auth/callback/google (replace with your Convex URL)
     • For local development, you might need to add localhost redirect URIs
   • Click "Create"

5. Copy the Client ID and Client Secret

4. Set Environment Variables

In the Convex directory (tools/convex), set the environment variables:

cd tools/convex
npx convex env set AUTH_GOOGLE_ID "your-client-id"
npx convex env set AUTH_GOOGLE_SECRET "your-client-secret"

5. Update Convex Dashboard

1. Go to your Convex Dashboard
2. Navigate to Settings > Environment Variables
3. Verify that AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET are set

6. Important URLs

Your Google OAuth callback URL will be:

https://[your-convex-deployment].convex.site/api/auth/callback/google

For the standing-bird-371 deployment:

https://standing-bird-371.convex.site/api/auth/callback/google

7. Testing

1. Start your development server
2. Navigate to the login page
3. Click the "Google" button
4. You should be redirected to Google's OAuth consent screen
5. After authorization, you'll be redirected back to your app

Troubleshooting

Common Issues

1. "redirect_uri_mismatch" error

   • Make sure the redirect URI in Google Cloud Console exactly matches your Convex deployment URL
   • The format should be: https://[your-deployment].convex.site/api/auth/callback/google

2. "Invalid client" error

   • Double-check that your Client ID and Secret are correctly set in Convex environment variables
   • Make sure there are no extra spaces or quotes

3. "Access blocked" error

   • Make sure you've configured the OAuth consent screen
   • For development, you might need to add test users

Security Notes

• Never commit your Google Client Secret to version control
• Use environment variables for all sensitive credentials
• In production, restrict your OAuth client to specific domains
• Regularly rotate your client secrets