How do I use the react library to display the sign up page?

[agaace]

Hello, I have login and logout buttons working. Now I'd like to have a signup button but I can't find my way through documentation to do so.

[adamjmcgrath]

Hi @agaace

auth0-react uses the Universal Login Page https://auth0.com/docs/universal-login

If you're using the new universal login page, you can pass screen_hint=signup as an additional parameter to your login, eg:

const { loginWithRedirect } = useAuth0();
const login = () => loginWithRedirect();
const signUp = () => loginWithRedirect({ screen_hint: 'signup' });

If you're using the classic login page https://auth0.com/docs/universal-login/classic it's more involved. You pass an extra parameter to the authorize server through loginWithRedirect, again eg:

const signUp = () => loginWithRedirect({ initialScreen: 'signUp' });

Then customise the Universal Login Page in your Auth0 dashboard to pick up this parameter in config.extraParams and pass it to Auth0Lock, (see https://auth0.com/docs/libraries/lock/v11/configuration#initialscreen-string-) eg:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  (...)
  initialScreen: config.extraParams.initialScreen,
  (...)
});

More info here: https://community.auth0.com/t/how-to-redirect-user-to-hosted-signup-page/9482/2

[adamjmcgrath]

Hi @agaace - closing this, feel free to reopen if my suggestion doesn't work for you or you have any other questions

[agaace]

@adamjmcgrath Thank you for detailed instructions, very helpful! The problem I have now is that when I do this

const signUp = () => loginWithRedirect({ screen_hint: 'signup' });

When I click the button, I don't get redirected to a sign up page. I get an error saying signing up is disabled. Is it disabled by default for a newly created app? How do I enable it? I don't seem to be able to find this option anywhere in the dashboard.

http://localhost:4500/?error=invalid_request&error_description=signup%20is%20disabled&state=bWkxRGZndGZfQnJlbGV4c29EMDFkamZOYkdiRmpzS1ltS1VWdmhzbmNpRQ%3D%3D

[agaace]

Ahhh, never mind. Turns out signing up is enabled at the connection level, not application level. Working like a charm now, thank you!

[underbluewaters]

I just wanted to flag that this is not included in the API documentation, or typescript defs. I was about to file a new ticket before I found this post.

[coreyward]

I'm not sure when this changed (maybe v2?), but it seems like works slightly differently now:

loginWithRedirect({
  authorizationParams: {
    screen_hint: "signup",
  },
})

Docs: https://auth0.github.io/auth0-react/interfaces/AuthorizationParams.html#screen_hint

[frederikprijck]

@coreyward yes, this is since v2. See https://github.com/auth0/auth0-react/blob/master/MIGRATION_GUIDE.md#introduction-of-authorizationparams

[ferrjohnpainagan]

for"@auth0/auth0-react": "^2.2.1", the code below doesnt work

i have a custom login experience setup

const signUp = () => loginWithRedirect({ initialScreen: 'signUp' });

[frederikprijck]

If you want custom parameters to be send to auth0, pass them as properties on authorizationParams.

[ferrjohnpainagan]

this is how i did it but it doesnt work

it still loads the login page, im using custom login experience

onClick={() =>
                    loginWithRedirect({
                      authorizationParams: {
                        screen_hint: 'signup',
                      },
                    })
                  }

[frederikprijck]

Let's keep the communication in https://github.com/auth0/auth0-react/issues/571.