Add a new Provider component that users should wrap their application in order to check for invalid sessions, in case for example, a tab stayed open for too long or the user signed out in a different tab.
If the user has a invalid session upon returning to a tab, the page will be reloaded so the middleware can take care of the redirection.
By forcing this page reload, we prevent possible CORS issues as server actions would throw an error as you are not authenticated.
The current use of the Provider is to listen to tab events and check for invalid session, but we can eventually introduce new feature inside the Provider, like passing down the current user in a context so it can be accessed in client components.
How does that work?
When the user switches back to the app, we make a call to a server action, which in Next.js world is just a POST request to the current route the user is in.
If the user has a valid session, the request will most likely be successful so we don't need to do anything.
But if the user does not have an active session, there are two outcomes:
The user is in a protected page, the server action will fail because the of the middleware, so we can reload the page to let the middleware handle the redirection
If the user is a public page, the server action will succeed and don't have to do anything
And also, if the user does not have the middlewareAuth enabled, the server action will also be successful, so we don't reload the page.
Open questions
Should this behaviour be configured via a prop, like <Provider checkForInactiveTab /> ?
Should we allow users to customize what to do in the case of a invalid session? For example instead of reloading, display a React component saying that they are logged out?
Description
Add a new
Providercomponent that users should wrap their application in order to check for invalid sessions, in case for example, a tab stayed open for too long or the user signed out in a different tab.If the user has a invalid session upon returning to a tab, the page will be reloaded so the middleware can take care of the redirection.
By forcing this page reload, we prevent possible CORS issues as server actions would throw an error as you are not authenticated.
The current use of the
Provideris to listen to tab events and check for invalid session, but we can eventually introduce new feature inside the Provider, like passing down the current user in a context so it can be accessed in client components.How does that work?
When the user switches back to the app, we make a call to a server action, which in Next.js world is just a
POSTrequest to the current route the user is in.If the user has a valid session, the request will most likely be successful so we don't need to do anything. But if the user does not have an active session, there are two outcomes:
publicpage, the server action will succeed and don't have to do anythingAnd also, if the user does not have the
middlewareAuthenabled, the server action will also be successful, so we don't reload the page.Open questions
<Provider checkForInactiveTab />?