4

Some newbie questions of how to handle unauthorisedin redux and redux-observable

I have an application where user must be authenticated in order make requests to an api.
If user provides token that is invalid, endpoint returns 401 http error code.

So how do I elegantly handle this (i'm using fetch)?

Option 1:

  • create some kind of function with which I would wrap all api calls in epics which would convert 401 responses to something like NotLoggedInAction
  • create a reducer that handles NotLoggedInAction and sets flag on the state that user is not logged in
  • subscribe to state changes in root component (?) and check for not logged in flag
  • if not logged in flag arrives, redirect user to login page (login page is external app, so i would just use window.location.href ?)

This option is kind of flexible, because before redirecting i can show some popup like "hey your session expired, etc."
But it is also not error prone (I have to always hook up error handling to each call, and add dependency in each epic to NotLoggedInAction)

Option 2:
- in combineEpics use do and watch for errors - if 401 arrives, simply redirect user to login page (via same window.location.href

This Looks much simpler to me, but this is more like a 'hack`?

Am I going the right way? Are the better options?

gerasalus
  • 7,538
  • 6
  • 44
  • 66
  • I wouldn't recommend directly changing window.location.href. I think you are heading in the right direction. If you are using react-router/can use it. They have a great API and their v4 api has some info about handling Authentication with routes. Take a look at it here: [React Router v4](https://reacttraining.com/react-router/examples/auth-workflow) You would continue with what you have with Option 1 and set it in your state store and then your PrivateRoute would check for if the user is authenticated or not. – Zach Stoltz Feb 09 '17 at 15:48
  • Yes, but what if the token expires when user is not navigating, but performing some actions inside some component? Eg. user just sits on some page, and decides to submit some data to the api. There is no route change event, but the token has expired while user was just looking at the screen – gerasalus Feb 09 '17 at 16:00
  • I would imagine that when that scenario happens you would still trigger the NotLoggedInAction, changing the state which then would trigger a rerender of the route with the new state and the user would be redirected to the login route(or however you authenticate the user). – Zach Stoltz Feb 09 '17 at 16:06
  • I would guess Option 2 would be bad--by the time the error bubbles that far up, your epics have already shut down and you'd have to restart them which isn't ideal and may lose important ephemeral state they contain. Option 1 seems reasonable – jayphelps Feb 09 '17 at 18:39
  • @jayphelps and if i don't care about epic state? The user will be redirected to external page to login, so there is no state to keep/save? – gerasalus Feb 09 '17 at 19:49
  • @gerasalus only you can know whether this is OK in your app. I would personally avoid it cause it might cause hard to track down bugs later, especially if you're on a team with others. – jayphelps Feb 10 '17 at 20:56

0 Answers0