How to open login/signup on the Universal login (hosted page)?

Help
, ,
1

Hello,

we are migrating to the Universal Login. Our case is as follows:

  • A user clicks a button “Sign up” on our homepage and should be redirected to the universal-login.com/signup
  • A user clicks a button “Login” on our homepage and should be redirected to the universal-login.com/login.

we have this scenario working in embed lock.

In all the answers around I only found option to setup login/signup as a default page using:

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

But we need to call something like this on FrontEnd:

this.auth0.authorize({
  mode: 'signUp'
});

If it’s not possible with auth0 when do you plan to add this feature?

Kind regards,

Nobo

2 Likes
2

So the correct answer is my question. :slight_smile:

On FrontEnd

this.auth0.authorize({
  mode: 'signUp'
});

In the configuration of the hosted page

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

Generally it is not recommended to send custom parameters to the /authorize endpoint. There is a login_hint parameter however, which is part of the standard. Generally it is used for passing the email address that the user is trying to log in as, but can also be used for this type of scenario where you want to tell the login page how to render. So, if you switch to login_hint instead of mode, then you are sticking more with that OIDC standard. Just beware that you should “validate” the value in login_hint on the login page to make sure it is either signUp or login before passing as the parameter to lock.

1 Like
4

Hey @Carlos_Mostek, I marked your solution as answered. Thanks for the tip. I better reworked the solution to comply with the standard. Here is the solution:

FrontEnd

  signUp(email) {
    this.loginScreen.authorize({
      login_hint: email || ''
    })
  }

Hosted Login

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
   initialScreen: 'login_hint' in config.extraParams ? 'signUp' : undefined,
   ...
3 Likes
5

You can specify login_hint: “signUp” from the frontend if you want. My point was that there are other situations where you might want to set the login_hint to email :slight_smile:. So you might want to do something like this:

   this.loginScreen.authorize({
     login_hint: "signUp"
   })

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
   initialScreen: 'login_hint' in config.extraParams && config.extraParams.login_hint === 'signUp' ? 'signUp' : undefined,
   ...

If login_hint is set to an email address, you can use that email address to initialize lock. Checkout the prefill option here: GitHub - auth0/lock: Auth0's signin solution

6

We need to use the solution I proposed carlos. This way we are identifying signup redirects and we can pick the correct tab. We are redirecting based on these two patterns:

Thanks for your support!

2 Likes
7

@Carlos_Mostek ,
Where is the login_hint documented? I expected so see it here:
https://auth0.com/docs/libraries/auth0js/v9#webauth-authorize-

Also, re-using fields like this is very hacky and code smell.

I googled this issue and there is a lot of developers asking for this, so maybe its time to do something about it?

Until then … I think @zatziky’s workaround is better and looks like its gonna work for me too.

1 Like
9

@hr.stoyanov login_hint is part of the standard, you can pass it as a parameter to the authorize endpoint. You can pass any parameter as an option to the authorize call in auth0.js and it will be sent as a query parameter.

Unfortunately OIDC doesn’t give us a great solution here, signup is not addressed as well as we like, and so the options are:

  1. we invent a new parameter and extend the spec
  2. we re-purpose the login_hint parameter to address this instead

We tend to lean towards re-purposing the existing query parameters instead of inventing new ones and potentially causing conflicts in the future. Unfortunately both solutions are imperfect.

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

12

Hello, all! Our best practice recommendations from Auth0 have been changed to discontinue using login_hint as a way to pass this data, and instead recommend doing a namespaced parameter.

e.g. mycompany_showsignup=1 or mycompany_initialscreen=signup

This will help avoid any conflicts with the appropriate use of those parameters.

2 Likes
13

Thanks a lot for sharing it with the rest of community @Carlos_Mostek!

14

Here is a solution that includes Classic and New UL.