Auth0 Home Blog Docs

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

signup
login
hosted-login-page

#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

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.


#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,
   ...

#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: https://github.com/auth0/lock#database-options


Don't show "sign up" tab to remembered users
#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!