Authentication Service with Spring Boot and React client
Published: 2023-04-24 14:12:13

Hello there! Have you ever wanted to build an authentication service using Spring Boot and MongoDB? If so, you’ve come to the right place! In this post, I’m going to show you how to create a simple authentication service using Spring Boot and MongoDB, which you can use as a starting point for your own projects.

## Introduction
This service allows users to register, login and manage their profiles. We will use JWT tokens for authentication and authorization and will store them in a Redis database. Also the user’s data will be stored in a MongoDB database.

## Prerequisites
Before we get started, make sure you have Docker installed. You’ll also need a MongoDB and a Redis database.

> PS: You can use a free MongoDB Atlas account as your primary database.

To build the service, we’ll use the following tools:

- Spring Boot: a popular Java framework for building web applications.
- Maven: a build tool used for testing and running the backend.
- MongoDB: a NoSQL database for storing user data.
- Redis: an in-memory database for storing JWT tokens.
- Docker: a platform for running applications in containers.

## Building the Spring Boot Module
First, we’ll build the backend service. Create a new Spring Boot project using the Spring Initializr. Add the following dependencies to your project:

- Spring Web
- Spring Data MongoDB
- Spring Security
- jjwt: a library for working with JWTs in Java.

Next, Create a new MongoDB database and collection to store user data. In your Spring Boot application, create a new class User with the following fields:

- id: a unique identifier for the user.
- fullName: the user’s full name.
- username: the user’s username.
- password: the user’s password (stored as a hashed value).
- phoneNumber: the user’s phone number.
- birthday: the user’s date of birth.
- bio: a short bio about the user.
Use Spring Data MongoDB to define a repository interface for the User class, which you’ll use to interact with the database.

Implement the registration endpoint. Create a new REST controller class auth controller with a signup method that accepts a JSON payload containing the user’s registration data. Storing hashed password in the database.

Implement the login endpoint. Create a new method signin in the auth controller class that accepts a JSON payload containing the user’s login credentials. Use Spring Security’s AuthenticationManager to authenticate the user’s credentials, and if successful, generate and return a new JWT token.

## Building the React Client
Now, let’s move on to the frontend. Create a new React app using:

```node
npx create-react-app auth-client
cd auth-client
npm start
```

In the src folder, create a new folder called auth . This folder will contain the logic for making API requests and page UIs.

Implement the following functions inside :

- `register`: sends a POST request to the registration endpoint with the user's -registration data.
- `verification`: sends a POST request to the verification endpoint with user's username and verify code.
- `login`: sends a POST request to the login endpoint with the user's login credentials.
- `logout`: clears the JWT token from local storage.

Use the `useState` hook to create state variables page inputs. Use the `onChange` event to update these state variables.

Use the `useEffect` hook to update the isLoggedIn state variable when the component mounts. If a JWT token is stored in local storage, set `isLoggedIn` to `true`.

## Why we save JWT in local storage ?
Because retrieving the token from local storage instead of cookies provides an added layer of security to our application, which is crucial in ensuring the safety and confidentiality of user data.

## Setup
First, to generate credentials for Spring Boot module open a terminal and navigate to the root directory of the project, then run the following command:

```bash
bash generate_passwords.sh
```
This will generate unique passwords for the MongoDB and Redis databases used by the application, as well as JWT credentials.

> PS: Keep in mind that if you’re using a MongoDB Atlas database, you have to update the host and port accordingly.

Replace the KAVENEGAR_YOUR_API_KEY placeholder in the src/main/resources/application-dev.yml file with your Kavenegar API key.

To launch dockerized databases, please run the following command in your terminal:

```bash
docker-compose -f docker-compose-dependency.yml up -d - build
```

To start the Spring Boot module, run the following commands:

```bash
mvn clean install
mvn spring-boot:run
```

Next for the ReactJs app, run the 
following commands:

```bash
npm install
npm start
```

To launch Spring Boot module and the React client inside of containers, open a terminal and navigate to the root directory of each project, then run the following command in your terminal:

```bash
docker-compose up -d --build
```

## Conclusion
To sum up, building an authentication service using Spring Boot is a great way to provide user authentication and management. With a simple React frontend, this project can be a starting point for your own authentication service. Give it a try and have fun building!


## Front-end:
[source code](https://github.com/danial2026/auth-service-react)

## Back-end
[source code](https://github.com/danial2026/auth-service-springboot)