Permission Denied after Login in Angular + AngularFire App

Question

When I try to access the database after successfully logging in the user, I get the error of

permission_denied at /profiles/N97wiXBCMxhB06qQXJ2Bvhcjnts1: Client doesn't have permission to access the desired data.

Since, I have just authenticated the user, I don't understand how the user will not have permission. Another strange behavior is that it works the second time I press the "Sign In" button which calls the function signIn(singInForm).

login.page.ts

 signIn(signInForm) {
    this.authService.signInWithEmailAndPassword(signInForm.email, signInForm.password)
    .then(res => {
      const userID = res.user.uid;
      this.fbBackendService.fetchUserProfile(userID).subscribe(userProfile => {
        // DO SOMETHING using the userID
      }, error => {
        // DO SOMETHING
      });
    }).catch(error => {
      // DO SOMETHING
    });
  }

fb-backend.service.ts

constructor(private db: AngularFireDatabase) { }

 
 fetchUserProfile(userID): Observable<IUserProfile> {
    return this.db.object(`/profiles/${userID}`)
      .valueChanges()
      .pipe((take(1), map((response: any) => response as IUserProfile)));
  }

Here is the relevant ruleset:

{
  "rules": {
    ".write": false,
    ".read": false,
    "profiles": {
      "$uid": {
       ".read": "auth.uid === $uid",
       ".write": "auth.uid === $uid",
       ".indexOn": "company_id"
      }
    }
  }
}

Answer 1

You can try downgrading to firebase 8.3.0. There seems to be an issue with newer versions.