Automatic refresh token in react native app - reactjs

I am using Google calendar API in my react native app and every time refresh token expires after a time.so how can I manage to update token in app.

create a function that fetches data from your API provider. then in that function wrap your request in a try-catch block. and if the token is invalid then it goes to catch block. in the catch block, you can check the status of your request. your API provider has a particular status code for unauthorized requests. check if it is equal to the status of your request, then update your token and recursively call your function again.

Related

React and Axios - using interceptor to refresh token upon first failure

I have a React application and I'm using Axios to make http calls. Calls are authorized with an authorization header.
In Axios I'm using the response interceptor and in case I get a 401 from one of the calls I make another call to get a new token using a refresh token obtained upon login and stored in the browser, and then retry the original call using the new token. It works well.
The issue starts with the way it's handled in my application. I have pages where there are multiple components that request data from the server, at the same time. The page returns a 401 causing my logic to ask for a refresh token - so basically all requests are also asking for a new token using that refresh token. The issue is that the first request asking the new token is served while the others are failing - this is because when asking a new token using the refresh token a new refresh token it granted. Meanwhile the other calls for a new token all use an "old" refresh token that cannot be validated on the server side because it had been replaced on the first call - making the request fail.
Also in the above logic - the login is called more then it should - it should be called only once when the first call detects that it should.
What I'm looking for is a way that if the first call fails due to the need to refresh the token, how do I make the other calls understand that a call for a new token is already made and hang until it's returned (or retry with the newly stored token once it's available)?

Check authorization token in ReactJS against a Rest API

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

How to retry Uppy (using XHR plugin) requests failed due to JWT token expired error

Currently, I am using the Uppy library to upload files in react using the XHR plugin. Sometimes while uploading files the JWT token gets expired and the upload request fails.
try catch the error of the api call, in catch block refresh the jwt token, then recursive call the same function again, this time with new jwt token -> should pass

token settings in angular js

I have a requirement in AngularJS.
My user token expiry is set to one hour.
Whenever I submit a form , if the token is expired,
is there any way to hold the form value till I receive token from another API and the token is updated.
You can use the Auth Interceptor Module. If your API call receives a 401 status code, it will move your API call to a buffer, does the call to receive a new token and when the new token is received your initial API call will be executed with the new token.

React-Redux Strategies for Refreshing Cognito IdToken

I'm using the following combination of packages:
react
redux
react-cognito
react-router (v4)
redux-saga
(and I'll disclaim that I'm pretty new with all of these)
Currently I have a PrivateRoute component which will check (and refresh if necessary) an expired IdToken on route changes. This works well.
My problem is if the browser is open past token expiry to a PrivateRoute which is polling my API and sending along the IdToken in its 'Authorization' header. The API will start returning 401.
Options I've Thought of:
Act on API Error
I could catch the 401 error and dispatch an action to refresh the token, but
if there is any issue refreshing the token I wind up in an infinite loop hammering AWS, so need some logic to catch and prevent this. Perhaps redirect to login route if refresh fails?
I then need to add complexity to all my private API calls throughout my app to have this logic, and re-do the requested API call upon successful refresh.
Pre-empt API Error
To me it makes more sense to separate API calls and keeping the auth token valid. Considering react-cognito stores the token expiry time in cognito.user.signInUserSession.idToken.payload.exp, maybe it is possible to pre-empt the API call and expiry.
How to best do this though? At login a refresh action could be 'scheduled' using setTimeout for (currentTime - expiryTime - someBuffer) seconds in the future.
I'm assuming (haven't verified) AWS will let you refresh an IdToken before it expires. I don't want to wait until afterwards else some API calls may have already failed.
are there concerns with using setTimeout with a timeout that may be up to 1 hour long?
Alternatively I could set something up to poll cognito.user.signInUserSession.idToken.payload.exp frequently to detect and refresh an almost-expired token?
Any suggestions?

Resources