Firebase Authentication with AngularFireAuth

#1

Hello,

I’m trying to implement Firebase authentication using AngularFireAuth without success.

In my case, my application is working well on the web version using AngularFireAuth.auth.signInWithPopup and AngularFireAuth.auth.signInWithRedirect running local or on firebase hosting.

But, after wrap in capacitor the authentication stop working. This issue is because in both ways my application opens a native browser window. With redirection option the final step is http://localhost on the this native browser window.

Is there a way to run this challenger inside the capacitor WebView? Or any other way to implement Firebase Authentication? I tried the Cordova way with no success because several plugins without support anymore.

Best Regards,
Bernardo Baumblatt

1 Like
#2

Is there a way to run this challenger inside the capacitor WebView?

That’s exactly what i am looking for.

I am facing the same issue regarding redirection from the native browser window. In fact, redirect occurs but i expected that the app would recognize it and come foreground again in the appropriate URL. Hope the community has clues on how to workaround this situation.

#3

@Bernardo Baumblatt I ended up using 2 plugins to achieve that one for

  • facebook: https://www.npmjs.com/package/cordova-plugin-facebook4
  • google: https://www.npmjs.com/package/cordova-plugin-googleplus.

I used these 2 to just get the token, once I get it I call firebase signInAndRetrieveDataWithCredential function like so:

declare facebookConnectPlugin: any;

async mobileFacebookLogin() {
const fbLoginSuccess = function (userData) {
facebookConnectPlugin.getAccessToken((token) => {
connectFacebookProvider(token);

        });
    };
    facebookConnectPlugin.login(['public_profile'], fbLoginSuccess,
        (error) => {
            console.error();
        });

    const connectFacebookProvider = (access_token) => {
        const credential = firebase.auth.FacebookAuthProvider.credential(access_token);

        return this.afAuth.auth.signInAndRetrieveDataWithCredential(credential)
            .then((credential: any) => {
                this.toasterServcice.pop('success', 'Yes you are in');
                if (credential.additionalUserInfo.isNewUser) {
                    return this.updateUserData(credential.user);
                } else {
                    this.router.navigate(['/dashboard']);
                }
            })
            .catch(error => this.handleError(error));
    };
}
#4

Hi @nadir

I really appreciate the information, and i will use your strategy but if a different approach.

In my project I will need not only Google and Firebase, but Twitter and Phone too, so I decided to write my own capacitor plugin.

Capacitor Firebase Auth

For awhile, working with Google on Android and iOS, and soon the rest.

Best regards,
Bernardo Baumblatt.

#5

Hi, @baumblatt,

I am using your plugin, but I am getting a error:

error] - ERROR {“line”:148177,“column”:15,“sourceURL”:“capacitor://localhost/vendor.js”}

I think it is something I don’t configure correctly. Do you have seen this error before? Can you give me some idea what I am doing wrong?

Thanks in advance

#6

Hi Regis,

The error does not tell us anything about it self. Are there any other information? Maybe in Web View console or native logs in XCode or Android Studio!

Fell free to open an issue at GitHub filling with all the information about your environment.

Best regards,

Bernardo Baumblatt

#7

Bernardo,

Thanks for you attention! I got it!

The problem was not with your plugin. I think the problem was with Capacitor installation. It didn’t configure the lines bellow in the Podfile. So I reinstalled the capacitor and it works fine.

pod ‘CapacitorCordova’, :path => ‘…/…/node_modules/@capacitor/ios’
pod ‘CapacitorFirebaseAuth’, :path => ‘…/…/node_modules/capacitor-firebase-auth’

Thanks again!
Régis Simão.

#8

Hi @baumblatt,

Thank you for your work on this plugin. It’s been a huge help.

An issue I’m running into when running an iOS app is that the application terminates with the error Terminating app due to uncaught exception 'com.firebase.core', reason: 'Default app has already been configured.' during the initial load on a device. I’m using another Capacitor Firebase plugin (capacitor-fcm), and noticed that if I use capacitor-firebase-auth or that other plugin separately, then the error is not recreated. I was just curious if you happen to have any thoughts on how to handle this exception that seems to be caused by two Firebase plugins configuring Firebase?

Thanks again,
Kevin