Проверка подлинности не работает с firebase с использованием response-native-redux + redux-thunk

Код работает и приложение также отображается на мобильном телефоне, но проблема в том, что аутентификация всегда не удалась, даже если я ввел правильный адрес электронной почты / пароль.

этот файл authAction.js.

import firebase from 'firebase';
import { LOGIN_USER_FAIL, EMAIL_CHANGED , PASSWORD_CHANGED , LOGIN_USER_SUCCESS, LOGIN_USER } from './types';
import { Actions } from 'react-native-router-flux';
//here define the actionCreator of email
export const emailChanged = (text) => {
    return {
    //type of action defined in type.js file
        type: 'EMAIL_CHANGED',
        payload: text
    };
};


//here define the actionCreator of password
export const passwordChanged = (text) => {
return {
    //type of action defined in type.js file
    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( () => {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(user => loginUserSuccess(dispatch, user) )
.catch(() => loginUserFail(dispatch));
});
};

};


const loginUserFail = (dispatch) => {
    dispatch({type: LOGIN_USER_FAIL});
    Actions.main();
};

const loginUserSuccess = ( dispatch, user) => {
dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
});
};

это файл types.js, где я хранил все строки в переменных

export const EMAIL_CHANGED = 'email_changed';
export const PASSWORD_CHANGED = 'password_changed';
export const LOGIN_USER_SUCCESS = 'login_user_success';
export const LOGIN_USER_FAIL = 'login_user_fail';
export const LOGIN_USER = 'login_user';

это файл authReducer.js

import { EMAIL_CHANGED , PASSWORD_CHANGED, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL, LOGIN_USER } from '../actions/types';

const INITIAL_STATE = { email: '', password: '', user: null, error: '', loading: false };

export default (state= INITIAL_STATE, action) => {

switch(action.type){
 //..state isto update the state object
 case EMAIL_CHANGED:
 return { ...state, email: action.payload};

 case PASSWORD_CHANGED:
 return {  ...state, password: action.payload };

case LOGIN_USER_SUCCESS:
return { ...state, user : action.payload, error:'', loading: false};

case LOGIN_USER_FAIL:
return { ...state, error: 'Authentication Failed', password: '', loading: false };

case LOGIN_USER:
return { ...state, loading: true, error: '' };
 default:
 return state;
}

};

это файл app.js, в который я вставил API Firebase

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase'
import rootReducer from './reducers';
import LoginForm from './components/LoginForm';


class App extends Component {
 componentWillMount() {
 firebase.initializeApp({
     apiKey: 'AIzaSyAe45P2xc8q09gpEV6oA6s4U9YjnaTf9vc',
    authDomain: 'manager-6cde7.firebaseapp.com',
    databaseURL: 'https://manager-6cde7.firebaseio.com',
    projectId: 'manager-6cde7',
    storageBucket: 'manager-6cde7.appspot.com',
    messagingSenderId: '408722531799'
                          });

 

 }
 render()
 {
  const store = createStore(rootReducer,applyMiddleware(thunk)); 
  return(
<Provider store={store} >

<LoginForm />
</Provider>
   );
 }
}


export default App;

это файл loginForm.js.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import { Button, Card, CardSection, Input, Spinner } from './common';
import { Text } from 'react-native';

class LoginForm extends Component {
 

onEmailChange(text){
 //now call the actionCreator in actions index.js
this.props.emailChanged(text);
}
onPasswordChanged(text){
 //now call the actionCreator in actions index.js
 this.props.passwordChanged(text); 

}

onButtonPress() {
 const {email, password} = this.props;
 this.props.loginUser({email, password});
}
renderButton(){
 if(this.props.loading)
 {
  return <Spinner size="large" />;
 }
 return (
<Button onPress={this.onButtonPress.bind(this)} >LogIn</Button>
  );
}



 render(){
  return(
<Card>
<CardSection>
<Input
onChangeText={this.onEmailChange.bind(this)}
label="Email"
placeholder="email@gmail.com"
value={this.props.email}
 />

</CardSection>

<CardSection>
<Input
value={this.props.password}
onChangeText={this.onPasswordChanged.bind(this)}
secureTextEntry
label="Password"
placeholder="******"
 />
</CardSection>
<Text style={styles.errorAuthentication}>{this.props.error}</Text>

<CardSection>
{this.renderButton()}
</CardSection>

</Card>
   );
 }
}



 const mapStateToProps =  ({auth}) => {
const { email, password, error, loading } = auth;
return {
 email, password, error, loading };
   };

const styles = {
 errorAuthentication: {
  fontSize: 20,
  color: 'red',
  alignSelf: 'center'
 }
};


export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(LoginForm);

0 ответов

Другие вопросы по тегам