What We’ll Cover#

We’ll focus specifically on verifying Google tokens and extracting user information on the backend. This approach works great with frontend libraries like @react-oauth/google that handle the Google Sign-In button and initial authentication flow.

Prerequisites#

Before we start, make sure you have:

• A FastAPI application set up
• A Google Cloud Project with OAuth2 credentials
• The following Python packages installed:

  pip install fastapi google-auth requests python-jose
  

The Code#

First, let’s create a utility function to verify Google tokens and extract user information. Create a file called google.py:

from google.auth.transport import requests as google_requests
from google.oauth2 import id_token

def get_user_infos_from_google_token(id_token_str):
    # Verify the token and get user info
    id_info = id_token.verify_oauth2_token(
        id_token_str, 
        google_requests.Request(), 
        OIDC_GOOGLE_CLIENT_ID  # Your Google Client ID from env variables
    )
    
    user_infos = {
        'id': id_info['sub'],  # Google's unique identifier for the user
        'email': id_info.get('email'),
    }
    
    if not user_infos:
        return {
            "status": False,
            "user_infos": user_infos
        }
    
    return {
        "status": True,
        "user_infos": user_infos
    }

Now, let’s create the endpoint that will handle the Google authentication. This goes in your routes file:

from fastapi import APIRouter, HTTPException, status
from datetime import timedelta

router = APIRouter()

@router.get("/google")
async def auth_google(credential: str = None):
    if not credential:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail="No credential provided."
        )
    
    # Verify the Google token
    check = get_user_infos_from_google_token(credential)
    if check['status'] is False:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail="Invalid credential"
        )
    
    user_infos = check['user_infos']
    
    # Here you would typically:
    # 1. Check if the user exists in your database
    # 2. Create a new user if they don't exist
    # 3. Generate your application's JWT token
    
    # For example:
    access_token = create_access_token(
        data={"sub": user_infos['email']},
        expires_delta=timedelta(minutes=30)
    )
    
    return {"token": access_token}

How It Works#

1. The frontend handles the Google Sign-In flow and gets a credential token from Google
2. Your frontend sends this token to your /google endpoint
3. The backend verifies the token using Google’s libraries
4. If valid, you get the user’s information (like email and Google ID)
5. You can then create a session, JWT token, or whatever authentication mechanism you’re using in your app

Environment Variables#

Make sure to set up these environment variables:

OIDC_GOOGLE_CLIENT_ID=your-google-client-id
ACCESS_TOKEN_EXPIRE_MINUTES=30  # or whatever duration you prefer

Frontend Integration#

On your React frontend, you’d typically have something like this:

import { GoogleLogin } from '@react-oauth/google';

function Login() {
  const handleSuccess = async (credentialResponse) => {
    const response = await fetch('/api/google?credential=' + credentialResponse.credential);
    const data = await response.json();
    // Store the token, update your auth state, etc.
  };

  return (
    <GoogleLogin
      onSuccess={handleSuccess}
      onError={() => console.log('Login Failed')}
    />
  );
}

That’s it! This setup gives you a clean way to handle Google authentication using tokens. Remember to add proper error handling and user management based on your application’s needs.

Security Notes#

• Always verify tokens server-side
• Keep your Google Client ID secure
• Consider adding rate limiting to your auth endpoints
• Store user tokens securely in your frontend (preferably in HTTP-only cookies)

Happy coding! 🚀

This article is also available on:

• DEV