tasko/GOOGLE_OAUTH_SETUP.md
dvirlabs d6eeb9a079 feat: Add case-insensitive username login and Google OAuth authentication
- 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
2026-02-20 16:30:27 +02:00

3.3 KiB

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

    cd backend
    cp .env.example .env
    
  2. Edit .env and add your Google OAuth credentials:

    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:

    GOOGLE_REDIRECT_URI=https://api.tasko.dvirlabs.com/auth/google/callback
    FRONTEND_URL=https://tasko.dvirlabs.com
    

Step 3: Install Dependencies

cd backend
pip install -r requirements.txt

Step 4: Test the Setup

  1. Start the backend server:

    cd backend
    uvicorn main:app --reload
    
  2. Start the frontend:

    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