Skip to main content

Google OAuth Setup Guide

This guide explains how to configure Google OAuth for user registration and login in STEMBlock.ai.

Overview​

STEMBlock.ai supports registration and login using existing Google accounts. This allows users (especially students and coaches) to quickly sign up and access the platform using their school or personal Google accounts.

Prerequisites​

  • Google Cloud Platform account
  • Access to Google Cloud Console
  • Admin access to STEMBlock.ai backend

Part 1: Google Cloud Platform Setup​

Step 1: Create a Google Cloud Project​

  1. Navigate to Google Cloud Console
  2. Click on the project dropdown at the top of the page
  3. Click "New Project"
  4. Enter project details:
    • Project Name: STEMBlock-Production (or your preferred name)
    • Organization: Select your organization (if applicable)
  5. 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 "Google+ API"
  4. Click "Enable"

  1. Go to APIs & Services > OAuth consent screen

  2. Select User Type:

    • Internal: If using Google Workspace (recommended for schools)
    • External: If allowing any Google account

  3. Click "Create"

  4. Fill in the OAuth consent screen form:

    • App name: STEMBlock.ai
    • User support email: Your support email
    • App logo: Upload STEMBlock.ai logo (optional)
    • Application home page: http://localhost:3000 (for development) or your production URL
    • Authorized domains: Add localhost for development
    • Developer contact information: Your email address

  5. Click "Save and Continue"

  6. Scopes (Step 2):

    • Click "Add or Remove Scopes"
    • Select the following scopes:
      • openid
      • profile
      • email
    • Click "Update"
    • Click "Save and Continue"

  7. Test users (Step 3) - for External apps only:

    • Add test user email addresses that can access the app during development
    • Click "Save and Continue"

  8. Summary (Step 4):

    • Review your settings
    • Click "Back to Dashboard"

Step 4: Create OAuth 2.0 Credentials​

  1. Go to APIs & Services > Credentials

  2. Click "Create Credentials" → "OAuth client ID"

  3. Select Application type: "Web application"

  4. Configure the web client:

    • Name: STEMBlock Web Client
    • Authorized JavaScript origins:
      • http://localhost:3000 (development)
      • https://your-production-domain.com (production)
    • Authorized redirect URIs:
      • http://localhost:3001/auth/google/callback (development)
      • https://your-api-domain.com/auth/google/callback (production)

  5. Click "Create"

  6. Save your credentials:

    • Copy the Client ID
    • Copy the Client Secret
    • Store these securely (you'll need them for backend configuration)

Part 2: Backend Configuration​

Step 1: Update Environment Variables​

Add the following to your backend/.env file:

# Google OAuth Configuration
GOOGLE_CLIENT_ID="your-client-id-here.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="your-client-secret-here"
GOOGLE_REDIRECT_URI="http://localhost:3001/auth/google/callback"

# For production, use your production URL:
# GOOGLE_REDIRECT_URI="https://api.stemblock.ai/auth/google/callback"

Step 2: Restart Backend​

After adding environment variables, restart the backend:

cd backend
npm run start:dev

You should see a log message indicating Google OAuth is configured.

Testing Google OAuth​

Test Registration Flow​

  1. Start both backend and frontend servers
  2. Navigate to http://localhost:3000/register
  3. Click "Continue with Google"
  4. You should be redirected to Google's OAuth consent page
  5. Select a Google account
  6. Grant permissions to STEMBlock.ai
  7. Complete the registration form (role, name, etc.)
  8. Click "Register"
  9. You should be redirected to the appropriate dashboard

Test Login Flow​

  1. Navigate to http://localhost:3000/login
  2. Click "Continue with Google"
  3. Select your Google account (already registered)
  4. You should be automatically logged in

Troubleshooting​

Issue: "Error 400: redirect_uri_mismatch"​

Solution:

  • Verify the redirect URI in Google Cloud Console matches exactly what's in your .env file
  • Check for trailing slashes (they must match exactly)
  • Ensure you're using the correct protocol (http vs https)

Issue: "Google OAuth not configured" warning​

Solution:

  • Verify GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET are set in .env
  • Restart the backend server
  • Check for typos in environment variable names

Security Best Practices​

  1. Never commit credentials: Add .env to .gitignore
  2. Use environment-specific credentials: Different credentials for dev/staging/production
  3. Rotate secrets regularly: Update Client Secret periodically
  4. Use HTTPS in production: Never use HTTP for OAuth in production

Last Updated: November 3, 2025