How to create separate Signup and Login screens with Auth0
Tags: auth0, tutorial, howto
Published: 2020-11-28 07:40:44

Hi guys. Today I wanted to quickly share how to create separate sign up and login screens in Auth0's [universal login](https://auth0.com/docs/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](https://auth0.com/docs/universal-login/new-experience#signup) screen with the "new experience", but since it lacks customization, I did not want to use it for [my own project](https://www.cow-pilot.io). 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pisfurhqawowhnhqbf64.png)

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`

```javascript
/* 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izxz1pfbnrtvmwh9yxh4.png)

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](https://auth0.com/docs/libraries/lock/lock-configuration), 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`.

```javascript
// 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ka2fhy30njhhptw54p4u.png)

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](https://en.wikipedia.org/wiki/Camel_case) for `signUp`, otherwise it will not work

```javascript
  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.

```javascript
  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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nm7oyxz9231599q60alg.png)


If you have any questions, please let me know.