Open Universal Login to the sign-up page

[caristix-support]

Hi there!

I have an Angular app and followed the QuickStart tutorial to integrate Auth0 to my SPA.

Auth0 Angular SDK Quickstarts: Login

In Auth0 configuration, I use the “New Univeral Login” experience. So, when a user in my app clicks the Login button, he’s redirected to this login page.

Now, I want to create another button that will allow users to Register to my app. So I ask you if there is a way to configure my implementation to show the Sign-up page (instead of the login page), depending on the button the user click.

Thanks!

[dan.woda]

Hey @caristix-support,

Check this out:

New Universal Login Experience

[caristix-support]

Hey Dan!

Thanks for the prompt response. However, I’m using the Auth0Client implementation from auth0-spa-js package and, following the tutorial, I use the auth.service.ts login() method as follow:

login(redirectPath: string = ‘/’) {
// A desired redirect path can be passed to login method
// (e.g., from a route guard)
// Ensure Auth0 client instance exists
this.auth0Client$.subscribe((client: Auth0Client) => {
let urlSplit = redirectPath.split(‘?’);
// Call method to log in
client.loginWithRedirect({
redirect_uri: ${window.location.origin},
//Query is removed from target url, and added as separate parameter to avoid url encoding.
appState: { target: urlSplit[0], queryParams: urlSplit[1] }
});
});
}

I guess I have to put the screen_hint=signup somewhere inside the RedirectLoginOptions object.

Maybe you know how

Thanks!

[caristix-support]

Oh!!! Forget my previous comment

The only thing you have to do is to add the screen_hint: "signup" extra option right after the appState:{...}

So the implementation looks like

client.loginWithRedirect({
redirect_uri: ${window.location.origin}/console/,
//Query is removed from target url, and added as separate parameter to avoid url encoding.
appState: { target: urlSplit[0], queryParams: urlSplit[1] },
screen_hint: “signup”
});

Thanks a lot!!!

[dan.woda]

Let us know if there is anything else we can do to help!