Firebase Google Login For Mobile Browser

Ionic Framework ionic-v3
1

Firebase documentation suggests using signinWithRedirect() to get client credentials for mobile. My signin implementation is called by a button within my login.html but tapping the button yields no result in the browser.

this is my login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@IonicPage({
})
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

    constructor(
      private alertCtrl: AlertController,
      private aFAuth: AngularFireAuth,
      public navCtrl: NavController,) {
    }

    googleLogin(){
      var provider = new firebase.auth.GoogleAuthProvider();
      this.aFAuth.auth.signInWithRedirect(provider).then(() => {
        //stack flow test
        this.alertCtrl.create({
          title: 'Test Alert',
          subTitle: 'it worked',
          buttons: ['Dismiss']
        }).present();
      });
      this.aFAuth.auth.getRedirectResult().then(result => {
        if (result.credential) {
          var token = result.credential.accessToken;
        }
        var user = result.user;
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
      });
    }

If signinWithRedirect() were to work as I was expecting you would at least see an alert.

2

Redirect forces a page reload. Your getRedirectResult shouldn’t be inside the login function, but rather in the “entry to the page” code section. There’s an official vanilla js example here, which you can make cleaner with Typescript and AF.

3

I put the getRedirectResult() in the ionViewDidEnter() method.

Think there is an issue with signinWithRedirect() specifically. There is a result but it has no user.

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@IonicPage({
})
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

    constructor(
      private alertCtrl: AlertController,
      private aFAuth: AngularFireAuth,
      public navCtrl: NavController,) {
    }

    ionViewDidEnter(){
      var message;
      this.aFAuth.auth.getRedirectResult().then(result => {
        if(result){
          if (result.credential) {
            var token = result.credential.accessToken;
          }
          if(result.user){
            var user = result.user;
            message = "success";
          } else {
            message = "weird, no user";
          }
        } else {
          message = "didnt work";
        }
        this.showAlert(message); //stack flow test
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
        message = "error with getRedirectResult";
        this.showAlert(message); //stack flow test
      });
    }

    googleLogin(){
      var provider = new firebase.auth.GoogleAuthProvider();
      this.aFAuth.auth.signInWithRedirect(provider);
    }

    showAlert(info) {
      let alert = this.alertCtrl.create({
        title: 'Credentials',
        subTitle: info,
        buttons: ['Dismiss']
      });
      alert.present();
    }
4

Screenshot_20180317-093144~2
Screenshot_20180317-093144~2.png720Ă—1154 37.5 KB

1 Like
5

I have the same problem

6

(I want to mention that the recommended method for signing in with google on desktop browser is signInWithPopup() so for all this time I never even thought to check what signInWithRedirect would yield for desktop browser)

I console.log() everything instead of using the AlertController and I went back to using the desktop browser. I saw there was a domain authorization error in the console.

To fix this, go to https://console.firebase.google.com

-> click on you project
-> scroll down to Authentication and click on “GET STARTED”
-> click on the “SIGN-IN METHOD” tab
-> scroll down to Authorized domains and click “ADD DOMAIN”
-> enter your domain and click “ADD”

This should resolve that particular issue with using signInWithRedirect() for mobile browser.

And as @AaronSterling mentioned, this will force something like a refresh so you want to grab the result using getRedirectResult() in any of the wakeup methods.

I recommend placing it in constructor of app.component.ts (Lazy way of checking for social login app wide).

From there you can check if someone had just signed in by using a conditional for the user property on the result (since the result will always return true but will only return true with a user if someone had just signed in).