# Angular, Spring Boot: JWT Authentication with Spring Security example

### Flow for User Registration and User Login

The diagram shows flow for User Registration process and User Login process.

![spring-boot-authentication-jwt-spring-security-flow](https://bezkoder.com/wp-content/uploads/2019/10/spring-boot-authentication-jwt-spring-security-flow.png)

I think it’s not too difficult to understand. We have 2 endpoints for authentication:

* `api/auth/signup` for User Registration
* `api/auth/signin` for User Login

If Client wants to send request to protected data/endpoints, a legal JWT must be added to HTTP Authorization Header.

### Spring Boot & Spring Security for Back-end

#### Overview

Our Spring Boot Application can be summarized in the diagram below:

![spring-boot-authentication-spring-security-architecture](https://bezkoder.com/wp-content/uploads/2019/10/spring-boot-authentication-spring-security-architecture.png)

Let me explain it.

**Spring Security**

– [`WebSecurityConfigurerAdapter`](https://docs.spring.io/spring-security/site/docs/current/api/org/springframework/security/config/annotation/web/configuration/WebSecurityConfigurerAdapter.html) is the crux of our security implementation. It provides [`HttpSecurity`](https://docs.spring.io/spring-security/site/docs/current/reference/htmlsingle/#jc-httpsecurity) configurations to configure cors, csrf, session management, rules for protected resources. We can also extend and customize the default configuration that contains the elements below.

– [`UserDetailsService`](https://docs.spring.io/spring-security/site/docs/current/reference/htmlsingle/#tech-userdetailsservice) interface has a method to load User by *username* and returns a `UserDetails` object that Spring Security can use for authentication and validation.

– `UserDetails` contains necessary information (such as: username, password, authorities) to build an Authentication object.

– [`UsernamePasswordAuthenticationToken`](https://docs.spring.io/spring-security/site/docs/current/api/org/springframework/security/authentication/UsernamePasswordAuthenticationToken.html) gets {username, password} from login Request, `AuthenticationManager` will use it to authenticate a login account.

– [`AuthenticationManager`](https://docs.spring.io/spring-security/site/docs/current/reference/htmlsingle/#core-services-authentication-manager) has a `DaoAuthenticationProvider` (with help of `UserDetailsService` & `PasswordEncoder`) to validate `UsernamePasswordAuthenticationToken` object. If successful, `AuthenticationManager` returns a fully populated Authentication object (including granted authorities).

– [`OncePerRequestFilter`](https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/filter/OncePerRequestFilter.html) makes a single execution for each request to our API. It provides a `doFilterInternal()` method that we will implement parsing & validating JWT, loading User details (using `UserDetailsService`), checking Authorizaion (using `UsernamePasswordAuthenticationToken`).

– [`AuthenticationEntryPoint`](https://docs.spring.io/spring-security/site/docs/current/api/org/springframework/security/web/AuthenticationEntryPoint.html) will catch unauthorized error and return a 401 when Clients access protected resources without authentication.

**Repository** contains `UserRepository` & `RoleRepository` to work with Database, will be imported into **Controller**.

**Controller** receives and handles request after it was filtered by `OncePerRequestFilter`.

– `AuthController` handles signup/login requests

– `TestController` has accessing protected resource methods with role based validations.

#### Technology

To implement the server with concept above, we will use:\
– Java 8\
– Spring Boot 2.1.8.RELEASE (with Spring Security, Spring Web, Spring Data)\
– jjwt 0.9.1\
– PostgreSQL/MySQL\
– Maven 3.6.1

#### Project Structure

The structure of Spring Boot back-end project is pretty complicated:

![spring-boot-authentication-spring-security-project-structure](https://bezkoder.com/wp-content/uploads/2019/10/spring-boot-authentication-spring-security-project-structure.png)

You can see that there are 5 packages:

**security**: we configure Spring Security & implement Security Objects here.

* `WebSecurityConfig` extends `WebSecurityConfigurerAdapter`
* `UserDetailsServiceImpl` implements `UserDetailsService`
* `UserDetailsImpl` implements `UserDetails`
* `AuthEntryPointJwt` implements `AuthenticationEntryPoint`
* `AuthTokenFilter` extends `OncePerRequestFilter`
* `JwtUtils` provides methods for generating, parsing, validating JWT

**controllers** handle signup/login requests & authorized requests.

* `AuthController`: @PostMapping(‘/signin’), @PostMapping(‘/signup’)
* `TestController`: @GetMapping(‘/api/test/all’), @GetMapping(‘/api/test/\[role]’)

**repository** has intefaces that extend Spring Data JPA `JpaRepository` to interact with Database.

* `UserRepository` extends `JpaRepository`
* `RoleRepository` extends `JpaRepository`

**models** defines two main models for Authentication (`User`) & Authorization (`Role`). They have many-to-many relationship.

* `User`: id, username, email, password, roles
* `Role`: id, name

**payload** defines classes for Request and Response objects

We also have **application.properties** for configuring Spring Datasource, Spring Data JPA and App properties (such as JWT Secret string or Token expiration time).

#### Implementation

You can find step by step to implement this Spring Boot – Spring Security App in the post:\
[Secure Spring Boot App with Spring Security & JWT Authentication](https://maissen.gitbook.io/maissen-grimoire/spring-boot-grimoire/spring-boot-token-based-authentication-with-spring-security-and-jwt)

### Angular 8 for Front-end

#### Overview

Our Angular 8 App can be summarized in component diagram below:

![angular-8-jwt-authentication-overview](https://bezkoder.com/wp-content/uploads/2020/01/angular-8-jwt-authentication-overview.png)

Let’s try to understand it right now.

– The `App` component is a container using `Router`. It gets user token & user information from *Browser Session Storage* via `token-storage.service`. Then the navbar now can display based on the user login state & roles.

– `Login` & `Register` components have form for submission data (with support of *Form Validation*). They use `token-storage.service` for checking state and `auth.service` for sending signin/signup requests.

– `auth.service` uses Angular HttpClient (`$http` service) to make authentication requests.\
– every HTTP request by `$http` service will be inspected and transformed before being sent by `auth-interceptor`.

– `Home` component is public for all visitor.

– `Profile` component get `user` data from *Session Storage*.

– `BoardUser`, `BoardModerator`, `BoardAdmin` components will be displayed depending on `roles` from *Session Storage*. In these components, we use `user.service` to get protected resources from API.

#### Technology

– Angular 8\
– RxJS 6

#### Project Structure

This is the folder structure of our Angular front-end project:

![angular-8-jwt-authentication-project-structure](https://bezkoder.com/wp-content/uploads/2020/01/angular-8-jwt-authentication-project-structure.png)

You can understand it properly without any explanation because we’ve looked at the overview before.

#### Implementation

You can find step by step to implement this Angular 8 App in the post:\
[Angular 8 JWT Authentication with HttpInterceptor and Router](https://maissen.gitbook.io/maissen-grimoire/angular-grimoire/bits-of-code/authentification/angular-8-jwt-authentication-with-httpinterceptor-and-router)

### Further Reading

{% embed url="<https://bezkoder.com/angular-spring-boot-file-upload/>" %}
