我正在尝试使用Firebase对React Native登录/注册表单进行身份验证,但是它不起作用。任何帮助将不胜感激。
我已将npm更新为最新版本,因为它已为其他人使用,但仍然存在问题。我不断收到“身份验证失败”错误。我已经在Firebase控制台中启用了电子邮件/通过身份验证
文件:app.js
import firebase from 'firebase';
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import LoginCard from './src/components/LoginCard'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props){
super(props)
this.state = {
isLoggedIn:null
}
this.renderContent = this.renderContent.bind(this);
}
componentWillMount(){
var firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "authentication-...",
storageBucket: "",
messagingSenderId: "...",
appId: "..."
};
// Initialize Firebase
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
firebase.auth().onAuthStateChanged(user => {
if(user) {
this.setState({isLoggedIn:true})
} else{
this.setState({isLoggedIn:false})
}
})
}
renderContent(){
if(!this.state.isLoggedIn){
return <LoginCard />
}else{
return <Button title='Log Out' onPress = {() => firebase.auth().signOut()}></Button>
}
}
render() {
return (
<View style={styles.container}>
<View style = {styles.header}>
<Text style ={{fontSize:24}}>Auth</Text>
</View>
{this.renderContent()}
</View>
);
}
}
========LoginCard.js FILE==========
import firebase from 'firebase';
import React ,{Component} from 'react';
import {Text, TextInput,View,TouchableOpacity,ActivityIndicator } from 'react-native';
import Spinner from './Spinner';
import {CirclesLoader,PulseLoader,DotsLoader} from 'react-native-indicator';`
class LoginCard extends Component {
constructor(props){
super(props)
this.state = {
email:null,
password:null,
error:null,
loading:false
}
this.onButtonPress = this.onButtonPress.bind(this);
this.buttonOrLoading = this.buttonOrLoading.bind(this);
}
onButtonPress() {
this.setState({error:null,loading:true})
const {email, password} = this.state;
firebase.auth().signInWithEmailAndPassword(email,password)
.then(() => this.setState({error:null,loading:false}))
.catch(() => {
firebase.auth().createUserWithEmailAndPassword(email,password)
.then(() => this.setState({error:null,loading:false}))
.catch(() => {
this.setState({error:'Authentication Failed',loading:false})
})
})
}
buttonOrLoading(){
if(this.state.loading){
return <CirclesLoader />
}
else return <TouchableOpacity
onPress = {this.onButtonPress}
style = {styles.btn}>
<Text style = {{fontSize:18}}>Login</Text>
</TouchableOpacity >
}
render(){
return (
<View style = {styles.card}>
<TextInput
style = {styles.inputField}
placeholder='Email'
onChangeText = {email => this.setState({email})}
value = {this.state.email}
autoCorrect = {false}/>
<TextInput
style = {styles.inputField}
placeholder='Password'
onChangeText = {password => this.setState({password})}
value = {this.state.password}
autoCorrect = {false}
secureTextEntry = {true}/>
<Text style=
{{color:'red',fontSize:12,alignSelf:'center',margin:5}}>
{this.state.error}
</Text>
{this.buttonOrLoading()}
</View>`
);
}
};
如果以前从未使用过电子邮件,则应该使用“登录”按钮创建一个新用户,但是我认为'createUserWithEmailAndPassword'方法没有这样做。