Setar localStorage in different Omains

Question

I have three applications:

1. Login (which runs on door 8080) with jQuery very simple

2. API (wheel at port 4000) with Nodejs

3. Web (rotating at port 4200) with Angular

When I am logged in and click on "Log in", will call the API, validate if the user exists, if success will return a JWT token. When you return this token, I need to set it to localStorage, then redirect it to the web application.

The problem with this is that they are different ports, if I set in the login application’s localStorage and then redirect to the web application, the token will no longer exist in the localStorage.

How can I solve this problem?

Answer 1

The API localStorage() is executed by the browser on the "Politics of Same Origin" (Same-Origin) so even if the application runs in the same domain (example.com) ports and subdomains are treated as different sources.

To get around this you can work on some solution that makes use of <iframe> and postMessage() to synchronize the data of localStorage().

There are several libraries that do just this as for example to Cross Domain Local Storage however, if its sole purpose is to confer the "token" just save this "token" in a cookie that it will be available for every domain, subdomains and ports.

Remember that JWT "tokens" have time markup for validation as well as you could create some basis to control outgoing and already used "tokens".

You can remove the cookie once using the "token", if using this approach do not forget to use (case in production) a cookie on the flags HTTPONLY (for the server only), SECURE (only about TLS) and even SAMESITE.