1

I'm trying to connect my react js application with Firebase Firestore but I'm getting the below error as shown in the image error image I'm having 2 documents in the collection but I'm getting an empty array as you can see in the console. This is the code I'm using to fetch firestore data

const snapshot = await firebase.firestore().collection('users').get();
const data = snapshot.docs.map((doc) => doc.data());
console.log(data);

PS: I'm able to use auth function from firebase properly but getting an error with firestore.

Solutions I have tried so far:

  1. Sync the clock
  2. verified the firebase rules and made sure read and write are allowed (attaching the rules I found in firestore rules section)
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if 
          request.time < timestamp.date(2021, 6, 23);     
    }
  }
}

Looking for some quick solutions as I'm struggling since last night. Thanks in Advance.

krishnakirit04
  • 106
  • 1
  • 9

2 Answers2

1

I tried the following steps to confirm that there is a problem with the react application or browser and fixed the issue.

  • Tried to get data and post data to firestore using node and express script (this helped to find out that the issue was not with firebase configuration)

  • After some online research I tried to change my browser from Brave to Chrome which actually worked.

krishnakirit04
  • 106
  • 1
  • 9
  • I noticed that there was an extra slash ('/') that got attached to the project Id variable which was stored in the .env file and because of that firebase couldn't fetch the project id. – krishnakirit04 May 31 '21 at 11:47
0

The First error in your screenshot hints at this actually being a Access-Control-Allow-Origin CORS issue. So in order to fix it as you can see in this article, you can either:

  • Add the "proxy": "http://localhost:PORT_YOU_ARE_USING" option to your package.json file;

or

  • Use a middleware like http-proxy-middleware to proxy requests, you can follow the example in the article for that.

Also you can take a look at this community question, which poses a simillar issue to yours and provide some other solutions. You may get a better understanding of cors issues in React by checking it out.

Ralemos
  • 5,571
  • 2
  • 9
  • 18
  • Thanks for the suggestion, I'm already having the cors plugin enabled in my browser. I recently observed in the screenshot that the timestamp mentioned there and my system's time are not in sync. Is the issue because of that? – krishnakirit04 May 25 '21 at 14:20
  • Isn't it just a timezone difference? I don't think this is the cause of the issue, but you can test it by removing `request.time` rule temporaly. – Ralemos May 25 '21 at 14:43
  • Sorry, I just tried that and it didn't help me. – krishnakirit04 May 25 '21 at 15:44
  • I don't understand why auth function is working properly and doesn't show any CORS error but firestore is giving me CORS error even though they are in the same app. – krishnakirit04 May 25 '21 at 17:09
  • I don't think Auth does any cors check, that is why, but back to your first comment, what do you mean with `I'm already having the cors plugin enabled in my browser`? Did you try to apply in the request themselves like mentioned in my answer? I think there is a difference there. – Ralemos May 26 '21 at 12:58
  • Thanks for your inputs, I still can't figure out the issue but the issue got **fixed** when I started using Chrome browser instead of Brave browser which I generally use. – krishnakirit04 May 26 '21 at 13:05
  • the issue is definitely not CORS as I'm already using another third-party API service in my application. – krishnakirit04 May 26 '21 at 13:10