Login and Sign up buttons

[samuelmorganstudent]

hello my current auth0provider is

“”"
<Auth0Provider
domain=‘redacted’
clientId=‘reacted’
screen_hint=“signup”
authorizationParams={{
redirect_uri: ‘https://127.0.0.1:5173/’,
}}>



,

“”"

here are both of my buttons

“”"

import { useAuth0 } from “@auth0/auth0-react”;

export function LoginButton() {
const { loginWithRedirect } = useAuth0();

return <button onClick={() => loginWithRedirect()}>Log In;
}

export function SignupButton() {
const { loginWithRedirect } = useAuth0();

return <button onClick={() => loginWithRedirect()}>Sign Up</button>;

}

“”"

where do i add the screen_hint=“signup” ?

thankyou for your help!

[tyf]

Hello @samuelmorganstudent welcome to the community!

@samuelmorganstudent

where do i add the screen_hint=“signup” ?

You need to include the screen_hint param in AuthorizationParams:

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

[samuelmorganstudent]

hello, i continue to get the same response in the browser giving me the login page when i click sign up,

export function LoginButton() {
const { loginWithRedirect } = useAuth0();

return <button onClick={() => loginWithRedirect()}>Log In;
}

export function SignupButton() {
const { loginWithRedirect } = useAuth0();

return <button onClick={() => loginWithRedirect({
authorizationParams: {
screen_hint: “signup”
}})}>
Sign Up
;
}

here are my 2 buttons sign up has the desired params but not the desired outcome on the page!

thanks your your continued support

[tyf]

Hey there @samuelmorganstudent thanks for following up!

Which version of auth0-react are you using? Are you using New Universal Login or Classic?

[samuelmorganstudent]

Hello sir:

“@auth0/auth0-react”: “^2.2.1”,

[samuelmorganstudent]

New universal login page is the one im using

[tyf]

Hey @samuelmorganstudent thanks for confirming!

That’s odd Are you using a social connection (google, facebook, etc.) by any chance? If you inspect the network tab, and look for the /authorize request when clicking the button, do you see the screen_hint param being passed?

[samuelmorganstudent]

Yeah the screen hint param is passed however the page still shows login,

const handleSubmit = () => {
// Log all the user choices when the user submits the form
console.log(userChoices);

localStorage.setItem('userChoices', JSON.stringify(userChoices));


loginWithRedirect({authorizationParams: {
  screen_hint: "signup"

}})
}

here is my current on submit fuction

here is the response from the network tab

1. scope:

openid profile email

2. redirect_uri:

http://localhost:5173

3. screen_hint:

signup

4. response_type:

code

5. response_mode:

query

[tyf]

Hey @samuelmorganstudent I apologize for the delayed response - Thanks for the additional information!

@samuelmorganstudent

This looks to be Classic Universal login for which the screen_hint param won’t work - You can check by navigating to Branding → Universal Login → Advanced options to be sure that you are indeed using New UL.

[samuelmorganstudent]

Working Great Thankyou so much!!

[tyf]

That’s great news! Thanks for confirming - I’ve moved your follow up question to a new topic, just a heads up