How to Access Firestore using Ionic

When I created an app using Firebase and Ionic, I started my authentication journey by trying a few different packages: firebase.js, firebaseui, angularfire2, ionic-firebase-authentication, and ngx-auth-firebaseui.

I found one that worked with Ionic, and used that for a while, only to discover when I moved to testing on my mobile device that the auth didn’t work on the mobile device because it was using an in-app browser, and Google had cracked down on using those inside of apps to authenticate.

I then found the official Firebase Authentication plugin for Ionic and was pretty excited. After a bit I realized that although it allows you to sign in, you can’t actually access the Firestore database.

If you use another package, like the firebase.js package, to retrieve and store data, and you’ve locked down the Firestore database as you should you’ll quickly find that as far as the firebase.js package is concerned, you aren’t actually authenticated.

I’m not thrilled with my current implementation, but to allow facebook logins it looks like this:

  async loginWithFacebook() {
    const permissions = ['public_profile', 'email'];
        .then(response => {
            const accessToken = response.authResponse.accessToken;
            const credential = firebase.auth.FacebookAuthProvider.credential(accessToken);
            firebase.auth().signInAndRetrieveDataWithCredential(credential).then(() => this.allowUserIn());

I’m using the native Facebook Auth package to prompt the user for permission to Facebook (this seems to be what can’t be done via a browser on Android), and then using firebase.js to take care of the rest.

comments powered by Disqus