Auth0-spa-js: logout doesn't log out of auth0 if current url has a path

[dracan]

I have a logout button on my site, and when it's clicked I'm calling the following:

logout() {
    // Ensure Auth0 client instance exists
    this.auth0Client$.subscribe((client: Auth0Client) => {
      // Call method to log out
      client.logout({
        client_id: environment.clientID,
        returnTo: `${window.location.origin}`
      });
    });
  }

If I'm on the root of my app (ie. no URL path), then it correctly signs me out of Auth0 as well my app. In Fiddler I can see that the /v2/logout request is made to Auth0. All's good here.

However, if I'm on a page of my app, and click the logout button which calls the above code - it tries to do the redirect without calling the /v2/logout endpoint.

I'm not sure why this would be the case. I can't find anything in my app that would differentiate like this.

What was the expected behavior?

It to logout of Auth0 regardless of what page/url the user is in.

Reproduction

I haven't tried to create a cutdown version of the app, as this would take time. I'll try this next if the above isn't enough info though. I'm sure I must be doing something daft!

Environment

Please provide the following:

• Version of auth0-spa-js used: 1.13.5
• Which browsers have you tested in? Chrome
• Which framework are you using, if applicable (Angular, React, etc): Angular
• Other modules/plugins/libraries that might be involved:

[frederikprijck]

@dracan thanks for raising, could you please provide a reproduction of your problem?
I just tried using the SDK and logout from a different path but the root, and it seems to call v2/logout as expected.

Thanks!

[dracan]

@frederikprijck Thanks - it'll take some time for me to come up with a reproducible case that I can share, and it'll be in the new year now. I'll add it to my list for when I start back. It sounds like there's no obvious reason why that method call would do one thing for one URL and another for the root URL though. I'll do a bit more digging after the xmas break, and reply back here if I find anything (or manage to create a reproducable case that I can share).

[dracan]

Just having a further look, and noticed that in Chrome devtools, the /v2/logout request is appearing as cancelled. Hence why Fiddler didn't see it. Strange - it's just being called from a normal Angular click event.

Ie. markup is:

<a *ngIf="isAuthenticated()" (click)="logout()">Sign Out</a>

That logout function is:

logout() {
  this.authService.logout();
}

Which just calls the auth.service.ts logout function copied directly from the getting started documentation...

logout() {
  this.auth0Client$.subscribe((client: Auth0Client) => {
    client.logout({
      client_id: environment.clientID,
      returnTo: `${window.location.origin}`
    });
  });
}

Not sure why being on a page rather than the home page would cause this. I'll carry on digging...

[dracan]

Googling suggests I need to do something with preventDefault to avoid the anchor's default click. So sounds like it's nothing to do with this library. I'll just confirm that, then close this ticket.

[dracan]

Aha! This was it! I just needed to add [routerLink]="" to my logout anchor, and that's fixed it 😄

Sorry to waste your time!

[frederikprijck]

Great that you manage to solve it!

For accessibility purposes you shouldn't have an a element that has both a href (or routerlink in case of Angular) and a click handler (you should just never have a click on an a element probably). You want to use a button instead.

Also, keep in mind we have an Angular SDK as well: https://github.com/auth0/auth0-angular

[dracan]

Ah thanks - I'll change that to a button.

Yeah - I'm not sure (can't remember) why I didn't initially use your Angular library. I don't want to change it now though, as it works.