June 05, 2018
Quick and easy fix to handle the “Missing or insufficient permissions” Firestore error in Angular or Ionic with ReactiveX

First and foremost, this error message doesn’t help us at all in figuring out what the issue is. This usually happens when you’ve subscribed to an observer and then lost the permissions needed to access the content (e.g. logging out of an application) before unsubscribing.

I ran into this problem when working on an Ionic application that used Firestore and Firebase Authentication. There are various ways to solve this problem, but here’s one that seems to work quite well without needing to unsubscribe every time the page exits (e.g. ionViewWillLeave, ionViewDidLeave).

Utilizing the ReactiveX library, you can use the takeUntil operator which essentially unsubscribes from the observable when a second observable that you pass to it returns an item. So, you can easily pass in an authentication state observable that checks to see if the user is currently logged in. I’ve been using the AngularFire library in my projects to interact with the various Firebase applications, but you can use anything you’d like.

this.dataService.getSomething()
.pipe(takeUntil(this.afAuth.authState.filter(u => !u)))
.subscribe();

Please note this.afAuth.authState.filter(u => !u) will return true or false whether the user is logged in. Once the user logs out, the this.dataService.getSomething() subscription will end.

Hope this helps!

Copyright © 2022 Allan Kiezel – Long Island Web Designer & App Developer. All rights reserved.