Check authorization token in ReactJS against a Rest API

Question

I am currently trying to design a new web-application for a rest-api service I have running. In basic I am trying to realize the login/logoff system. For authorization-management the API provides three endpoints:

• /login, which takes username and password via a POST request and returns a token embedded in a json answer. This token is not a JWT, but its some arbitrary unique string. It is valid for X hours and everytime it used it is reset to be X hours valid again. The validity is check on the server in each request.
• /logout, which makes the token invalid on the server.
• /validate, which takes a token as json in POST request and checks if it is valid. If not it returns a 401.

Now I realized a login procedure following https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications . The application finally should used the react-router to provide the different pages. My problem is not how to integrate the validation of the token on each page change and if a 401 is returned, switch to the login page again.

PS: The server is written in C++ and accesses a custom database.

Answer 1

As Suggested By You That You Want To Integrate Validation, So You Need To Create A Component Over The Current Route Component.

It would serve as the private Route and as soon as you get a 401 Response From Your Server You Would Redirect To The Login Page By Updating the Token as empty depenedending upon the storage you are using i.e. session storage or localstorage.

This way whenever your token expires the next request responds with 401 and you are logged out.

Further I am Linking An Example Gist For Creating Private Routes And Logging Out https://gist.github.com/EduVencovsky/f8f6c275f42f7352571c92a59309e31d