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>
This commit is contained in:
134
docs/GOOGLE_OAUTH_SETUP.md
Normal file
134
docs/GOOGLE_OAUTH_SETUP.md
Normal file
@@ -0,0 +1,134 @@
|
||||
# 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](https://console.cloud.google.com/)
|
||||
|
||||
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](https://supabase.com/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 |
|
||||
Reference in New Issue
Block a user