Files
leopost/docs/GOOGLE_OAUTH_SETUP.md
Michele bd0df408a5 docs(01-04): document Google OAuth setup process
- Step-by-step Google Cloud Console configuration
- Supabase Dashboard provider setup instructions
- Environment variables section
- Test integration checklist
- Troubleshooting guide for common errors
- Security notes and best practices
- Local vs production comparison table

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 05:08:03 +01:00

3.6 KiB

Google OAuth Setup Guide

This guide explains how to configure Google OAuth for Leopost.

Prerequisites

  • Google Cloud account
  • Supabase project created
  • Access to Supabase Dashboard

Step 1: Google Cloud Console Setup

  1. Go to Google Cloud Console

  2. Create a new project or select existing one

  3. Navigate to APIs & Services > Credentials

  4. Click Create Credentials > OAuth client ID

  5. If prompted, configure the OAuth consent screen:

    • User Type: External
    • App name: Leopost
    • User support email: your email
    • Developer contact: your email
    • Scopes: email, profile, openid (default)
  6. Create OAuth Client ID:

    • Application type: Web application
    • Name: Leopost Web Client
  7. Add Authorized JavaScript origins:

    http://localhost:3000
    https://your-production-domain.com
    
  8. Add Authorized redirect URIs:

    https://<your-project-ref>.supabase.co/auth/v1/callback
    

    Find your project ref in Supabase Dashboard > Project Settings > General

  9. Click Create and save the Client ID and Client Secret

Step 2: Supabase Configuration

  1. Go to Supabase Dashboard

  2. Select your project

  3. Navigate to Authentication > Providers

  4. Find Google and click to enable

  5. Enter:

    • Client ID: From Google Cloud Console
    • Client Secret: From Google Cloud Console
  6. Copy the Callback URL shown (should match what you entered in Google)

  7. Click Save

Step 3: Environment Variables

No additional environment variables needed for Google OAuth. The configuration is stored in Supabase Dashboard.

Your existing .env.local should have:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Step 4: Test the Integration

  1. Start development server: npm run dev

  2. Go to http://localhost:3000/login

  3. Click "Accedi con Google"

  4. You should be redirected to Google consent screen

  5. After consent, you should return to the app authenticated

  6. Check Supabase Dashboard > Authentication > Users to verify user was created

Troubleshooting

"redirect_uri_mismatch" error

The redirect URI in Google Console doesn't match Supabase's callback URL.

  • Verify the exact URL in Supabase Auth Providers matches Google Console
  • Check for trailing slashes
  • Ensure using HTTPS for Supabase callback

"Access blocked: This app's request is invalid"

OAuth consent screen not configured or not published.

  • Configure OAuth consent screen in Google Cloud Console
  • For testing, add your email as a test user
  • For production, submit for verification

User created but profile missing

The database trigger might not have fired.

  • Check if on_auth_user_created trigger exists
  • Verify handle_new_user function has correct permissions
  • Check Supabase logs for errors

Session not persisting

Middleware might not be refreshing sessions.

  • Ensure middleware.ts is in project root
  • Check middleware matcher includes auth routes
  • Verify cookies are being set correctly

Security Notes

  • Never commit Client Secret to version control
  • For production, publish OAuth consent screen for verification
  • Use a separate OAuth client for production vs development
  • Regularly rotate Client Secrets

Local Development vs Production

Setting Local Production
JavaScript origins http://localhost:3000 https://your-domain.com
Redirect URI Same Supabase callback Same Supabase callback
Consent screen Testing mode Published/Verified
Test users Your email added Not needed