logging in with buildAuthorizeUrl skips login page

[crhistianramirez]

Describe the problem

I'm building an ionic application with angular and was following along with this quickstart guide and modifying it for my use case. We're using buildAuthorizeUrl for login functionality as recommended in the guide because it opens the browser within the app and provides a more seamless experience for mobile.

The issue we're having is that when that method gets called it essentially bypasses the login page and just refreshes the user's session (flashes to login page then redirects back with state/code params). I'm not sure how its doing that because at the point the login function is called the user has already logged out by clicking the log out button which calls authService.logOut with federated: true which from what I understand should fully log a user out both locally and auth0 side.

What was the expected behavior?

I would expect the user to be redirected to the login page where they can re-enter their credentials or select a different social login method.

Reproduction

1. Clone this repo
2. Add domain and clientId to src/environments/environment.ts
3. Run npm install to install dependencies
4. Run npm run build to build application
5. Add com.auth0.samples://carmmunity-dev.auth0.com/capacitor/com.auth0.samples/callback to your auth0 Allowed Callback Urls
6. Add com.auth0.samples://carmmunity-dev.auth0.com/capacitor/com.auth0.samples/callback to your auth0 Allowed Logout Urls
7. Add capacitor://localhost to your auth0 Allowed Origins (CORS) settings
8. Run npx cap run android to run on native platform
9. When first navigating to application you will be redirected to login page, go ahead and login (this works and you are redirected to login page since its your first time)
10. Now click log out
11. Try to log in and observe that instead of being redirected to the login page you are simply placed back in the application with a new token. I noticed that if instead of using buildAuthorizeUrl I use loginWithRedirect it works as expected - this workaround is not desirable though because the browser window that's opened happens outside of my mobile application.

Environment

• Version of auth0-angular used: The sample app uses ^1.5.1 but I have reproduced on most current version (1.8.0)
• Which browsers have you tested in? Chrome
• Which version of Angular have you tested with? 11.2.0
• Other modules/plugins/libraries that might be involved: capacitor, ionic

[frederikprijck]

It looks like the user was not logged out from Auth0. Can u verify if anything in the logs explains what is going wrong? Its probably related to the federated logout and something going wrong with that, less so with this SDK.

You can also add prompt: 'login'to the /authorize request to enforce the user to be prompted for their credentials, despite the existence of an Auth0 session.

[stevehobbsdev]

@crhistianramirez The bit you're missing here is that there is an equivalent buildLogoutUrl function that you should call and then execute it using Browser.open.

As you point out, calling loginWithRedirect will open the browser installed on your device rather than using the system browser, which is why we offer buildAuthorizeUrl so that you can plug that into Capacitor's Browser API. Logging out using the logout function behaves the same way.

Shown in the sample here, the way to do logout with Capacitor here is to build the URL and use Browser.open, which will log you out on the server) and then call logout({ localOnly: true }), which will effectively clear your local session but then skip doing the redirect to the logout endpoint.

logout() {
    this.auth
      .buildLogoutUrl({ returnTo: callbackUri })
      .pipe(
        mergeMap(async (url) => {
          await Browser.open({ url, windowName: '_self' });
          this.auth.logout({ localOnly: true });
        })
      )
      .subscribe();
  }

Let us know if that helps.

[stevehobbsdev]

Additonally, to clarify:

which calls authService.logOut with federated: true which from what I understand should fully log a user out both locally and auth0 side

federated actually logs you out from any additional services from which you used to log in. For example, if your user signs into your application using the Google social connection and you logout with { federated: true }, then your user will not only be signed out from Auth0, but from their Google account as well.

See: https://auth0.com/docs/login/logout/log-users-out-of-idps

Just wanted to clarify that in case that wasn't your intention.

[crhistianramirez]

Thank you both for your replies. I think I was troubleshooting another issue I was seeing when I changed that from what was in the guide. Anyways, that solves that particular issue, I'm now seeing something else but opening a separate issue for that