angularfire: ERROR FirebaseError: Missing or insufficient permissions.

Version info

Angular:

Angular CLI: 12.0.1
Node: 14.17.0
Package Manager: npm 7.13.0
OS: linux x64

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@angular/fire                   6.1.5
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

Firebase: Some have reported that version 8.6.2 exhibits these errors. See comments below.

firebase-tools@9.11.0
firebase@8.6.1

AngularFire:

@angular/fire                   6.1.5

Other (e.g. Ionic/Cordova, Node, browser, operating system):

Distributor ID:	Ubuntu
Description:	Ubuntu 20.04.2 LTS
Release:	20.04
Codename:	focal

Google Chrome: Version 90.0.4430.212 (Official Build) (64-bit)

How to reproduce these conditions

Steps to set up and reproduce

  1. Follow steps in AngularFire Quickstart
  2. Add authentication as described in 5. Getting started with Firebase Authentication

Sample data and security rules

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

Sample data

"Leagues": [
  {
    "name": "Metro East Recreational Baseball League",
    "location": "Collinsville, IL"
  },
  {
    "name": "Southern Illinois Select Baseball League (SISBL)",
    "location": "Freeburg, IL"
  },
  {
    "name": "St Louis Baseball Forever League",
    "location": "St Louis, MO"
  },
  {
    "name": "Belleville Khoury League",
    "location": "Belleville, IL"
  },
  {
    "name": "Metro East Youth League of Belleville",
    "location": "Belleville, IL"
  },
  {
    "name": "Boulder Parks and Recreation Coed Softball League",
    "location": "Boulder, CO"
  }
]

Debug output

Errors in the JavaScript console

core.js:28028 Angular is running in development mode. Call enableProdMode() to enable production mode.
index.js:52 [WDS] Live Reloading enabled.
core.js:6456 ERROR FirebaseError: Missing or insufficient permissions.
    at new e (http://localhost:35667/vendor.js:44309:19)
    at http://localhost:35667/vendor.js:56105:18
    at http://localhost:35667/vendor.js:56106:10
    at e.onMessage (http://localhost:35667/vendor.js:56127:6)
    at http://localhost:35667/vendor.js:56018:18
    at http://localhost:35667/vendor.js:56056:29
    at http://localhost:35667/vendor.js:61872:25
    at ZoneDelegate.invoke (http://localhost:35667/polyfills.js:381:26)
    at Zone.run (http://localhost:35667/polyfills.js:143:43)
    at http://localhost:35667/polyfills.js:1285:36
defaultErrorLogger @ core.js:6456

Expected behavior

If the rules are changed to allow unauthenticated reads, the output should look like this:

  • Metro East Recreational Baseball League - Collinsville, IL
  • Southern Illinois Select Baseball League (SISBL) - Freeburg, IL
  • St Louis Baseball Forever League - St Louis, MO
  • Belleville Khoury League - Belleville, IL
  • Metro East Youth League of Belleville - Belleville, IL
  • Boulder Parks and Recreation Coed Softball League - Boulder, CO

Actual behavior

  1. The application emits none of the items from the database.
  2. Error is emitted in the browser console.
  3. Multiple browser refresh will eventually (after a few seconds) return the correct data, but a subsequent browser refresh results in the same error.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 14
  • Comments: 32 (4 by maintainers)

Most upvoted comments

npm i firebase@8.6.1 resolve the same problem

I have the same problem since I updated Firebase to version 8.6.2. When I downgrade Firebase back to version 8.6.1, the problem is gone.

Had the same issue and spent half the day trying to resolve before finding this open issue. reverting back to firebase@8.6.1 from 8.6.3 fixed the issue.

For some context, our code updates the user on Firestore as soon as credentials are passed to the client via signInWithPopup(). Definitely a timing issue because the credentials are console logged before the firebase permission denied is caught and logged.

Same problem for me. Like @stenzengel suggest, downgrade to version 8.6.1 fix the problem. So in version 8.6.2 every request seem to miss the auth part and in Firestore every request is rejected when a rule is using the auth property. @JeffThurston Can you reopen your issue?

FYI, the issue was fixed inside firebase lib (https://github.com/firebase/firebase-js-sdk/issues/4932) and will be released with version 8.7.0. If you cannot wait, just install firebase@8.7.0-2021528231051.

npm install firebase@8.7.0-2021528231051

Added a comment on the JS SDK issue that explains what I think is happening, in more depth, and how future AngularFire versions will ensure that this type of issue doesn’t affect us in the future https://github.com/firebase/firebase-js-sdk/issues/4932#issuecomment-848139281

Reopened by request from @fatalcaron .

I’m seeing this issue too

same problem here with the latest angularfire and firebase combined, 1st solution is to just downgrade firebase to 8.6.1. 2nd is to just use firebase and not angularfire. 3rd you can use both firebase and angularfire and not downgrade anything just add this code to your login service where you use signInwithEmailandPassword, this.afAuth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => { this.afAuth.signInWithEmailandPass() }

I am finding that raw Firebase is working well for me, as noted in this comment.

Hi @himalay-chauhan , no solution has been found for the version stated. However, many have confirmed that going back to version 8.6.1 works. At this point, that seems to be the best solution from what I have seen posted here. Good luck!

This issue appears to be back in AngularFire 6.1.5, although the stack dump looks a little different this time:

Angular is running in development mode. Call enableProdMode() to enable production mode.
index.js:52 [WDS] Live Reloading enabled.
core.js:6456 ERROR FirebaseError: Missing or insufficient permissions.
    at new e (prebuilt-109c6673-0f51e182.js:188)
    at prebuilt-109c6673-0f51e182.js:10416
    at prebuilt-109c6673-0f51e182.js:10414
    at e.onMessage (prebuilt-109c6673-0f51e182.js:10403)
    at prebuilt-109c6673-0f51e182.js:10356
    at prebuilt-109c6673-0f51e182.js:10387
    at prebuilt-109c6673-0f51e182.js:15194
    at ZoneDelegate.invoke (zone.js:372)
    at Zone.run (zone.js:134)
    at zone.js:1276

Versions

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 7.13.0
OS: linux x64

Angular: 12.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@angular/fire                   6.1.5
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

$ firebase --version
9.12.1

Steps to Reproduce

To test this out, I built the most basic app I could following the:

  1. Getting Started
  2. Add authentication as described in 5. Getting started with Firebase Authentication

Also, verified that this app works as expected if the firestore rules are changed to allow anonymous reads:

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

app.component.html

<ng-container *ngIf="auth.user | async as user; else showLogin">
  <ul>
      <li *ngFor="let profile of profiles | async">{{profile.DisplayName}}</li>
  </ul>
</ng-container>
<ng-template #showLogin>
    <p>You must sign in to continue.</p>
    <button (click)="signIn()"> SIGN IN </button>
</ng-template>

app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test-auth';
  profiles: Observable<any[]>;

  constructor (
    public auth: AngularFireAuth,
    private firestore: AngularFirestore) {
    this.profiles = firestore.collection('UserProfiles').valueChanges();
  }

  signIn(): void {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  signOut(): void {
    this.auth.signOut();
  }
}

Question

Should be able to access Firestore as long as the user is authenticated, based on these Firestore rules?

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