Angular SPA Login Issues auth.loginWithPopup() vs auth.loginWithRedirect()

Please include the following information in your post:

  • Which SDK this is regarding: @auth0/auth0-angular
  • SDK Version: e.g. ^1.9.0
  • Platform Version: e.g. Angular ~13.2.0
  • Code Snippets/Error Messages/Supporting Details/Screenshots: N/A

Is this a feature request or bug report? Probably a usage misunderstanding? Possibly a bug report.

When I first followed the getting started instructions for Angular, it advised using auth.loginWithRedirect() on the login button, and it worked great. Everything I’m about to say is about localhost:4200 development, I haven’t tried it on a DNS-named server deployment.

At some point recently, for reasons I don’t really understand, the application stopped realizing I was already logged in, and so it displayed to me the login button. Upon clicking the login button the the URL changed briefly and then immediately returned to my app, but my app continued to not recognize that I was in fact logged in, and the root cause was auth.user$ just emits null.

I searched around for some idea of what might be going on and I stumbled on to a post that said I should try using auth.loginWithPopup() instead of auth.loginWithRedirect(). So I did that and everything started working again in my app, albeit by launching a popup instead of referring me to another page to login. This was using a Chrome web browser.

So I went ahead and deployed my app to a DNS-named server to try it out in production. In a chrome browser, it worked the same way on the internet as it did on my localhost testing. Again, awesome. Then I tried to do this on Chrome on my mobile phone, and this is where things went south.

auth.loginWithPopup() correctly opened a new tab where I could log in as before. Upon logging in, however, I end up on a blank white page. If I close that tab and go back to the tab with my app, I’m still not logged in. If I refresh the page, now I’m logged in. In some roundabout way, this ‘works’, but I think we can all agree it’s not a great login experience for mobile.

I’m considering switching it back to auth.loginWithRedirect() but since that mysteriously stopped working in a way I didn’t understand in local development with a Chrome browser, I’m understandably hesitant to do so without inquiring here first. Can anyone offer me advice on how to proceed here?

As an aside, one of my friends tested it on his iPhone. For him, in Safari and it didn’t work (resulting in a white screen). That same friend said it did work in Firefox. My personal experiences in the OP, as they pertained to mobile, were on an Android (Google Pixel 6).

Good grief, now auth.loginWithPopup() is doing the same thing on my local development that auth.loginWithRedirect() was doing after it stopped working…

Maybe it’s just realy, really slow to emit the fact that I’m logged in to my app…