fibdash/docs/GOOGLE_OAUTH_SETUP.md

Google OAuth Setup Guide for FibDash

Overview

This guide helps you set up Google OAuth correctly for your FibDash application, especially when deploying to a custom domain like fibdash.growheads.de.

Common Errors

1. "Server did not send the correct CORS headers"

This happens when your domain is not authorized in Google Cloud Console.

2. "Error retrieving a token" / "ERR_FAILED"

This occurs when Google's servers can't reach your domain or the OAuth configuration is incorrect.

Step-by-Step Setup

1. Google Cloud Console Configuration

1. Go to Google Cloud Console

   • Visit: https://console.cloud.google.com/
   • Select your project or create a new one

2. Enable Google+ API

   • Navigate to "APIs & Services" > "Library"
   • Search for "Google+ API" and enable it
   • Also enable "Google Identity" if available

3. Create OAuth 2.0 Credentials

   • Go to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "OAuth 2.0 Client IDs"
   • Choose "Web application"

4. Configure Authorized Origins Add ALL domains you'll use:

   http://localhost:5001
   http://localhost
   http://fibdash.growheads.de
   https://fibdash.growheads.de
   

5. Configure Authorized Redirect URIs Add these URIs:

   http://localhost:5001/
   http://localhost/
   http://fibdash.growheads.de/
   https://fibdash.growheads.de/
   

2. Environment Configuration

Update your .env file:

# Backend OAuth (for token verification)
GOOGLE_CLIENT_ID=your_actual_client_id_here
GOOGLE_CLIENT_SECRET=your_actual_client_secret_here

# Frontend OAuth (for browser sign-in)
REACT_APP_GOOGLE_CLIENT_ID=your_actual_client_id_here

Important: Both GOOGLE_CLIENT_ID and REACT_APP_GOOGLE_CLIENT_ID should have the same value.

3. Domain-Specific Issues

For fibdash.growheads.de:

1. DNS Configuration

   • Ensure your domain points to the correct server
   • Test with: nslookup fibdash.growheads.de

2. Nginx Configuration

   • Make sure nginx is configured for your domain
   • Check server_name includes your domain:

   server_name localhost fibdash.local fibdash.growheads.de;
   

3. SSL/HTTPS (Recommended)

   • Google OAuth works better with HTTPS
   • Consider using Let's Encrypt for free SSL certificates

4. Testing Your Setup

Test 1: Check OAuth Configuration

# Test if Google can reach your callback URL
curl -I http://fibdash.growheads.de/

Test 2: Verify Environment Variables

Add this to your Login component temporarily:

console.log('Google Client ID:', process.env.REACT_APP_GOOGLE_CLIENT_ID);

Test 3: Check Browser Console

Look for these specific errors:

• CORS errors → Domain not authorized
• Network errors → DNS/server issues
• CSP errors → Content Security Policy too strict

5. Troubleshooting Commands

# Restart your application
npm run dev

# Check nginx configuration
sudo nginx -t

# Reload nginx
sudo systemctl reload nginx

# Check if your domain resolves
ping fibdash.growheads.de

# Check if your server is accessible
curl -v http://fibdash.growheads.de/api/health

Alternative Solutions

1. Use the Fallback Button

The app includes an "Alternative Google Sign-In" button that uses the older Google API, which sometimes works when the new GSI fails.

2. Temporary Localhost Testing

If domain issues persist, test with localhost first:

1. Update Google Cloud Console to only include localhost
2. Test with http://localhost:5001
3. Once working, add your domain back

3. Use Different OAuth Flow

Consider implementing a server-side OAuth flow if client-side continues to fail.

Security Considerations

Content Security Policy

The nginx configuration includes CSP headers that allow Google domains:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://accounts.google.com https://apis.google.com ...";

CORS Headers

For development, CORS is relaxed. In production, tighten these restrictions.

Production Checklist

• Google Cloud Console configured with production domain
• Environment variables set correctly
• Nginx configured with your domain
• SSL certificate installed (recommended)
• CSP headers allow Google domains
• Test OAuth flow end-to-end
• Monitor for CORS errors in production

Support

If you continue to have issues:

1. Check the browser's developer console for specific error messages
2. Verify your Google Cloud Console settings match exactly
3. Test with a simple HTML page first to isolate the issue
4. Consider using the server-side OAuth flow as an alternative