I need to change a state in a wrapping auth-guard functional component based on a certain condition from the axios init file (axiosClient.ts), where I can intercept axios responses.
For instance, when the app makes more than 3 attempts to fetch data from one of the endpoints (let's say with error code 401) I will trigger log-out inside the auth-guard component. log-out must be inside the auth-gard component as it uses Firebase Auth initialization.
I achieved that by passing the reference of the setState(false) function to global.functionName and that is available in the axiosClient.ts file. That works fine, but I feel like it is not a good idea to use 'global' or 'window' to pass stuff around.
One solution would be creating a /logout route and redirecting users to that route to log them out, but I prefer not to solve it that way either.
I use react-query, but I can't find a way to intercept all queries in one place, other than in axiosClient.ts
Any tips on how I can properly achieve that would be great!