javascript 在react native项目中使用firebase身份验证时出错

06odsfpq  于 2023-11-15  发布在  Java
关注(0)|答案(3)|浏览(140)

我试图在我的react native项目中使用firebase身份验证。但它显示错误-

  1. ERROR ReferenceError: Property 'auth' doesn't exist, js engine: hermes

字符串
当我们在注册屏幕中点击注册按钮时,它应该注册一个用户,但它显示错误。SignupScreen.js文件是这样的-

  1. import { View, Text, StyleSheet, Image, TouchableOpacity, TextInput, KeyboardAvoidingView } from 'react-native'
  2. import React, { useState } from 'react'
  3. export default function SignupScreen({navigation}) {
  4. const [email,setEmail]=useState('')
  5. const [password,setPassword]=useState('')
  6. const handleSignUp=()=>{
  7. auth
  8. .createUserWithEmailAndPassword(email,password)
  9. .then(userCredentials=>{
  10. const user =userCredentials.user;
  11. console.log(user.email)
  12. })
  13. .catch(error=>
  14. alert(error.message)
  15. )
  16. }
  17. return (
  18. <KeyboardAvoidingView style={styles.container} behavior='padding'>
  19. <Text style={styles.text}>Create An Account</Text>
  20. <Image source={require('../assets/signup.png')} style={styles.img}/>
  21. <Text style={styles.label}>Name</Text>
  22. <TextInput placeholder='Enter Your Name'
  23. style={styles.input}
  24. />
  25. <Text style={styles.label}>Email</Text>
  26. <TextInput placeholder='Enter Your Email'
  27. style={styles.input}
  28. value={email}
  29. onChangeText={value=> setEmail(value)}/>
  30. <Text style={styles.label}>Username</Text>
  31. <TextInput placeholder='Enter a Unique username'
  32. style={styles.input}
  33. />
  34. <Text style={styles.label}>Password</Text>
  35. <TextInput placeholder='Create Password'
  36. style={styles.input}
  37. value={password}
  38. secureTextEntry
  39. onChangeText={value=> setPassword(value)}/>
  40. <TouchableOpacity style={styles.btn} onPress={handleSignUp}>
  41. <Text style={styles.btnText}>Sign Up</Text>
  42. </TouchableOpacity>
  43. <View style={styles.btn2}>
  44. <Text style={{color:"white"}}>Already a User?</Text>
  45. <TouchableOpacity onPress={()=>navigation.navigate("LoginScreen")}>
  46. <Text style={styles.logText}>Log In</Text>
  47. </TouchableOpacity>
  48. </View>
  49. </KeyboardAvoidingView>
  50. )
  51. }
  52. const styles=StyleSheet.create({
  53. container:{
  54. backgroundColor:"#8FA6CB",
  55. flex:1,
  56. padding:30,
  57. justifyContent:"center",
  58. },
  59. text:{
  60. fontSize:30,
  61. color:"white",
  62. fontFamily:"serif",
  63. fontWeight:"bold",
  64. textAlign:"center"
  65. },
  66. img:{
  67. width:340,
  68. height:250,
  69. alignSelf:"center"
  70. },
  71. btn:{
  72. backgroundColor:"#AF2664",
  73. paddingHorizontal:20,
  74. paddingVertical:10,
  75. width:"100%",
  76. borderRadius:8,
  77. marginTop:25
  78. },
  79. btnText:{
  80. color:"white",
  81. alignSelf:"center",
  82. fontSize:18,
  83. },
  84. btn2:{
  85. flexDirection:"row",
  86. gap:10,
  87. alignSelf:"center",
  88. marginTop:10
  89. },
  90. logText:{
  91. color:"#AF2664"
  92. },
  93. input:{
  94. borderWidth:1,
  95. borderRadius:8,
  96. width:"100%",
  97. paddingVertical:10,
  98. paddingHorizontal:15,
  99. fontSize:17,
  100. color:"white",
  101. borderColor:"white",
  102. marginBottom:10
  103. },
  104. label:{
  105. color:"white",
  106. fontSize:19,
  107. marginBottom:5
  108. }
  109. })


firebase.js文件-

  1. import *as firebase from "firebase/app";
  2. const firebaseConfig = {
  3. apiKey: "AIzaSyAbKgCge94KVTyv7SMyIx3kAu1BkJXBn5I",
  4. authDomain: "fir-auth-d2499.firebaseapp.com",
  5. projectId: "fir-auth-d2499",
  6. storageBucket: "fir-auth-d2499.appspot.com",
  7. messagingSenderId: "580829064333",
  8. appId: "1:580829064333:web:10f3dbd97070935f5806c4",
  9. measurementId: "G-0WLRSQLJKX"
  10. };
  11. // Initialize Firebase
  12. let app;
  13. if(firebase.apps.length === 0){
  14. app=firebase.initializeApp(firebaseConfig);
  15. }else{
  16. app=firebase.app();
  17. }
  18. const auth=firebase.auth();
  19. export {auth};


我不知道为什么它是给错误.我尝试它第一次通过以下youtube视频,我已经按照所有的步骤,但它仍然是显示错误.

q9yhzks0

q9yhzks01#

如果这是你完整的SignupScreen.js文件,那么你在哪里导入你在firebase.js中定义的auth?
第一个月
从firebase.js导入auth,这应该可以解决你的问题,并确保文件路径是准确的。

hts6caw3

hts6caw32#

像这样编辑您的firebase.js

  1. import *as firebase from "firebase/app";
  2. import { getAuth } from "firebase/auth";
  3. const firebaseConfig = {
  4. apiKey: "AIzaSyAbKgCge94KVTyv7SMyIx3kAu1BkJXBn5I",
  5. authDomain: "fir-auth-d2499.firebaseapp.com",
  6. projectId: "fir-auth-d2499",
  7. storageBucket: "fir-auth-d2499.appspot.com",
  8. messagingSenderId: "580829064333",
  9. appId: "1:580829064333:web:10f3dbd97070935f5806c4",
  10. measurementId: "G-0WLRSQLJKX"
  11. };
  12. // Initialize Firebase
  13. let app;
  14. if(firebase.apps.length === 0){
  15. app=firebase.initializeApp(firebaseConfig);
  16. }else{
  17. app=firebase.app();
  18. }
  19. // Initialize Firebase Authentication and get a reference to the service
  20. const auth = getAuth(app);
  21. export {auth};

字符串

展开查看全部
jm81lzqq

jm81lzqq3#

您问题中的这段代码使用了Firebase Authentication命名空间SDK:

  1. auth
  2. .createUserWithEmailAndPassword(email,password)

字符串
但是您并没有在任何地方导入这个SDK,也没有初始化或导入auth变量。
解决这个问题的最简单方法是导入最新SDK的compat库:

  1. import firebase from 'firebase/compat/app';
  2. import 'firebase/compat/auth';


然后在使用auth之前初始化它:

  1. let auth = firebase.auth();
  2. auth.createUserWithEmailAndPassword(email,password)
  3. ...


有关此方面的更多信息,并防止遇到类似的问题,我建议花点时间阅读Firebase文档,了解如何在Web应用程序中开始使用Firebase身份验证。

展开查看全部

相关问题