Handling User Authentication via Redux and Redux Router

Question

I was wondering how people normally handle User Authentication with redux? I am using Redux Router and I have a backend rails API that handles user authentication via an auth token.

When the user submits the sign in form the api will return the auth token to use for subsequent requests. Originally I just stored that auth token in the single state tree and every time I dispatch an action that needs to make an API request that requires user authentication I use the (dispatch, getState) to fetch that auth token and then include it in the API request. So: getState().currentUser.auth_token.

I'm not sure if I'm approaching this in the right way. Do some people use localStorage with Redux for user authentication to simulate like server side sessions? Then every time an API request is made I just check the local storage for the auth token and if it's there the user is signed in?

What I ended up doing was using js-cookies and did a Cookie.set when the user authenticated. My root <App /> component then has a componentDidMount that dispatches an initAuth() action that checks the current Cookie to see if it's still valid. If so it keeps the user signed in otherwise it resets the authentication reducer to its defaultState.

Here is a link to the repo with the user authentication: https://github.com/SpencerCDixon/Kira/blob/master/client/actions/AuthActions.js

Any tips or resources would be much appreciated. I've looked at the real world example and the React Router auth example so far. The React Router example seems to use localStorage which is why I'm curious if it's the right path to take. I noticed there is also a Redux Localstorage npm package.

Would love to know if I'm by accidently opening myself up to some sort of authentication attack or if there is a better way to approach this flow!

Answer 1

I was wondering how people normally handle User Authentication with redux?

I was in that situation in so many projects and I ended with a solution that doesn't make me sweat every time I need to handle authentication in my React/Redux applications.

In my projects, I am using Node.js but this doesn't change anything, you can use any server side technology.

The solution

I noticed that in a single page application (SPA), the authentication mechanism gets handled on the client-side, like you said, checking if the user have a token, validate it with the server and then 'redirect' to a relevant route base on that, now it's not a matter whether you're using React/Redux, Angular, Ember or Backbone for your SPA, it will always get nasty.

So I separated the Authentication (sign up/sign in) process from the main application, so when a user launches my application for the first time, the server checks for a token cookie, If the user has that cookie with the request, the server validates this token and if it's a valid one, redirects the client to the main application page (index.html for instance), if the token is not valid or do not exist, the server redirects the client to a login/sign up page (login.html/signup.html).

The login.html page is not part of the main application (the one in index.html), in fact, it has a different code base (lighter with much less code so the page can be loaded even faster) and when a user tries to login, the server validated the username and password from that login.html page and if it is a valid credentials, the server then set's a token cookie for that user and redirects him to the main application page (index.html) where the application code can be loaded without the need to handle the authentication since if a user was able to load this page (index.html) it means that he must have a valid token.