[Fixed] How to get rid of "Error: permission_denied" when logging out? (Angular-Firebase)


Hi, I am new to Angular and Firebase and baffled by the next problem:

I have two components-
authorized-zone (parent component) and folders (child component). authorized-zone has a logout button, folders has access to auth-data from firebase. The problem is that when a user logges out allthough the acction is succeful an Error message appears and I am trying to get rid of it.
parent component: authorized-zone

export class AuthorizedZoneComponent implements OnInit {
  constructor(public authService: AuthService) { }
  ngOnInit(): void {}

  //btn logout listener
  logout() { this.authService.logout(); }
   <button id="logout"(click)="logout()">logout</button>`

child component: folders

export interface Folder{
  key: string;

//This Component is to be used only by Authorized-zone!
export class FoldersComponent implements OnInit {

  private dbPath='/folders';//path to folders in realtime data base
  private folderArray: Array<Folder>=[];//Array for folders: each folder has id and name

  constructor(private router: Router, private route:ActivatedRoute, private db: AngularFireDatabase) { 
    this.db.list(this.dbPath).valueChanges().subscribe(data => {
      for( let i=0; i< data.length; i++){
        this.folderArray.push({id: data[i]["id"], name: data[i]["name"], key: data[i]["key"]});

  ngOnInit(): void {}

  //returns array of folders
  getFolders(){ return this.folderArray;}

  //on folder click listerner
<div (click)="onSelect(folder)" *ngFor="let folder of getFolders()> 
    <div class="folder" [id]="folder.id">{{folder.name}}</div> 

The auth-service enables a user to log in and out

The flow of events seems to be working fine.
But, when I press the logout button although the functionality works I get a console Error message:

ERROR Error: permission_denied at /folders: Client doesn't have permission to access the desired data...

I noticed that if I remove <app-folders></app-folders> the error does not accure.

I have tried removing <app-folders></app-folders> before logging-out in authorized-zone.component:

//btn logout listener
  logout() {

It didn’t work, if anyone is able to explain the problem and recomend a solution I would be much obliged


I found the solution: using ngOnDestroy in the folder component.

      private dbData;
      constructor(private router: Router, private route:ActivatedRoute, private db: AngularFireDatabase) { 
        .subscribe(data => {//...
      //destroy firebaseData before logging out

Leave a Reply

(*) Required, Your email will not be published