← back to Dear Bubbe Nextjs

GOOGLE_OAUTH_FIX.md

116 lines

# Google OAuth Authorization Error Fix Guide

## Error: "Access blocked: Authorization Error"

This error occurs when the OAuth configuration in Google Cloud Console doesn't match your application settings.

## Required Google Cloud Console Configuration

### 1. Authorized Redirect URIs
You MUST add these EXACT redirect URIs to your Google OAuth 2.0 Client ID in Google Cloud Console:

```
http://45.61.58.125:3011/api/auth/callback/google
http://localhost:3011/api/auth/callback/google
https://www.bubbe.ai/api/auth/callback/google
https://bubbe.ai/api/auth/callback/google
```

### 2. Authorized JavaScript Origins
Add these origins:

```
http://45.61.58.125:3011
http://localhost:3011
https://www.bubbe.ai
https://bubbe.ai
```

## Steps to Fix in Google Cloud Console:

1. **Go to Google Cloud Console**
   - Visit: https://console.cloud.google.com/
   - Select your project

2. **Navigate to OAuth Credentials**
   - Go to: APIs & Services → Credentials
   - Find OAuth 2.0 Client ID: `493480746821-mhpjc0glkkogcf845ubi2hkhksoqj39k.apps.googleusercontent.com`
   - Click on it to edit

3. **Update Authorized Redirect URIs**
   - Click "ADD URI" under Authorized redirect URIs
   - Add ALL of these (exactly as shown):
     ```
     http://45.61.58.125:3011/api/auth/callback/google
     http://localhost:3011/api/auth/callback/google
     https://www.bubbe.ai/api/auth/callback/google
     https://bubbe.ai/api/auth/callback/google
     ```

4. **Update Authorized JavaScript Origins**
   - Click "ADD URI" under Authorized JavaScript origins
   - Add ALL of these:
     ```
     http://45.61.58.125:3011
     http://localhost:3011
     https://www.bubbe.ai
     https://bubbe.ai
     ```

5. **OAuth Consent Screen Settings**
   - Go to: OAuth consent screen
   - Ensure status is "In production" or "Testing"
   - If in Testing, add test users' emails
   - Check that app domain matches your domain

6. **Save Changes**
   - Click "SAVE" at the bottom
   - Changes may take 5-10 minutes to propagate

## Current Application Configuration:

- **Client ID**: `493480746821-mhpjc0glkkogcf845ubi2hkhksoqj39k.apps.googleusercontent.com`
- **NextAuth URL**: `http://45.61.58.125:3011`
- **Callback Path**: `/api/auth/callback/google`

## Testing After Fix:

1. Wait 5-10 minutes for Google's changes to propagate
2. Clear browser cache and cookies
3. Visit: http://45.61.58.125:3011/auth/signin
4. Click "Sign in with Google"
5. Should now show account selector

## Common Issues:

### Issue: "redirect_uri_mismatch"
- **Cause**: The redirect URI doesn't match exactly
- **Fix**: Ensure URIs match character-for-character (including http vs https)

### Issue: "Access blocked: This app's request is invalid"
- **Cause**: OAuth consent screen not configured
- **Fix**: Complete OAuth consent screen setup

### Issue: "403 disallowed_useragent"
- **Cause**: Using embedded webview
- **Fix**: Use system browser instead

## Alternative: Development Mode

If you can't update the Google Console immediately, you can temporarily use localhost:

1. Update `.env.local`:
   ```
   NEXTAUTH_URL=http://localhost:3011
   ```

2. Access via SSH tunnel:
   ```bash
   ssh -L 3011:localhost:3011 root@45.61.58.125
   ```

3. Visit: http://localhost:3011/auth/signin

## Support Links:
- [Google OAuth 2.0 Documentation](https://developers.google.com/identity/protocols/oauth2)
- [NextAuth Google Provider Docs](https://next-auth.js.org/providers/google)