Firebase phone authentication works in Ionic 4, but Firebase permission denied

Question

Using this plugin @ionic-native/firebase-authentication/ngx, I'm able to do phone authentication, but after authenticating and I try to retrieve data from Firestore (using angularfirestore), I'm getting a FirebaseError: Missing or insufficient permissions. error.

(A little backstory. I'm migrating an Ionic v3 (Firebase) app to Ionic v4 (Firestore). The phone auth for this user works in v3, but not in v4).

Here's parts of the code

import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx'; import { Query, AngularFirestore } from '@angular/fire/firestore';
    //...
    constructor(private afs: AngularFirestore,
        private firebaseAuthentication: FirebaseAuthentication )
    //...
    this.firebaseAuthentication.onAuthStateChanged().subscribe((user)=>{
          console.log(user);// This correctly shows the user object
          //...
    const snapshot = await this.afs.collection(collection).doc(user.uid).ref.get(); // <-- Permissions error
    // ...
        });

Here's the Firestore rules...

rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {

    match /{document=**} {

      allow read, write: if request.auth.uid != null;
    }
  }
}

... and the Firebase rules

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
      "quotes": {
      ".indexOn": ["businessprofile_id","request_id"]
    },
      "quotes-by-business-profile": {
      ".indexOn": ["request_id"]
    },
      "businessprofiles": {
        "$userid":{
           ".indexOn": ["status"]
          ,".read": "auth.uid == $userid || auth.userId == $userid",
                 ".write": "auth.uid == $userid || auth.userId == $userid"
        
          }   
    },
      "requests": {
        "$requestid":{
            ".indexOn": ["userid", "category", "status"]
        },
          ".indexOn": ["userid", "status", "accepted_businessprofile_id"]
    },
      "users" : {
        "$users" : {
          ".read": "auth.uid == $users || auth.userId == $users",
                ".write": "auth.uid == $users || auth.userId == $users"
        }
      },
      "messages" : {
        ".indexOn" : ["request_id", "businessprofile_userid", "userid","businessprofile_id"]
      },
      "businesslocations" : {
        ".indexOn": "g"
      },
      "countries" :
      {
        ".read": true
      }
  }
}

Has anyone successfully implemented firebase phone auth with Ionic 4?? I've tried other solutions in Stackoverflow, but no luck.

Thanks.

Answer 1

Posting this as Community wiki, based in the comments from the question.

It seems that the solution to fix the issue was to change the way of signing in. As @ObiE indicated, he used the following:

signInCredential = firebase.auth.PhoneAuthProvider.credential(env.verificationId, data.confirmationCode);           

firebase.auth().signInWithCredential(signInCredential).then((success) => {
...

Instead of what was being used before:

this.firebaseAuthentication.signInWithVerificationId(env.verificationId,data.confirmationCode).then((user)=>{console.log(user)

This change in the log in worked for the user that was not being to authenticate via phone.