Json Web Token authentication and redirection after login

Question

I recently read Cookies vs Tokens for Angularjs and implemented a login and authentication element that allows users to log in from the login page. The application is configured to create an accounting module (responsible for entering the system, account, profile, etc.) as a separate page that will be redirected to the SPA for the main application.

After a successful subscription, the token is sent back to the client on the login page as a JWT, and sessionStorage / localStorage values ​​are set via js. Finally, the user is redirected (also via js) to the main application. The problem is that I redirect via js, the header cannot be set, which obviously does not allow authorization in the main application when the page loads (since my middleware is higher than static and auth api requests). If I try to redirect from the server after the form message, and not return the token via JSON upon successful completion, sessionStorage will not be installed via js, as described in the blog post.

I came up with two ideas and wanted to know which one is best practice.

• On the server, set the cookie response authentication file "Only http" (our browser requirements allow it) cookie, which is read on the next request of the main application. Then the cookie will be read by the server and allowed to serve secure static assets. My initial thought was that cookie aims to use the authorization header for each request, as time cookie can be read, even if it was removed in the first request api.

• Allow loading of the previously mentioned static assets without authentication (html, css, application js) and the first internal API request (which is required almost immediately during loading in the application), which will then be accessed via Angular $ http interceptors to set the request authorization header. The same interceptor may be redirected to the page with the caption, if 401 is sent back.

I thought that the second option is more simple, because it will only need to move the middleware auth for static intermediate software, and then upgrade http-interceptor in Angular, but thought it might be a bad practice to have static files to download, and then redirects after the fact. Any input is appreciated.

Answer 1

In response to your point 1

... My initial thought was that the cookie defeats the purpose of using the Authorization Header for each request, since there is a time cookie can be read, even if it was deleted on the first api request.

The use of an authorization header is not mutually exclusive for the use of cookies. The idea is to use it when it is best suited for the problem, for example, in single-page applications and in-house mobile applications. However, since it depends on some client storage, preferably sessionStorage, it is recommended that cookies are sometimes used to store the token if there are problems using sessionStorage, as in older browsers. Therefore, while you use a cookie to store a token, but NOT for authentication, you have not defeated the target. See. Point 1 in the following article https://auth0.com/blog/2014/01/27/ten-things-you-should-know-about-tokens-and-cookies/

If you're interested, but if I save the token in a cookie, I’ll go back one square. "Not really, in this case you use cookies as a storage mechanism, and not as an authentication mechanism (i.e. the cookie will not be used by the web framework for user authentication, therefore, there is no XSRF attack)