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


#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.