Currently, I am using the New universal login experience. With this, I am using the React SDK, which has a function loginWithRedirect. When users click the login button, I simply run this function. When users click the signup button, I run loginWithRedirect({screen_hint: ‘signup’}), since as said in the docs, passing a parameter set to signup will redirect users to the signup page. However, these two functions do the exact same thing, they both lead to login, and the signup button doesn’t lead to signup. How do I get this to work?
Hi @victor-wei126,
The call to loginWithRedirect({screen_hint: ‘signup’}) looks correct and should redirect you to the signup page. In order to help recreate this, would you mind sending more of the code you are using with the sing up button?
1 Like
Hi Stephanie,
You are correct, it does redirect me to the proper /login or /signup endpoint depending on the button I click. Here is my code:
const LoginButton = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (
!isAuthenticated && (
<Nav.Link onClick={() => loginWithRedirect()}>
Log in
</Nav.Link>
)
);
}
const SignUpButton = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (
!isAuthenticated && (
<Nav.Link onClick={() => loginWithRedirect({screen_hint: ‘signup’})}>
Sign Up
</Nav.Link>
)
);
}
The buttons redirect to the proper endpoint, however, my problem is that once the user clicks the “continue” button on the forms of each page, the user is redirected to a different URL in my application. For example, when the user is new, ie, signs up, I would like to redirect them to /signupinfo which is a form that collects additional sign up information. But if it is a returning user, they would go to the login endpoint, and from there be redirected straight to their dashboard. So to recap, 2 different workflows:
- New users: /home → /signup → /signupinfo → /dashboard
- Returning users: /home → /login → /dashboard.
I looked into redirecting users within rules, but that seems to be more complicated then I need it to be, since I am just returning control to my application, I don’t need any additional redirects. It seems to me since users will either be on /signup or /login, I can just route the redirect to a different URL based on which “continue” button they click, if that makes sense. Thanks!
1 Like
You could use appState to redirect the user:
- Write a
onRedirectCallbackfn for theAuth0Provider:
const onRedirectCallback = (appState) => {
history.push(
appState && appState.returnTo
? appState.returnTo
: window.location.pathname
);
};
ReactDOM.render(
<Auth0Provider
domain={config.domain}
clientId={config.clientId}
audience={config.audience}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
>
<App />
</Auth0Provider>,
document.getElementById("root")
);
- set the
returnTovalue in appState when callingloginWithRedirectfor the “Sign Up” button:
<Button
id="qsLoginBtn"
color="primary"
className="btn-margin"
onClick={() => loginWithRedirect({
screen_hint: 'signup',
appState: {
returnTo: '/signupinfo'
}
})}
>
Sign up
</Button>
I appreciate the attempt to help, but unfortunately this completely broke my app, and I am very unsure about what just happened, so I won’t attempt to ask lol.
Could you please explain what this code does and how it works, or refer me to some documentation? I understand the history object, but what are the appState and returnTo?
Deleted previous message due to SPAM reasons.
Hi @victor-wei126,
I just tested this out without doing step 1, and the redirect still occurs. I was mistaken, that step is not necessary for this.
You can simply update the app state when you call loginWithRedirect:
<Button
id="qsLoginBtn"
color="primary"
className="btn-margin"
onClick={() => loginWithRedirect({
screen_hint: 'signup',
appState: {
returnTo: '/signupinfo'
}
})}
>
Sign up
</Button>
The appState is used to store the application’s state before the user is redirected: https://auth0.github.io/auth0-react/modules/auth0_provider.html#appstate
The onRedirectCallback method can be used if you are using a custom router such as react-router-dom: https://auth0.github.io/auth0-react/interfaces/auth0_provider.auth0provideroptions.html#onredirectcallback
Hi Stephanie,
I tried this out and it has solved the problem somewhat. What happens now is that after the user clicks “sign up” on the sign up form, they are first redirected to /dashboard. Then, when I manually refresh the page, it then redirects to /signupinfo. I think this is because in Auth0Provider, I have the redirectUri=“/dashboard”, so it redirects to there. I tried removing this property, and then adding the appState option to the loginWithRedirect for the login up button, but with the returnTo set to ‘/dashboard’, but this caused some weird service outtage issues so I’m guessing the redirectUri is required?
Is there any way to set redirectURI based on some conditional logic? P.S. I am using react-router-dom so I will look into onRedirectCallback. Thanks for the help!
I believe if you set up the onRedirectCallback it should redirect properly:
const onRedirectCallback = (appState) => {
history.push(
appState && appState.returnTo
? appState.returnTo
: window.location.pathname
);
};
ReactDOM.render(
<Auth0Provider
domain={config.domain}
clientId={config.clientId}
audience={config.audience}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
>
<App />
</Auth0Provider>,
document.getElementById("root")
);
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.