ProjectReactJS

React Express Authentication

Implement authentication in a React and Express app using JWT, integrate Google OAuth2, and manage state with Redux Toolkit.

Stack

ReactJS
ExpressJS
Year
2022

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

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

cd to the project directory

Terminal
cd react-express-auth

cd into the client directory & express directory

Terminal
cd client

Terminal
cd express

Install dependencies for client & express

Terminal
npm install

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

Terminal
cp .env.example .env

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

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

Create a database

Terminal
sequelize db:create

Run the migration

Terminal
sequelize db:migrate

Run the client & express

Terminal
# client
npm start
 
# express
npm run dev

Screenshots

Sign-In page
Sign-In page
Sign-Up page
Sign-Up page
Dashboard page
Dashboard page