ERROR FirebaseError: Missing or insufficient permissions. #2838

JeffThurston · 2021-05-20T21:20:26Z

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.

[email protected]
[email protected]

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

Follow steps in AngularFire Quickstart
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

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

The text was updated successfully, but these errors were encountered:

JeffThurston · 2021-05-21T00:28:20Z

Partial progress! Maybe.

I changed the app.component.html to include a <div> with a guard around it and now it kind of works, but poorly.

<div *ngIf="auth.user | async as user; else showLogin">
  <p>Hello {{user.displayName}}.
    <button (click)="logout()">Logout</button>
  </p>
</div>
<ng-template #showLogin> 
  <p>Please login.</p>
  <button (click)="login()">Login</button>
</ng-template>

<div *ngIf="auth.user | async as user; else showNoAccess">  <!-- This DIV is new -->
  <ul>
    <li *ngFor="let league of leagues$ | async">
      {{ league.name }} - {{ league.location }}
    </li>
  </ul>
</div> 
<ng-template #showNoAccess>   <!-- This is also new. -->
  <p>Log in to see data.</p>
</ng-template>

Now, when logged in, the #showLogin and #showNoAccess templates display briefly (half second?) and then they are both replaced with the contents of the <div> that are supposed to display when the user is authenticated.

So this SEEMS like some kind of state or timing issue?

I've seen this has been reported twice before, but both issues were closed with no explanation that I could see. I also have seen this issue posted on StackExchange but the solutions do not seem to address the specific problem I am running into.

stenzengel · 2021-05-21T08:24:44Z

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.

JeffThurston · 2021-05-21T11:20:24Z

Than you for the suggestion @stenzengel ! However, in my case, I am already running firebase 8.6.1.

jthurston@Jarvis-Ubuntu:~/Development/angularfire/quickstart$ npm list
[email protected] /home/jthurston/Development/angularfire/quickstart
├── __ngcc_entry_points__.json@ extraneous
├── @angular-devkit/[email protected]
├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

JeffThurston · 2021-05-21T12:12:10Z

I made some changes that seemed to (in theory) move the call to the database inside of the subscription to the auth call per the Firebase documentation.

Result?

User's display name shows every time.
List from the database never shows after refreshing the browser repeatedly over the course of 30 to 40 seconds.
Got the list to show only once after repeatedly logging out and back in about 10 times.

app.component.ts

Used method recommended in the Firebase documentation to get the currently signed in user.
Moved this check into the ngOnInit method instead of the constructor.
Saved the user's displayName to a local variable named userDisplayName to avoid two calls to the auth provider.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Fire Quickstart';
  userDisplayName: string | null = null;
  leagues$: Observable<any[]> = new Observable<any[]>();

  constructor(
    private firestore: AngularFirestore,
    public auth: AngularFireAuth) {}

  ngOnInit() {
    // Recommended in Firebase documentation
    this.auth.onAuthStateChanged((user) => {
      if (user) {
        this.userDisplayName = user.displayName;
        this.leagues$ = this.firestore.collection('Leagues').valueChanges();
      } else {
        this.userDisplayName = null;
        this.leagues$ = new Observable<any[]>();
      }
    });
}
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

app.component.html

Moved the list into the first template, eliminating the second.
Changed the *ngIf to test the local variable userDisplayName instead of calling the auth provider.
Changed the template to refer to the local variable userDisplayName instead of the user object returned by the auth provider.

<div *ngIf="userDisplayName != null; else showLogin">
  <p>Hello {{userDisplayName}}.
    <button (click)="logout()">Logout</button>
  </p>
  <ul>
    <li *ngFor="let league of leagues$ | async">
      {{ league.name }} - {{ league.location }}
    </li>
  </ul>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login</button>
</ng-template>

JeffThurston · 2021-05-21T15:13:29Z

I have solved the missing data issue, however, the #showLogin template still flashes very briefly before the <div>.

app.component.ts

Eliminated the league$ property because I subscribed to it directly and eliminated the need to keep a reference to the Observable returned by .valueChanges() on the collection.
Created a leagueArray property instead and changed the template to watch that instead of the Observable.
Populated the leagueArray property in the ngOnInit method via a subscription to the Observable. (I realize that the array is not initialized so each change to this collection will cause the array to grow exponentially.)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Fire Quickstart';
  theUser: firebase.User | null = null;
  leagueArray: Array<any> = [];

  constructor(
    private firestore: AngularFirestore,
    public auth: AngularFireAuth) {}

  ngOnInit() {
    this.auth.onAuthStateChanged((user) => {
      if (user) {
        this.theUser = user;
        this.firestore.collection('Leagues').valueChanges().subscribe((data) => {
          data.forEach((item) => {
            this.leagueArray.push(item);
          });
        });
      } else {
        this.theUser = null;
        this.leagueArray = [];
      }
    });
  }
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

