Get error FirebaseError: Missing or insufficient permissions

Question

I develop web app using Angular 8 and connect to firebase using @angular/fire v5.4.2 and firebase js SDK v7.8.0. Every time I want to get a document in firestore it always shows error

FirebaseError: Missing or insufficient permissions.
    at new FirestoreError (https://localhost:4200/vendor.js:130146:28)
    at JsonProtoSerializer.push.../../node_modules/@firebase/firestore/dist/index.cjs.js.JsonProtoSerializer.fromRpcStatus (https://localhost:4200/vendor.js:145520:16)
    at JsonProtoSerializer.push.../../node_modules/@firebase/firestore/dist/index.cjs.js.JsonProtoSerializer.fromWatchChange (https://localhost:4200/vendor.js:146033:44)
    at PersistentListenStream.push.../../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentListenStream.onMessage (https://localhost:4200/vendor.js:142655:43)
    at https://localhost:4200/vendor.js:142584:30
    at https://localhost:4200/vendor.js:142624:28
    at https://localhost:4200/vendor.js:131493:20
    at ZoneDelegate.invoke (https://localhost:4200/polyfills.js:3690:26)
    at Object.onInvoke (https://localhost:4200/vendor.js:83071:33)
    at ZoneDelegate.invoke (https://localhost:4200/polyfills.js:3689:52)

Here is my code when trying to get the document

loginFirebase(): Promise<any> {
  return new Promise((resolve, reject) => {
    firebase.auth().signInAnonymously().then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    });
  });
}

login(username: string, password: string): Promise<IUsers> {
  return new Promise((resolve, reject) => {
     this.loginFirebase().then(userLogin => {
        this.setUser(res).then(() => {
           resolve();
        }).catch(err => {
           reject(err);
        });
     }).catch(errorFirebase => {
        reject(errorFirebase);
     });
  }
}

setUser(data: UserLogin): Promise<any> {
    return new Promise((resolve, reject) => {
      const userData: IUsers = {
        userId: data.doctor.id.toString(),
        userFullName: `${data.doctor.firstName} ${data.doctor.lastName}`,
        userPhoto: data.doctor.profileImage || '',
        userStatus: UserStatus.ACTIVE,
        userType: data.roles[0].role,
        token: data.token,
        sex: data.doctor.sex,
        email: data.name
      };
      try {
        this.afStore.collection(`${environment.firestoreCollection}users`, ref => ref.where('userId', '==', userData.userId.toString()))
          .get()
          .subscribe(doc => {
            resolve(doc)
          }, err => {
             console.error(err);
          });
       } catch (error) {
          this.translate.get('error_message', {error: 'catch saveUser'}).subscribe(err => {
             if (confirm(err)) {
                this.setUser(data);
             } else {
                reject(error);
             }
          });
       }

And here is the rules for the firestore

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if isAuth(request);
    }
    
    function isAuth(req) {
      return req.auth != null;
    }
  }
}

When the web app signed in anonymously, I check the uid it's already in firebase authentication. What possibly I get wrong here? Anyone can help me, please?

FYI you don't need to wrap all those existing promises in new promises. The promises returned by the Firebase SDK will resolve or reject on their own without all that extra code. — Doug Stevenson
Oh, thank you so much for the feedback. I'll change it later. :D — Diini Salma

Doug Stevenson Doug Stevenson · Accepted Answer · 2020-08-19T06:49:10

You should use an auth state observer to determine when the user is actually signed in and able to make authenticated queries. It turns out that the promise returned by signInAnonymously isn't actually an indicator if the user is fully signed in.

Get error FirebaseError: Missing or insufficient permissions

1 Answers