Angular SpringBoot JWT integration (P. 1)

Should you need implement JWT with Angular on front-end and SpringBoot on back-end, this is the blog you need read!

The blog is divided on two parts — Angular and SpringBoot. Angular part is provided here and SpringBoot part is created by my colleague Nouhoun Y. Diarra at https://medium.com/@nydiarra/secure-a-spring-boot-rest-api-with-json-web-token-reference-to-angular-integration-e57a25806c50

You can find the full code at:

Angular https://github.com/ipassynk/angular-springboot-jwt

SpringBoot https://github.com/nydiarra/springboot-jwt

Project Overview

The example application is created using angular-cli and it uses angular2-jwt library as a helper library for handling JWTs for Angular applications. The application provides authentication and authorization use cases for normal and admin users.

Here is the application diagram.

The diagram was generated with ngrev tool. Big Thanks to Minko Gechev.

Angular JWT

https://github.com/auth0/angular2-jwt

angular2-jwt is a small and unopinionated library that is useful for automatically attaching a JSON Web Token (JWT) as an Authorization header when making HTTP requests from an Angular 2 app. It also has a number of helper methods that are useful for doing things like decoding JWTs.

The project uses the following features of Angular JWT:

AuthHttp service that decorates Angular Http service to pass JWT token to SpringBoot server.

JwtHelper to decode the token to retrieve user permissions.

Angular Module

AppModule is an standard Angular module that imports/provides/declares the application features plus it configures Angular JWT library.

export function authHttpServiceFactory(http: Http) {
  return new AuthHttp(new AuthConfig({
    headerPrefix: 'Bearer',
    tokenName: TOKEN_NAME,
    globalHeaders: [{'Content-Type': 'application/json'}],
    noJwtError: false,
    noTokenScheme: true,
    tokenGetter: (() => localStorage.getItem(TOKEN_NAME))
  }), http);
}
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    {
      provide: AuthHttp, 
      useFactory: authHttpServiceFactory, 
      deps: [Http]
    },
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Components

The application contains the following components:

Home component (“/home” route) — default route available to all users

Login component(“/login” route) — login screen

User component (“/user” route) — screen available only to all authenticated users. The component accesses AppDataService to get data available only for authenticated users.

Admin component (“/admin” route) — screen is available only to admin users. The component accesses AppDataService to get data available only for admin users.

Route Guards

Angular Route guards are used to protect the page and redirect user to the login page if the current privileges are insufficient for requested route.

AuthGuard — checks if the user has a valid JWT token. Otherwise it redirects user to the login page. The guard is configured for “/user” and “/admin” routes.

AdminAuthGuard — checks if the user has admin privileges. Otherwise, it redirects user to the login page. The guard is configured for “/admin” route.

Services

AuthenticationService — service that sends authentication request to SpringBoot to get JWT token.

UserService — service that is used to verify if user has a valid JWT token. The service also manages JWT token by adding and removing the token from localStorage. Angular JWT Http service will access the local storage to retrieve the token and pass it to SpringBoot server.

AppDataService — application service that uses Angular JWT AuthHttp service to access application data. City list for users and User list for admins.

Use cases

There are two main use cases: access to user path and admin path that are very similar. Let’s look at user use case.

1. User clicks on User menu
2. Route uses AuthGuard to check if the user is authenticated. AuthGuard uses UserService to check if user has a valid JWT token. UserService returns false and redirects user to LoginComponent
3. LoginComponent shows a login form
4. User fills out the login form and clicks submit.
5. LoginComponent uses AuthenticationService to send username/password to SpringBoot and get JWT token back.
6. Upon on successful login UserService is called to persist the token in local storage and decode the token to check if user has admin rights.
7. The application is able to render the UserComponent
8. UserComponent uses AppDataService to get cities data from SpringBoot.
9. AppDataService uses AuthHttp from Angular JWT to attach the token to JSON API call.

The SpringBoot part of this blog you can find at https://medium.com/@nydiarra/secure-a-spring-boot-rest-api-with-json-web-token-reference-to-angular-integration-e57a25806c50

If you liked this post, you may also like my other blog posts about Angular and RxJS at https://medium.com/@juliapassynkova