Caution - firebase 8.6.2 has issue with authentication - avoid in angularfire?

[Tommertom]

Hi

maybe not an coding issue for angularfire, but I recently ng added angular fire on an angular 12 app and the authentication flow succeeded, but I could not query collection any more due to an issue (to be confirmed) on firebase 8.6.2.

Maybe better to avoid 8.6.2 on angulfire until resolved?

firebase/firebase-js-sdk#4996

Edit: below the issue as reported on firebase js sdk - where it is mentioned that it might be an angularfire issue.

Reported workaround seems indeed downgrading the firebase dependency to max 8.6.1. I went for 8.3.0.

@google-oss-bot - > this better? :)

Hi,

I like to open a ticket related to the error message reported in firebase/firebase-js-sdk#1491

Error in console.log:

FirebaseError: Missing or insufficient permissions.
    at new e (prebuilt-109c6673-0f51e182.js:188)
    at prebuilt-109c6673-0f51e182.js:10416
    at prebuilt-109c6673-0f51e182.js:10417
    at e.onMessage (prebuilt-109c6673-0f51e182.js:10439)
    at prebuilt-109c6673-0f51e182.js:10356
    at prebuilt-109c6673-0f51e182.js:10387
    at prebuilt-109c6673-0f51e182.js:15194
    at ZoneDelegate.invoke (zone.js:400)
    at Zone.run (zone.js:160)
    at zone.js:1318

Running
NodeJS : v14.16.0 (C:\Program Files\nodejs\node.exe)
npm : 7.6.3
OS : Windows 10

Chrome Version 91.0.4472.77 (Official Build) (64-bit)
Firebase Auth, Firestore

Versions in cli:

      "firebase": "^8.6.5",
     "@angular/fire": "^6.1.5",

Getting above mentioned error trying to access data in firestore - using a simple starter app to access data in firestore

Firestore rules:

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

High level flow - user authentication using Facebook login (via Firebase) and then a simple query on a collection in the store.

If I change the rules to say:
allow read,write: if true; or
allow read,write: if request.auth==null;
all works fine. If I transplant the angular code of this small project into a copy of a production app, the code works fine (full swap contents of src folder): after login, the query delivers the requested data.

With these two experiments I assume to have demonstrated an issue with the dependencies related to angular, angularfire and or the firebase sdk - most likely firebase given the things mentioned in firebase/firebase-js-sdk#1491 and the fact that angualar/angularfire only wraps the firebase js sdk. But I could be wrong of course.

package.json for the project which gives errors:

{
    "name": "k2",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "https://ionicframework.com/",
    "scripts": {
        "dev": "ionic serve -w chrome --ssl",
        "deploy": "ionic build --prod &&  firebase deploy --only hosting",
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/common": "~12.0.1",
        "@angular/core": "~12.0.1",
        "@angular/fire": "^6.1.5",
        "@angular/forms": "~12.0.1",
        "@angular/platform-browser": "~12.0.1",
        "@angular/platform-browser-dynamic": "~12.0.1",
        "@angular/router": "~12.0.1",
        "@capacitor/cli": "^3.0.0",
        "@capacitor/core": "^3.0.0",
        "@ionic/angular": "^5.5.2",
        "@ngneat/until-destroy": "^8.0.4",
        "firebase": "^8.6.5",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/architect": ">= 0.900 < 0.1300",
        "@angular-devkit/build-angular": "~12.0.1",
        "@angular-eslint/builder": "~12.0.0",
        "@angular-eslint/eslint-plugin": "~12.0.0",
        "@angular-eslint/eslint-plugin-template": "~12.0.0",
        "@angular-eslint/template-parser": "~12.0.0",
        "@angular/cli": "~12.0.1",
        "@angular/compiler": "~12.0.1",
        "@angular/compiler-cli": "~12.0.1",
        "@angular/language-service": "~12.0.1",
        "@ionic/angular-toolkit": "^4.0.0",
        "@types/jasmine": "~3.6.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "@typescript-eslint/eslint-plugin": "4.16.1",
        "@typescript-eslint/parser": "4.16.1",
        "eslint": "^7.6.0",
        "eslint-plugin-import": "2.22.1",
        "eslint-plugin-jsdoc": "30.7.6",
        "eslint-plugin-prefer-arrow": "1.2.2",
        "firebase-tools": "^8.0.0 || ^9.0.0",
        "fuzzy": "^0.1.3",
        "inquirer": "^6.2.2",
        "inquirer-autocomplete-prompt": "^1.0.1",
        "jasmine-core": "~3.7.1",
        "jasmine-spec-reporter": "~5.0.0",
        "jsonc-parser": "^3.0.0",
        "karma": "~6.3.2",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.0.3",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "open": "^7.0.3",
        "protractor": "~7.0.0",
        "ts-node": "~8.3.0",
        "typescript": "~4.2.4"
    },
    "description": "An Ionic project"
}

