247 lines
7.5 KiB
Markdown
247 lines
7.5 KiB
Markdown
# OAuth Setup Guide
|
|
|
|
This guide explains how to enable Google, GitHub, Facebook, and Discord authentication in the Estate Platform.
|
|
|
|
## Overview
|
|
|
|
The application supports OAuth sign-in through multiple providers. Once configured, users will see provider-specific login buttons on the login/register modal.
|
|
|
|
## Setup Instructions
|
|
|
|
### 1. Google OAuth Setup
|
|
|
|
#### Step 1: Create a Google Cloud Project
|
|
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
|
|
2. Click the project dropdown and select "New Project"
|
|
3. Enter a project name (e.g., "Estate Platform") and click "Create"
|
|
|
|
#### Step 2: Enable Google+ API
|
|
1. In the Google Cloud Console, go to "APIs & Services" > "Library"
|
|
2. Search for "Google+ API"
|
|
3. Click on it and press "Enable"
|
|
|
|
#### Step 3: Create OAuth 2.0 Credentials
|
|
1. Go to "APIs & Services" > "Credentials"
|
|
2. Click "Create Credentials" > "OAuth Client ID"
|
|
3. If prompted, configure the OAuth consent screen first:
|
|
- Select "External" user type
|
|
- Fill in the required fields (app name, user support email, etc.)
|
|
- Add scopes: `email`, `profile`
|
|
- Add test users if needed
|
|
4. After consent screen setup, return to create credentials:
|
|
- Application type: "Web Application"
|
|
- Name: "Estate Platform"
|
|
- Authorized JavaScript origins:
|
|
- `http://localhost:3001` (development)
|
|
- `https://yourdomain.com` (production)
|
|
- Authorized redirect URIs:
|
|
- `http://localhost:3001/auth/google/callback` (development)
|
|
- `https://yourdomain.com/auth/google/callback` (production)
|
|
5. Click "Create" and copy your Client ID and Client Secret
|
|
|
|
#### Step 4: Add to System Configuration
|
|
1. Open or create `data/system-config.json`
|
|
2. Update the Google OAuth section:
|
|
```json
|
|
{
|
|
"oauth": {
|
|
"google": {
|
|
"enabled": true,
|
|
"clientId": "YOUR_GOOGLE_CLIENT_ID_HERE",
|
|
"clientSecret": "YOUR_GOOGLE_CLIENT_SECRET_HERE"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 2. GitHub OAuth Setup
|
|
|
|
#### Step 1: Create GitHub OAuth App
|
|
1. Go to GitHub Settings > Developer settings > [OAuth Apps](https://github.com/settings/developers)
|
|
2. Click "New OAuth App"
|
|
3. Fill in the form:
|
|
- Application name: "Estate Platform"
|
|
- Homepage URL: `http://localhost:3001` (development) or your domain
|
|
- Application description: "Estate Platform - Digital Estate Planning"
|
|
- Authorization callback URL:
|
|
- `http://localhost:3001/auth/github/callback` (development)
|
|
- `https://yourdomain.com/auth/github/callback` (production)
|
|
4. Click "Register application"
|
|
|
|
#### Step 2: Generate Client Secret
|
|
1. On the app details page, you'll see the Client ID
|
|
2. Click "Generate a new client secret" and copy it
|
|
3. Keep both Client ID and Client Secret safe
|
|
|
|
#### Step 3: Add to System Configuration
|
|
1. Open `data/system-config.json`
|
|
2. Update the GitHub OAuth section:
|
|
```json
|
|
{
|
|
"oauth": {
|
|
"github": {
|
|
"enabled": true,
|
|
"clientId": "YOUR_GITHUB_CLIENT_ID_HERE",
|
|
"clientSecret": "YOUR_GITHUB_CLIENT_SECRET_HERE"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. Facebook OAuth Setup
|
|
|
|
#### Step 1: Create Facebook App
|
|
1. Go to [Facebook Developers](https://developers.facebook.com/)
|
|
2. Click "My Apps" > "Create App"
|
|
3. Select "Consumer" as the app type
|
|
4. Fill in the app details:
|
|
- App Name: "Estate Platform"
|
|
- App Contact Email: your@email.com
|
|
- App Purpose: Select appropriate category
|
|
5. Click "Create App"
|
|
|
|
#### Step 2: Add Facebook Login Product
|
|
1. In the app dashboard, click "Add Product"
|
|
2. Find "Facebook Login" and click "Set Up"
|
|
3. Choose "Web" as the platform
|
|
4. In the settings for Facebook Login:
|
|
- Valid OAuth Redirect URIs:
|
|
- `http://localhost:3001/auth/facebook/callback` (development)
|
|
- `https://yourdomain.com/auth/facebook/callback` (production)
|
|
5. Save changes
|
|
|
|
#### Step 3: Get Credentials
|
|
1. Go to Settings > Basic to find:
|
|
- App ID (Client ID)
|
|
- App Secret (Client Secret)
|
|
2. Keep these secure
|
|
|
|
#### Step 4: Add to System Configuration
|
|
1. Open `data/system-config.json`
|
|
2. Update the Facebook OAuth section:
|
|
```json
|
|
{
|
|
"oauth": {
|
|
"facebook": {
|
|
"enabled": true,
|
|
"clientId": "YOUR_FACEBOOK_APP_ID_HERE",
|
|
"clientSecret": "YOUR_FACEBOOK_APP_SECRET_HERE"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 4. Discord OAuth Setup
|
|
|
|
#### Step 1: Create Discord Application
|
|
1. Go to [Discord Developer Portal](https://discord.com/developers/applications)
|
|
2. Click "New Application"
|
|
3. Enter a name (e.g., "Estate Platform") and click "Create"
|
|
|
|
#### Step 2: Generate OAuth Credentials
|
|
1. In the left sidebar, click "OAuth2"
|
|
2. Copy the "Client ID"
|
|
3. Under "CLIENT SECRET", click "Reset Secret" and copy it
|
|
|
|
#### Step 3: Add Redirect URLs
|
|
1. In OAuth2 settings, scroll to "Redirects"
|
|
2. Click "Add Redirect" and add:
|
|
- `http://localhost:3001/auth/discord/callback` (development)
|
|
- `https://yourdomain.com/auth/discord/callback` (production)
|
|
3. Click "Save Changes"
|
|
|
|
#### Step 4: Add to System Configuration
|
|
1. Open `data/system-config.json`
|
|
2. Update the Discord OAuth section:
|
|
```json
|
|
{
|
|
"oauth": {
|
|
"discord": {
|
|
"enabled": true,
|
|
"clientId": "YOUR_DISCORD_CLIENT_ID_HERE",
|
|
"clientSecret": "YOUR_DISCORD_CLIENT_SECRET_HERE"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Verification
|
|
|
|
After configuring any provider:
|
|
|
|
1. Restart your development server: `npm run dev`
|
|
2. Visit the login/register page
|
|
3. You should see buttons for enabled providers
|
|
4. Test the OAuth flow by clicking a provider button
|
|
|
|
## Environment Variables (Alternative Method)
|
|
|
|
Instead of `system-config.json`, you can set environment variables:
|
|
|
|
```bash
|
|
# Google
|
|
GOOGLE_CLIENT_ID=your_google_client_id
|
|
GOOGLE_CLIENT_SECRET=your_google_client_secret
|
|
|
|
# GitHub
|
|
GITHUB_CLIENT_ID=your_github_client_id
|
|
GITHUB_CLIENT_SECRET=your_github_client_secret
|
|
|
|
# Facebook
|
|
FACEBOOK_CLIENT_ID=your_facebook_client_id
|
|
FACEBOOK_CLIENT_SECRET=your_facebook_client_secret
|
|
|
|
# Discord
|
|
DISCORD_CLIENT_ID=your_discord_client_id
|
|
DISCORD_CLIENT_SECRET=your_discord_client_secret
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
### "Invalid Client ID" Error
|
|
- Verify the Client ID is correct and matches the provider
|
|
- Check that the redirect URI is exactly correct (including protocol and path)
|
|
- Ensure the OAuth app is in the correct environment (development vs production)
|
|
|
|
### Redirect URI Mismatch
|
|
- Common issue: mixing `http://` and `https://`
|
|
- Ensure the redirect URI in the provider settings matches exactly:
|
|
- `http://localhost:3001/auth/[provider]/callback`
|
|
|
|
### User Not Created After OAuth
|
|
- Check database connectivity
|
|
- Verify email is being returned from the OAuth provider
|
|
- Check server logs for error messages
|
|
|
|
### Session Not Persisting
|
|
- Clear browser cookies and try again
|
|
- Verify JWT secret is configured in `system-config.json` or `.env`
|
|
- Check that httpOnly cookies are enabled
|
|
|
|
## Security Notes
|
|
|
|
- **Never commit credentials** to version control
|
|
- Use environment variables for production
|
|
- Regularly rotate secrets in provider dashboards
|
|
- Use HTTPS in production (required by most providers)
|
|
- Keep Redirect URIs restricted to your domain only
|
|
- Monitor OAuth app usage in provider dashboards
|
|
|
|
## Disabling Providers
|
|
|
|
To disable a provider:
|
|
|
|
1. Set `"enabled": false` in `system-config.json`, or
|
|
2. Remove the environment variable, or
|
|
3. Leave the Client ID and Client Secret empty
|
|
|
|
The OAuth buttons will not appear for disabled providers.
|
|
|
|
## Support
|
|
|
|
For issues with specific providers, refer to their documentation:
|
|
- [Google OAuth Documentation](https://developers.google.com/identity/protocols/oauth2)
|
|
- [GitHub OAuth Documentation](https://docs.github.com/en/developers/apps/building-oauth-apps)
|
|
- [Facebook Login Documentation](https://developers.facebook.com/docs/facebook-login)
|
|
- [Discord OAuth Documentation](https://discord.com/developers/docs/topics/oauth2)
|