Firebase signinwithemail&password 不是 function

Question

我最近一直在為我的 IOS 應用程序制作一個應用程序，並將 firebase 電子郵件/密碼身份驗證引入我的項目。 注冊部分工作正常，但是當我執行 handleSignin function 時，它並沒有按預期工作。 任何想法為什么

我的代碼：

import React from 'react';
import { Button,StyleSheet,View,Text, Image,SafeAreaView, TextInput, KeyboardAvoidingView, TouchableOpacity} from 'react-native';
import {auth} from "../firebase"
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "firebase/auth";
import { FirebaseError } from 'firebase/app';

export const Login = () => {
    const [email, setEmail] = React.useState("")
   const [password, setPassword] = React.useState("")
  const handleSignUp = (e) => {
    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in 
      const user = userCredential.user;
      // ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      // ..
    });
  }
  const handleLogin  =  () => {
    auth
    .signInWithEmailAndPassword(email, password)
    .then(userCredentials => {
      const user = userCredentials.user;
      console.log('Logged in with:', user.email);
    })
    .catch(error => alert(error.message))
  }

  return (
    <KeyboardAvoidingView
    style={styles.container}
    behavior="padding"
  >
    <Text style={styles.heading}>Unlock the power of time managment</Text>
    <View style={styles.inputContainer}>
      <TextInput
      value={email}
        placeholder="Email"
        style={styles.input}
        onChangeText={text => setEmail(text)}
      />
      <TextInput
        placeholder="Password"
        style={styles.input}
        onChangeText={text => setPassword(text)}
        value={password}
        secureTextEntry
      />
    </View>

    <View style={styles.buttonContainer}>
      <TouchableOpacity
        style={styles.button}
        onPress={handleLogin}
      >
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[styles.button, styles.buttonOutline]}
        onPress={handleSignUp}
      >
        <Text style={styles.buttonOutlineText} >Register</Text>
      </TouchableOpacity>
    </View>
  </KeyboardAvoidingView>
  )
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputContainer: {
    width: '80%'
  },
  input: {
    backgroundColor: 'white',
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 10,
    marginTop: 5,
  },
  heading: {
    fontSize: 30,
    fontWeight: "700"
  },
  buttonContainer: {
    width: '60%',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 40,
  },
  button: {
    backgroundColor: '#0782F9',
    width: '100%',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  buttonOutline: {
    backgroundColor: 'white',
    marginTop: 5,
    borderColor: '#0782F9',
    borderWidth: 2,
  },
  buttonText: {
    color: 'white',
    fontWeight: '700',
    fontSize: 16,
  },
  buttonOutlineText: {
    color: '#0782F9',
    fontWeight: '700',
    fontSize: 16,
  },
});

expo go 錯誤：firebase.auth.signinwithemailandpassword 不是 function firebase.auth.signinwithemailandpassword 返回未定義

Answer 1

您正在使用新的模塊化 SDK 語法，其中大多數功能作為頂級 function 公開，而不是作為 object 上的方法。當您將createUserWithEmailAndPassword作為頂級 function 調用時，您將傳入auth 882829885402您需要為登錄做同樣的事情：

const handleLogin  =  () => {    
  signInWithEmailAndPassword(auth, email, password)
  ...

我建議在解決此類問題時將 Firebase 文檔放在手邊，因為上面幾乎與使用 email 地址和密碼登錄用戶部分中的Web 版本 9（模塊化）選項卡中顯示的代碼完全相同

Answer 2

以下是對我有用的指南，您可以嘗試一下。

解釋如下：您必須從 firebase/auth 導入 signInWithEmailAndPassword。 注意：signInWithEmailAndPassword是一個function取三個arguments，即auth、email和password。

import { signInWithEmailAndPassword } from "firebase/auth";

const signIn= (e) => {
    e.preventDefault();

   // for login 
   signInWithEmailAndPassword(auth, email, password).then((auth) => {
    console.log(auth);
     if (auth) {
         // if successfully signed in, redirect the new user to the home page
      navigate('/');
    }
    }).catch(error => alert(error.message));

 };