DEV Community

Zak Miller
Zak Miller

Posted on • Originally published at zakmiller.com

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'];
    this.fb.login(permissions)
        .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.

Top comments (0)