** app.component.html**

Modified the template to watch the leagueArray property instead of the league$ Observable.

<div *ngIf="theUser != null; else showLogin">
  <p>Hello {{theUser.displayName}}.
    <button (click)="logout()">Logout</button>
  </p>
  <ul>
    <li *ngFor="let league of leagueArray">
      {{ league.name }} - {{ league.location }}
    </li>
  </ul>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login</button>
</ng-template>

glued · 2021-05-21T18:51:19Z

I'm seeing this issue too

fatalcaron · 2021-05-24T12:46:33Z

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?

JeffThurston · 2021-05-24T14:13:38Z

Reopened by request from @fatalcaron .

jamesdaniels · 2021-05-24T22:14:30Z

My guess would be that it's the above linked firebase-js-sdk issue, I'll leave the issue open until we get a fix.

Natreve · 2021-05-25T01:42:28Z

Adding the auth state listener fixed my issue for some reason.

jamesdaniels · 2021-05-25T18:43:56Z

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 firebase/firebase-js-sdk#4932 (comment)

stephanevallejo · 2021-05-28T09:19:20Z

npm i [email protected] resolve the same problem

geogramdotcom · 2021-05-30T00:31:10Z

Had the same issue and spent half the day trying to resolve before finding this open issue. reverting back to [email protected] 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.

wakek · 2021-06-02T13:05:58Z

If anyone still has issues on [email protected], reverting to the [email protected], that worked in an old git commit of mine, worked. Not sure how far up the issue begins though.

JeffThurston · 2021-06-07T21:12:42Z

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:

Getting Started
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;
  }
}

JeffThurston · 2021-06-08T01:17:51Z

Raw Firebase Works As Expected!

With the following code, I have isolated this issue to (1) a bug (?) in AngularFire or (2) my inability to properly implement AngularFire in the code provided in my prior comment.

app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

