what is the best way for client to detect if a user is authenticated
Answered
HOTCONQUEROR posted this in #help-forum
In my previous projects, i used to
use
Note that I already got a middleware in backend to check for auth before processing the request, but that only work work when there is a request sent to the actual backend.
use
createContext and useContext and consume that context in every client component in order to check if user is auth or not, however, this deem to be non-efficient, I am looking for a method where i can fetch the cookie/session in server component, and I can basically use the fetch result in every client/server component to see if user is auth or not?Note that I already got a middleware in backend to check for auth before processing the request, but that only work work when there is a request sent to the actual backend.
Answered by Roseate Spoonbill
Up to this point I used:
- Contexts (as mentioned above, not efficient if contexts contain more than just auth status and other info changes more often)
- LocalStorage/SessionStorage with some listener helper (like one of
- state library (zustand, xstate store etc)
The latest is the most efficient solution as with most state libs you decide what to take from shared state and rerenders will trigger only once selected part of state changes.
This is all ofc on client end to know when to show someone login page/confirm password modal etc.
- Contexts (as mentioned above, not efficient if contexts contain more than just auth status and other info changes more often)
- LocalStorage/SessionStorage with some listener helper (like one of
useLocalStorage that implements listeners on change)- state library (zustand, xstate store etc)
The latest is the most efficient solution as with most state libs you decide what to take from shared state and rerenders will trigger only once selected part of state changes.
This is all ofc on client end to know when to show someone login page/confirm password modal etc.
5 Replies
Roseate Spoonbill
Up to this point I used:
- Contexts (as mentioned above, not efficient if contexts contain more than just auth status and other info changes more often)
- LocalStorage/SessionStorage with some listener helper (like one of
- state library (zustand, xstate store etc)
The latest is the most efficient solution as with most state libs you decide what to take from shared state and rerenders will trigger only once selected part of state changes.
This is all ofc on client end to know when to show someone login page/confirm password modal etc.
- Contexts (as mentioned above, not efficient if contexts contain more than just auth status and other info changes more often)
- LocalStorage/SessionStorage with some listener helper (like one of
useLocalStorage that implements listeners on change)- state library (zustand, xstate store etc)
The latest is the most efficient solution as with most state libs you decide what to take from shared state and rerenders will trigger only once selected part of state changes.
This is all ofc on client end to know when to show someone login page/confirm password modal etc.
Answer
@Roseate Spoonbill Up to this point I used:
- Contexts (as mentioned above, not efficient if contexts contain more than just auth status and other info changes more often)
- LocalStorage/SessionStorage with some listener helper (like one of `useLocalStorage` that implements listeners on change)
- state library (zustand, xstate store etc)
The latest is the most efficient solution as with most state libs you decide what to take from shared state and rerenders will trigger only once selected part of state changes.
This is all ofc on client end to know when to show someone login page/confirm password modal etc.
i have got an idea of fetching the session from cookie in a server component, if there is a session, then render X component, otherwise tell user to login.
i wrap this server component over other clients component if those client components need to be protected.
Roseate Spoonbill
That's fine as long as you'd do this on each page. However, if you client makes api calls or calls server actions, it may happen, that page has loaded with session and user made call after session timed out. In such case you'd need to handle those cases on client side (probably by making redirect to login page, unless you are worried about losing local form states)