How to Resolve the JWT Cookie Not Stored Issue in Spring Boot and Angular

Discover why your JWT token isn't stored in cookies with Spring Boot and Angular, and learn how to fix it effectively.
---
This video is based on the question https://stackoverflow.com/q/77466802/ asked by the user 'Zut4too' ( https://stackoverflow.com/u/17275094/ ) and on the answer https://stackoverflow.com/a/77469313/ provided by the user 'Zut4too' ( https://stackoverflow.com/u/17275094/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: Unable to set JWT cookie with spring boot

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

Are you struggling to set a JWT cookie in your Spring Boot application while using Angular? If yes, you’re not alone! Many developers encounter this issue where the JWT token generated on the server side is not being stored in cookies in the browser. This guide will help you understand this problem, its causes, and walk you through the necessary steps to resolve it effectively.

The Problem

You successfully create a JWT token during the login process in your Spring Boot application, and it works perfectly fine when tested with tools like Postman. However, when you access the application through your browser, the JWT token fails to appear in the cookies, making it impossible to authenticate subsequent requests from the client side.

Here’s a quick snapshot of your scenario:

Successful JWT token generation on server-side.

Headers received in the response contain the auth token.

No cookies found in the browser's storage.

Analyzing the Code

Let’s break down the relevant portions of your code to see why the issue is occurring.

Spring Boot Code

In your Spring Boot service, you create an authTokenCookie with the JWT token:

[[See Video to Reveal this Text or Code Snippet]]

You correctly create the cookie, set various properties, but are you doing everything necessary to ensure it is sent back to the client?

Angular Code

In your Angular code, you are sending a POST request like this:

[[See Video to Reveal this Text or Code Snippet]]

The omission of a crucial property here can prevent the cookie from being set properly.

The Solution

Step 1: Enable CORS with Credentials

If your application works with CORS (Cross-Origin Resource Sharing), you'll need to ensure that it allows credentials. This can be achieved using one of the following methods:

Method 1: Use @CrossOrigin Annotation

You can enable CORS in your controller method like this:

[[See Video to Reveal this Text or Code Snippet]]

Method 2: Configure WebMvcConfig

Alternatively, you can configure it in your WebMvcConfigurer as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Set withCredentials in Angular

You also need to enable credentials on the Angular side when making your HTTP request. Modify your request like this:

[[See Video to Reveal this Text or Code Snippet]]

Summary

By following the steps above, you can successfully store the JWT token in cookies when using Spring Boot and Angular. Here’s what you achieved with this solution:

Enabled CORS with credentials on the server-side to allow cookies to be shared.

Configured Angular to send requests with credentials enabled.

Conclusion

With these adjustments, your JWT token should now be stored correctly in cookies on the browser when logged in through Angular. Understanding how to handle CORS and cookies securely is crucial for maintaining a safe and functional web application.

In case you run into any other issues, don’t hesitate to reach out with questions. Happy coding!

Видео How to Resolve the JWT Cookie Not Stored Issue in Spring Boot and Angular канала vlogize