dvirlabs
d6eeb9a079
- Make username login case-insensitive (Dvir = dvir = DVIR) - Add Google OAuth login/signup functionality - Install required dependencies (authlib, httpx, python-dotenv) - Create OAuth endpoints: /auth/google/url, /auth/google/callback - Add Google login button to frontend with styled UI - Configure environment variables for OAuth credentials - Add comprehensive setup documentation - Secure .env file with .gitignore
111 lines
3.3 KiB
Markdown
111 lines
3.3 KiB
Markdown
# Google OAuth Setup Guide
|
|
|
|
## Prerequisites
|
|
1. A Google Cloud Platform account
|
|
2. A project created in Google Cloud Console
|
|
|
|
## Step 1: Create OAuth 2.0 Credentials
|
|
|
|
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
|
|
2. Select your project (or create a new one)
|
|
3. Navigate to **APIs & Services** > **Credentials**
|
|
4. Click **Create Credentials** > **OAuth 2.0 Client ID**
|
|
5. If prompted, configure the OAuth consent screen:
|
|
- Choose **External** user type
|
|
- Fill in the required fields:
|
|
- App name: Tasko
|
|
- User support email: Your email
|
|
- Developer contact information: Your email
|
|
- Add scopes (optional): `userinfo.email`, `userinfo.profile`
|
|
- Add test users if needed
|
|
6. Select **Application type**: Web application
|
|
7. Add **Authorized redirect URIs**:
|
|
- For local development: `http://localhost:8000/auth/google/callback`
|
|
- For production: `https://your-domain.com/auth/google/callback`
|
|
8. Click **Create**
|
|
9. Copy the **Client ID** and **Client Secret**
|
|
|
|
## Step 2: Configure Backend
|
|
|
|
1. Copy `.env.example` to `.env` in the backend directory:
|
|
```bash
|
|
cd backend
|
|
cp .env.example .env
|
|
```
|
|
|
|
2. Edit `.env` and add your Google OAuth credentials:
|
|
```env
|
|
GOOGLE_CLIENT_ID=your_client_id_here.apps.googleusercontent.com
|
|
GOOGLE_CLIENT_SECRET=your_client_secret_here
|
|
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback
|
|
FRONTEND_URL=http://localhost:5173
|
|
```
|
|
|
|
3. For production, update the URLs:
|
|
```env
|
|
GOOGLE_REDIRECT_URI=https://api.tasko.dvirlabs.com/auth/google/callback
|
|
FRONTEND_URL=https://tasko.dvirlabs.com
|
|
```
|
|
|
|
## Step 3: Install Dependencies
|
|
|
|
```bash
|
|
cd backend
|
|
pip install -r requirements.txt
|
|
```
|
|
|
|
## Step 4: Test the Setup
|
|
|
|
1. Start the backend server:
|
|
```bash
|
|
cd backend
|
|
uvicorn main:app --reload
|
|
```
|
|
|
|
2. Start the frontend:
|
|
```bash
|
|
cd frontend
|
|
npm run dev
|
|
```
|
|
|
|
3. Open your browser and navigate to the frontend URL
|
|
4. Click "Continue with Google" button
|
|
5. Complete the Google authentication flow
|
|
|
|
## Features Implemented
|
|
|
|
### 1. Case-Insensitive Username Login
|
|
- Users can now login with usernames in any case (e.g., "Dvir", "dvir", "DVIR" all work)
|
|
- Registration checks for existing usernames case-insensitively to prevent duplicates
|
|
|
|
### 2. Google OAuth Integration
|
|
- Users can sign up and login using their Google account
|
|
- New users are automatically created with:
|
|
- Username derived from email (before @)
|
|
- Email from Google account
|
|
- Default task lists (Personal, Work, Shopping)
|
|
- Existing users (matched by email) can login with Google
|
|
- Seamless redirect back to the application after authentication
|
|
|
|
## Troubleshooting
|
|
|
|
### "redirect_uri_mismatch" Error
|
|
- Ensure the redirect URI in Google Cloud Console exactly matches the one in your `.env` file
|
|
- Include the protocol (http/https), domain, port, and full path
|
|
|
|
### "Access blocked" Error
|
|
- Add your email as a test user in the OAuth consent screen
|
|
- If published, ensure your app is verified by Google
|
|
|
|
### "Invalid credentials" Error
|
|
- Check that your `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` are correct
|
|
- Ensure there are no extra spaces or quotes in the `.env` file
|
|
|
|
## Security Notes
|
|
|
|
1. Never commit your `.env` file to version control
|
|
2. Keep your `GOOGLE_CLIENT_SECRET` secure
|
|
3. Use HTTPS in production
|
|
4. Regularly rotate your OAuth credentials
|
|
5. Review and limit the OAuth scopes to only what's needed
|