Login App with JWT and One Tap Login Client

Note that this is the client side of the app. The server side can be found JWT Login Node Service.

This is a simple login app using JWT authentication with Sign in / Sign up, Sign in with Google and One Tap Login and Sign in with Facebook. The app is built with Node.js, Express, PostgreSQL, Sequelize ORM, JWT, Google One Tap and Facebook OAuth.

The app is built with Vite and React. The UI is built with Next UI and Tailwind CSS. The animations are done with Framer Motion.

The server side is deployed on Heroku and the client side is deployed on netlify. The app can be found here.

Table of Contents

• Features
• Screenshots
• Prerequisites
• Api Reference
• Installation
• Configuration
• Usage
• Built With Vite and React
• License

Features

• Sign in / Sign up with email and password
• Sign in with Google
• One Tap Login
• Sign in with Facebook
• JWT authentication
• React Router

Screenshots

Home Page Sign in

Home Page Sign up

Loading Screen

User Data

Prerequisites

• Node.js
• PostgreSQL
• Google One Tap
• Facebook OAuth
• Google People API

Api Reference

• Google Api - https://medium.com/analytics-vidhya/adding-sign-in-with-google-to-your-website-b82755b79b31
• Facebook SDK - https://dev.to/quod_ai/how-to-integrate-facebook-login-api-into-your-react-app-33de

Installation

1. Clone the repo

git clone https://github.com/SaiBarathR/login-page-with-jwt-auth-one-tap-sign-in.git

2. Install NPM packages

cd login-page-with-jwt-auth-one-tap-sign-in

npm install

Configuration

Environment variables

• Create a .env file in the root directory of the project.
• Add the following environment variables to the .env file.

VITE_APP_GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID 

VITE_APP_FACEBOOK_APP_ID=YOUR_FACEBOOK_APP_ID

VITE_APP_BASE_URL=http://localhost:[Port of node server]/api

Usage

1. Run the app

npm run dev

2. Open http://localhost:3000 to view it in the browser.

Built With Vite and React

• React
• React Router
• Tailwind CSS
• Next UI
• Framer Motion
• JWT Decode
• React OAuth Google
• Vite

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Sai Barath - LinkedIn