Could not reach Cloud Firestore backend. Connection failed 1 times

Question

i'm using a very simple code and fetching data from firestore

import firebase from 'firebase/app';
import 'firebase/firestore'

const firebaseApp = firebase.initializeApp({
        apiKey: "...",
        authDomain: "...",
        ....
    });
    
const db = firebaseApp.firestore();
    
export default db;

but i keep getting this error

[2021-06-05T00:58:41.274Z]  @firebase/firestore: Firestore (8.6.5): Could not reach Cloud Firestore backend. Connection failed 1 times.
Most recent error: FirebaseError: [code=permission-denied]:
 Permission denied on resource project.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

1. i do have a very fast internet connection
2. my clock is also synced with the standard time

Now, i have no clue why is this happening?

please someone help me out!!!

Answer 1

Make sure your environment is pointing to the real firestone database and not the Firestore Emulator. When I came across this same issue, that was the reason.

I'm using an Angular framework so I had to comment out those environment references in my app.module.ts file.

@NgModule({
  declarations: [AppComponent, InformUserComponent],
  entryComponents: [InformUserComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    }),

  ],
  providers: [AuthService, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    // {
    //   provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ?
    //     ['localhost', 8080] : undefined
    // },
    // {
    //   provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ?
    //     ['localhost', 5001] : undefined
    // },
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Answer 2

I was facing the same issue. The connection was working on some environments, but on my client's corporate network it wasn't.

After a loong research on the internet, I found an issue on Github talking about it.

Here's what worked for me:

const firestoreDB = initializeFirestore(firebaseApp, {
  experimentalForceLongPolling: true, // this line
  useFetchStreams: false, // and this line
})

Here i'm using firebase v9. For firebase v8 it's something like:

firebase().firestore().settings({
  experimentalForceLongPolling: true, // this line
  useFetchStreams: false, // and this line
})

Answer 3

i was able to resolve this issue by using my credential directly where i initializeApp my firebase config, i was previously calling them from my env file i think my app was not getting the env before

Answer 4

I have faced this issue as well with angular fire. What I have changed is to add firestore settings to the provider of app module:

According to the GitHub issues discussion, I think you can try experimentalAutoDetectLongPolling first. And option useFetchStreams is unnecessary except for users who are using very old browser versions.

import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';


providers:[
    {
      provide: FIRESTORE_SETTINGS,
      useValue: { experimentalAutoDetectLongPolling: true, merge: true },
    }
]

and you can use mitmproxy to reproduce the firebase errors.