How to create separate Signup and Login screens with Auth0

Hi guys. Today I wanted to quickly share how to create separate sign up and login screens in Auth0's universal login, as it is not directly mentioned in their otherwise great documentation.

At the moment it is only possible to go directly to the signup screen with the "new experience", but since it lacks customization, I did not want to use it for my own project. I assume you already have an integration and are just looking for a way to separate signup and login, so I will not go much into detail about the rest.

Go directly to the signup page

Usually signup looks like this. The widget shows both login and signup and the user has to choose.

To show the signup first, we have to provide a parameter to the loginWithRedirect function that is calling the screen, for example '{ mode: "signUp" }'. This parameter can then be read in the Lock widget with config.extraParams

/* Example with React*/
  <Signup 
    onClick={() => loginWithRedirect({ mode: "signUp" })}>
      Sign Up
  </Signup>  

Customize Login Page

Now that we have a separate button for signup, the next step is to go to "Universal Login" in the dashboard and activate the "customize login page" option.

This opens the Lock widget for editing.

Lock is an embeddable login form that can be configured to your needs and is recommended for use in single-page apps

Lock has a lot of configuration options, but we are mostly interested in the following:

• config.extraParams
• initialScreen
• allowLogin
• allowSignup

config.extraParams is already configured out of the box and we can use it to read the parameter that we provided in loginWithRedirect.

// Decode utf8 characters properly
  var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
  config.extraParams = config.extraParams || {};

If you put a console.log in the widget, you can see all the parameters that are passed when the widget is open. In my case I send "login_hint" for signup.

The actual configuration of the widget starts at line 38 and starts with var lock = new Auth0Lock(config.clientID, config.auth0Domain,

We add our 3 lines of code after that initialization

Choose initial screen

initialScreen lets us choose, which screen to show first when using loginWithRedirect. We want to show signup when the parameter we gave earlier is present and show login when it is not. Be careful to use camelcase for signUp, otherwise it will not work

  intialScreen: config.extraParams.mode === undefined ? 
    'login' : 'signUp',

Either login or signup

To show only one of the two screens at any given time, we can use the allowLogin and allowSignup options. If the extraParams that was given is present, we want to show only signup, otherwise we show only login.

  allowLogin: config.extraParams.mode === undefined ? 
    true : false,
  allowSignUp: config.extraParams.mode === undefined ? 
    false : true,

And that's it. Now we have two separate screens for signup and login.

If you have any questions, please let me know.