Firestore: Could not reach Cloud Firestore backend. Connection failed 1 times

Question

I have a Firebase real-time database integrated with React Native where I can create users. But my problem is that when I try to log in I get an error. I run my app on IOS if it makes any difference. I have followed this guide: How to Build a React Native App and Integrate It with Firebase. I use the method Email/Password for login. I use Firebase version 9.6.4.

I have looked through this thread: Could not reach Cloud Firestore backend. and tried all the solutions but nothing works for me.

Any suggestions on what possibly could cause the error and how do I solve it?

Error message:

[2022-01-29T10:35:40.257Z] @firebase/firestore:, Firestore (9.6.4): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Cloud Firestore API has not been used in project xxxx before or it is disabled. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry. 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.

Firebase config.ts file:

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

const firebaseConfig = {
  apiKey: 'XXXXXXXXX',
  authDomain: 'XXXXXXXXX.firebaseapp.com',
  databaseURL: 'https://XXXXXXXXX.firebasedatabase.app',
  projectId: 'XXXXXXXXX',
  storageBucket: 'gs://XXXXXXXXX.appspot.com',
  messagingSenderId: 'XXXXXXXXX',
  appId: 'XXXXXXXXX',
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export { firebase };

LoginScreen.tsx

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';
import { firebase } from '../../firebase/config';

export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const onFooterLinkPress = () => {
        navigation.navigate('Registration')
    }

    const onLoginPress = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        navigation.navigate('Home', {user})
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

    return (
        <View style={styles.container}>
            <KeyboardAwareScrollView
                style={{ flex: 1, width: '100%' }}
                keyboardShouldPersistTaps="always">
                <Image
                    style={styles.logo}
                    source={require('../../assets/images/logo.png')}
                />
                <TextInput
                    style={styles.input}
                    placeholder='E-mail'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholderTextColor="#aaaaaa"
                    secureTextEntry
                    placeholder='Password'
                    onChangeText={(text) => setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => onLoginPress()}>
                    <Text style={styles.buttonTitle}>Log in</Text>
                </TouchableOpacity>
                <View style={styles.footerView}>
                    <Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
                </View>
            </KeyboardAwareScrollView>
        </View>
    )
}

Answer 1

Your error message says FirebaseError: [code=permission-denied]: Cloud Firestore API has not been used in project xxxx before or it is disabled. The app tries to read a user document after signing in, but seems to have no access.

Check your firestore rules in your firebase console to see if read rules are valid. Firestore may have initialized with rules that allow only admin users to read/write, or rules that allow all read/write only for a month after its creation.

To make your app work, your firestore rules need to allow read access on users collection. Here are the rules you can set on your firestore. The more specific rules you set, the more secure the app is.

Allow unauthenticated access on all collections

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Allow authenticated access on all collections

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Allow authenticated access on users collection

service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

See the firestore security doc for more.