AngularFire auth guard redirects doesn't work on login/logout

[mystiquewolf]

Version info

Angular: 14.0.3

Firebase: 11.1.0

AngularFire: 7.4.1

Other (e.g. Ionic/Cordova, Node, browser, operating system): Firefox 102.0.1 / node 16.16 / Arch Linux

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem Code: https://gitlab.com/liubomirwm/angularfire-auth-guard-bug You can see/reproduce at this URL: https://my-agile-and-lean-life-frontend-eppvzr3nfa-ue.a.run.app/

Steps to set up and reproduce

1. Open the URL linked to above
2. Click Login button
3. Login with Google account in the popup
4. Notice how the toolbar updates itself because the login status changed (Logout button and Tasks list link appear). Also Notice that the url does not change to /tasks-list upon login.

Sample data and security rules

Debug output

Errors in the JavaScript console

Output from firebase.database().enableLogging(true);

Screenshots

Expected behavior

Step 4 is the bug/issue. Look at the linked code and see that the AngularFire auth Guard doesn't redirect, but it is configured to do so. App is in development mode and you can look at the console to see the Auth Guard routing events.

Actual behavior

[imjoshnewton]

I found this issue searching for the best way to do what I believe you are trying to do. I have similar redirects in place and what works is if I try to navigate to a route that is guarded, the user is redirected properly. I have a “team” route that you can’t navigate to if you are not logged in and redirects you to the login page. What doesn’t happen, like you are experiencing, is that logging out while on that teams page doesn’t immediately send you to the login page.

From what I can tell this is how this works. Route guards determine if you can activate a route. They don’t fire if you are currently on that route.

[mystiquewolf]

@imjoshnewton Do you think this is a real bug? It has to be able to be done... somehow. I'm completely new to Angular and will try to write a guard from scratch to see where it'll fail me.

[imjoshnewton]

I do not think this is a bug. I think it is the way the guards work. They stop navigation. They don't fire if the auth state changes while you are currently on a route. This isn't a major concern in my app but if I wanted people to be redirected on a change to the auth record or user document I would probably build that into my auth service. If you get a null user and your current user is defined, the user probably logged out and needs redirected.

[JeevaRP-SDE]

Hi @imjoshnewton @kylecordes @jamesdaniels guys Can you please Give some idea about this issues Actually I am very new from here . I had knowledge in Angular 13 . Guys can you give any beginner level open Source Project in Github Actually I am .NET FULL STACK DEVELOPER.

[JeevaRP-SDE]

Hi @mystiquewolf Actually you are using Router link for this so this router one page to another page when you click login Can you please add Code for function so it will redirect and reload as well

window.location.reload();

After Logout.

because after Logout that page will refresh and back