我对本机做出了新的反应,我正在使用firebase在我的应用程序中实现身份验证。但是,尽管输入了正确的电子邮件和密码,但我还是无法登录。它始终显示“身份验证失败”,应该仅针对错误的电子邮件/密码才显示。我还已将用户添加到我的Firebase控制台,但该应用程序仍不接受身份验证。
Reducer.js
import {EMAIL_CHANGED,PASSWORD_CHANGED,LOGIN_USER,LOGIN_USER_FAILED,LOGIN_USER_SUCCESS} from '../components/actions/types';
const INITIAL_STATE={email:'',password:'',user:null,error:'',loading:false};
export default (state=INITIAL_STATE,action) => {
switch(action.type){
case EMAIL_CHANGED:
return {...state,email:action.payload};
case PASSWORD_CHANGED:
return {...state,password:action.payload};
case LOGIN_USER:
return{...state,loading:true,error:''};
case LOGIN_USER_SUCCESS:
return {...state,...INITIAL_STATE,user:action.payload};
case LOGIN_USER_FAILED:
return {...state,...INITIAL_STATE,error: 'Authentication Failed',loading:false};
default:
return state;
}
};
LoginForm.js
import React,{Component} from 'react';
import {Card,CardSection,Input,Button,Spinner} from './common';
import {View,Text} from 'react-native';
import {connect} from 'react-redux';
import {EmailChanged,PasswordChanged,LoginUser} from './actions';
class LoginForm extends Component {
onEmailChange(text){
this.props.EmailChanged(text);
}
onPassWordChange(text){
this.props.PasswordChanged(text);
}
onButtonPress(text){
this.props.LoginUser(this.props.email,this.props.password);
}
onError(){
if(this.props.error){
return(
<View>
<Text style={styles.errorTextStyle}>{this.props.error}</Text>
</View>
);
}
}
onRenderButton(){
if(this.props.loading){
return <Spinner size="large"/>
}
else{
return(
<Button onPress={this.onButtonPress.bind(this)}>
Log In
</Button>
);
}
}
render(){
return (
<Card>
<CardSection>
<Input
label = "Email"
placeholder = "email@gmail.com"
onChangeText = {this.onEmailChange.bind(this)}
value={this.props.email}
/>
</CardSection>
<CardSection>
<Input
secureTextEntry
label = "PassWord"
placeholder = "password"
onChangeText={this.onPassWordChange.bind(this)}
value={this.props.password}
/>
</CardSection>
{this.onError()}
<CardSection>
{this.onRenderButton()}
</CardSection>
</Card>
);
}
}
const mapStateToProps=(state)=>{
return {
email:state.auth.email,
password:state.auth.password,
error:state.auth.error,
user:state.auth.user,
loading:state.auth.loading
};
};
const styles = {
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
};
export default connect(mapStateToProps,{EmailChanged,PasswordChanged,LoginUser})(LoginForm);
ActionCreator
import {EMAIL_CHANGED,PASSWORD_CHANGED,LOGIN_USER,LOGIN_USER_FAILED,LOGIN_USER_SUCCESS} from './types';
import firebase from 'firebase';
import {Actions} from 'react-native-router-flux';
export const EmailChanged = (text) => {
return {
type: EMAIL_CHANGED,
payload:text
};
}
export const PasswordChanged = (text) => {
return {
type:PASSWORD_CHANGED,
payload:text
};
}
export const LoginUser = ({email,password}) =>{
return(dispatch) => {
dispatch({type:LOGIN_USER});
firebase.auth().signInWithEmailAndPassword("email","password")
.then(user=> loginUserSuccess(dispatch,user))
.catch((error) => {
firebase.auth().createUserWithEmailAndPassword("email","password")
.then(user => loginUserSuccess(dispatch,user))
.catch(() => loginUserFail(dispatch));
});
};
}
const loginUserFail = (dispatch) => {
dispatch({type:LOGIN_USER_FAILED});
};
const loginUserSuccess = (dispatch,user) => {
dispatch({type:LOGIN_USER_SUCCESS,payload:user});
Actions.list();
};
App.js
import React, {Component} from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Provider} from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './src/reducers';
import firebase from 'firebase';
import LoginForm from './src/components/LoginForm';
import ReduxThunk from 'redux-thunk';
import Router from './src/Router';
class App extends Component {
componentWillMount() {
const config = {
apiKey: 'AIzaSyDyF8h7SYE3iiYxt-ZAmdXxWu9Pd6cuvxo',
authDomain: 'manager-31000.firebaseapp.com',
databaseURL: 'https://manager-31000.firebaseio.com',
projectId: 'manager-31000',
storageBucket: 'manager-31000.appspot.com',
messagingSenderId: '1079074827203'
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
}
render(){
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return(
<Provider store = {store}>
<Router />
</Provider>
);
}
}
export default App;