CODEWITHSUNDEEP
androidnode.jsreactjsfirebasegoogle-cloud-firestore
Ashish Arjun
Ashish Arjun

Reputation: 157

Could not reach Cloud Firestore backend. Connection failed 1 times

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!!!

Upvotes: 13

Views: 19559

Answers (9)

Victor Assis
Victor Assis

Reputation: 11

I experienced this issue with an app deployed at Vercel. For me it had to do with the app not being able to access firebase environment variables properly.

I was using a .env file locally and it was working just fine. To use them in production I tried to create GitHub secrets, but then faced this issue.

SOLUTION: I created these env variables in the Vercel platform instead. Now my app can access firestore normally.

Upvotes: 0

Muhammad Ahmed
Muhammad Ahmed

Reputation: 1

If your firestore is in test production, remove the timestamp

allow read, write;

Replace with the above code, hopefully It will work.

Upvotes: 0

mmm
mmm

Reputation: 1436

For people using Next 13 with Firestore 9:

If you use ServerComponents (default components in Next 13) and you also use .env.local to set your Firebase env vars, then everything should work no matter what you call your env vars.

BUT most likely you want to turn components related to Firestore data fetching (esp. real-time onSnapshot) to ClientComponent by writing 'use client' at the top of the file, so you have access to states. In this case, you have to remember to add NEXT_PUBLIC_ before every env var (e.g. NEXT_PUBLIC_FIREBASE_API_KEY). This will expose the env vars to the browser (i.e. client).

Also, make sure you don't have any typos in env var names.

Links:

Upvotes: 1

Yusuke Hakamaya
Yusuke Hakamaya

Reputation: 14473

I encountered the same issue because I forgot to expose those configs to the browser. With that, if you're using Next.js for ex. and defining those in .env, you must add the NEXT_PUBLIC prefix. Otherwise, you'll see the same error. https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser

Upvotes: 0

easterling94
easterling94

Reputation: 21

I had the same issue and tried to use the @atunde arisekola approach. If you can solve this problem by using direct credentials in your firebaseConfig variable, consider to check whether your .env.local or any other .env you are using is located in the root directory. In my case had firebaseConfig.ts and .env.local in the same directory, and thus the error occured. It is recommended to have.env in the root of your App.

Upvotes: 2

Will
Will

Reputation: 343

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.

Upvotes: 0

Nilton Lopes
Nilton Lopes

Reputation: 61

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

Upvotes: 6

Claudio Teles
Claudio Teles

Reputation: 352

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 { }

enter image description here

Upvotes: 3

atunde arisekola
atunde arisekola

Reputation: 81

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

Upvotes: 6

Related Questions