I am currently working with the code in the Okta sample samples-js-react/custom-login.
To this sample, I have added a new /contacts page with a third-party component that periodically fetches data from my Web API. This component allows me to specify an onAjaxError callback. If the user stays on this page long enough for their Okta access token to expire, on the next fetch the onAjaxError callback gets called with an HTTP status of 401 - just as I would expect. In this case, I want to redirect the user to the /login page and then back to the /contacts page after login.
Currently, I am doing this in the onAjaxError callback by checking for the 401 status code and calling authService.login. This seems to be the right way to handle this, but I am having a problem: Sometimes the third-party component fires off multiple AJAX calls in quick succession, and then they all come back with a 401 status, causing the onAjaxError callback to be called multiple times and therefore call authService.login multiple times. This causes the user to be presented with the /login page the same number of times! So, if the /contacts page calls authService.login twice, the user logs in once and is then sent to the /login page again. When they log in a second time, they are finally redirected back to /contacts.
My questions are:
- Is it correct to handle the 401 status returned from an AJAX call by calling authService.login?
- Am I responsible for preventing multiple calls to authService.login?
- If so, is there a best practice for how to do this?