I’m trying to secure a chrome extension with auth0. The way the chrome extension works is it has a few content scripts and each content script creates an iframe and inserts it into the page. Each iframe loads up a React SPA. Each SPA makes calls to an internal API so they need to include a bearer token in their API requests. The SPA that’s loaded depends on the page url. It’s possible for the user to authenticate with the auth0 server via each SPA loaded in its respective iframe. The diagram below illustrates this.
I initially made use of the Auth0 React library to secure the chrome extension, however I am running into an issue where I instantiate multiple auth0 clients and each one tries to initiate re-authentication for the user. This leads to some unnecessary roundtrips with the auth0 server. Additionally, I need to switch to using refresh tokens and I don’t think that will play well with multiple auth0 clients running.
What I need is a singleton auth0 client that can be shared between the React SPAs injected into the page via iframe by the chrome extension. Is this possible to create without resorting to local storage to share the refresh token or client? I don’t think the Auth0 React library is appropriate since each of those Auth0Provider components creates a new auth0 client. It seems the Auth0 React library is meant to be used with a single SPA whereas this chrome extension functions as a collection of SPAs. I could use the auth0-spa-js library, but I’m not sure how to safely share the client between the SPAs. Ideally the user can authenticate from within any of the SPAs, and not just the chrome extension popup. If this makes it harder to safely share the client, then I can enforce logging from the popup only.