React Express Authentication

This is a simple authentication with ReactJS and ExpressJS. This project is using JWT for authentication (Access Token and Refresh Token) and OAuth2 with Google for authorization. This project is also using Redux Toolkit for state management.

Using the new Google Identity Services for Web (GSI) for authentication.

Live demo : Not available yet.

Source code : GitHub

Features

Authentication with Google OAuth2

Tech Stack

Prerequisites

Installation and Usage

Clone the repository

git clone https://github.com/raprmdn/react-express-auth.git

bash

cd to the project directory

cd react-express-auth

bash

cd into the client directory & express directory

cd client

bash

cd express

bash

Install dependencies for client & express

npm install

bash

Copy .env.example to .env for both client & express

cp .env.example .env

bash

Configure the .env file for both client & express

Get the Google Client ID and Google Client Secret from Google Cloud Platform. Then, paste to the following environment variable in the .env file.

client/.env

# client
REACT_APP_GOOGLE_CLIENT_ID=
 
REACT_APP_SERVER_URL=http://localhost:5000

dotenv

express/.env

# express
NODE_ENV=
 
PORT=5000
 
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=
DB_HOST=
DB_DIALECT=
 
ACCESS_TOKEN_SECRET_KEY=
REFRESH_TOKEN_SECRET_KEY=
 
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URI=http://localhost:5000/api/auth/login/google

dotenv

Create a database

sequelize db:create

bash

Run the migration

sequelize db:migrate

bash

Run the client & express

# client
npm start
 
# express
npm run dev

bash

Screenshots

Sign-In page

Sign-Up page

Dashboard page

October 31, 2022

React Express Authentication