How do I Implement screen_hint in a Next.js app using Auth0-react package

Get Help
,
1

Please include the following information in your post:

  • Which SDK this is regarding:
  • SDK Version: “1.10.1”
  • Platform Version:
  • Code Snippets/Error Messages/Supporting Details/Screenshots:

Is this a feature request or bug report? If so, please create an issue directly in the corresponding GitHub repo. The Community SDK category is for general discussion and support.

3

Hi There!

Welcome to the Auth0 Community!

Thank you for posting your question. You can have users land directly on the signup page instead of the login page by specifying the screen_hint=signup parameter when redirecting to /authorize. You can combine this paramter with prompt=login to indicate whether you want to always show the authentication page or skip the page if an existing session exists.

There are 2 ways to customize the authorization parameters that will be passed to the /authorize endpoint. The first option is through static configuration when instantiating the client, like so:

export const auth0 = new Auth0Client({
   authorizationParameters: {
     scope: "openid profile email",
     audience: "urn:custom:api"
   }
 });

The second option is through the query parameters to the /auth/login endpoint which allows you to specify the authorization parameters dynamically. For example, to specify an audience, the login URL would look like so:

<a href="/auth/login?audience=urn:my-api">Login</a>

/authorize parameters No existing session Existing session
no extra parameters Shows the login page Redirects to the callback url
screen_hint=signup Shows the signup page Redirects to the callback url
prompt=login Shows the login page Shows the login page
prompt=login&screen_hint=signup Shows the signup page Shows the signup page

Thanks
Dawid