# 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:

```env
# 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:
   ```nginx
   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
```bash
# 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:
```javascript
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

```bash
# 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:
```nginx
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