Pass authorizationParams to loginWithRedirect to Direct Users to Auth0 Sign Up
Create a signup-button.js file under the src/components/buttons folder
Add the following code:
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
export const SignupButton = () => {
const { loginWithRedirect } = useAuth0();
const handleSignUp = async () => {
await loginWithRedirect({
appState: {
returnTo: "/profile",
},
authorizationParams: {
screen_hint: "signup",
},
});
};
return (
<button className="button__sign-up" onClick={handleSignUp}>
Sign Up
</button>
);
};
Adding authorizationParams to the loginWithRedirect() configuration object with the screen_hint property and a value of signup will take users from your React application to the sign-up page.
Instructor: [0:01] Inside of the buttons folder, create a new file called sign up button. Then import the useAuth0 hook from the Auth0 SDK and import React from React. Next, create a component called sign up button. Then grab the log in with redirect method from the useAuth0 hook.
[0:26] Then we'll create a sync function called handle sign up. Then await the login with redirect method. Then we'll pass in an object detailing where we want the application to redirect to. This object will contain two objects. The first one being AB state with return to being the property and profile being the value.
[0:48] The second object will be authorizationParams with the property of screen hit and the value of sign up. Adding the authorizationParams object with the screen hit property to loginWithRedirect tells the application to take the user to the Auth0 signup page.
[1:06] Finally, we'll return some JSX, which will be a button with the class name of button__signup. Then we will assign handleSignup to the onClick Handler. Then I'll set the copy for the button to signup.
[1:25] To recap creating a SignupButton, I imported the useAuth0 hook from the Auth0 SDK. We created a component called SignupButton. Then we grab the loginWithRedirect method from the useAuth0 hook.
[1:40] Then created a function called handleSignup that awaited loginWithRedirect. We pass in two objects, the AppState and the authorizationParams. Then return some JSX as a button with the onClick handler of handleSignup.