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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!