Support for multiple clients/contexts

[parkerault]

I've searched around for a while and I haven't seen any workaround for using multiple auth0 clients on the same page. I see that the context is scoped at the package level, so using a second provider will overwrite the first's state. At first look, it appears that it would be fairly easy to provide an option for contextFactory or some function that returns a custom context to be used with a provider, ie.

function contextFactoryA(initialContext: Auth0ContextInterface) {
  const myContext = React.createContext(initialContext);
  return myContext;
}

function contextFactoryB(initialContext: Auth0ContextInterface) {
  const myContext = React.createContext(initialContext);
  return myContext;
}

function App() {
  return (
    <Auth0Provider contextFactory={contextFactoryA}  ...>
        <Auth0Provider contextFactory={contextFactoryB}  ...>
          <MyApp />
        </Auth0Provider>
    </Auth0Provider>
  )
}

// auth0-provider.tsx
const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
  const {
    children,
    skipRedirectCallback,
    onRedirectCallback = defaultOnRedirectCallback,
    ...clientOpts
  } = opts;
  const ContextRef = React.createRef(DefaultContext);
  React.useEffect(() => {
    const {contextFactory} = clientOpts;
    if (contextFactory) ContextRef.current = contextFactory(initialContext)
  }, []);
  ...
  const Context = ContextRef.current;
  return <Context.Provider value={ ... }>{children}</Context.Provider>
}

We have a feature that requires linking multiple identities in our internal account service, and I'm migrating the client from auth0-spa-js to auth0-react, but the existing code creates a second, ephemeral client to authenticate with the second provider. As far as I can tell there's no way to do this with auth0-react.

From my understanding, the cookie is based on the clientId, so there shouldn't be any namespace collisions, right?

I'm happy to make a PR if this is a feature you'd be comfortable supporting, unless I'm going about this all wrong and there's a more elegant solution that I don't know about. 🙂

[adamjmcgrath]

Hi @parkerault 👋

Yep, multiple SPA clients was added in https://github.com/auth0/auth0-spa-js/releases/tag/v1.18.0 so this should be on our roadmap

Happy to look at a PR, with the caveat that it might take a little while to look at and we might decide to go a different way with it once we've thought about this problem for a bit.

[parkerault]

Hi @parkerault 👋

Yep, multiple SPA clients was added in https://github.com/auth0/auth0-spa-js/releases/tag/v1.18.0 so this should be on our roadmap

Happy to look at a PR, with the caveat that it might take a little while to look at and we might decide to go a different way with it once we've thought about this problem for a bit.

Awesome, I will do that!

[haines]

I'm trying to replicate the account linking sample using auth0-react rather than auth0-spa-js so I think I'm in the same boat of needing a second context to be able to call loginWithPopup without replacing the user in the main application context. Is this feature still on the roadmap?

[ewanharris]

Hey @parkerault I just put up a PR that adds support for this (#416), if you're still interested it would be great if you're able to take a look and see if it would work for your usecase.

@haines I appreciate you've most likely got a solution now but there's also a React version of the account linking sample now that demonstrates how this would be achieved with the above PR.