diff --git a/docs/GOOGLE_OAUTH_SETUP.md b/docs/GOOGLE_OAUTH_SETUP.md new file mode 100644 index 0000000..8bf5762 --- /dev/null +++ b/docs/GOOGLE_OAUTH_SETUP.md @@ -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://.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 |