Auth-module: Automatic login after logout with Auth0

[bcnzer]

Version

v4.6.6

Reproduction link

N/A

Steps to reproduce

The issue isn't the code per-se. It's a config change on Auth0's end.

• Create a new tenant in Auth0. If you have an old tenant (2018 and earlier) go into Tenant Settings > Advanced > Log In Session Management and enable the setting Enable Seamless SSO
• Add the auth module as per the docs in a new Nuxt project
• Configure it with your tenant
• Add ability to login with this.$auth.loginWith('auth0')
• Use the this.$auth.logout method
• Login again.

What is expected ?

To see Auth0's universal login screen

What is actually happening?

You don't see the login screen. You will immediately log back in with your previous account

Additional comments?

The issue isn't the library per se. It's Auth0, who have changed the default configuration. I was able to confirm this problem by enabling Enable Seamless SSO in an old project I created in 2017. Now that I've enabled it I'm not asked which of the three account types (GitHub, Twitter or Google) I'd like to login with. It auto-logins https://www.wolftracker.nz/

A simple workaround is to hit the https://statusvue.au.auth0.com/v2/logout endpoint before calling this.$auth.logout(). This will force the logout on Auth0's end. I learned about this solution here.

Alternatively you can pass a param to the authorize link prompt=login to ask for credentials each time.

Trouble is this could be viewed as a positive by some people. For me, it annoyed the heck out of me (what if I wanted to login with a different account?).

We could look at a config change but I feel the best solution would be to add a warning in the documentation, if you use Auth0. I'm happy to write it up and submit a PR if you like.

_{This bug report is available on Nuxt community (#c350)}

[bcnzer]

Further to my above message: I couldn't get my newly created Nuxt app with the auth package to work like the demo site. If you go into Auth0 for the demo site and turn on that setting, you'll see what I mean about logging in/out.

Below is a picture of the setting, from my "wolftracker" Auth0 tenant. In my new tenant that setting is not available.

FWIW I love this library! Makes auth so much cleaner and easier to use in a Nuxt project.

[ghost]

Hey, @bcnzer, thanks for documenting this issue so clearly, it seems you have answered my confusion documented in Issue #374. Since it seems there is no longer a solution through configuring the Auth0 tenant, I wanted to share some ideas I have for making the Nuxt Auth module better suited for this new Auth0 tenant limitation.

1. In regards to the /v2/logout endpoint - I think this is the best way to go about logging out in general. I think it gives users the expected experience when they hit the log out button. With the current configuration, even if you could disable the seamless SSO, they might 'log out' on a public computer only for a new user to be able to log in to their account without credentials. That might just be my subjective opinion.

I'm pretty new to Nuxt, but maybe we could add a conditional to the logout method on line 150 here to automatically hit the /v2/logout endpoint if enabled in nuxt.config.js?

For now, I'm going use the promise to hit that endpoint after completing the 'normal' logout, but that doesn't seem very scalable as every time we add a new logout button we have to know to add the promise.

1. I tried to add prompt=login parameters to the /authorize link. I didn't spend much time on that but I was having difficulty getting that to work. I know you also need to set rememberLastLogin to true in the lock configuration, at least in v11 of lock. I mention that because I think the default lock configuration automatically sets rememberLastLogin = !prompt where prompt is a variable set in the authorize url prompt parameter.

Do you have a way of passing this parameter to the authorize link that works on a new implementation of lock where you can't disable seamless SSO?

If so, I'd love to help you work out some of this documentation - I have to do it anyway for my company as we document all of our tenant configurations.

Thanks!

[bcnzer]

Turns out that simply calling the logout URL from code is not enough. I had to do the following:

• Go to into the Tenant Settings > Advanced
• In Allowed Logout URLs enter the allowed URL(s) you can redirect to i.e. http://localhost:3000 for dev purposes
• In my logout button run this.$auth.logout() and then redirect the entire page to the Auth0 logout URL along with a param specifying where I want it to redirect back to. For example:
  https://mytenant.auth0.com/v2/logout?returnTo=http%3A%2F%2Flocalhost:3000

Do this and it (finally) behaves I expect.

More details on the logout endpoint here, from Auth0.

[ghost]

I had exactly the same experience which is too bad because the /v2/logout redirect seems a bit clumsy in providing programmatic redirects after logout options for large sites since you have to register the logout url with the auth0 tenant. I'm going to look into extending the auth plugin. If I come up with anything graceful I'll make a PR. Thanks for adding this to the docs!

[bcnzer]

From what I understand the Allowed Logout URLs is the URL that Auth0 is allowed to redirect to. I was thinking, with the app I'm writing, that I'll have Auth0 redirect to my sign in/register page. I'll also get Nuxt Auth to redirect to that page if a person is not logged in. In the Allowed Logout URLs I would only need two URLs: localhost (for dev) and prod.

Would that not be a similar experience in a large application?

If you could come up with something more graceful that would be amazing!

[ghost]

Well, my idea for extending the module may be less exciting than it sounds. I was thinking of just adding an option to induce the redirect whenever auth.logout() is called. Right now I have the added redirect hardcoded on individual pages.

"Large application" might be the wrong classifier, but we have slightly different desired functionality than you. Right now when someone logs out they are always redirected to the home page. That's okay, but we would like to be able to stay on the current page, if and only if they log out from a page that doesn't require authentication. Many of those routes are dynamic and I'm not sure if the auth0 tenant can accept a wildcard route. I should look into that, if it can, then my whole point is null.

Since you mentioned you're including your dev and prod logout URL's in a single tenant I wanted to share an issue I've had with that before. I don't mean to be pushing unsolicited advice, just wanted to share in case it's helpful. At one point we had the same tenant used for local, dev, staging, and production instances. Note, this was with a Flask app, but the issue seemed to be specifically with the redirect after logout.

In that setup, we had an ongoing issue where the redirectTo parameter didn't work ~25% of the time on instances who's origin didn't match the first in the list of logout urls. It redirected us to an auth0 error page. Since we put our production logout url first in the list it never affected live users, but it was annoying in testing. Never really dug into the cause because we just added a new tenant for every instance. We also did some lock customization so it was helpful to have multiple instances before pushing to live production.

Maybe we had something wrong with the config, but I thought I'd share in case you started running into issues with the log out redirect on some instances.

[maxiride]

I am using Auth0 with the auth-module too and I'm having the same issue. However not everything you two said ( @crawfordleeds and @bcnzer) is crystal clear to me as I am delving into the subject of Auth0 and Nuxt just recently.

From an ELI5 perspective, is this the right approach?

Turns out that simply calling the logout URL from code is not enough. I had to do the following:

* Go to into the Tenant Settings > Advanced

* In `Allowed Logout URLs` enter the allowed URL(s) you can redirect to i.e. `http://localhost:3000` for dev purposes

* In my logout button run `this.$auth.logout()` _and_ then redirect the entire page to the Auth0 logout URL along with a param specifying where I want it to redirect back to. For example:
  `https://mytenant.auth0.com/v2/logout?returnTo=http%3A%2F%2Flocalhost:3000`

Do this and it (finally) behaves I expect.

More details on the logout endpoint here, from Auth0.