angularfire: Angularfire2 Ionic2 facebook auth error

Version info

Angular: 2.2.1

**Firebase:**3

**AngularFire:**beta 6

Other (e.g. Ionic/Cordova, Node, browser, operating system): Ionic 2 RC.4 - Cordova Android

Steps to set up and reproduce

signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
    if (this.platform.is('cordova')) {
      console.log("trying to log in using cordova...");
      Facebook.login(['email', 'public_profile']).then(res => {
        console.log("Logged in. result here");
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
        console.log(firebase.auth().signInWithCredential(facebookCredential));
        return firebase.auth().signInWithCredential(facebookCredential);
      });
    } else {
      return this.auth$.login({
        provider: AuthProviders.Facebook,
        method: AuthMethods.Popup
      });
    }
  }

Debug output

** Errors in the JavaScript console **

The app works great in web browser. In Android, the login doese’t work. I debugged why the login button is not working and I found this errors:

EXCEPTION: Error in ./HomePage class HomePage - inline template:6:0 caused by: Cannot read property 'then' of undefined....

Logged in. result here

EXCEPTION: Uncaught (in promise): ReferenceError: firebase is not defined
ReferenceError: firebase is not defined
    at file:///android_asset/www/build/main.js:42039:42
    at t.invoke...

I tried to: console.log(this._auth.signInWithFacebook()); and it returned undefined.

Regards the second issue (firebase is not defined) I tried to import firebase from 'firebase'; but Ionic 2 build returned error.

Expected behavior

Facebook login work on Android (Cordova)

Actual behavior

Login button return errors as described above

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 34 (8 by maintainers)

Most upvoted comments

@utkukaynar
I copied and pasted your code. Still same problem. Type ‘Promise"FacebookLoginResponse"’ is not assignable to type 'Promise"FirebaseAuthState" I don’t know what i am missing

I really don’t understand how people are working around the compilation error that exists in the documentation. I was able to get things working by using the following import:

import { Facebook, FacebookLoginResponse } from 'ionic-native';

Then updating the method’s return type to use this:

	signInWithFacebook(): firebase.Promise<FirebaseAuthState | FacebookLoginResponse> {
		if (this.platform.is('cordova')) {
			return Facebook.login(['email', 'public_profile']).then(res => {
				const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
				return firebase.auth().signInWithCredential(facebookCredential);
			});
		} else {
			return this.af.auth.login({
				provider: AuthProviders.Facebook,
				method: AuthMethods.Popup
			});
		}
	}

You still have to go through the entire process to get your app set up in the Facebook Developer Console, but with this I can log in with facebook on the actual device.

This worked for me as well!

@utkukaynar The import worked for me with no curly brackets

import firebase from 'firebase';

@utkukaynar OK. I made it to work: I delete the firebase from package.json I delete the node_modules folder And finally i did a npm install Now it works fine

I’m getting “duplicate identifier” errors again by importing that.

It doesn’t compile