title: React and Redux HTTP Header Authorization
body: <p>I'm trying to setup a React authentication with my API backend. The API backend uses an email and password, and also creates a token with every new user. All of these are provided via straight JSON, not JWT, so I'm using the <a href="https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/" rel="nofollow">Auth0 tut</a> and this <a href="https://stackoverflow.com/questions/38582213/login-api-request-using-react-and-redux">Stack q/a</a> as a starting place.</p>
  
  <p>My first goal is to do a simple login and redirect. I got the action/reducer hooked up and I'm now making the API calls. I'm using a basic auth call and convert it to a 64 bit character and send via the header. Those are tested and work via Postman.</p>
  
  <p>When I do this current React setup, it gets to <strong>"Fetching"</strong> in the console, but never <strong>"I'm here."</strong>, and the page simply reloads. I'm not sure where to fix this and get it it authorize and redirect. Any ideas where I'm going wrong?</p>
  
  <p><strong>HomePage.js (container)</strong></p>
  
  <pre><code>class HomePage extends React.Component {
   constructor(props) {
    super(props);
   }
  
   render() {
    const { dispatch, isAuthenticated } = this.props;
   return (
     &lt;div&gt;
       &lt; HomeHeader onLogin={this.props.onLogin} /&gt;
     &lt;/div&gt;
    );
   }
  }
  
   function mapStateToProps(state) {
    return { loginResponse: state.loginResponse };
   }
  
   function mapDispatchToProps(dispatch) {
   return {
     onLogin: (creds) =&gt; dispatch(loginUser(creds)),
   };
  }
  
  export default connect(
  mapStateToProps,
  mapDispatchToProps
  )(HomePage);
  </code></pre>
  
  <p><strong>AuthorizationActions.js (actions)</strong></p>
  
  <pre><code>function requestLogin(creds) {
   return {
    type: types.LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
   }
  }
  function receiveLogin(user) {
   return {
    type: types.LOGIN_SUCCESS,
    isFetching: false,
    isAuthenticated: true,
    id_token: user.id_token
   }
  }
  
  export function loginUser(creds) {
   **console.log("Fetching");**
   const hash = new   Buffer(`${creds.username}:${creds.password}`).toString('base64')
  
  return fetch('http://api.xxx.dev/sessions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ${hash}'
    },
   })
    .then(response =&gt; {
      **console.log("I'm here");**
      if(response.status &gt;= 200 &amp;&amp; response.status &lt; 300){
        console.log("Response; ", response);
        // Dispatch the success action
        dispatch(receiveLogin(user));
        localStorage.setItem('id_token', user.id_token);
      } else {
        const error = new Error(response.statusText);
        error.response = response;
        dispatch(loginError(user.message))
        throw error;
      }
    })
    .catch(error =&gt; { console.log('Request Failed: ', error);});
   }
  </code></pre>
  
  <p><strong>AuthorizationReducer.js (Reducer)</strong></p>
  
  <pre><code>import { browserHistory } from 'react-router';
  import Immutable from 'immutable';
  
  const initialState = new Immutable.Map({
   username: '',
   password: '',
   isLoggingIn: false,
   isLoggedIn: false,
   isFetching: false,
   error: null,
   isAuthenticated: localStorage.getItem('id_token') ? true : false
  });
  
  function authenticationReducer(state = initialState, action) {
   switch ( action.type ) {
   case 'LOGIN_REQUEST':
    return { ...state,
        isFetching: true,
        isAuthenticated: false,
        user: action.creds
    }
   case 'LOGIN_SUCCESS':
    return {
      ...state,
      browserHistory: browserHistory.push('/dashboard')
    }
   case 'LOGIN_FAILURE':
    return alert('Crap, there are login failures');
   default:
    return state;
   }
  }
  export default authenticationReducer;
  </code></pre>
  
  <p><strong>configureStore.js (Store)</strong></p>
  
  <pre><code>const middleware = applyMiddleware(
    thunk,
    apiMiddleware,
    global.window ? logger : store =&gt; next =&gt; action =&gt; next( action )
  );
  const store = createStore( reducers, initialState, compose(middleware,    window.devToolsExtension ? window.devToolsExtension() : f =&gt; f  ))
  </code></pre>
  
  <p><strong>AuhorizeLogin.js Component</strong></p>
  
  <pre><code> constructor(props, context) {
    super(props, context);
    this.state = {};
    this._login = this._login.bind(this);
   }
  
   _login(e) {
    e.preventDefault;
    const email = this.refs.email;
    const password = this.refs.password;
    const creds = { email: email.value.trim(), password: password.value.trim() };
    this.props.onLoginClick(creds);
  </code></pre>
  
  <p>}</p>
  
  <p><strong>HomeHeader.js Component</strong></p>
  
  <pre><code> `_handleChange(eventKey) { &lt; AuthorizeLogin onLoginClick={this.props.onLogin}/&gt;); `
  </code></pre>
  
  <p><strong>HomePage.js Container</strong></p>
  
  <pre><code>constructor(props) {
   super(props);
  }
  render() {
   const { dispatch, isAuthenticated } = this.props;
   return (
   ...
   &lt; HomeHeader onLogin={this.props.onLogin} /&gt;
   ...
   )
  }
  
  function mapStateToProps(state) {
  
  return {
   loginResponse: state.loginResponse,
   };
  }
  
  function mapDispatchToProps(dispatch) {
   return {
    onLogin: (creds) =&gt; dispatch(loginUser(creds)),
   };
  }
  
  export default connect(
   mapStateToProps,
   mapDispatchToProps
   )(HomePage);
  </code></pre>