I have a counter in my react front-end that I want to display a document value from my firestore database. However, I can't seem to access the firestore data, the code below results in the following error:
Navbar.js (client-side code)
import { db, app, functions } from "./firebase";
import { getFunctions, httpsCallable } from "firebase/functions";
import { Link } from "react-router-dom";
import "../App.css";
import React, { useState } from "react";
import {
getFirestore,
collection,
doc,
getDocs,
onSnapshot,
getDocFromCache,
} from "firebase/firestore";
async function checker() {
const querySnap = await getDocs(collection(db, "Count")); //Count is collections name
querySnap.forEach((doc) => {
console.log(doc.id, " => ", doc.data());
});
}
Error Message
Navbar.js:28 Uncaught (in promise) FirebaseError: Missing or insufficient permissions.
I haven't implemented any firebase auth (although feels like I will need to implement before deploying), and I have tried adjusting my firestore rules (shown below, although I know they are too vulnerable).
firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
My goals are:
- Make a successful read of firestore data
- Adust security rules to be more secure
- Figure out if auth is necessary to add based on my needs here
Would appreciate any and all advice, I am still new to firebase.
Here is my config file if that is helpful?
firebase.js (in same directory as Navbar.js)
import { initializeApp } from 'firebase/app';
import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, getDocs } from 'firebase/firestore';
import {getAuth} from "firebase/auth";
const firebaseConfig = {
apiKey: //Hiding my data for this post
authDomain:
projectId:
storageBucket:
messagingSenderId:
appId:
measurementId:
};
const app = initializeApp(firebaseConfig);
export const functions = getFunctions(app);
export const db = getFirestore(app);
export const analytics = getAnalytics(app);
export default {app, db, analytics, functions};
Via Active questions tagged javascript - Stack Overflow https://ift.tt/JqR4nyz
Comments
Post a Comment