An example of handling google authentication with React and NodeJS.
Create a simple React App to Login with Google Account.
localStorage
to remember user loginnode
and express
to authenticate userProject Name
and Developer Contact
API Credential
with Oauth Client ID
, selecting Web Application
Web Application
.env
file and save it as REACT_APP_CLIENT_ID
npx create-react-app react-google-login --template typescript
npm install react-bootstrap bootstrap --save
GoogleLogin
componenthandleSuccess
, handleLogout
, handleFailure
npm install -save express dotenv google-auth-library
server/index.js
filedotenv
and client
in server/index.js
const dotenv = require('dotenv');
const path = require('path');
const { OAuth2Client } = require('google-auth-library');
express
server
const express = require('express');
...
use express.json()
define app.post('/api/google-auth', ...
define app.listen
proxy
in package.json
, it allows FE request to push data into backend
"proxy": "http://127.0.0.1:5000/"
REACT_APP_CLIENT_ID=googleid-uuid.apps.googleusercontent.com
web: node server/index.js
app.use(express.static(path.join(__dirname, '..', 'build')));
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))
);
heroku
and connect it with Github repoCopyright © 2022-01 Encore Shao. See LICENSE for details.