How to include JWT authentication in the middleware

I’m trying to include JWT ( http://jwt.io/ ) token authentication in the boilerplate. Let’s pretend for a second that the autentication process serverside is already there. What I do is calling API/login passing username and password and I return a token. From that point on, I’d like the middleware to attach this to every http calls.

 headers: {
                    'Authorization': `Bearer *TOKEN* `
 }

Where TOKEN is this.store.token variable defined in the redux auth.js.

How can I do that ?

[glennr]

@nicolabortignon - check out https://github.com/GetExpert/redux-blog-example It solves that retain-token problem you’ve described by adding a small layer that saves the JWT to a cookie.

The basic solution they describe in this example AFAICT works as follows;

• /signup (or /login)
  1. the server should return a JWT in the response body (i.e. not a cookie)
  2. the app saves the JWT inside a cookie, setting an (cookie) expiry
  3. the app dispatches a LOGIN_SUCCESS with the same token (which is then also saved to the store)
• authenticated API request
  1. grab token from state
  2. pop it in the request header i.e. { Authorization: 'Bearer ’ + token } ( so no cookie action, just standard redux store )
• logout
  1. unset cookie
  2. dispatch a LOGOUT action that resets the store
• bootstrapping
  • initialize the store with a token by reading from the cookie, if there is one
  • (or it initializes the store using SSR as below)
• full page refresh (SSR)
  • the browser will send through the Cookie in the request header
  • parses request header (i.e. get cookie), hydrate the store with the auth token (from the cookie).
  • ( pop that on window.INITIAL_STATE to be picked up by the bootstrapping code)

Of course this strategy means all of this needs to happen over https!

It would be great to have something around JWT and/or cookies like this included in this starter boilerplate app.

[rfranco]

I’m using react-cookie to save the JWT Token and that is a isomorphic(universal) implementation.

So you can read the token from the server

import cookie from 'react-cookie';
app.get('*', (req, res) => {
  cookie.plugToRequest(req, res);
  //...
}