Pass authorizationParams to loginWithRedirect to Direct Users to Auth0 Sign Up

Will Johnson
InstructorWill Johnson
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

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.

egghead
egghead
~ 11 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today