login-template

Registration and Login with React and Springboot

Table of Contents

1. Features
2. Quick Demo
3. Architecture
4. Getting Started
   • Before you start
     • Backend
     • Frontend
   • Installation guide
     • Google Signin
     • Twilio Account
     • Sending an Email using your Google account
     • Generating JWT Secret Key
5. Contributing
6. License

Features

1. Custom Login and Registraion
2. OAuth2 Login with Google
3. Email Notification Generation on Custom Signup/Login using Java Mail Sender
4. Customizable Email Template
5. Phone notification on custom Signup/Login using Twilio

Demo

1. Login with Google

2. Email Notification

3. Phone Notification

Architechture

Backend is built using Java Springboot with Postgres DB. And frontend is built using React

Key Architechture decisions

1. Strategy Design Pattern to implement different login strategies i.e. Custom Login/ Login using Google
2. Event driven programming/Observer pattern is used to generate async email and mobile notifications without slowing down the main flow
3. Liquibase is for Postgres DB change management to easily sync the changes if there are multiple db involved(i.e. dev, qa, prod)
4. OAuth2 flow is used for Login via Google

Low Level Backend System Design

If you want to understand how different components are communication with each other, you can view the detailed low level diagram below:

Google OAuth2 Flow

1. Frontend requests the ID token from Google
2. Google returns the ID token in the callback
3. Frontend sends the ID token to the backend
4. Backend validates the ID token received from the client
5. Backend creates an account in the databse
6. Backend generates a custom JWT
7. Backend sends the custom JWT in the header to the client
8. Client includes the JWT in the request header for API requests
9. JWT filter validates the JWT in each client request header

Here's how OAuth2 flow works:

Getting Started

Below is an example of how you can setup the project locally.

Before you start

This project contains third party integrations. You need to gnerate the relevant API keys and add them in the project

Google Signin

If you want to use this module, first you have to generate the Google OAuth2 credentials. Refer to this guide for assistance: Google OAuth Credentials. While configuring 'Authorized JavaScript origins' in the Google Developer Console's Credential settings, remember to add both http://localhost and http://localhost:3000. After generating the client id:

1. Update <CLIENT_ID> in GoogleLogin.js with your Google client ID in the React app
2. Also replace with your client id in the application.properties in the Springboot app app.googleClientId=<GOOGLE-CLIENT-ID>

Twilio Account

To send messages on phone numbers, you need to configure Twilio account. Follow this guide for reference: Twilio SMS After creating the account, you will get a Twilio number, sid and token, add them to the application.properties in the Springboot app

twilio.sms.sender=<TWILIO-GENERATED-NUMBER>
twilio.sid=<TWILIO-SID>
twilio.token=<TWILIO-TOKEN>

Sending an Email using your Google account

If you want to send email notifications using your Google account (i.e. maleehakdev@gmail.com), you need to enable 2 factor authentication on your Gmail account and create a app password. For more information, visit Google docs. Once you get the app password, place it in the application.properties in the Springboot app

spring.mail.password=<YOUR_PASSWORD>

Generating JWT Secret Key

Use this website to generate the JWT secret key and place it in the application.properties in the Springboot app

security.jwt.secret-key=<SECRET-KEY>

Installation guide

Backend

1. Install and setup Java 11 on your system
2. Clone the repo

   git clone https://github.com/Maleehak/login-template.git

3. Run the below command to start up the backend application:

   mvn clean install
   mvn spring-boot:run

Frontend

1. Install NPM packages

   npm install

2. Point the application to local backend server to call the APIs

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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