Angularfire: signInWithPopup breaks components after successful login + routing

Created on 15 Dec 2017 · 3Comments · Source: angular/angularfire

Version info

Angular:
@angular/cli: 1.5.5

Firebase:
firebase: 4.8.0

AngularFire:
angularfire2: 5.0.0-rc.3

Angular Material:
@angular/material: 5.0.0-rc.2

I'm facing the same issue as https://github.com/angular/angularfire2/issues/1054 which has been closed.

How to reproduce these conditions

Steps to set up and reproduce

Add Angular animations and angularfire to angular-cli project:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Navigate on Login

Call router.navigate to change routes after logging in with AngularFireAuth

this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).then((data) => 
{ 
this.router.navigate(['/test']); 
}); }

this is the same with

this.afAuth.auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider());
this.afAuth.auth.getRedirectResult().then(userResponse => {
    this.router.navigate(['/test']);
    this.firebaseLoginSuccessCallback(userResponse);
 })

Expected behavior

After successful login + routing : show only component for new route and have a normal behaviour with elements that are on the screen

Actual behavior

After successful login, i'm redirected on the route /test. New component is appended to previous component during a few seconds. It seems like change detection doesn't work.
If I resize the window manually, old view disappear but my angular material components are broken.

Menu is not closed when I click on my input. Input has no angular material css/animation

All my application is broken. If I refresh my navigator (F5), everything work again.

I tried zone.run and detectChanges but it doesn't change anything

Source

isylhdin

Most helpful comment

Hum, my case is not exactly as I described. I can make it work with zone.run now

this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
    .then((userResponse) => this.test1(userResponse)});

...
private test1(userResponse) {
  firebase.auth().currentUser.getToken(true)
                                            .then(this.test2)
}

private test2() = (idToken) => {
  this.httpCall().then( (response) => {
    this.zone.run(() =>{
      this.router.navigate(['/test']);
    }
  }
}

And it works like that. Routing has to be surrounded by zone.run

isylhdin on 18 Dec 2017

👍5

All 3 comments

Hum, my case is not exactly as I described. I can make it work with zone.run now

this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
    .then((userResponse) => this.test1(userResponse)});

...
private test1(userResponse) {
  firebase.auth().currentUser.getToken(true)
                                            .then(this.test2)
}

private test2() = (idToken) => {
  this.httpCall().then( (response) => {
    this.zone.run(() =>{
      this.router.navigate(['/test']);
    }
  }
}

And it works like that. Routing has to be surrounded by zone.run

isylhdin on 18 Dec 2017

👍5

Hey @isylhdin! Can you create a stackblitz that shows this? I created a similar app to reproduce this but I wasn't able to hit it.