Authenticated now working properly
Hello, I have my app setup as follows:
However if I stay for example on /events/list page and wait for accessToken to expire and then navigate to /costumers page the data doesn't load because I'm no longer authenticated but <Authenticated /> component doesn't call check when I navigate from /events to /customers. How do I resolve this issue? Calling useIsAuthenticated hook goes into infinite render loop
7 Replies
Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, for handling authentication and ensuring that your
<Authenticated />
component reacts appropriately to changes in authentication status, you might want to review the documentation and examples provided by refine for best practices and troubleshooting tips. Specifically, looking into how the authProvider
is implemented and ensuring it correctly handles session expiration and token renewal could be beneficial. Additionally, exploring the use of context or state management to trigger re-authentication checks across route changes might help resolve the issue you're facing.
For more detailed guidance and examples on implementing authentication with refine, including the use of <Authenticated />
component and authProvider
, you can refer to the official documentation here: Refine Docs on Authentication (https://refine.dev/docs/).
Since the extracts provided do not contain a direct solution to the issue of the <Authenticated />
component not re-checking authentication status on route changes, I recommend exploring the documentation and community discussions for insights and potential workarounds that have worked for others in similar situations.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenophobic-harlequin•11mo ago
Hello @chachi, can you share your auth provider with us?
stormy-goldOP•11mo ago
Hey @Alican Erdurmaz, sure, here is my check function:
And here the whole authProvider:
xenophobic-harlequin•10mo ago
Code seems okay, I need time to debug. thanks for sharing issue with us
Hello again @chachi, Sorry for late response.
<Authenticted />
component not sent request on every route change (not calling authProvider.check), you can use authProvider.onError
component and after API returns 403 you can logout your user and redirect to login pagestormy-goldOP•10mo ago
@Alican Erdurmaz Even when the user is just navigating between resources the Authenticated component doesn't call the check method but that doesn't mean the user is inactive. I don't want to logout the user every 30 minutes (expiration of my accessToken) because of this. So I'm guessing the only solution is to use useIsAuthenticated on every page that requires being authenticated?
xenophobic-harlequin•10mo ago
Yes you can use
useIsAuthenticated
but, I believe using authProvider.onError
is the best practice to handle this kind of use cases.
When the API returns 401 or 403, you can logout the user in the onError
method, so you don't need to request the API on every page transition