Universal Login could support a better onboarding experience with a Sign Up mode

Help
, ,
22

You can do this with a little workaround using the Classic Universal Login.

Turn on “Customize Login Page”, then replace lock.show() with this snippet.

    const urlParams = new URLSearchParams(window.location.search);
    let initialScreen = urlParams.get('initialScreen'); // get the query param 'initialScreen'; you can change this any time
    initialScreen = initialScreen === 'signUp' ? 'signUp' : 'login'; // if not explicitly 'signUp', default to login
    document.title = (initialScreen === 'signUp' ? 'Sign Up' : 'Log In') + ' | Brand Name'; // dynamically set page title
    lock.show({ initialScreen }); // open the lock with the initial screen

This way you don’t need to completely switch away from Universal Login. Just need to use “Classic” Universal Login, and not the “New” Universal Login.

(Disclaimer: may work with the new one too, have not tried as my app is using classic! YMMV.)

Then, when you want to sign up/log in just include a query param &initialScreen= at the end:

  • To sign up, set it to signUp
  • To log in, set it to login or don’t send it.
1 Like
23

Thanks for sharing this workaround @simpleauthority!

24

@maxhodges0 we are actually implementing this. We expect it would be live in 2 weeks or so.

1 Like
25

Thanks a lot for the headsup @andres.aguiar!

26

Please clarify if I understand correctly - are you implementing “this” the feature discussed (default to SignUp view) or something else, related to RFC?

We are building a new product and this issue is very hurting. We cannot use the new XP without this feature.

Thanks,
Oleksandr.

27

Hi @sasha.sochka,

We are building a feature that will let you specify screen_hint=signup in the /authorize parameters and will default to the Signup page when using the New Universal Login Experience

Regards,

Andres

1 Like
28

Thanks.
Does that include support in the auth0-spa lib, to hide that implementation detail (e.g. a new method similar to loginWithPopup, maybe signupWithPopup? or a parameter/option in existing methods).
Oleksandr

29

Yes, you’ll be able to specify that parameter in Auth0ClientOptions https://auth0.github.io/auth0-spa-js/interfaces/auth0clientoptions.html

Regards,

Andres

1 Like
30

Thanks for letting us know @andres.aguiar!

31

This enhancement has been released, you can read more about it here New Universal Login Experience

Thanks @sasha.sochka, @simpleauthority, @maxhodges0, @FDX, @john_thomson, @oskar.ahlroth for the feedback and patience.

Regards,

Andres

5 Likes
32

Thanks a lot for the heads-up Andres!

33

Can we use it from auth0-spa-js API?
UPD: confirming it worked with
await auth0!.loginWithPopup({screen_hint: "signup"});

34

Great! thank you. We are very pleased that you were able to make this a priority.

1 Like
35

We’re here for you Max!

37

@konrad.sopala @sasha.sochka
I tried using it with import createAuth0Client from '@auth0/auth0-spa-js'; but mine still directs to the login tab.

async signup() {
  await this.auth0.loginWithRedirect({screen_hint: "signup"});
}

Is there other code that I need to include somewhere else?

1 Like
38

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.