Skip to content

Setting up Google OAuth

Use this when your project needs "Sign in with Google" - users authenticate with their Google account and your app receives an ID token / profile info.

Prerequisites

  • Access to the WDCC tech Google account
  • Your app's local dev URL (e.g. http://localhost:3000) and any deployed domains

In Google Cloud Console

  1. Sign in to console.cloud.google.com using the WDCC tech account.
  2. From the project dropdown at the top, select your project. If the project doesn't exist yet, create a new one named after the project (e.g. ayo).

  3. In the left nav, go to APIs & Services -> OAuth consent screen and complete the consent screen setup if it hasn't been done yet.

    Consent screen settings

    • User type: External
    • App name: project name (e.g. Ayo)
    • User support email: WDCC tech email
    • Developer contact: WDCC tech email
    • Scopes: at minimum userinfo.email and userinfo.profile

  4. Go to APIs & Services -> Credentials -> Clients. If a client doesn't exist, click Create Credentials -> OAuth client ID and select Web application.

  5. Configure the client with the following:

    Authorised JavaScript Origins

    Domains allowed to initiate OAuth from the browser. Add every origin the app runs on. 

    http://localhost:3000
https://<project>.wdcc.co.nz

    Authorised redirect URIs

    Endpoints Google will redirect back to after auth. Must match what your backend handles exactly (including path). 

    http://localhost:3000/api/auth/google/callback
http://localhost:5173/api/auth/google/callback
https://<project>.wdcc.co.nz/api/auth/google/callback

  6. Save. Copy the Client ID and Client secret shown.

In the Repository

  1. Add the client credentials to your local .env:

    GOOGLE_CLIENT_ID=<client-id>
GOOGLE_CLIENT_SECRET=<client-secret>

  2. For deployment, add the same values as fly secrets:

    fly secrets set GOOGLE_CLIENT_ID=<client-id> GOOGLE_CLIENT_SECRET=<client-secret> -a <app-name>

Troubleshooting

redirect_uri_mismatch error

The redirect URI your app sent doesn't exactly match one configured in the console. Check protocol (http vs https), port, and trailing slashes.

Access blocked: app not verified

Consent screen is in testing mode. Either add the user's email under Test users on the consent screen, or publish the app.

Google Service Accounts

Used for server-to-server access to Google APIs (e.g. reading/writing a Google Sheet) without a user signing in.

Found under IAM & Admin -> Service Accounts in the Google Cloud Console.

TODO

Write full setup once we actually use this in a project (key generation, scope grants, sharing the target Sheet/Drive resource with the service account email).