export interface ProfileModel {
  Id: string,
  DisplayName: string
}
export interface CurrentUser {
  uid: string;
  name?: string;
  email?: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, OnInit {
  title = 'test-auth';
  currentUser: CurrentUser | null = null;
  profilesArray: ProfileModel[] = [];
  fb: firebase.app.App;
  fs: firebase.firestore.Firestore;
  profilesCollection: firebase.firestore.CollectionReference<firebase.firestore.DocumentData>;
  unsubscribe?: firebase.Unsubscribe;

  constructor () {
    this.fb = firebase.initializeApp({
      apiKey: "OMITTED",
      authDomain: "angularfiretestapp.firebaseapp.com",
      databaseURL: "https://angularfiretestapp.firebaseio.com",
      projectId: "angularfiretestapp",
      storageBucket: "angularfiretestapp.appspot.com",
      messagingSenderId: "OMITTED",
      appId: "OMITTED",
      measurementId: "OMITTED"  
    });
    this.fs = firebase.firestore();
    this.profilesCollection = this.fs.collection('UserProfiles');
  }

  ngOnDestroy():void {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }

  ngOnInit():void {
    this.unsubscribe = this.fb.auth().onAuthStateChanged(authUser => {
      if (authUser) {
        this.currentUser = {
          uid: authUser.uid,
          name: authUser.displayName ? authUser.displayName : '',
          email: authUser.email ? authUser.email : ''
        };
        this.profilesArray = [];
        this.profilesCollection.get().then(qSnap => {
          qSnap.forEach(doc => {
            this.profilesArray.push({
              Id: doc.id,
              DisplayName: doc.get('DisplayName')
            });
          });
        });
      } else {
        this.currentUser = null;
      }  
    });
  }

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

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

app.component.html

<ng-container *ngIf="currentUser; else showLogin">
    <p>Here are some profiles:</p>
    <ul>
        <li *ngFor="let profile of profilesArray">{{profile.DisplayName}}</li>
    </ul>
    <button (click)="signOut()"> SIGN OUT </button>
</ng-container>
<ng-template #showLogin>
    <p>You must sign in to continue.</p>
    <button (click)="signIn()"> SIGN IN </button>
</ng-template>

JeffThurston · 2021-06-08T14:23:38Z

Modified the constructor on the app.component.ts to move the Firestore call inside of an AngularFireAuth::onAuthStateChange() observer, forcing the authentication to happen before the Firestore call. However, the permissions error persists.

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 = 'AngularFire Test';
  profiles: Observable<any[]> | undefined;

  constructor (
    public auth: AngularFireAuth,
    private firestore: AngularFirestore
  ){
    this.auth.onAuthStateChanged(authUser => {
      console.log('AngularFireAuth::onAuthStateChanged() ENTER');
      if (authUser) {
        console.log('authUser is present - authUser.uid =', authUser.uid);
        this.profiles = firestore.collection('UserProfiles').valueChanges();
      } else {
        console.log('authUser is NOT present');
        this.profiles = undefined;
      }
      console.log('AngularFireAuth::onAuthStateChanged() EXIT');
    });
    
  }

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

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

Browser console output

Angular is running in development mode. Call enableProdMode() to enable production mode.
index.js:52 [WDS] Live Reloading enabled.
app.component.ts:21 AngularFireAuth::onAuthStateChanged() ENTER
app.component.ts:23 authUser is present - authUser.uid = 2e4QKrHfN9Wk642BUQUzHc6z0Pc2
app.component.ts:29 AngularFireAuth::onAuthStateChanged() EXIT
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

If there is anything else I can do to help isolate this issue, please let me know. Otherwise, I am giving up on AngularFire and reverting my project to raw Firebase for now so I can keep moving my project forward.

JeffThurston · 2021-06-08T14:34:48Z

Put test application into the following public GitHub repository.
https://github.com/JeffThurston/angular-fire-auth-issue-2838
(revised at 7:30am on June 10 2021)

Posted on StackOverflow.
https://stackoverflow.com/questions/67878965/angularfire-how-to-access-firestore-only-when-authenticated

Posted on Reddit.
https://www.reddit.com/r/Firebase/comments/nurlfw/angularfire_how_to_access_firestore_only_when/

craigsheppard · 2021-06-10T00:54:43Z

Thanks, Jeff - I can chime in with a "me too", and say that I was able to work around it by delaying my db subs via a significant debounceTime after a successful authState change. Eg: on a tiny project, 100ms was not enough, but 1000 was.

I am also using signInWithEmailAndPassword()

craigsheppard · 2021-06-10T01:21:40Z

As others have commented, the issue seems to be with firebase: ^8.6.2. I downgraded 3 projects (two at ng12, one at ng11) to 8.6.1 (even keeping @angular/fire at 6.1.5), and all seems fine now.

rabikr · 2021-06-10T07:31:11Z

I spent the last 5 hours debugging my code... I wish I have seen this thread earlier.

nskoro · 2021-06-11T00:33:27Z

only works on 8.6.1 for me

silverio · 2021-06-14T22:22:12Z

same issue here, 8.6.1 works for me.

himalay-chauhan · 2021-06-21T12:44:37Z

Modified the constructor on the app.component.ts to move the Firestore call inside of an AngularFireAuth::onAuthStateChange() observer, forcing the authentication to happen before the Firestore call. However, the permissions error persists.

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 = 'AngularFire Test';
  profiles: Observable<any[]> | undefined;

  constructor (
    public auth: AngularFireAuth,
    private firestore: AngularFirestore
  ){
    this.auth.onAuthStateChanged(authUser => {
      console.log('AngularFireAuth::onAuthStateChanged() ENTER');
      if (authUser) {
        console.log('authUser is present - authUser.uid =', authUser.uid);
        this.profiles = firestore.collection('UserProfiles').valueChanges();
      } else {
        console.log('authUser is NOT present');
        this.profiles = undefined;
      }
      console.log('AngularFireAuth::onAuthStateChanged() EXIT');
    });
    
  }

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

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

Browser console output

Angular is running in development mode. Call enableProdMode() to enable production mode.
index.js:52 [WDS] Live Reloading enabled.
app.component.ts:21 AngularFireAuth::onAuthStateChanged() ENTER
app.component.ts:23 authUser is present - authUser.uid = 2e4QKrHfN9Wk642BUQUzHc6z0Pc2
app.component.ts:29 AngularFireAuth::onAuthStateChanged() EXIT
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

If there is anything else I can do to help isolate this issue, please let me know. Otherwise, I am giving up on AngularFire and reverting my project to raw Firebase for now so I can keep moving my project forward.

Hi

Did you find any solution for this?
core.js:6456 ERROR FirebaseError: Missing or insufficient permissions.
at new e (prebuilt-109c6673-0f51e182.js:188)
at prebuilt-109c6673-0f51e182.js:10416

It is showing the same error for me.

Already wasted two days but unable to find any solution.

JeffThurston · 2021-06-21T13:29:47Z

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!

himalay-chauhan · 2021-06-21T13:31:25Z

Thanks @JeffThurston for quick response. I already tried that but I'm still getting the same error.

JeffThurston · 2021-06-21T13:40:25Z

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

himalay-chauhan · 2021-06-21T13:41:49Z

@JeffThurston Okay. I will try that too. Thanks!

himalay-chauhan · 2021-06-21T14:46:02Z

@JeffThurston It worked. Thank you very much!

modernappsllc · 2021-06-25T19:24:45Z

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() }

paulstelzer · 2021-06-30T07:36:00Z

FYI, the issue was fixed inside firebase lib (firebase/firebase-js-sdk#4932) and will be released with version 8.7.0. If you cannot wait, just install [email protected].

npm install [email protected]

jamesdaniels · 2021-07-12T15:36:32Z

Closing as it's been fixed in the JS SDK.

JeffThurston closed this as completed May 21, 2021

JeffThurston reopened this May 24, 2021

jamesdaniels mentioned this issue May 24, 2021

8.6.2 breaks auth/firestore rules firebase/firebase-js-sdk#4932

Closed

jamesdaniels closed this as completed Jul 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ERROR FirebaseError: Missing or insufficient permissions. #2838

ERROR FirebaseError: Missing or insufficient permissions. #2838

JeffThurston commented May 20, 2021 •

edited

Loading

JeffThurston commented May 21, 2021 •

edited

Loading

stenzengel commented May 21, 2021

JeffThurston commented May 21, 2021

JeffThurston commented May 21, 2021

JeffThurston commented May 21, 2021

glued commented May 21, 2021

fatalcaron commented May 24, 2021 •

edited

Loading

JeffThurston commented May 24, 2021

jamesdaniels commented May 24, 2021

Natreve commented May 25, 2021

jamesdaniels commented May 25, 2021

stephanevallejo commented May 28, 2021

geogramdotcom commented May 30, 2021 •

edited

Loading

wakek commented Jun 2, 2021

JeffThurston commented Jun 7, 2021

JeffThurston commented Jun 8, 2021

JeffThurston commented Jun 8, 2021

JeffThurston commented Jun 8, 2021 •

edited

Loading

craigsheppard commented Jun 10, 2021 •

edited

Loading

craigsheppard commented Jun 10, 2021

rabikr commented Jun 10, 2021

nskoro commented Jun 11, 2021

silverio commented Jun 14, 2021

himalay-chauhan commented Jun 21, 2021

app.component.ts

Browser console output

JeffThurston commented Jun 21, 2021

himalay-chauhan commented Jun 21, 2021

JeffThurston commented Jun 21, 2021

himalay-chauhan commented Jun 21, 2021

himalay-chauhan commented Jun 21, 2021

modernappsllc commented Jun 25, 2021

paulstelzer commented Jun 30, 2021 •

edited

Loading

jamesdaniels commented Jul 12, 2021

ERROR FirebaseError: Missing or insufficient permissions. #2838

ERROR FirebaseError: Missing or insufficient permissions. #2838

Comments

JeffThurston commented May 20, 2021 • edited Loading

Version info

How to reproduce these conditions

Debug output

Expected behavior

Actual behavior

JeffThurston commented May 21, 2021 • edited Loading

stenzengel commented May 21, 2021

JeffThurston commented May 21, 2021

JeffThurston commented May 21, 2021

JeffThurston commented May 21, 2021

glued commented May 21, 2021

fatalcaron commented May 24, 2021 • edited Loading

JeffThurston commented May 24, 2021

jamesdaniels commented May 24, 2021

Natreve commented May 25, 2021

jamesdaniels commented May 25, 2021

stephanevallejo commented May 28, 2021

geogramdotcom commented May 30, 2021 • edited Loading

wakek commented Jun 2, 2021

JeffThurston commented Jun 7, 2021

Versions

Steps to Reproduce

app.component.html

app.component.ts

Question

JeffThurston commented Jun 8, 2021

Raw Firebase Works As Expected!

app.component.ts

app.component.html

JeffThurston commented Jun 8, 2021

app.component.ts

Browser console output

JeffThurston commented Jun 8, 2021 • edited Loading

craigsheppard commented Jun 10, 2021 • edited Loading

craigsheppard commented Jun 10, 2021

rabikr commented Jun 10, 2021

nskoro commented Jun 11, 2021

silverio commented Jun 14, 2021

himalay-chauhan commented Jun 21, 2021

app.component.ts

Browser console output

JeffThurston commented Jun 21, 2021

himalay-chauhan commented Jun 21, 2021

JeffThurston commented Jun 21, 2021

himalay-chauhan commented Jun 21, 2021

himalay-chauhan commented Jun 21, 2021

modernappsllc commented Jun 25, 2021

paulstelzer commented Jun 30, 2021 • edited Loading

jamesdaniels commented Jul 12, 2021

JeffThurston commented May 20, 2021 •

edited

Loading

JeffThurston commented May 21, 2021 •

edited

Loading

fatalcaron commented May 24, 2021 •

edited

Loading

geogramdotcom commented May 30, 2021 •

edited

Loading

JeffThurston commented Jun 8, 2021 •

edited

Loading

craigsheppard commented Jun 10, 2021 •

edited

Loading

paulstelzer commented Jun 30, 2021 •

edited

Loading