Skip to main content

Enable Sign In with Google

This requires adding the authentication feature on Firebase.

Step 1 Screenshot of firebase project products

Step 2 Screenshot select firebase authentication

Step 3 Screenshot select google login

Step 4 Screenshot prompt for public name and support email

Step 5 Screenshot google login created for your application

Step 6 Screenshot of supported domain for your project

Visit the Google APIs page to update the OAuth credentials for your project.

https://console.cloud.google.com/apis

Screenshot of google API management console

Add domain and redirect URI to the Oauth credentials created by Firebase.

Screenshot of adding allowed domain

Screenshot of adding redirect URI

This is where we could find your GOOGLE_SIGN_IN_CLIENT_ID and GOOGLE_SIGN_IN_CLIENT_SECRET.

Screenshot of where to find client id and secrets

Configure the environment variables to enable Sign In with Google.

For frontend client.

.env.emulator

VITE_USE_MOCK=false

.env.production

VITE_USE_MOCK=false

For backend API server.

Find your Google Oauth credentials from the console located at https://console.cloud.google.com/apis

Use these values to populate the following:

  • GOOGLE_SIGN_IN_CLIENT_ID
  • GOOGLE_SIGN_IN_CLIENT_SECRET

.env.local

GOOGLE_SIGN_IN_CLIENT_ID=<FROM GOOGLE WEB API>
GOOGLE_SIGN_IN_CLIENT_SECRET=<FROM GOOGLE WEB API>
USE_MOCK=false

.env

GOOGLE_SIGN_IN_CLIENT_ID=<FROM GOOGLE WEB API>
GOOGLE_SIGN_IN_CLIENT_SECRET=<FROM GOOGLE WEB API>
USE_MOCK=false

Now, re-deploy to our remote or local environment for this to take effect.

For local environment, we will need to restart the emulator for the backend API server to pick up the changes in environment variables.