Hi, Auth0 commmunity!
We need to implement a different set of login options for different customers. To do so we manually created screen with corresponding idp buttons. Now we have a problem that we can’t hide default Auth0 provider window (which goes against our login flow) when user is logged out and goes to any page in the app (becuse react-sdk checks the token and redirects to default login screen). While trying different options (including custom domain) we also encountered infinite redirects loop, and we can’t figure out why they happen
We configured our React app like so:
const providerConfig: any = {
domain: config.domain,
clientId: config.clientId,
onRedirectCallback,
authorizationParams: {
redirect_uri: config.redirect + (param ? ?qparam=${param}&cohort=${cohortParam} : ‘’)
},
};
const queryClient = new QueryClient();
const Auth0ProviderLayout = () => (
<Auth0Provider {…providerConfig}>
);
But we implemented our own login using:
const { loginWithProvider } = useProviderAuth();
So we want to show only given providers to diferent users to make sure login with the desired email. And this works fine until the session expires and the users refresh the page. This will give them the Universal Login Page from auth0
(This also happens when trying to access any protected routes with withAuthenticationRequired )
If we remove the redirect_uri then the app breaks and the users are stuck in a infinite loop.
What we ideally want is instead of redirecting the users to the UniversalLoginPage we will redirect them to our internal one at /login. How can we accomplish this? We tried multiple times and got stuck with worse problems than the ones we have now.