Passing initialScreen to Lock from WebAuth

Help
, ,
1

I’m using WebAuth from auth0-js for a SPA. I’d like to pass the initialScreen: ‘signUp’ option based on if a user has clicked “Login” or “Sign Up”. Is there a straightforward way to do this? I’ve tried defining it in multiple places with no luck. If I manually add it to the hosted Lock config, it obviously works, but I want to be able to send the context from my app.

2

According to the documentation you can pass custom parameters.

Have in mind that the parameters are sent by the client application so the end-user can modify them and as such, in general, you should not make any security decision based on them. For your specific scenario the parameter is used just to influence the default UI shown so the above does not apply as it has no security implications.

From the webAuth.authorize depending on the user intentions you would pass a conditional parameter:

webAuth.authorize({ mode: "[login|signUp]", /* other options*/ });

On the hosted login page you would configure Lock with:

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

Awesome! This was ridiculously hard for me to find in the docs for some reason – reading comprehension is apparently not my strong suit. I really appreciate the help.

In auth.service.ts:

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

In login.component.html:

<div class="splash-footer">
    <span>
        Don't have an account? <a (click)="_authService.signup()">Sign Up</a>
    </span>
</div>

In hosted Auth0 Login Page

initialScreen: config.extraParams.mode
2 Likes