Ionic/Angular navigation after firebase auth

user_9836090 0
Viewed 207

After I sign in with firebase google sign in method, I want to navigate to home page. I can't figure out, why the navigation is not working. Here is my code:

async signInWithGoogle() {

 // authentication works:
 await this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

 // but the following code doesn't get executed:
 this.ngZone.run(() => {
  this.router.navigate(['tabs/home']);
 });
}
ionic-framework angular firebase router navigation
3 Answers

For navigation you should use one of these methods:

this.router.navigate(['tabs', 'home']);

or

this.router.navigateByUrl('/tabs/home');
user_16765090

My guard looks like:

canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (!this.authService.isLoggedIn) {
      this.router.navigateByUrl('welcome');
    }

    return this.authService.isLoggedIn;
}

and the isLoggedIn getter looks like:

get isLoggedIn() {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
}

my guess is that the return value is false because the rest works asynchron

I added a getAuthState method to the authService which returns a boolean to, but asynchron:

async getAuthState() {
    const result = await this.afAuth.getRedirectResult();
    if (result.user) {
      return true;
    } else {
      return false;
    }
}

And updated the guard to look like this:

canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (!this.authService.isLoggedIn) {
      this.router.navigateByUrl('welcome');
    } else {
      return this.authService.isLoggedIn;
    }

    if (!this.authService.getAuthState()) {
      this.router.navigateByUrl('welcome');
    }
    return this.authService.getAuthState();
}

and in the login page I added:

this.authService.getAuthState().then(result => {
    console.log(result);
    if (result) {
      console.log('should redirect');
      this.router.navigateByUrl('/tabs/home');
    }
});

the console logging is true and should redirect but its not redirecting to /tabs/home.

Maybe I have to do a little research.. Here I found a similar issue

user_98360900

I've found a solution for the auth-guard here

Login-Component:

ngOnInit() {
  this.authService.getAuthState().then(result => {
    if (result) {
      this.router.navigateByUrl('/tabs/home');
    }
  });

  if (this.authService.isLoggedIn) {
    this.router.navigateByUrl('tabs/home');
  }
}

Auth-Guard:

return new Promise((resolve, reject) => {
  firebase.auth().onAuthStateChanged((user: firebase.User) => {
    if (user) {
      resolve(true);
    } else {
      this.router.navigate(['/welcome']);
      resolve(false);
    }
  });
});

And in the auth service I only execute the login and make an auth-check for the redirect result:

async signInWithGoogle() {
  await this.afAuth
 .signInWithRedirect(new firebase.auth.GoogleAuthProvider());
}

async getAuthState() {
  const result = await this.afAuth.getRedirectResult();
  if (result.user) {
    return true;
  } else {
    return false;
  }
}
user_98360900
Related