Passing initialScreen to Lock from auth0-spa-js

[ogazitt]

I’m trying to accomplish what the question linked below is doing, but from the auth-spa-js framework.

Passing initialScreen to Lock from WebAuth

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.

Customizing the universal login widget is straightforward, but when I try to use it from loginWithRedirect(), I can’t figure out how to send a custom parameter the way that you can with WebAuth (by passing { mode: ‘signUp’ | ‘login’ } as an option).

Is there a way to accomplish this?

Thanks!

[ogazitt]

Turns out it was super easy - I can pass any extra parameters to loginWithRedirect and they will end up on the authorize URL string as url-encoded parameters.

loginWithRedirect({ mode: 'signUp' });

…and in the custom login page:

// retrieve screen mode from extra params if sent; default to 'login'
var mode = config.extraParams.mode || 'login';
...
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  auth: {
 // ...
  },
  // add a selector for which screen to put up 
  initialScreen: mode,
});

I had a logic error in my first attempt

[konrad.sopala]

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