pale knot
I want to set up refresh token on the client side with axios interceptors. I can manage to successfully do so, but with react router loader and action functions, it does not work. I have created two branches.
The master branch contains the implementation WITHOUT loaders and actions.
The router-interceptor branch contains the implementation WITH loaders and actions.
Can you point out what I am missing?
Here is the link: https://github.com/csaszargellert/refresh-token
spice bough
actions and loaders are ordinary functions that run before the component is rendered. If you're calling your axios instance, it should work normally.
You should provide exactly which part is not working
pale knot
actions and loaders are ordinary functions that run before the component is rend...
On the backend I set the access token duration for 10 seconds and the refresh token is valid for 30 seconds and I set the refresh token as an httpOnly cookie.
The movies route is protected on the backend side and on the frontend side as well.
I set up a loader function for the movies route to get all the movies which are in the database.
When I go to the movies route when the access token is still valid, it loads the movies correctly and without any error. Although when I navigate away, for example to the home route, and want to come back to the movies route ONLY AFTER the access token expiration it does not load the movies and does not load the movies page either.
When the access token has expired and the refresh token is still valid I set up an axios interceptor to request a new access token and send again the request for the movies, but now with the new valid access token. When the refresh token is also invalid I redirect the user to the login page, so in order to see the content of the movies page, the user has to login again. After entering the credentials I setup the code to redirect the user to the requested route before the login page. Although this does not work and the ui is still on the login page.
When I implement this whole scenario without loaders and actions, ONLY WITH useEffect and custom use hooks, it works perfectly fine. The master branch contains this logic without loaders and actions. The required behavior can be seen there.
The router interceptor branch contains the logic with actions and loaders but required behavior does not work there.
And my question is, why doesn't it work with actions and loaders.
spice bough
And my question is, why doesn't it work with actions and loaders.
I meant exactly what part of the code is not working.
pale knot
ohhh 😄
spice bough
I haven't went the through the whole source code but looks like you're calling the createBrowserRouter inside a React component. Don't do that
and don't use a react context for auth
pale knot
I haven't went the through the whole source code but looks like you're calling t...
The reason I call createBrowserRouter inside a React component is so that I can pass the the returned axiosPrivate from the custom useAxiosPrivate hook.