package.json from the production app (which works, also with the simple code):

{
    "name": "xx",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "https://ionicframework.com/",
    "scripts": {
        "ng": "ng",
        "dev": "ionic serve -w chrome --ssl",
        "deploy": "ionic build --prod &&  firebase deploy --only hosting",
       "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^11.2.6",
        "@angular/common": "~11.2.6",
        "@angular/core": "~11.2.6",
        "@angular/fire": "^6.1.4",
        "@angular/forms": "~11.2.6",
        "@angular/google-maps": "^11.2.4",
        "@angular/platform-browser": "~11.2.6",
        "@angular/platform-browser-dynamic": "~11.2.6",
        "@angular/router": "~11.2.6",
        "@angular/service-worker": "~11.2.0",
        "@capacitor/core": "2.4.7",
        "@ionic/angular": "^5.5.2",
        "@ionic/storage": "^3.0.2",
        "@ionic/storage-angular": "^3.0.2",
        "@ngneat/until-destroy": "^8.0.4",
        "firebase": "^7.0 || ^8.0",
        "idb": "^3.0.2",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/architect": ">= 0.900 < 0.1200",
        "@angular-devkit/build-angular": "~0.1102.4",
        "@angular/cli": "~11.2.4",
        "@angular/compiler": "~11.2.6",
        "@angular/compiler-cli": "~11.2.6",
        "@angular/language-service": "~11.2.6",
        "@capacitor/cli": "2.4.7",
        "@ionic/angular-toolkit": "^3.1.1",
        "@types/jasmine": "~3.6.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^6.0.0",
        "firebase-tools": "^8.0.0",
        "fuzzy": "^0.1.3",
        "inquirer": "^6.2.2",
        "inquirer-autocomplete-prompt": "^1.0.1",
        "jasmine-core": "~3.6.0",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "~5.2.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.0.3",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "open": "^7.0.3",
        "protractor": "~7.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~4.0.2"
    },
    "description": "A project"
}

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[Tommertom]

add the problem description as reported on firebase-js-sdk. People over there believe it might be related to angularfire instead.

[Biokimist]

EDIT: Fixed by downgrading to firebase 8.3.0

I m running into the same issue.

I tried to use the firebase emulator but the issue persiste.

I made a minimal component to run test:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(private afa: AngularFireAuth,
              private bd: AngularFirestore) {}
  private email: string = 'test@test.com';
  private pwd: string = 'somePassword123!';

  signUp(): void {
    this.afa.createUserWithEmailAndPassword(this.email, this.pwd).then(
      (userCred) => {
        console.log(userCred);
        this.bd.firestore.collection('users')
          .doc(userCred.user.uid)
          .set({email: userCred.user.email})
          .then()
          .catch((e) => {
            console.log('firestore error in signUp :', e)
          });
      }
    )
  }


  signIn(): void {
    this.afa.signInWithEmailAndPassword(this.email, this.pwd).then(
      (userCred) => {
        console.log(userCred);
        this.bd.firestore.collection('users')
          .doc(userCred.user.uid)
          .get()
          .then(
          (doc) => {
            console.log(doc.data());
          }
        ).catch((e) => console.log('firestore error :', e));
      }
    )
  }

  signOut(): void {
    this.afa.signOut().then(
      () => {
        console.log('signedOut');
      }
    )
  }

  ngOnInit(): void {
  }
}

<button mat-flat-button color="accent"(click)="signUp()">sign Up</button>
<button mat-flat-button color="primary" (click)="signIn()">sign In</button>
<button mat-flat-button color="warn" (click)="signOut()">Sign Out</button>

It 's perfectly fonctionnal with that security rules set:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

But run into firestore rejection with that one:

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

[civicBoy13]

Im having similar issues posted on stackoverflow with no responses please help

https://stackoverflow.com/questions/67752726/angularfire-firestore-keeps-giving-insufficient-permissions-when-trying-to-save

[modernappsllc]

to fix it you have to downgrade to firebase 8.6.1, same issue here with the latest firebase and angularfire

[corradodellorusso]

Same issue here, downgrading to 8.6.0 does the trick.

[markgoho]

Per this comment there is a v8.7 of the JS SDK soon-to-be released that seems to solve the problem.

[weilinzung]

Please update it to v8.7.

[jamesdaniels]

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