Auth login .then delay

[ryanlangton]

Calling AngularFire.auth(...).then(...) the user may still not be authenticated yet in the .then portion. After the user logs in I'm attempting a redirect in the .then portion but my AuthGuard still fails. If I then manually change the route (by changing my browser URL) the AuthGuard passes.

Here is my login function on my login page/component.

  loginFacebook() {
    this.login(AuthProviders.Facebook);
  }

  loginGoogle() {
    this.login(AuthProviders.Google);
  }

  loginTwitter() {
    this.login(AuthProviders.Twitter);
  }

  login(provider: AuthProviders) {
    this.af.auth.login({
      provider: provider,
      method: AuthMethods.Popup,
    }).then((auth: FirebaseAuthState) => {
      console.log('authenticated!');
      this.auth.createUserIfNew(auth);
      this.auth.redirectAfterLogin();
    });
  }

My AuthService (called above with this.auth.redirectAfterLogin()):

    redirectAfterLogin() {
        if (this.storedPath && this.storedPath !== '') {
            console.log('go to stored path: ' + this.storedPath);
            this.router.navigate([this.storedPath]);
            this.storedPath = '';
        } else {
            console.log('go to profile');
            this.router.navigate(['/profile']);
        }
    }

    redirectToLogin(fromPath: string) {
        console.log('redirecting from ' + fromPath);
        this.storedPath = fromPath;
        this.router.navigate(['/login']);
    }

Here is my AuthGuard:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private af: AngularFire, private router: Router, private auth: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.af.auth.asObservable().take(1).map(auth => {
      if (auth && auth.auth) {
        console.log('auth passed');
        return true;
      }
      console.log('auth failed, store path: ' + state.url);
      this.auth.redirectToLogin(state.url);
      return false;
    });
  }
}

And my console.log output:

authenticated!
auth.service.ts:40 go to stored path: /profile
auth-guard.service.ts:27 auth failed, store path: /feed
auth.service.ts:33 redirecting from /feed

[christophertrudel]

I experience similar issues while logging out.

[andlcool]

Me too, experiencing the same problem

[tonymk]

A trick to get around it:

import { Observable } from 'rxjs/Rx';

Observable.of(null).delay(50).subscribe( () => {
  this.auth.redirectAfterLogin();
})

or my litle hack:

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(
        private router: Router,
        @Inject(FirebaseApp) private firebaseApp: any
    ) { }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        // return true if authenticated
        if (firebase.auth().currentUser) return Observable.of(true);

        // if no currentUser, give it 50ms more before declining, for firebase auth to check if you are logged in or not.
        return Observable.of(null).delay(50).map(() => {
            if (this.firebaseApp.auth().currentUser) { return true; }
            this.router.navigateByUrl('login');
            return false;
        });

    }

}

Edit: found a better way from https://blog.khophi.co/angularfire2-authentication/

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(
        private af: AngularFire,
        private router: Router
    ) { }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.af.auth.map((auth) => {
            if (auth == null) {
                this.router.navigate(['/login']);
                return false;
            } else {
                return true;
            }
        }).first();

    }

}

[Energy4216]

I was about to update to latest af2 is this still an issue and does tonymk's trick work ok?