Ionic 2 google signin with firebase

Question

im getting some troubles with firebase authentication and google provider. Im trying to signin with google provider (this works fine) but then i want to redirect to my homepage but im getting something wrong.

I have an auth provider:

import { Injectable } from '@angular/core';
import firebase from 'firebase';


@Injectable()
export class AuthData {
  // Here we declare the variables we'll be using.
  public fireAuth: any;
  googleProvider: any;

  constructor() {
    this.fireAuth = firebase.auth(); // We are creating an auth reference.

    // Google Provider for Google Auth
    this.googleProvider = new firebase.auth.GoogleAuthProvider();
  }

  /**
   * This function doesn't take any params, it just logs the current user out of the app.
   */
  logoutUser(): any {
    return this.fireAuth.signOut();
  }

  /**
   * This function doesn't take any params, it just signin the current user
   * using google provider.
   */
  googleSignin(): any {
    return this.fireAuth.signInWithRedirect(this.googleProvider);
  }
}

This is my app.component:

[all imports here]

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Home;
  constructor(public platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    firebase.initializeApp(FirebaseConfig);

    firebase.auth().onAuthStateChanged((user) => {
      if (!user) {
        this.nav.setRoot(Home);
      } else {
        this.nav.setRoot(Menu);
      }
    });

    this.platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}

And this is my home.ts:

[some imports here]

@Component({
  templateUrl: 'home.html',
})
export class Home {

  constructor(public navCtrl: NavController, public authData: AuthData) {}

  registerUserWithGoogle() {
    this.authData.googleSignin();
  }
}

So when i try to sign in with Google from home.html (that its a view on app.html) to menu.html i got some weird behaviour. I have some screenshots.

app.html:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

home.html:

<ion-content class="home">
  <div class="logo">
    <div class="logo-icon">
      <img src="assets/img/logotipo.png" alt="">
    </div>
  </div>
  <button ion-button block color="danger" class="google-btn" (click)="registerUserWithGoogle()">
    Log In with Google
  </button>
</ion-content>

This is what i get when i log in:

And if i click on the arrow i get this:

but now im not able to click on sidemenu and i dont know if its for nesting two ion view or something else.

Thank you

Answer 1

I read the comments so this is now a 2 part question:

1) For Google Auth, the signInWithRedirect() and signInWithPopUp() methods don't work in cordova/ionic apps yet.

You'll need to use the Google native plugin to get the login credentials and then you can pass them to firebase.auth.signInWithCredentials()

2) About the bug sending you to the HomePage:

There's a weird bug in Ionic's navCtrl that isn't pushing the page after it returns with the user in:

firebase.auth().onAuthStateChanged((user) => {
  if (!user) {
    this.nav.setRoot(Home);
  } else {
    this.nav.setRoot(Menu);
  }
});

I got that working by simply declaring rootPage: any = Menu; and then doing this instead:

firebase.auth().onAuthStateChanged((user) => {
  if (!user) {
    this.nav.setRoot(Home);
  }
});