How to include JWT authentication in the middleware

[nicolabortignon]

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 ?

[bdefore]

@nicolabortignon i made a library for just that and am using it in combination with this boilerplate: https://github.com/bdefore/express-jwt-proxy

sorry there's very little documentation at this point.

[tyao1]

I'm currently passing token header manually for every request that need authorization header.
First, I modified the ApiClient Class, add token parameter, and set the header when token is present

this[method] = (path, { params, data, token }

...

        if (token) {
          request.set('authorization', 'Bearer ' + token);
        }

And pass the token value manually to the action

export function changePassword({password, verifyToken}) {
  return {
    types: [CHANGEPASSWORD, CHANGEPASSWORD_SUCCESS, CHANGEPASSWORD_FAIL],
    promise: (client) => client.post('/user/newPassword', {
      data: {
        password,
      },
      token: verifyToken
    })
  };
}

[nicolabortignon]

Hi @XiaoBuu , I did implement pretty much a similar approach.
I changed the middleware to check the store for the token, and in case is available, add in the header at any API call.

What it does puzzle me right now is how you retain the token after the user left your app.
In order to maintain the isomorphism you want to save this as a cookie (local storage wouldn't work).
Then I guess you need at bootstrap phase load the cookie, and if there is a token, save it in the newly create store.
This, that in theory sounds easy, looks to me quite hard to implement.

@bdefore : i'll have a look at your library! thanks!

[bdefore]

@nicolabortignon part of the consideration for building my library is to store the token in redis with express-session (which identifies the client by a session cookie). i think that addresses what you're describing above.

this article is worth reading regarding why it's better not to store the token on the client: http://alexbilbie.com/2014/11/oauth-and-javascript/

[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);
  //...
}

[tyao1]

@nicolabortignon I'm doing exactly what you said. I stored the token in the cookie, and in the App.js I fired a load action in fetchData to load the token from server, then I just implemented a reducer to keep the token somewhere in the state tree.

[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.

[Dindaleon]

Good discussion. I am trying to figure out if there is a way to use localStorage instead of cookies; however, I am aware there is no way to get the localStorage from the client on to the server for SSR. Is there?

[glennr]

@Dindaleon - correct. If you have the JWT in a cookie, then as a side benefit the server will receive that cookie along with the request, which is pretty neat from a SSR perspective.

[glennr]

Also @Dindaleon check this article out https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/ - TL;DR store your JWTs inside a cookie.

[anomaly44]

@nicolabortignon can you post the middleware you use to add in the token if possible ?

[nicolabortignon]

@feesjah

https://github.com/TracklistMe/ReactClient/blob/master/src/helpers/ApiClient.js#L23

here what I've done. Said so, I still feel really uncomfortable about this solution. I struggle in have a proper understanding of the SSR integration, although the comments above provide good 'food for thoughts'.

Would be great if someone can actually add to the boilerplate a JWT over Cookie, SSR compatible authentication model.

[adailey14]

Hey I've been following this discussion and implemented a solution based on react-cookie (thanks @rfranco) that ends up being very simple and feels pretty solid. I'll outline the changes to files here, @nicolabortignon if you like it maybe you can incorporate it into your example. I changed some of the code below a bit from my working code to make it match the boilerplate (my project has diverged considerably now) so there might be some typos.

install react-cookie:
npm install react-cookie --save

Add to ApiClient.js:

import cookie from 'react-cookie';
...
//in the constructor method creators, load the auth_token from your cookie:
class _ApiClient {
  constructor(req) {
    methods.forEach((method) =>
      this[method] = (path, { params, data } = {}) => new Promise((resolve, reject) => {
        ...
        if (cookie && cookie.load('loginResult')) {
          request.set('authorization', 'Bearer ' + cookie.load('loginResult').auth_token);
        }
  ...

In your auth.js reducer:

import cookie from 'react-cookie';
...
case LOGIN_SUCCESS:
   // save the auth token into the cookie - may differ depending how your api returns the auth token
   // no need to save the auth token into the redux state. Instead just depend on the cookie as the single source of truth for the token. But save anything else you need from your login response into the redux state, such as the user name.
   cookie.save('loginResult', action.result);
   return {
     ...state,
     loggingIn: false,
     user: action.result.user
   };
// Add a new action to load the authentication state from your cookie
case LOAD_AUTH_COOKIE:
  const loginResult = cookie.load('loginResult');
  const user = loginResult ? loginResult.user : null;
  return {
    ...state,
    user
  };
...

export function loadAuthCookie() {
  return {
    type: LOAD_AUTH_COOKIE
  };
}

In server.js, configure react-cookie to add cookies sent from the client to the server side rendering environment:

import cookie from 'react-cookie';
...
app.use((req, res) => {
  cookie.plugToRequest(req, res);
...

In App.js - use fetch data to load your auth cookie. This will run both on the server for SSR or on the client if you manage to refresh the app on the client without a server side render. (I don't know if that is actually possible but maybe it is? In any case it seems a good place to trigger the check cookie logic. Maybe if your app doesn't need to check if you're logged in at all routes, you could do this fetch data in a different container and then it would be likely to get triggered on the client).

import {loadAuthCookie} from 'redux/modules/auth';
...
function fetchData(getState, dispatch) {
  bindActionCreators({loadAuthCookie}, dispatch).loadAuthCookie();
}
@connectData(fetchData)
...
export default class App extends Component {

[nicolabortignon]

@adailey14 thanks for this!

I'm currently working on a fork of the boilerplate that unfortunately went way too far from the current mainline.
If I get your code to work I'll send over a PR to be included back in the boilerplate.

Regarding where to place the bootstrap part (the lookup of the cookie), initially I was including it in the router.js file, at the moment of the store creation. I don't see any benefit compare with your solution, so I'm happy to move it to the main container (app.js)

[oyeanuj]

+1

I am also about to begin with JWT and cookies on my project. It would be great to get either a PR or the steps that worked for the both of you in this boilerplate!