As per React Native SDK’s documentation, I need to wrap my entire application with the SDK’s Auth0Provider. I am doing it like this:
Root.tsx
const Root = () => {
return (
<Provider store={store}>
<Auth0ProviderWrapper>
<App />
</Auth0ProviderWrapper>
</Provider>
)
}
Auth0ProviderWrapper
const Auth0ProviderWrapper: FunctionComponent<Props> = ({ children }) => {
const server = useSelector(selectServer);
const { auth0domain, auth0clientId } = server;
return (
<Auth0Provider domain={auth0domain} clientId={auth0clientId}>
{children}
</Auth0Provider>
);
};
As you can see, I am fetching the auth0domain and auth0clientId from the Redux store based on the currently selected server.
My issue is that it seems that the Auth0Provider somehow caches what I have passed to it initially, and then even if change the server and the auth0domain changes, when I try to login I get redirected to the first initial domain.
So if I use domain1.us.auth0.com, then swap to domain2.us.auth0.com and I open the universal login flow, I still see domain1.us.auth0.com in the URL.
If I console.log(auth0domain) in the Auth0ProviderWrapper component, I can see that it successfully changes, which means my component should re-render with the new domain being passed to the Auth0Provider. It’s as if the Auth0 instance does not update.
Anyone might know what could be happening here?