Auth0 universal login page help

Hi, how are you?
I am working on a website built with vue.js using auth0 auth.
We are using auth0 universal login page right now.
When I am logged in, I show the logout button at the top right.

image

When I click logout, I want it to redirect to the auth0 login page, but I couldn’t make it.
The workaround I found is calling the auth0 logout() function, which is redirected to our website, and then calling auth0 loginWithRedirect() function again.
Doing so, I am seeing a blank dashboard for a bit before redirecting to auth0 login page. Is there any way I can go to login page directly when I click log out button?

I am using @auth0/auth0-spa-js

Has anyone implemented similar one before?

Thanks

Hi @max.hotovkin and welcome to the community!

You can redirect the user back to the login page if you both configure a default login route for your login form, and if you configure the redirect URL to do so, per these docs:

Please let me know if you run into any issues with that!

1 Like

@thomas.osborn There isn’t static url for the auth0 login page. How can I redirect the user?

@max.hotovkin the second article, “Configure Default Login Routes”, is about configuring a static URL

1 Like

@thomas.osborn, I feel like we are talking about different thing. What I want is to immediately redirect to auth0 login page ( when I click logout button as a logged in user ). I am already logged in and to log out, I need to call logout() function. How can I go to the login screen?

I think I understand now @max.hotovkin

If you want the logout button to take a user straight to the Auth0 login page — without hitting the logout endpoint of Auth0 first — you would need to make a request to /authorize with the prompt=login parameter, to force the login page to appear in spite of the existing user session. In Auth0-spa-js, I think this means passing in the prompt param to loginWithRedirect(), like so:

client.loginWithRedirect({
prompt: “login”,
});

Keep in mind this will not actually end the Auth0 session.

Is that what you are looking to do?

1 Like

@thomas.osborn Yes, that’s the flow I want. But how can we end the user’s session while redirecting to the login page?

@thomas.osborn I am thinking to clear cookie values before calling the function. Do you think that is the best way?

Also I have a wordpress website and when i click the Start button, I want it to redirect to auth0 login page. But the login url always has state parameter dynamically generated. So I couldn’t use it.

Can I do this?

Hi @max.hotovkin

First, I want to make certain you understand there are multiple session involved. Please see this doc to understand what I mean: Session Layers

Now, if you want to end the application session layer, and your application is using a session cookie, you could clear that session cookie to end your application session.

However, that is not the same as ending the Auth0 session. If you want to end the Auth0 session, you have to redirect the user to the /logout endpoint of your tenant (YOUR-DOMAIN.auth0.com/logout). Then, to get the user back to your site, you’d need to refer to my previous post.

For your last question, about redirecting to the login page, I am not sure I understand. What is it about the state parameter that is making this not work? You should pass in the state parameter to the /authorize endpoint, and then let the user get redirected from there to the login page.

1 Like

@thomas.osborn What I wanted is to finish the user’s session and then redirect to the auth0 login screen.

And what do you think of the other issue I have?
"Also I have a wordpress website and when i click the Start button, I want it to redirect to auth0 login page. But the login url always has state parameter dynamically generated. So I couldn’t use it.

Can I do this?"

Thanks for your help so far

@max.hotovkin which session to do you want to finish? If you want to end the Auth0 session and redirect to the Auth0 login page, please see my previous post about redirecting after logout and configuring the Default Login URI.

For the second question, I asked a follow up in my previous post: “For your last question, about redirecting to the login page, I am not sure I understand. What is it about the state parameter that is making this not work? You should pass in the state parameter to the /authorize endpoint, and then let the user get redirected from there to the login page.”

Could you please explain further what the issue is? Thanks!

1 Like

@thomas.osborn You can check this url https://client-dash-git-mvp-file-evict.vercel.app/ and try click Sign In at the top


We are calling loginWithRedirect function here, and it is redirecting to auth0 login page.
Url is like this https://auth.fileevictions.com/login?state=hKFo2SBPNFpvQ2x1ZGdJRExyM21HUU00Y3RzSE1PYjhvOWFWRaFupWxvZ2luo3RpZNkgNkNGZ2tsODRxU1BJcURaRURBSFBMRllFRzEyTHN6UnCjY2lk2SA5bzFxUUlNa05JRTRua0I0VHVudFFxUWRROHRCTnJFMw&client=9o1qQIMkNIE4nkB4TuntQqQdQ8tBNrE3&protocol=oauth2&response_type=code&redirect_uri=https%3A%2F%2Fclient-dash-git-mvp-file-evict.vercel.app&scope=openid%20profile%20email&response_mode=query&nonce=U1h2d3Y4dzVldWtuNnR1VzhMOWhDaGx0bVlick12Tnkuek1pVDZjcmNaNQ%3D%3D&code_challenge=kLmxgw6qdxz9tAHHH5vF8XS2sT2V3PzgkJJ2clkkODA&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtc3BhLWpzIiwidmVyc2lvbiI6IjEuMTcuMCJ9

We want to allow users to go to auth0 login page from different website and it’s not using vue, so we can’t call loginWithRedirect. So how can we set the href link in other website?

Ah I see, thanks for so clearly detailing that @max.hotovkin

The URL that loginWithRedirect generates isn’t actually the login URL you provided, but an authorize URL. If the browser has no active user session, then Auth0 will immediately redirect the user from /authorize to /login so they can authenticate.

To see what /authorize URL your app is generating, you can open up dev tools and inspect the network traffic to see what URL is called before you are redirect to /login. For your application, it probably has a format almost identical to that login URL, e.g.:

YOUR_AUTH0_DOMAIN/authorize?client_id={client id}&redirect_url={callback url}&state={generated state}&nonce={generated nonce}&response_type=code&code_challenge_method=S256&response_mode=query&scope=openid profile email&protocol=oauth2

However, ideally you would just use our Wordpress plugin, which should handle the redirect for you. Otherwise, you’ll have to handle things like generating the state and nonce yourself, as well as the entire PKCE flow.

Hopefully that answers your question! Please let me know if it didn’t.

2 Likes

@thomas.osborn What if we have to come to auth0 login page from an email link or any other website ( not wordpress ) We have no way to set something in auth0 settings as static login url?

Also can we have different styling for auth0 login pages ? What we want is to show different login page when they click “Sign in” button and when they come from a different url.