Inject an Authorization header into a redux-api-middleware request with a Redux middleware.

action.js

import { CALL_API } from 'redux-api-middleware'

export function fetchLocations() {
  return {
    [CALL_API]: {
      endpoint: 'http://api.somesite.com/api/locations',
      method: 'GET',
      // Don't have to manually add the Authorization header to every request.
      headers: { 'Content-Type': 'application/json' },
      types: ['REQUEST', 'SUCCESS', 'FAILURE']
    }
  }
}

app.js

// ...Likely some other imports such as React etc.

import { createStore, applyMiddleware } from 'redux'
import { apiMiddleware } from 'redux-api-middleware'

// Our custom middleware.
import apiAuthInjector from './apiAuthInjector'

const store = createStore(
  reducers,
  applyMiddleware(
    apiAuthInjector, // Put it somewhere before `apiMiddleware`.
    apiMiddleware,
  )
)

// ...the rest of your app setup.

authApiInjector.js

import { CALL_API } from 'redux-api-middleware'
import ls from 'local-storage'

export default function() {
  return function(next) {
    return function(action) {
      const callApi = action[CALL_API]

      // Check if this action is a redux-api-middleware action.
      if (callApi) {
        // Inject the Authorization header from localStorage.
        callApi.headers = Object.assign({}, callApi.headers, {
          Authorization: ls.get('id_token') || '',
        })
      }

      // Pass the FSA to the next action.
      return next(action)
    }
  }
}

Any thoughts on how to get the token from redux state rather than local storage? I've been trying to use thunk's getState but can't get it working.

@smerin hidden in the jungle of the redux docs explaining middleware it's noted that we still have access to the top level store

...It's still useful to have access to some store methods like getState(), so store stays available as the top-level argument.

That's actually part of a monkeypatching demo explaining how middleware is built up... but follow down and you see it's available in the end results too, so you can simply call store.getState() from within your custom middleware to get it out of your redux store instead of the local storage as demonstrated above.

I think the last file was meant to be named apiAuthInjector.js, rather than authApiInjector.js

Hi, i modified the apiAuthInjector method to be compatible with the new version of redux-api-middleware

import { isRSAA, RSAA } from 'redux-api-middleware'
import ls from 'local-storage'
import produce from "immer"

export function apiAuthInjector() {
    return function (next) {
        return function (action) {

            // Check if this action is a redux-api-middleware action.
            if (isRSAA(action)) {
                let call = action[RSAA];
                call.headers = produce(call.headers || {}, draftHeaders => {
                    draftHeaders.Authorization = ls('access_token') || '';
                });
            }

            // Pass the FSA to the next action.
            return next(action)
        }
    }
}