Implementing JWT Authentication with Spring Boot, Angular, and JJWT
This article explains what JSON Web Tokens are, their structure and security best practices, and demonstrates a complete JWT‑based authentication example using Spring Boot on the backend, the JJWT library, and an Angular front‑end, including Maven configuration, Java filter, controllers, and client‑side code.
JSON Web Token (JWT) is a compact, URL‑safe means of representing claims to be transferred between two parties. A JWT consists of three Base64‑URL‑encoded parts: a Header that describes the token type and signing algorithm, a Claims set that carries the payload, and a digital signature (JWS) that protects the token from tampering.
Typical JWT header example:
{"alg":"HS256","typ":"JWT"}When using JWT for authentication, the server signs the token with a secret key and returns it to the client. The client then includes the token in the Authorization: Bearer <token> header for subsequent requests. Security recommendations include always verifying the signature, never storing sensitive data in the payload, using short expiration times, and adding a nonce (jti) to prevent replay attacks.
The JJWT library (Apache‑licensed) provides a fluent API for creating and parsing JWTs in Java. It supports all standard JWS algorithms (HS256, RS256, ES256, etc.) and offers optional extensions such as token compression.
Below is a minimal Maven configuration for the demo project:
<dependencies>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.6.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>1.5.3.RELEASE</version>
</dependency>
</dependencies>Key backend components:
JwtFilter extracts the Authorization header, validates the token with Jwts.parser().setSigningKey("secretkey") , and stores the resulting Claims in the request for downstream handlers.
UserController provides a /user/login endpoint that authenticates a hard‑coded user map and returns a signed JWT containing the username and role list.
ApiController demonstrates role‑based access by reading the claims attribute and checking whether the requested role is present.
Frontend files:
index.html sets up a simple AngularJS app with a login form and displays role‑specific UI elements based on the token.
<!doctype html>
<html ng-app="myApp">
<head>…</head>
<body ng-controller="MainCtrl">
<form ng-submit="login()">
Username: <input type="text" ng-model="userName"/>
<input type="submit" value="Login"/>
</form>
…
</body>
</html>app.js defines the Angular service that posts the username to /user/login , stores the returned token, adds it to the default Authorization header, and queries /api/role/{role} to toggle UI flags.
appModule.service('mainService', function($http) {
return {
login: function(username) {
return $http.post('/user/login', {name: username})
.then(r => r.data.token);
},
hasRole: function(role) {
return $http.get('/api/role/' + role).then(r => r.data);
}
};
});Running the Spring Boot application starts the backend on port 8080. After logging in with the provided usernames (e.g., tom or wen ), the UI shows a success message, the user's roles, and demonstrates protected endpoints. Screenshots in the original article illustrate the token generation, request flow, and final UI state.
Top Architect
Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.