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

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

cd to the project directory

1cd react-express-auth
bash

cd into the client directory & express directory

1cd client
bash

1cd express
bash

Install dependencies for client & express

1npm install
bash

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

1cp .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

1# client
2REACT_APP_GOOGLE_CLIENT_ID=
3
4REACT_APP_SERVER_URL=http://localhost:5000
dotenv

express/.env

1# express
2NODE_ENV=
3
4PORT=5000
5
6DB_DATABASE=
7DB_USERNAME=
8DB_PASSWORD=
9DB_HOST=
10DB_DIALECT=
11
12ACCESS_TOKEN_SECRET_KEY=
13REFRESH_TOKEN_SECRET_KEY=
14
15GOOGLE_CLIENT_ID=
16GOOGLE_CLIENT_SECRET=
17GOOGLE_REDIRECT_URI=http://localhost:5000/api/auth/login/google
dotenv

Create a database

1sequelize db:create
bash

Run the migration

1sequelize db:migrate
bash

Run the client & express

1# client
2npm start
3
4# express
5npm run dev
bash

Screenshots

Sign-In page

Sign-Up page

Dashboard page

Home / Portfolio / React Express Authentication

React Express Authentication