JWT authentication in Spring Security and Angular
Tags: java, springsecurity, angular, springboot
Published: 2021-08-15 16:48:47

This blog post explains the JSON web token(JWT) authentication using Spring Security, Spring Boot, Spring Data and Angular. Source code uploaded to [**Github repository**](https://github.com/pavankjadda/JwtSpringSecurity)

![](https://miro.medium.com/max/2000/1*6gwkLU-cKHxz9vjaaZ0olQ.jpeg)Image by [MasterTux](https://pixabay.com/users/MasterTux-470906/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3348307) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3348307)

Introduction
============

JSON Web Token (JWT) is an open standard ([RFC 7519](https://tools.ietf.org/html/rfc7519)) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the **HMAC** algorithm) or a public/private key pair using **RSA** or **ECDSA**.

JWT Token structure
===================

In its compact form, JSON Web Tokens consist of three parts separated by dots (`.`), which are:

*   Header
*   Payload
*   Signature

Therefore, a JWT typically looks like the following.

`xxxxx.yyyyy.zzzzz`

Header
------

The header _typically_ consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.

For example:

```
{  
  "alg": "HS256",  
  "typ": "JWT"  
}
```

Then, this JSON is **Base64Url** encoded to form the first part of the JWT.

Payload
-------

The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. There are three types of claims: _registered_, _public_, and _private_ claims.

Signature
---------

To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that. Please read [https://jwt.io/introduction/](https://jwt.io/introduction/) for detailed workflow and description

Technologies
============

1.  Spring Boot 2.2.x
2.  Spring Security
3.  Spring Data JPA
4.  [**Java JWT library**](https://github.com/jwtk/jjwt)
5.  H2 embedded database

Implementation
==============

There are many open-source JWT implementations available for [**all languages**](https://jwt.io/#libraries). In this blog post, we use Java [**jjwt**](https://github.com/jwtk/jjwt) library in this blog post.

pom.xml

1.  Create an empty spring boot project with spring boot, security dependencies and add dependencies as shown above
2.  Create **UserController** class that accepts username and password parameters and authenticates users through **UsernamePasswordAuthenticationToken** class

```
@PostMapping(value = {**"/authenticate"**,**"/login"**})  
**public** Object loginUser(@RequestParam String username, @RequestParam String password)  
{  
   Authentication authentication=**authenticationManager**.authenticate( **new** UsernamePasswordAuthenticationToken(username, password));  
     
**return** mapUserAndReturnJwtToken(authentication,**true**);  
}
```

4\. Create SecurityConfig class(shown below) that defines standard Spring Security configuration for the project.

5\. Method `public void configure(HttpSecurity http)`allows all requests to login URLs since authentication is being done manually through in **UserController** class

SecurityConfig.java

6\. [**JwtUtil**](https://github.com/pavankjadda/JwtSpringSecurity/blob/master/src/main/java/com/pj/jwt/security/JwtUtil.java) class is responsible to issue and validate the tokens. In particular, `createToken()` method creates token with 24 hours expiration and sign with **custom key** from properties file(make sure keep this long and hard to guess)

JwtUtil.java

7\. `validateToken()` method validates the supplied token by validating the expiration date

8\. Create **JwtRequestFilter** filter that intercepts all requests from client and looks for **Bearer** token. If the token is present, **extract the username** and validate the expiration date.

9\. If the token is valid, create new **UsernamePasswordAuthenticationToken** and set **userDetails** and **userDetails** authorities. Save this as Spring Security authentication object, which tells spring security that this user is authenticated and continue with security chain.

10\. In order for this filter to work, in **SecurityConfig** add it before **UsernamePasswordAuthenticationFilter**

```
http.addFilterBefore(**jwtRequestFilter**,UsernamePasswordAuthenticationFilter.**class**);
```

11\. To show case the demo, generated Angular project with 2 pages. Login and Home page

**Testing**
===========

1.  This project uses in H2 memory database as database. And `schema.sql` file in **src/main/resources** directory creates the required tables and `data.sql` file inserts sample users and roles
2.  Run the spring boot class **JwtSpringSecurityApplication** to start the application
3.  Now go to [http://localhost:8080/h2-console](http://localhost:8080/h2-console) to see the database and enter the credentials(shown below)

![](https://miro.medium.com/max/1400/1*lPEvNfSRUUCIBN1dLwKY8A.png)h2 in memory database

4\. Check the existing users with the query `SELECT * FROM CORE_USER.` If you do not see any results, copy SQL statements from `data.sql` in **src/main/resources** and execute it

5\. Now go to **src/webapp** directory and install all dependencies

```
$ npm install
```

6\. Start the Angular application with the following command

```
$ npm run start --watch
```

7\. Now go to [http://localhost:4200](http://localhost:4200) and you will be redirected to login page

8\. Enter credentials **admin/admin** and you will be redirected to home page.

9\. In home page, during initial load **we use the token** from previous page(stored as cookie) and get user information by presenting that token to spring boot application(just to make sure that token is valid)

9\. See the network tab for JWT token with expiration date

![](https://miro.medium.com/max/2000/1*lwZQ-xI1bqoPs6GI9kKSpw.png)Home page

Conclusion
==========

Code is uploaded to [Github](https://github.com/pavankjadda/JwtSpringSecurity) for reference, Happy Coding :)