An example of handling google authentication with React and NodeJS

React Google Login

  • Tech: React + Typescript + NodeJS + Express + Google Auth

Summary

Create a simple React App to Login with Google Account.

  • Save login data in localStorage to remember user login
  • Create backend API using node and express to authenticate user
  • Publish on heroku and test it on Production

Getting Started

  • create an App on Google Cloud Platform
  • using React & Bootstrap to build Frontend
  • using NodeJS & Express to build Backend
  • create an Account on Heroku and Publish

Google Cloud Platform

Frontend: React & Bootstrap

  • crate a React project with typescript tample
      npx create-react-app react-google-login --template typescript
  • import packages (bootstrap)
      npm install react-bootstrap bootstrap --save
  • edit App.js
    • use React Bootstrap to build layout
  • define loginData state hook, read data from localStorage
  • check loginData and render content
    • if loginData is null render GoogleLogin component
    • if loginData isn’t null render you are logged in message
  • implement function handleSuccess, handleLogout, handleFailure

Backend: NodeJS & Express

  • install packages
      npm install -save express dotenv google-auth-library
  • create server/index.js file
  • define dotenv and client in server/index.js

      const dotenv = require('dotenv');
      const path = require('path');
      const { OAuth2Client } = require('google-auth-library');
  • config express server

      const express = require('express');
      ...
      use express.json()
      define app.post('/api/google-auth', ...
      define app.listen
  • *need to add proxy in package.json, it allows FE request to push data into backend
      "proxy": "http://127.0.0.1:5000/"

ENV: .env

REACT_APP_CLIENT_ID=googleid-uuid.apps.googleusercontent.com

Heroku: config and publish

  • Create Procfile and add web: node server/index.js
  • Add config in backend server

      app.use(express.static(path.join(__dirname, '..', 'build')));
      app.get('*', (req, res) =>
        res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))
      );
  • Publish to Github
  • Create an account on heroku and connect it with Github repo
  • Config Vars https://dashboard.heroku.com/apps/{app-name}/settings
    • key: REACT_APP_CLIENT_ID
    • value: Google app #{client_id}
  • Manual deploy: Deploy a GitHub branch

License

Copyright © 2022-01 Encore Shao. See LICENSE for details.