API Reference

Google Auth

1.1.

Create a Google Cloud Project

  • Go to https://console.cloud.google.com and click "Create Project"

  • Fill out the required project name and organization information

  • Select a unique project ID or let Google generate a random one

  • Choose a billing account or enable billing if you don't have one setup

  • Click "Create" to provision the new project

    1.2.

Configure OAuth consent screen

  • From the side menu, go to APIs & Services > Credentials > OAuth consent screen

  • Select "Internal" or "External" consent depending on app access

  • Enter a product name that identifies your app

  • Add your app's website URL to be authored for login

  • Upload an app icon image of size 128x128 pixels

  • Fill out email, address and privacy policy URL details

  • Click "Save and Continue" and "Back to Dashboard" to publish

    1.3.

Create an OAuth client ID

  • From side menu, go to APIs & Services > Credentials > Create Credentials > OAuth client ID

  • Select "Web application" as the application type

  • Authorized JavaScript origins = your React app domain

  • Authorized redirect URIs = your-app-domain/auth/google/callback

  • Click "Create" to generate the client ID and secret

  • Copy and save both values somewhere safe

    1.4.

  • Install passport and passport-google-oauth20

  • Navigate to your app folder in terminal

  • Run npm install passport passport-google-oauth20

  • This installs and saves both libraries to package.json

    1.5.

  • Configure passport strategy

  • Create a passport.js file to initialize passport

  • Add Google strategy with the client ID and secret

  • Specify callback URL route

  • Save and import passport file in app.js

    1.6.

Create Google login routes

  • Add GET route for login linked to Google button

  • Add GET route for callback with serialize/deserialize

  • Add passport.authenticate middleware to both routes

  • Add session saving on successful authentication

    1.7.

Add Google login button

  • Import useHistory from React router dom

  • Add button linked to Google login route

  • Display "Log in with Google" text

    1.8.

Save user profile on login

  • Add user model in MongoDB with email, name, picture etc

  • On deserialize, save profile to database

  • Add redirect to return successful login

    1.9.

Test Google Authentication

  • Add logout, profile routes with passport
  • Click login, grant access on consent screen
  • Verify profile is saved on login
  • Logout works properly