firebase.auth().currentUser is null after refresh

Ionic Framework ionic-v3
1

I thought the firebase javascript SDK was meant to automatically refresh the token and keep the user logged in. When I refresh my page (web) the currentUser is reset to null and my authguard fails and I have to log in again.

Basically I want it to auto login the user / refresh token if needed. Anyone know how to do this?

Looked at these but couldn’t figure it out:

2

Hello, You can do something like this

Import AngularFireAuth in your page.ts file

import { AngularFireAuth } from 'angularfire2/auth';

After add this

constructor(public fAuth: AngularFireAuth) {
	var user = this.fAuth.auth.currentUser;
	
	if (user != null) {
		  -----your code---
	}
}

And also your can set/add Session

Open app.component.ts file add this

import { AngularFireAuth } from 'angularfire2/auth';

constructor(public fAuth: AngularFireAuth) {
platform.ready().then(() => {

this.fAuth.authState
        .subscribe(
          user => {
            if (user) {
              this.rootPage = HomePage;
            } else {
              this.rootPage = IntroPage;
            }
          },
          () => {
            this.rootPage = IntroPage;
          }
        );
}
}

Hope it help you :slight_smile:

3

Thanks gokujy but I am not using the AngularFire package.

I solved it by putting this in my auth guard.
This was a useful tutorial: https://javebratt.com/ionic-firebase-tutorial-auth/

export class AuthGuard implements CanLoad {

  constructor(private authService: AuthService,
              private router: Router) {}

  canLoad(
    route: Route,
    segments: UrlSegment[]
  ): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise((resolve, reject) => {
      firebase.auth().onAuthStateChanged((user: firebase.User) => {
        if (user) {
          console.log('User is logged in');
          resolve(true);
        } else {
          console.log('User is not logged in');
          this.router.navigateByUrl('/auth');
          resolve(false);
        }
      });
    });
  }
1 Like
4

Hey! I just found this helped me on my app anyway - I had subscribed with fireauth.onAuthStateChange() in every.single.page.and.service of my app and everything showed in console.log(), but it STILL didn’t cause any changes to my home page (or any other start pages). But using fireauth.authstate.subscribe() in my userService instead, DOES cause all pages to update! Thanks for the tip!

5

Here is my current code using Angular Fire. Note that I had some change detection issues going on if I did not add the zone code. Just in case you run into this at some stage.

constructor(private router: Router,
              private afAuth: AngularFireAuth,
              private authService: AuthService,
              private ngZone: NgZone) {}

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise((resolve, reject) => {
        this.afAuth.auth.onAuthStateChanged((user: firebase.User) => this.ngZone.run(() => {
        if (user) {
          this.authService.getAppUser(user.uid).then(appUser => {
            // Reload adminUser data or exit if no user record (null)
            if (appUser) {
              // This will automatically emit the new user via the auth service
              resolve(true);
            } else {
              this.router.navigateByUrl('/login');
              resolve(false);
            }
          });
        } else {
          // Remove adminUser data
          this.authService.resetAppUser();
          this.router.navigateByUrl('/login');
          resolve(false);
        }
      }));
    });
  }