Skip to main content

Google Authentication

This guide explains how to set up Google OAuth authentication for the Zero Kelvin application.

Prerequisites​

Step 1: Create a Google Cloud Project​

  1. Go to the Google Cloud Console
  2. Click on the project dropdown at the top of the page
  3. Click New Project
  4. Enter a project name (e.g., "Zero Kelvin")
  5. Click Create
  1. In the left sidebar, navigate to APIs & Services > OAuth consent screen
  2. Select External as the user type (unless you have a Google Workspace organization)
  3. Click Create
  4. Fill in the required fields:
    • App name: Zero Kelvin
    • User support email: Your email address
    • Developer contact information: Your email address
  5. Click Save and Continue
  6. On the Scopes page, click Add or Remove Scopes
  7. Select the following scopes:
    • openid
    • email
    • profile
  8. Click Update and then Save and Continue
  9. Skip the Test users section (click Save and Continue)
  10. Review and click Back to Dashboard

Step 3: Create OAuth Credentials​

  1. In the left sidebar, navigate to APIs & Services > Credentials
  2. Click Create Credentials > OAuth client ID
  3. Select Web application as the application type
  4. Enter a name (e.g., "Zero Kelvin Web Client")
  5. Under Authorized JavaScript origins, add:
    • http://localhost:3000 (for development)
    • Your production domain (e.g., https://example.com)
  6. Under Authorized redirect URIs, add:
    • http://localhost:3000/api/auth/callback/google (for development)
    • Your production callback URL (e.g., https://example.com/api/auth/callback/google)
  7. Click Create
  8. Copy the Client ID and Client Secret

Step 4: Configure Environment Variables​

Add the following to your .env.local file:

AUTH_GOOGLE_ID="your-client-id.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="your-client-secret"

Step 5: Test the Integration​

  1. Start the development server:
nx dev web
  1. Navigate to http://localhost:3000
  2. Click the Sign In button
  3. Select Continue with Google
  4. You should be redirected to Google's OAuth flow

Customizing Scopes​

To request additional Google API scopes, modify the Google provider configuration in auth.ts:

Google({
  clientId: process.env.AUTH_GOOGLE_ID,
  clientSecret: process.env.AUTH_GOOGLE_SECRET,
  authorization: {
    params: {
      scope: "openid email profile https://www.googleapis.com/auth/calendar.readonly",
    },
  },
}),

Production Checklist​

Before deploying to production:

  1. Publish your OAuth consent screen (if using external user type)
  2. Add your production domain to authorized origins and redirect URIs
  3. Consider setting up domain verification for enhanced security
  4. Review and limit the scopes to only what's necessary

Troubleshooting​

"Access blocked: This app's request is invalid"​

  • Ensure the redirect URI exactly matches what's configured in Google Cloud Console
  • Check for trailing slashes in the redirect URI

"Error 400: redirect_uri_mismatch"​

  • The redirect URI in your request doesn't match the authorized redirect URIs
  • For development, use http://localhost:3000/api/auth/callback/google

"This app isn't verified"​

  • This is normal during development with an unpublished OAuth consent screen
  • Click Advanced > Go to [App Name] (unsafe) to continue testing
  • For production, submit your app for Google verification