How to share localstorage among different subdomains?

Question

We have two separate websites / apps in same domain but different subdomains.

E.g.

https://hello.website.com (Webapp 1)
https://world.website.com (Webapp 2)

What we’d like to do is to login users at Webapp 1 and upon logging in and clicking a button within Webapp 1, we’d like to redirect the user to Webapp 2. However, Webapp 2 needs the same authentication token which is currently stored in the localstorage of Webapp 1. How do I make the localstorage content available to Webapp 2?

Or is there a better way to do this?

Answer 1

Since the domains are not the same, transferring information from the local storage of one of them to another isn't possible directly, but since the sites are on HTTPS, it should be safe and easy enough to send the authentication token as search parameters. For example, when redirecting, instead of redirecting to https://world.website.com, instead take the current authentication token for https://hello.website.com and append it, then redirect:

const url = 'https://world.website.com?token=' + authToken;
window.location.href = url;

(if the authentication token may have special characters in it, you may need to escape them first)

Then, on the other domain, check to see if there's a token in the search parameters, and if so, extract it and save it to localStorage:

const paramsMatch = window.location.href.match(/\?.+/);
if (paramsMatch) {
  const params = new URLSearchParams(paramsMatch[0]);
  const authToken = params.get('token');
  if (authToken) {
    localStorage.authToken = authToken;
  }
}

Because the domains are on HTTPS, putting the token in the URL is mostly safe - eavesdroppers will not be able to see it. But if your server that handles the requests saves logs, you may find it undesirable for the server to have its logs include authentication tokens as a result of this approach.

Another way would be for:

• Webapp 1 to make a POST request to Webapp 2 with the token in the payload (where Webapp 2 has the appropriate CORS settings)
• Webapp 2 generates a new unique URL (that expires after, say, 30 minutes), associates the token with that URL, and responds to the client on Webapp 1 with the URL
• The client receives the response from Webapp 2 and then navigates to the unique URL on Webapp 2 that it was just given
• Webapp 2, when handling the request, sees that the unique URL was associated with a token, and goes through the process of fully associating that token with the request session