FirebaseError: Missing or insufficient permissions only on page reload

Issue

I have an angular app that is using "@angular/fire": "^6.1.5",

everything is working fine, i can log into my app and get records from firestore, the only problem i have is when i reload the browser page i get the error "FirebaseError: Missing or insufficient permissions"

this is my code of my service that i am using to login

        import { Injectable } from '@angular/core';
        import { AngularFireAuth } from '@angular/fire/auth';

        @Injectable({
          providedIn: 'root'
        })
        export class FirebaseService {

          isLoggedIn = false
          constructor(public firebaseAuth : AngularFireAuth) { 
            this.firebaseAuth.setPersistence("local")
          }
          async signin(email: string, password: string){
            await this.firebaseAuth.signInWithEmailAndPassword(email, password)
            .then(res => {
              this.isLoggedIn = true
              localStorage.setItem('user', JSON.stringify(res.user))
            }).catch(e => {
                
            });
          }
          async signup(email: string, password: string){
            await this.firebaseAuth.createUserWithEmailAndPassword(email, password)
            .then(res => {
              this.isLoggedIn = true
              localStorage.setItem('user', JSON.stringify(res.user))
            })
          }
          logout(){
            this.firebaseAuth.signOut()
            this.isLoggedIn = false
            localStorage.removeItem('user')
          }
        }

i am using angular routing, when i navigate to http://localhost:4200/products by clicking a link everything works fine, but when i refresh the browser i get the error

navigating clicking the links works good, only problem when refreshing

this is the code to get the products

      constructor(public db: AngularFirestore) {
          
          this.recordsCollection = this.db.collection('products', ref => ref.orderBy('date_created').limit(100));
          this.records = this.recordsCollection.snapshotChanges().pipe(
            map(actions => actions.map(a => {
              const data = a.payload.doc.data() as Product;
              const id = a.payload.doc.id;
              const doc = a.payload.doc
              return { id, doc, ...data };
            }))
          );
        }

and this are my rules in firestore

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

Solution

After many tries changing the code, i have decided to update all the npm dependencies and now the project is working as expected, there is no error after refresh the browser

The angular project is working fine with this dependencies versions

  "@angular/core": "^12.0.5",
  "@angular/fire": "^6.1.5",
  "angularfire2": "^5.4.2",
  "firebase": "^8.7.1",

so it seems to be a bug from a specific angular/core and angularfire2 versions

Answered By - lacr developer