Angularfire: AngularFireAuthGuards kill change detection

[Wykks]

Version info

Angular: 9.1.4

Firebase: 7.14.2

AngularFire: 6.0.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Ionic (web only)

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

TBD, not sure how to minimally reproduce...

Steps to set up and reproduce

Sample data and security rules

Debug output

* Errors in the JavaScript console *
None

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

* Screenshots *

Expected behavior

Change detection should be working.
Old issue : https://github.com/angular/angularfire/issues/2367. This is not entirely fixed.
You can check here
https://github.com/angular/angularfire/blob/76104ef4e2193bab72caff0f1a8f7655ccbf51f8/src/auth-guard/auth-guard.ts#L43
Add a NgZone.assertInAngularZone().
And we get "Expected to be in Angular Zone, but it is not!".

Actual behavior

Random issues, due to change detection not working. I was blaming ionic to break change detection but as soon as I removed the AngularFireAuthGuard, everything started to behave correctly...

Workaround

Create a custom AuthGuard like this:

@Injectable({
  providedIn: 'root',
})
export class AuthGuard extends AngularFireAuthGuard implements CanActivate {
  constructor(
    @Inject(FIREBASE_OPTIONS) options: FirebaseOptions,
    @Optional()
    @Inject(FIREBASE_APP_NAME)
    nameOrConfig: string | FirebaseAppConfig | null | undefined,
    zone: NgZone,
    router: Router
  ) {
    super(options, nameOrConfig, zone, router);
    this.authState = this.authState.pipe(
      observeOn(new ɵAngularFireSchedulers(zone).insideAngular)
    );
  }
}

[ghigi123]

Having the same issue
(Angular 9.1.4 in browser)

[field123]

Same issue.
Angular: 9.1.3
AngularFire: 6.0.0-rc.2

[jcpham81]

@Wykks thanks for the workaround.

[crtl]

Ive tried the workaround and it is working related to AuthGuards but AngularFireFunctions break change detection too.

[BiserSirakov]

@Wykks Thanks for the workaround! I spent a full day on that.

[BianchiSeb]

There's still a team working on it? The latest updates are full of bugs like this.

[rami-alloush]

Is this solved, and does the workaround indeed break the AngularFireFunctions?

[magoarcano]

The workaround doesn't work with custom AuthPipe

[Wykks]

Of course, it's just a workaround for the Guard. It's not going to work for something else.
Also, no it doesn't break AngularFireFunctions at all.
It's super weird to not have any news about this since more than a whole month. What's going on google?

[bizio]

@Wykks thanks for the workaround, it works great for me! this issue was driving me crazy

[BianchiSeb]

Hello angularFire team. I literally spend a ton of money in your app for my clients. At least answer us. It’s a shame that core features are broken.
It’s a shame you don’t manage the PR.
At least give us back the projets lead and we can manage it like a TRUE open source project.

[jamesdaniels]

This should be addressed in a recent release, if still having trouble feel free to open a new issue & we absolutely welcome PRs.