React + Redux + localStorage Login example

client.js

import ApolloClient, { createNetworkInterface } from 'apollo-client';

import { API_TOKEN } from './constants/LocalStorage';
import { URL } from './constants/URLs';
const networkInterface = createNetworkInterface({uri: URL});

networkInterface.use([{
  applyMiddleware(request, next) {
    const currentApiToken = localStorage.getItem(API_TOKEN);
    if (!currentApiToken) {
      next();
      return;
    }
    if (!request.options.headers) {
      request.options.headers = new Headers();
    }
    delete request.options.headers.map;
    request.options.headers.Authorization = `Bearer ${currentApiToken}`;
    next();
  }
}]);

const client = new ApolloClient({
  networkInterface,
  // other stuff...
});

// ...

currentApiToken.js

// reducers/currentApiToken.js

import { browserHistory } from 'react-router';
import { SET_CURRENT_API_TOKEN, UNSET_CURRENT_API_TOKEN } from '../constants/EventTypes';
import { API_TOKEN } from '../constants/LocalStorage';

const initialState = localStorage.getItem(API_TOKEN);

export default function(state = initialState, event) {
  switch (event.type) {
  case SET_CURRENT_API_TOKEN:
    localStorage.setItem(API_TOKEN, event.value);
    window.location = "/";
    return event.value;
  case UNSET_CURRENT_API_TOKEN:
    localStorage.removeItem(API_TOKEN);
    window.location = "/";
    return initialState;
  default:
    return state;
  }
}

currentApiTokenActions.js

// actions/currentApiToken.js

import { SET_CURRENT_API_TOKEN, UNSET_CURRENT_API_TOKEN } from '../constants/EventTypes';

export function setCurrentApiToken(value) {
  let action = {
    type: SET_CURRENT_API_TOKEN,
    value: value
  };
  return action;
}

export function unsetCurrentApiToken(value) {
  let action = {
    type: UNSET_CURRENT_API_TOKEN,
    value: value
  };
  return action;
}

Login.js

// components/Login/Login.js

class Login extends Component {
  
  // ...
  
  handleSubmit(evt) {
    evt.preventDefault();
    this.props.mutate(this.state)
      .then(({ data }) => {
        this.handleLogin(data);
      }).catch((error) => {
        this.setState({password: null, error: true});
        console.warn('there was an error sending the query', error);
      }); 
  }

  handleLogin(data){
    const { result } = data;
    if (result && result.token) {
      this.setState({error: false});
      this.props.setCurrentApiToken(result.token);
    }

    if (this.state.error) {
      this.refs.password.focus();
    }
  }
  
  // ...
  
}