CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-databasegoogle-cloud-firestorefirebase-authentication
ZUKINI
ZUKINI

Reputation: 195

Cannot Connect to Firestore Database

When trying to get a document and its fields from Firestore I get the following errors:

From Local Host:

@firebase/firestore: Firestore (8.3.2): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project "xxxxxxxxx".
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.

From Firebase Hosting:

BrowserPollConnection.ts:728 GET https://[PROJECT_ID]-default-rtdb.firebaseio.com/.lp?start=t&ser=82934841&cb=1&v=5&p=1:303920306737:web:bc61250d7aa9a51a415310 net::ERR_NAME_NOT_RESOLVED

When looking up this issue the resolution seems to be caching, DNS, ISP, VPN, or something of the likes. I have tried every proposed solution and still no resolution. I'm thinking it might be how I configured the connection?

The only thing I find odd is that it states its trying to go to https://[PROJECT_ID]-default-rtdb.firebaseio.com which I thought is only for RTDB but I am using Firestore.

In my configuration file I have the following:

firebase/index.js

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

var config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: `${process.env.REACT_APP_PROJECT_ID}.firebaseapp.com`,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE,
  messagingSenderId:process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId:process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
  
}

firebase.initializeApp(config);

export default firebase;

I'm trying to just get one document in a useEffect. Weird thing is that once it returns setData, doing data.id prints out the actual ID however within the useEffect or out of it checking if the doc exists docSnapshot.exists is always false. Probably because of my connection issues.

import firebase from './firebase';
const db = firebase.firestore();
.
.
.

    useEffect(() => {
           
    
    
            db.collection('myCollection').doc('myDocID')
            .onSnapshot(docSnapshot => {
    
                console.log(`Received doc snapshot: ${docSnapshot}`);
                setData(docSnapshot);
    
            }, err => {
                console.log(`Encountered error: ${err}`);
    
            });
    },[]);

Upvotes: 1

Views: 2056

Answers (2)

ZUKINI
ZUKINI

Reputation: 195

The issue was actually in my .env file where I had quotes " around the variables. This caused them to be undefined and thus couldn't connect. This question answer helped me

react evironment variables .env return undefined

Upvotes: 7

Thanh Le
Thanh Le

Reputation: 56

The error is code=permission-denied. So I think you should try to generate a new API key to check if the errors is caused by permission or your missed configuration

Upvotes: 0

Related Questions