My website is built using the Ionic and Angular Frameworks along with Firestore database. The signout feature works as expected, but unfortunately, an error occurs when a user tries to sign out of their account.
The error message:
FirebaseError: Missing or insufficient permissions.
https://i.stack.imgur.com/Aeh5m.png
app.component.ts - this is where the user clicks the logout button
constructor(public authService: AuthService) {
this.appSub = this.authService.user$.subscribe(async user => {
this.user = user;
this.userId = user.userId;
try {
this.userPhoto = user.userPhoto;
} catch (error) {
console.log('No User Photo');
}
});
}
//Logout Button
onLogout(){
this.authService.signOut();
}
auth.service.ts
constructor(
private afs: AngularFirestore,
private afAuth: AngularFireAuth,
private router: Router
) {
this.user$ = this.afAuth.authState
.pipe(
switchMap( user => {
if (user) {
return this.afs.doc<User>(`user/${user.uid}`).valueChanges();
} else {
return of(null);
}
})
)
} //end of constructor
//Sign Out Function
async signOut(){
const loading = await this.loadingCtrl.create({
spinner: 'crescent',
showBackdrop: true
});
loading.present();
this.afAuth.signOut()
.then(() => {
loading.dismiss();
this.router.navigate(['/login']);
}).catch(error => {
console.log(error.message);
});
} // end of signout
Is there a way to prevent these errors from happening?