1

  • I'm using Firebase authentication service.

  • I'm using some basics rules which WORK when I'm using the app

  • I have a service which fetch data from Firebase :

    export class WorkoutService {
  myWorkoutList: any[] = [];

  constructor(private firestore: AngularFirestore) {}

  fetchWorkouts() {
    this.firestore
      .collection('performances)
      .doc(emailAddress)
      .collection('myDocumentCollection')
      .valueChanges()
      .subscribe( (allWorkoutElements) => {

        this.myWorkoutList = allWorkoutElements;
        // some HEAVY logic (: ...

      });
  }
}

The problem is : Whenever I reload my page, I have an error message:

Error: Missing or insufficient permissions.

The work-around I found is to add a delay to my service call : setTimeout( () => this.fetchWorkouts(), 500);

It looks like Firebase auth is taking time to "set up" after a refresh, so my request to Firebase is denied. How can I wait for Firebase auth to complete before I do my fetch?

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Bastien GOUZERCH
  • 11
  • 1

1 Answers1

0

How can I wait for Firebase auth to complete before I do my fetch?

The standard way is to set an authentication state observer as explained in the doc:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // Here the user is signed in 
    // Do you fetch
  } else {
    // User is signed out
    // ...
  }
});
Renaud Tarnec
  • 79,263
  • 10
  • 95
  • 121