genesis
This commit is contained in:
sebseb7
165
docs/GOOGLE_OAUTH_SETUP.md
Normal file
165
docs/GOOGLE_OAUTH_SETUP.md
Normal file
@@ -0,0 +1,165 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user