Generate JWT and Secure XSRF Token in a Single API Call in Spring and Angular

Developing secure, modern web applications typically involves some intricacies, especially when it comes to authentication and security practices. One common yet powerful approach in Java Spring Boot and Angular applications is generating a JSON Web Token (JWT) and a secure XSRF (cross-site request forgery) token in a single API request. Combining these two tokens in one seamless step can simplify your application’s security process significantly.

Before diving in, let’s get clear on what JWT and XSRF tokens are and why they’re important for your application.

Understanding JWT and XSRF Tokens

When building a modern web application, you often have to authenticate users securely—this is where JWT comes in. A JWT, or JSON Web Token, is essentially a compact and secure mechanism for transmitting information between parties, encoded in JSON format. It’s secure, self-contained, and widely trusted in the industry.

Imagine JWT like your driver’s license—your personal information and permissions are securely encoded. Whenever you need to identify yourself, you hand over basic info without exposing unnecessary sensitive data. JWT tokens follow a similar concept, securely encoding the user’s identity and authentication information.

JWT typically works in three parts:

1. The header (token type and algorithm)
2. The payload (the claims, or user details)
3. The signature (secured by a secret shared between the server and clients)

On the other hand, an XSRF Token (Cross-Site Request Forgery Token) defends your web application against Cross-Site Request Forgery (CSRF) attacks. Think of a CSRF token as a secure handshake uniquely recognizable by your application. If someone maliciously tries to perform harmful actions on behalf of your user, the absence or incorrect presence of this token exposes and blocks the fraudulent attempt.

Combining JWT and XSRF tokens in one request adds streamlined security, ensuring both authentication and robust CSRF protection in your application.

The Logic of Secure Token Generation

Generating the JWT and XSRF tokens in a single API call begins by setting up a secure endpoint using a standard POST method, such as an authentication request like /authenticate. When you successfully log in a user, your backend application generates and sets these tokens.

Here’s how it typically plays out:

1. Your backend (Spring Boot application) validates user credentials.
2. On successful authentication, the application generates a secure JWT token for authenticating subsequent requests.
3. Simultaneously, the application also creates a unique and secure XSRF-TOKEN that is stored in a cookie on your user’s browser.

Your Spring Boot backend then sends this cookie to the browser with the option HttpOnly configured. Setting HttpOnly prevents the cookie from being accessible through client-side scripts, protecting it against potential JavaScript exploits.

Your backend typically creates and configures the cookie automatically instead of leaving the client-side (Angular) to manage it. This automatic creation is crucial because it significantly reduces room for human error or manipulation from client-side vulnerabilities.

In Spring, you could configure your cookie to be strictly sent for same-site requests by using the @Bean annotation in your application security configuration. The SameSite attribute ensures additional protection from CSRF attacks by restricting cookies to the originating site domain.

Implementing Token Generation in Spring Boot and Angular (Code Example)

Here’s a practical example of how your backend method might look within a Spring Boot endpoint that generates JWT and XSRF tokens together:

@PostMapping("/authenticate")
public ResponseEntity<?> authenticate(@RequestBody UserClient userClient, 
                                        HttpServletResponse response, 
                                        HttpServletRequest request) {

    // Authenticate the user
    authenticateUser(userClient.getUsername(), userClient.getPassword());

    // Generate JWT
    final String jwtToken = jwtUtil.generateToken(userClient.getUsername());

    // Create secure XSRF-TOKEN cookie
    Cookie csrfCookie = new Cookie("XSRF-TOKEN", UUID.randomUUID().toString());
    csrfCookie.setHttpOnly(false); // Allow Angular to read via JS
    csrfCookie.setSecure(true); // HTTPS only
    csrfCookie.setPath("/");
    csrfCookie.setSameSite("Strict"); // Strictly first-party only

    response.addCookie(csrfCookie);

    // Send JWT token in response body to store manually by Angular
    Map<String, String> tokenResponse = Collections.singletonMap("jwt", jwtToken);
    return ResponseEntity.ok(tokenResponse);
}

This authenticate() method:

• Accepts a UserClient object containing username/password credentials.
• Generates a secure JWT for the authenticated user.
• Creates a unique XSRF-TOKEN cookie, setting it securely (HTTPS-only and strict SameSite policy).
• Sends the JWT in the response body for your Angular front-end to store in local storage or session storage.

On the Angular side, you’d manually handle JWT storage by reading the response body and saving it into local storage. This approach keeps the JWT safely separated from cookies, improving overall security.

Here’s how simple Angular logic might look:

login(user: any) {
    return this.http.post('/backend/authenticate', user, { observe: 'response' })
        .subscribe(response => {
            localStorage.setItem('jwt', response.body.jwt);
            // Angular reads XSRF token from cookie automatically afterward
        }, error => {
            // Handle errors (e.g., incorrect credentials)
            console.error('Authentication failed.');
        });
}

Your Angular application typically reads the XSRF cookie automatically when making subsequent requests (Angular’s built-in XSRF support handles this seamlessly). Manual JWT storage allows easy retrieval and secure API calls leveraging HTTP headers.

Additional Security Considerations and Best Practices

You might wonder if it’s ever wise to separate token creation into two distinct endpoints. Doing that might seem beneficial if maintaining singularity of concerns, but it also introduces extra complexity and increases room for error. By combining the JWT and XSRF tokens into one endpoint, you streamline security logic, reducing potential vulnerabilities and improving maintainability.

Here’s a small comparison of separating vs. combined tokens:

Ultimately, ensure robust security practices and follow widely accepted guidelines such as those from OWASP cheat sheets:

• Always mark sensitive cookies as HttpOnly/Secure.
• Use Strict SameSite cookie policy.
• Store JWT separately from cookies (local storage/session storage) to protect tokens.
• Continuously monitor and upgrade security standards and protocols.

Because combining JWT authentication with XSRF protection is a crucial step, Spring Boot and Angular make an excellent combination. Their reliability and built-in security mechanisms greatly simplify production-ready applications, allowing you to focus on feature development rather than extensive security troubleshooting.

Generating JWT and the secure XSRF token simultaneously gives you maximum security with minimal complexity—fundamental for any robust web application.

Ready to further level up your JavaScript skills? Explore additional resources about JavaScript and modern web development techniques in our curated JavaScript articles category.

Which security practice do you prefer—combined tokens or separate endpoints? Drop your thoughts or questions in the comments below!