165 lines
4.6 KiB
Markdown
165 lines
4.6 KiB
Markdown
# 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 |