Angularfire: AngularFireAuthGuard interferes with bindings

[chrisdrobison]

Version info

Angular: 9.0.2

Firebase: 7.15.0
AngularFire: 6.0.0-rc1

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Chrome 80

How to reproduce these conditions

Steps to set up and reproduce

1. Add AngularFireAuthGuard to a route
2. Create reactive form
3. Add some output areas to see values update

I've attached a sample project. Just updated the environment files with your own Firebase config. Look at the /login route.

admin-angular.zip

With the guard in place, on /login you will see that typing in anything in those form fields results in no binding updates, nothing happens. Remove the auth guard from the route for /login and the bindings start working again. I added my own trivial auth guard and bindings still work so there looks to be an issue with the angular fire auth guard.

Debug output

* Errors in the JavaScript console *

There are no errors in the console.

Expected behavior

1. Bindings should update

Actual behavior

1. Nothing happens

[chrisdrobison]

I just tried with the 5.x branch and this is working just fine.

[ArtisanvsDev]

I am experiencing some similar issues with the AngularFireAuthGuard and it seems that the problems are related to Angular zones. I know James is working on some fixes for zones so I am hoping for a fix in the new version. For now I am using my own auth guard as well.

[atb00ker]

I can confirm this on firefox as well.
Also, If I go to another page with "routerlink" and return to the form page, it starts to work just fine. :smile:

[smarth55]

I, too, am having a zone issue when using the auth guard. I'm getting after passing through the guard and navigating within the application:
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
If I comment out the guard, then routing works just fine. One weird thing is this only happens on the first attempt to navigate.

I also tried to create a stackblitz for my issue, but ran into an apparently known and separate issue of having the auth guard not in the list of providers even though it is and runs fine locally. I can't remember the issue to reference that one, but I've seen it before.

[zalito12]

As @smarth55 I have similar problems and it seems to fail just on first page load.

I hav copy-pasted the v5 AuthGuard on a custom guard on my project and it works like a charm.

[waterplea]

I have a similar issue, probably related. When I use routerLink in a guarded route it doesn't work, I get this error: Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'? and my current route is note removed but the new one is added and change detection is not triggered, I end up with two broken routes at the same time.

[waterplea]

Looks like routerLink issue was fixed in yesterdays 6.0.0 release!

[smarth55]

My issue was not fixed by the 6.0.0 release.

[jamesdaniels]

My issue was not fixed by the 6.0.0 release.

Can you put together a minimal repo and share?

[smarth55]

OK, so now creating a brand new project with the same routing structure is working, but my original project is still not. It must be something on my end. I'll continue to see if I can isolate the issue.

[jsalazar87]

I still facing the issue with the latest version as well. As soon as I remove the guard everything starts working. Otherwise every route change I get the warning that it is running out of Ng Zone and nothing work as expected and my routes usually use routerLink on the template.

[ArtisanvsDev]

I upgraded from RC1 to 6.0 however I am still experiencing the same problem which is definitely related to Zones. This is causing issues with Angular Material as well as explained here: https://stackoverflow.com/questions/61036606/angularfire-auth-guard-and-angular-material-not-working-together

Here is a small repo in github https://github.com/ebem/test-app

For now my workaround is to use custom auth guards but it will be really nice to have the Angular guards working as expected. Also the RC changelog mentions this:

AngularFireAuthGuard and canActivate have dropped (attempted) support for raw AuthPipes, as they were not functioning in AOT builds; you'll want to move to AuthPipeGenerators

Can someone please clarify or confirm if AngularFireAuthGuard and the AuthPipes are still supported? Just want to understand the above change. Thanks in advance.

[rpd10]

Upgrading to the 6.0 release has fixed some of the problems I was seeing with routerLink, but I am still experiencing problems with change detection running in some cases. It seems like the control flow is not re-entering the Angular zone properly, maybe?

For example, I have ComponentA and ComponentB, both protected by AngularFireAuthGuard with redirectUnauthorizedTo(['home']). I have a sidenav with router links to both of those components, the navigation failed prior to version 6.0, but now works. From within ComponentA if I have a routerLink to ComponentB, that still yields a Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'? warning in the console.

Another symptom is that from within one of those components, if I use MatDialog to open a dialog, that seems to happen outside the Angular zone because change detection doesn't run in the dialog. If I wrap the call to dialog.open in zone.run(() => {}), then it works as expected.

I'll try to work up a Stackblitz for this later today

[christianmenz]

I have the same issue. redirectLoggedInTo isn't working for me.

[jamesdaniels]

I have a repro & a pending fix btw. Will cut in 6.0.1

[nicobytes]

wow yesterday I spent a lot of time in founding the bug... the views with those guards doesn't work with binding when removing the guards of @angular/fire the app works fine

[vsaw]

I wrote a quick and dirty fix for this issue until 6.0.1 is out. You can find it here: https://gist.github.com/vsaw/d9c340d2151965dbdd6747943664a4dd#file-angular-fire-auth-guard-fix-guard-ts-L26-L28

To use it simply replace AngularFireGuardwith AngularFireAuthGuardFix in your routes.

- canActivate: [AngularFireAuthGuard],
+ canActivate: [AngularFireAuthGuardFix],

All other things such as redirectLoggedInTo and redirectUnauthorizedTo should keep working.

So far I have not seen any side effects, although I at least expect some possible performance issues as all is now handled within the Angular Zone.

Hope this helps anyone. :-)

[leandroz]

Same issue here, @vsaw I tried your fix but is not working.
Something to add is that only happens is I open the page directly with the url, if I navigate first from somewhere else it doesn't happen.

[z6tanker]

Same issue with my current project.

[adamkoncz]

Same issue in AngularFire: 6.0.0

AngularFireAuthGuard actually works until I add AngularFirestore to the project. Then I get the above error.

[vsaw]

@leandroz You are right, I noticed a difference in behavior when using child routes. At least for me, I could fix it by forcing everything into the Angular zone. The gist has been updated accordingly

[yjaaidi]

Maybe the guards should be allowed to run outside of zone and then it's an @angular/router issue https://github.com/angular/angular/issues/37223 😉

This will clearly happen again with other apps and libs.

[gleno]

Any resolution on this issue?

[Ross-Rawlins]

Also started experiencing this issue and its a blocker for us to move to production

[longcharmroeun]

Also started experiencing this issue and its a blocker for us to move to production

it block my project too.

[leandroz]

Guys if it’s blocking write your own guards.

On Sat, 20 Jun 2020 at 23:00 Longcharmroeun [e-mail]
wrote:

Also started experiencing this issue and its a blocker for us to move to
production

it block my project too.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire/issues/2355#issuecomment-647067812,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABDJDUW7TFLUAGM4I27PTF3RXVST5ANCNFSM4LMWFUTQ
.

>

Leandro Zubrezki
Freelance Software Developer

[yasinkocak]

is this issue resolved?

[jamesdaniels]

yes, it's been resolve in recent patches