0

I have a backend api accessible only via authentication. This is offered through JSON web Token (JWT), once a correct pair of credential is given.

Now I'm developing the frontend for my app using Angular 9. The login is managed by an auth.service which return a JWT if the correct credentials are given.

After the first request to the server (the login request), I set an interceptor for inserting the value of the JWT inside the subsequent request to the api. Now, one of my colleagues says that we must store the token value inside cookie on the browser.

To me, I don't find any reason to do that: why store credentials inside a browser if we already have our interceptor to authenticate requests?

JeffUK
  • 3,030
  • 2
  • 17
  • 28
dc_Bita98
  • 464
  • 2
  • 6
  • 19

3 Answers3

1

The JWT token it's used to allow the Angular application to do http requests that are only allowed for the user authenticated.

Because of that, you will need the JWT after the user has been authenticated.

Then, the interceptor is useful to see if an HTTP request has the JWT before it's going to be executed and if it not add it to the HTTP request.

Now, the question is: Where I stored the JWT in the application in order to not request authentication to the user every time you need to do an HTTP request to the backend server?

There you have two options: Local/Session Storage (not recommended because of security) and Cookies.

Most of Angular/Web courses or blogs show examples using the local/session storage, but it's not recommendable because of security issues. Here it's a nice explanation about that: https://dev.to/rdegges/please-stop-using-local-storage-1i04

Because of that, the best place to store the JWT is the cookie.

German Quinteros
  • 1,546
  • 7
  • 25
1

Edit

I just read your question again and you do not mention localStorage at all. So if your JWT is only stored in memory, it'll be lost when your refresh the page, like MikeOne said in his comment

End edit

If you are already using localStorage, a valid reason would be if you are planning to use angular universal to do server side rendering.

If you render the image server side, local storage does not exist and so your api calls will not have the JWT token included.

This means that the server response will possibly redirect you to the login page even though you are already logged in, or you might briefly see the public version of the page before connected users only content is displayed client side

Regarding the security side of things, have a look at this SO answer

David
  • 28,746
  • 10
  • 68
  • 95
0

So there are several ways to answer this question:

It all comes down to security a little bit. So if you store your JWT token (which should always be no long lived data) in LocalStorage/SessionStorage or a Cookie.

The difference is that LocalStorage/SessionStorage can be accessed from every javascript file on your domain, which can create a cross-site scripting (XSS) security issue if handled incorrectly. To prevent yourself against XSS, I would advice to escape & encode all untrusted data.

So actually ALL communication that goes from your frontend to your backend. In the SPA world it's a standard to NEVER thrust data coming from your frontend and ALWAYS check it in the backend.

For Cookies when using HttpOnly, these cookies can not be accessed through JavaScript. Also make sure to set the Secure flag, so this cookie can only be sent over HTTPS (no-brainer). Of course Cookies have their security issues as well, there you need prevent yourself against cross-site request forgery (CSRF). If you want to know more about this, read up on adding a XSRF-TOKEN in your JWT claim.

In short, I would also advice to go with cookies instead of LocalStorage/SessionStorage.

Some intersting reads:

Maarten Tibau
  • 63
  • 7