title: React Microfronends: How do I pass authentication and other information from one Front end app to another Front end app?
body: <p>I am working on a system that consists of different backend microservices and a few inter-linked micro-frontend apps (all of them built with ReactJS).</p>
  <p>Below is my use case (for brevity, I'm just listing the frontend apps here and leaving out the backend services):</p>
  <p>We have the following apps:</p>
  <ol>
  <li><a href="https://id.example.com" rel="nofollow noreferrer">https://id.example.com</a> - The frontend that handles user login, profile management and presents the user with a dashboard with links to the modules he/she has access to. The dashboard has links, such as <code>Settings</code>, <code>Tickets</code>, <code>Campaigns</code>, <code>Analytics</code>, etc.</li>
  <li>We use an OAuth2 server for authentication that gives us an <code>access_token</code> and a <code>refresh_token</code>. Once these tokens are obtained, the dashboard screen is shown</li>
  <li>Now, the user clicks <code>Tickets</code>, which must redirect to <a href="https://tickets.example.com" rel="nofollow noreferrer">https://tickets.example.com</a></li>
  </ol>
  <p>When the redirect happens, I need to be able to pass the authentication information (obtained from <a href="https://id.example.com" rel="nofollow noreferrer">https://id.example.com</a>) to the Tickets app (at <a href="https://tickets.example.com" rel="nofollow noreferrer">https://tickets.example.com</a>), so that the tickets app can validate the token when it loads up.</p>
  <p>I understand I can redirect the user to <code>https://tickets.example.com?token=&lt;auth_token&gt;&amp;refresh_token=&lt;refresh_token&gt;</code>, but I am not sure if that is a secure way of doing it.</p>
  <p>Tried using <code>localStorage</code>, but seems they are also tied up to the host and I was unable to get value from the <code>localStorage</code> of <code>id.example.com</code> from within <code>tickets.example.com</code></p>
  <p>Also, the micro-frontends are deployed separately each with its own subdomain (tickets.example.com, campaigns.example.com, etc.) and I understand that one can use frameworks such as <code>single-spa</code> and Module federation to load them inside a Container app. But this is not what I prefer.</p>
  <p>In summary, I would like to know how I can pass bits of information (such as auth tokens, session information, etc.) between any two front-end apps?</p>
  <p>Thanks,
  Sriram</p>