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));

 };