Question 231628 in React native Question posted in
The official React Native documentation can be found here.

React native – Firestore Could not reach Cloud Firestore backend: code=permission-denied

Im using Firebase with React-Native and Expo.

Firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore, initializeFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import Constants from "expo-constants";

const firebaseConfig = {
  apiKey: Constants.manifest.extra.apiKey,
  authDomain: Constants.manifest.extra.authDomain,
  projectId: Constants.manifest.extra.projectId,
  storageBucket: Constants.manifest.extra.storageBucket,
  messagingSenderId: Constants.manifest.extra.messagingSenderId,
  appId: Constants.manifest.extra.appId,
  databaseURL: Constants.manifest.extra.databaseURL
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const db = initializeFirestore(app, {
experimentalForceLongPolling: true
})

export { db, auth }

Firebase Rules (I know this is bad in production, just for testing purposes)

rules_version = '2';
  service cloud.firestore { 
    match /databases/{database}/documents {
    match /{document=**} { 
      allow read, write; 
    } 
  } 
}

Chat.js

// ..imports

export default function Chat() {
    const [messages, setMessages] = useState([])
    const navigation = useNavigation();

    useLayoutEffect(() => {
      const collectionRef = collection(db, "chats");
      const q = query(collectionRef, orderBy("createdAt", "desc"));

      const unsubscribe = onSnapshot(q, snapshot => {
        console.log("snapshot");
        setMessages(snapshot.docs.map(doc => ({
          _id: doc.id,
          createdAt: doc.data().createdAt.toDate(),
          text: doc.data().text,
          user: doc.data().user
        }))
      )

    });
    return () => unsubscribe();
  }, []);
    
  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages));

    const { _id, createdAt, text, user } = messages[0];
    addDoc(collection(db, 'chats'),{
      _id,
      createdAt,
      text,
      user
    })
  }, []);

    return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: auth?.currentUser?.email,
        avatar: 'https://i.pravatar.cc/300'
      }}
    />
    )
}

I tried adding "experimentalForceLongPolling: true" in the firebase.js which didn’t work and also changed the rules so everyone can overwrite it. I also found someone who said that you should add "useFetchStreams: false" but that didn’t work either. I also removed firebase with yarn and installed again with "npx expo install firebase". (also tried "merge: true").

Im just clueless right now to why this is happening :/

Tags:

2

Answers


  1. 0

    I think the problem is in firebase security rule.

    Change from –

    allow read, write;

    To (correct)-

    allow read, write: if true;

    Suggestion

    Please write your own security rule according to your usage. Because this can put your database at risk. Anyone can read or write.

    Read this official docs on firebase security rule for firestore.

    Login or Signup to reply.
  2. 0

    Can you provide your expo version ?
    Referring to the expo documentation if you are using Firebase version 9.7.x and above you should add in your metro.config.js :

    const { getDefaultConfig } = require('@expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');
module.exports = defaultConfig;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search