title: authentication is not working with firebase using react-native-redux + redux-thunk
body: <p>the code is working and app also showing on mobile but the problem is that the authentication is always failed even i entered the correct email/pass.</p>
  
  <p>this authAction.js file.
  </p>
  
  <pre><code>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) =&gt; {
      return {
      //type of action defined in type.js file
          type: 'EMAIL_CHANGED',
          payload: text
      };
  };
  
  
  //here define the actionCreator of password
  export const passwordChanged = (text) =&gt; {
  return {
      //type of action defined in type.js file
      type: 'PASSWORD_CHANGED',
      payload: text
  };
  
  };
  
  
  export const loginUser = ({ email, password}) =&gt; {
  return (dispatch) =&gt; {
      dispatch({type: LOGIN_USER});
  firebase.auth().signInWithEmailAndPassword(email, password)
  .then(user =&gt; loginUserSuccess(dispatch, user))
  .catch( () =&gt; {
  firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(user =&gt; loginUserSuccess(dispatch, user) )
  .catch(() =&gt; loginUserFail(dispatch));
  });
  };
  
  };
  
  
  const loginUserFail = (dispatch) =&gt; {
      dispatch({type: LOGIN_USER_FAIL});
      Actions.main();
  };
  
  const loginUserSuccess = ( dispatch, user) =&gt; {
  dispatch({
      type: LOGIN_USER_SUCCESS,
      payload: user
  });
  };
  </code></pre>
  
  
  
  <p>this is types.js file where i stored all the strings in variables</p>
  
  <pre class="lang-js prettyprint-override"><code>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';
  </code></pre>
  
  
  
  <p>this is authReducer.js file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
  
  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;
  }
  
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is app.js file where i inserted the firebase API</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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(
  &lt;Provider store={store} &gt;
  
  &lt;LoginForm /&gt;
  &lt;/Provider&gt;
     );
   }
  }
  
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is loginForm.js file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt;Spinner size="large" /&gt;;
   }
   return (
  &lt;Button onPress={this.onButtonPress.bind(this)} &gt;LogIn&lt;/Button&gt;
    );
  }
  
  
  
   render(){
    return(
  &lt;Card&gt;
  &lt;CardSection&gt;
  &lt;Input
  onChangeText={this.onEmailChange.bind(this)}
  label="Email"
  placeholder="email@gmail.com"
  value={this.props.email}
   /&gt;
  
  &lt;/CardSection&gt;
  
  &lt;CardSection&gt;
  &lt;Input
  value={this.props.password}
  onChangeText={this.onPasswordChanged.bind(this)}
  secureTextEntry
  label="Password"
  placeholder="******"
   /&gt;
  &lt;/CardSection&gt;
  &lt;Text style={styles.errorAuthentication}&gt;{this.props.error}&lt;/Text&gt;
  
  &lt;CardSection&gt;
  {this.renderButton()}
  &lt;/CardSection&gt;
  
  &lt;/Card&gt;
     );
   }
  }
  
  
  
   const mapStateToProps =  ({auth}) =&gt; {
  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);</code></pre>
  </div>
  </div>
  </p>