Firebase 身份验证错误：React Native 应用程序中的“错误（身份验证/配置未找到）”

Question

我正在使用 Firebase 进行身份验证开发 React Native 应用程序，当我尝试检查电子邮件是否使用 fetchSignInMethodsForEmail() 注册时，遇到错误：“错误（auth/configuration-not-found）”。我的 Firebase 配置似乎设置正确，并且在 Firebase 控制台中启用了电子邮件/密码登录。我已验证我的 API 密钥和应用 ID，并且已正确初始化 Firebase 身份验证。但是，错误仍然存在。谁能帮我解决这个问题吗？

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet, Pressable, Alert } from 'react-native';
import { MaterialIcons, FontAwesome } from '@expo/vector-icons'; 
import Colors from '../constants/Colors'; 
import { useRouter } from 'expo-router';
import { fetchSignInMethodsForEmail } from 'firebase/auth';
import { auth} from '../firebaseConfig';

export default function Signup() {
    const router = useRouter();
    const [focusedField, setFocusedField] = useState(null);
    const [email, setEmail] = useState('');
    const validateEmail = (email) => {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
      };

  
    const handleContinue = async () => {
        if (!validateEmail(email)) {
            Alert.alert("Error", "Please enter a valid email address.");
            return;
        }

        console.log('Auth Object:', auth);
        console.log('Email being checked:', email);


        try {
            const signInMethods = await fetchSignInMethodsForEmail(auth, email);
            
            if (signInMethods.length === 0) {
                // No account associated with this email, proceed to create account
                router.push('/createAcc');
            } else {
                // Email is already in use
                Alert.alert("Error", "This email is already registered. Please use a different email.");
            }
        } catch (error) {
            Alert.alert("Error", error.message);
        }
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Create your account</Text>
            
            <TextInput
                style={[
                    styles.input,
                    focusedField === 'Email' && styles.inputFocused, // Apply focus style
                ]}
                placeholder="Email"
                keyboardType="email-address"
                autoCapitalize="none"
                value={email} // Bind the input to the email state
                onChangeText={setEmail} // Update the email state on change
                onFocus={() => setFocusedField('Email')}
                onBlur={() => setFocusedField(null)}
            />
            
            <Pressable style={styles.continueButton} onPress={handleContinue}>
                <Text style={styles.continueButtonText}>Continue</Text>
                <MaterialIcons name="arrow-forward" size={24} color="white" />
            </Pressable>
            
            <View style={styles.orContainer}>
                <View style={styles.line} />
                <Text style={styles.orText}>OR</Text>
                <View style={styles.line} />
            </View>
            
            <Pressable style={styles.googleButton}>
                <FontAwesome name="google" size={24} color="white" />
                <Text style={styles.googleButtonText}>Continue with Google</Text>
            </Pressable>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        backgroundColor: Colors.PRIMARY_GRAY,
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    input: {
        width: '100%',
        height: 50,
        borderColor: Colors.SECONDARY_GRAY, // Corrected the typo here from SECONDAY_GRAY
        borderWidth: 1,
        borderRadius: 8,
        paddingLeft: 10,
        marginBottom: 20,
    },
    inputFocused: {
        borderColor: Colors.ACCENT_ORANGE, 
        borderWidth: 3,
    },
    continueButton: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.ACCENT_ORANGE,
        borderRadius: 8,
        padding: 10,
        width: '100%',
    },
    continueButtonText: {
        color: '#ffffff',
        fontSize: 18,
        marginRight: 8,
    },
    orContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 10,
        width: '100%',
    },
    orText: {
        fontSize: 16,
        marginVertical: 30,
        marginHorizontal: 10,
    },
    line: {
        flex: 1,
        height: 1,
        backgroundColor: '#ccc',
    },
    googleButton: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.ACCENT_GREEN,
        borderRadius: 8,
        padding: 10,
        width: '100%',
    },
    googleButtonText: {
        color: '#ffffff',
        fontSize: 18,
        marginLeft: 8,
    },
    googleLogo: {
        width: 24,
        height: 24,
    },
});

Answer 1

Firebase 身份验证中的“错误（auth/configuration-not-found）”通常表示您的 React Native 应用程序中的 Firebase 配置丢失或不正确。以下是排查和解决此问题的一些步骤：

1. 检查 Firebase 配置：

   • 确保您已将 Firebase 配置文件（对于 Android 为

     google-services.json

     ，对于 iOS 为

     GoogleService-Info.plist

     ）添加到您的项目中。
   • 验证配置文件是否正确放置在适当的目录中。

2. 初始化 Firebase:

   • 确保您已在应用中初始化 Firebase。这通常涉及使用正确的配置对象调用

     firebase.initializeApp(config)

     。

3. 正确的配置对象:

   • 仔细检查 Firebase 初始化代码中的配置对象。它应该与您的 Firebase 项目中的设置相匹配。

4. 依赖关系：

   • 确保在您的项目中安装并正确链接了所有必需的 Firebase 依赖项。

以下是如何在 React Native 应用程序中初始化 Firebase 的基本示例：

import firebase from 'firebase/app';
import 'firebase/auth';
import { firebaseConfig } from './firebaseConfig'; // Ensure this path is correct

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

如果您已验证所有这些步骤，但错误仍然存在，您可能需要检查 Firebase 控制台，以确保您的项目设置已正确配置。