Two Auth0 Providers

[captDaylight]

We have an issue where a customer is has an Auth0 instance that's in conflict with our Element's instance. What's causing the issue is that both instances are picking up on the redirect url's params. So to solve this I've added a hardcoded param to our elements that won't do any checks if it's coming from the parent.

Any customer that is using their own Auth0 login will need to set skipRedirectCallback to look for the presence of photon=true:

    <Auth0Provider
      domain="customer-auth-domain"
      clientId="customer-auth-client-id"
      authorizationParams={{
        redirect_uri: `${window.location.origin}`
      }}
      skipRedirectCallback={window.location.href.includes('photon=true')}
    >

Then, when as high up in the customer's authenticated tree as possible, the'll place our photon-client:

      {!isAuthenticated ? (
        <LoginButton />
      ) : (
        <photon-client
          ...
          auto-login="true"
          redirect-uri={window.location.origin} 
        >
          {/* ETC */}
        </photon-client>
     }

🎥 Demo Video
https://www.loom.com/share/58814af997ea4367a705d253ee68a9c3

👀 Demo Branch
https://github.com/Photon-Health/client/tree/auth0
If you go here to apps/auth you can install and then npm run dev to recreate the scenario I'm showing in the video above.

References

auth0/auth0-react#416
This is the PR that allows for multiple contexts. Since we aren't using React, we don't need the context on the parent React component. However in the code there was a hint to the answer.

https://github.com/auth0-samples/auth0-link-accounts-sample/tree/react-variant/React
Here's a demo of the above PR

[github-actions]

Click here to see your changes live

[jknapp25]

LGTM!

[samkotlove]

So we are requiring our customer to add photon-parent-auth, can't we just do the inverse and add a photon=true flag so our customers don't have to do anything?

This way their client will get he normal redirect, and ours will only get the "inner" one

[captDaylight]

@sam So If I understand correctly:

• we programmatically append photon=true to the redirect uri passed into the <photon-client>
• in Photon client, we would check for the presence of photon=true
• on their side they would still need to add skipRedirectCallback={window.location.href.includes('photon=true')}

[marisbest2]

This should be a minor bump

[marisbest2]

Why do we use a regex rather than parsing the search params?

[captDaylight]

@samkotlove candidate