Angularfire: Angularfire2 Ionic2 facebook auth error

[theunreal]

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

[utkukaynar]

Dear @theunreal, did you solve this problem? I'm having the exact same issue on iOS.

[lickos]

Dear @theunreal, did you solve this problem? I'm having the exact same issue on Android.

[theunreal]

@utkukaynar @lickos return the Facebook.login...

[utkukaynar]

Didn't update this issue. I realized it and updated the documentation with a merged pr.

Utku Kaynar

iPhone'umdan gönderildi

Eliran Elnasi [e-mail] şunları yazdı (29 Ara 2016 15:29):

@utkukaynar @lickos return the Facebook.login...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[lickos]

@theunreal
I did it.
return Facebook.login(['email', 'public_profile']).then(res => {....
I got this error:
Type 'Promise"FacebookLoginResponse"' is not assignable to type 'Promise"FirebaseAuthState"'.at line 25 col 14

[utkukaynar]

Here's my working code :

      return Facebook.login(['email', 'public_profile']).then(res => {
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
        return firebase.auth().signInWithCredential(facebookCredential);
      });

[dhruv4]

I'm still having this issue, although I used the code that @utkukaynar gave us. I'm getting the same issue that @lickos has and, while the Facebook auth is popping up, the login process isn't actually occurring through Firebase. I'm getting the error message: firebase is not defined.

[lickos]

@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

[lickos]

When i run it on the emulator with livereloads i get this error:
Typescript error.
Duplicate identifire 'Promise'

[utkukaynar]

Can you paste your latest function block of code in here?

Utku Kaynar

iPhone'umdan gönderildi

lickos [e-mail] şunları yazdı (30 Ara 2016 10:01):

When i run it on the emulator with livereloads i get this error:
Typescript error.
Duplicate identifire 'Promise'

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[lickos]

@utkukaynar
signInWithFacebook(): firebase.Promise<FirebaseAuthState> { 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.auth$.login({ provider: AuthProviders.Facebook, method: AuthMethods.Popup }); } }

[lickos]

@utkukaynar
These are my imports:
import { Injectable } from '@angular/core'; import { AuthProviders, FirebaseAuth, FirebaseAuthState, AuthMethods } from 'angularfire2'; import { Platform } from 'ionic-angular'; import { Facebook } from 'ionic-native';

What am I missing?
By the way Happy new Year to all of you

[lickos]

@utkukaynar
I also tried this:
signInWithFacebook(): firebase.Promise<FirebaseAuthState> { if (this.platform.is('cordova')) { Facebook.login(['email', 'public_profile']).then(res => { alert("this") let provider = new firebase.auth.FacebookAuthProvider(); alert("That") // alert(provider); // const facebookCredential = provider.credential(res.authResponse.accessToken); return firebase.auth().signInWithRedirect(provider); }); } else { return this.auth$.login({ provider: AuthProviders.Facebook, method: AuthMethods.Popup }); } }

But still firebase is not defined

[utkukaynar]

can you add this? I didn't and mine is working but some people got it working with this fix :

import { firebase } from 'firebase';

[lickos]

@utkukaynar
I get this strange error:
Module ''firebase'' has no exported member 'firebase'.

I think the right way is:
import * as firebase from 'firebase';

[lickos]

It doesn't compile

[lickos]

@utkukaynar
Same problem here. You can run the code on the emulator? Cause i followed all the steps described and copied paste the code. The problem is when it tries to get the credentials.

[dhruv4]

I'm getting "duplicate identifier" errors again by importing that.

[lickos]

@dhruv4
Me too.

[lickos]

@dhruv4
Hey dhruv4. Did you find any solution?

[dhruv4]

@lickos not yet :/

[utkukaynar]

Can you try logging in in an IOS device, instead of an emulator?

2017-01-02 2:12 GMT+03:00 dhruv4 [e-mail]:

@lickos https://github.com/lickos not yet :/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/736#issuecomment-269924025,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABiMDZ4IcSK_JkHacSp07tqF_NOCr5c_ks5rODL6gaJpZM4LVPmV
.

--

Utku KAYNARCEO, Code2 & SocialCube
0541.2809556 | [email protected] | http://code2.co
ULUTEK Teknokent 311 Uludağ Universitesi Nilüfer Bursa
Twitter: @utkukaynar
LinkedIn: https://tr.linkedin.com/in/utkukaynar

[dhruv4]

Hey @utkukaynar - I'm getting the same error on an iOS device "Can't find variable: firebase"

[lickos]

Same error here in Android

[utkukaynar]

very strange. Please look at your app.module.ts to check everythings loaded
correctly.

2017-01-02 21:00 GMT+03:00 lickos [e-mail]:

Same error here in Android

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/736#issuecomment-270002915,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABiMDXbM-2G5VqrMKgYsKBSsQ0TWz_WOks5rOTswgaJpZM4LVPmV
.

--

Utku KAYNARCEO, Code2 & SocialCube
0541.2809556 | [email protected] | http://code2.co
ULUTEK Teknokent 311 Uludağ Universitesi Nilüfer Bursa
Twitter: @utkukaynar
LinkedIn: https://tr.linkedin.com/in/utkukaynar

[lickos]

@utkukaynar
the firebase database works fine for me. The only problem i have is with the authentication

[lickos]

@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

[dhruv4]

This worked for me as well!

[utkukaynar]

Great. Love to hear that.

10 Oca 2017 Sal, saat 17:31 tarihinde dhruv4 [e-mail]
şunu yazdı:

This worked for me as well!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/736#issuecomment-271589768,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABiMDVfaBsomY3jtnjGgHq8XpLE1EeD6ks5rQ5ZNgaJpZM4LVPmV
.

[pablo-albaladejo]

@utkukaynar The import worked for me with no curly brackets

import firebase from 'firebase';

[sstorie]

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.

[pietro-gaiao]

Mine worked with import * as firebase from 'firebase'; and what @sstorie commented. thank you!!!

[im-bhatman]

Type 'Promise<FacebookLoginResponse>' is not assignable to type 'Promise<FirebaseAuthState>'. Types of
            property 'then' are incompatible. Type '{ (onfulfilled?: (value: FacebookLoginResponse) =>
            FacebookLoginResponse | PromiseLike<FacebookLo...' is not assignable to type '(onResolve?: (a:
            FirebaseAuthState) => any, onReject?: (a: Error) => any) => Promise<any>'. Types of parameters 'onfulfilled'
            and 'onResolve' are incompatible. Type '(a: FirebaseAuthState) => any' is not assignable to type '(value:
            FacebookLoginResponse) => FacebookLoginResponse | PromiseLike<FacebookLoginResponse>'. Types of parameters
            'a' and 'value' are incompatible. Type 'FacebookLoginResponse' is not assignable to type
            'FirebaseAuthState'. Property 'uid' is missing in type 'FacebookLoginResponse'.

I am getting this error can anyone solve this?

My signInfunction is:

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

[dovk]

Our issue was that after creating a new Ionic app, the email address was coming back NULL after logging in from the Popup window, even though we were still getting the email back when logging in from our first app. What worked for us was adjusting the _signInWithPopup_ based on what had been done for the GooglePlus login - so instead of the one line under the _else_

loginFaceBook() {
    if (this.platform.is('cordova')) {
      return this.fb.login(['email', 'public_profile']).then(res => {
      const cred = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
      return firebase.auth().signInWithCredential(cred)
   } )
} else {
    _return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())_
   } }

we changed it to -
    _const provider = new firebase.auth.FacebookAuthProvider();
   provider.addScope('email');
   return this.afAuth.auth.signInWithPopup(provider)_

I hope this will help someone.