Login vs. Signup in Lock 11, Hosted Pages

Help
1

Given a Hosted Page (Login) with a URL like this:

https://sgim-prod.auth0.com/login?client=QJsvUQOu6y2vXvpPtkj908SZSld1IUzL&type=signup&redirect=https://sgim.com/auth/auth0/callback

I used to be able to parse type from the config.extraParams, e.g.:

  var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
  config.extraParams = config.extraParams || {};
  var connection = config.connection;
  var prompt = config.prompt;
  var type = config.extraParams.type;

and I would have logic on the page to determine if this was a login page or a signup page, e.g.:

  allowSignUp: type == "login" ? false : true,
  allowLogin: type == "signup" ? false : true,
  languageDictionary: {
    title: type == "signup" ? "Welcome" : "Welcome Back"
  },

Now that config no longer passes type to config.extraParams, how can you make a single Hosted Login Page support both login and signup?

Any help would be greatly appreciated!

Thanks!

3

:wave: @madasebrof1 I would need to double check but I’m wondering if we could use config.extraParams.initial_screen parameter instead? (so we could do something like initialScreen: this.signedUp ? 'login' : 'signUp'). Provided this parameter is still available, let me see on my end.

4

@kimcodes thanks for getting back to me!

Yeah, it looks like that is no longer available. When I inspect config.extraParams I only see:

clientID
tenant
redirect

I am open to any other solution.

Basically, I just need to be able to make two paths: one for users that want to login, and a second path for users that want to create a new account, e.g. I have two buttons: “SIGNUP” and “LOGIN”.

(Seem like a pretty standard concept!)

It looks like I can only create a single “login” hosted page under Auth0, so I can’t figure out how to accomplish this.

Any help would be appreciated!

5

Hey there, Kim’s approach could work with a simple tweak. Instead of using initial_screen you could use login_hint. The difference is login_hint is defined in the OIDC specification and shouldn’t be filtered by Auth0. This means instead of using a custom get parameter you could use something defined in the specification:

6

@sgmeyer Awesome, are there any code examples of using something from the OIDC spec with Lock 11 and a hosted login page?

7

@madasebrof1 I don’t know of any examples, but it is quite easy. Using my own client I created the authorize link:

https://tore.auth0.com/authorize?client_id=e0rl3mb8ioNtDMe8cjFEl0aeCM04Iyzw&response_type=code&redirect_uri=https://jwt.io&login_hint=signUp

Notice the last get parameter is login_hint=signUp. This login his is guranteed to be passed to the login page and is done so with config.extraParams.login_hint. Lock, by default uses this for email and phone number pre-fill. Instead of using it for pre fill I am going to follow @kimcodes’s approach for initial-screen. This is a lock option that can be set to signUp, login, or forgotPassword. Here is an example of my lock configuration:

<script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;
    var hint = config.extraParams.login_hint
    
    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      assetsUrl:  config.assetsUrl,
      initialScreen: config.extraParams.login_hint,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        //primaryColor:    'green'
      },
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    lock.show();
  </script>
8

Epic, thanks.

I’d think this would be good to add to the docs, as I imagine this would be a very common use case.

9

@madasebrof1 thanks for the docs idea. I am definitely going to put a doc request in for this. Also, if you could mark the right answer that would be huge.

10

@sgmeyer @kimcodes

I marked this as solved, by there is one problem. I am using Auth0LockPasswordless, not Auth0Lock, which seems to ignore initialScreen: config.extraParams.login_hint.

It only shows up as ‘LOGIN IN WITH GOOGLE’, etc. instead of ‘SIGNUP WITH GOOGLE’

I am now able to change the message so it’s not totally confusing, but it isn’t ideal.

See what I mean:

https://sgim-prod.auth0.com/login?client=QJsvUQOu6y2vXvpPtkj908SZSld1IUzL&redirect=https://sgim.com/auth/auth0/callback&login_hint=signUp

I feel like this use case isn’t thought through, e.g. using a combination of Passwordless AND allowing the ability to login/signup via google, etc.

If you could pass this to the dev team (or if you are the dev team!) that would be great.

11

@madasebrof1 ah sorry I had assumed you were using Lock instead of PasswordlessLock. when using big social buttons the Login with text is actually hardcoded into the SDK. Here is the bit of code in the repo:

I think, and to your point, it would be nice for this to be exposed in the dictionary so you could change this. I’ll pass along your use case to the team. Thanks for the feedback!