Using cookies for session management, update Header component in Root Layout to show Log Out button
Unanswered
Little yellow ant posted this in #help-forum
Little yellow antOP
Hey yall!
I am using NextJS 14 with App router and a Spring boot API for the backend.
My app has public pages and private pages that are accesible after logging in. When the user has logged in and is in a private page I would like to update my Header component which is defined in my app root Layout so that it shows a Log Out button.
I am using cookies to manage sessions. I have also defined an AuthContext that wraps everything in the root Layout (Header, Main content and its {children} and the Footer) to make the user data, the logIn() and logOut() functions available to all children components.
As the session cookie I receive after logging in is server side only (or meant to), I can't access it from my Client components like my Header. Also as the root Layout does not re-renders when I do log in into my private page I can't use it to get the cookie and pass it to the AuthContext which was one way I thought I could make a request to an endpoint like /auth/me to get the user data but that would require the token cookie which the AuthContext does not have access to.
I am possibly doing something wrong obviously as updating a Header with a Logout button is something everyone has done before, can someone enlighten me?
I am using NextJS 14 with App router and a Spring boot API for the backend.
My app has public pages and private pages that are accesible after logging in. When the user has logged in and is in a private page I would like to update my Header component which is defined in my app root Layout so that it shows a Log Out button.
I am using cookies to manage sessions. I have also defined an AuthContext that wraps everything in the root Layout (Header, Main content and its {children} and the Footer) to make the user data, the logIn() and logOut() functions available to all children components.
As the session cookie I receive after logging in is server side only (or meant to), I can't access it from my Client components like my Header. Also as the root Layout does not re-renders when I do log in into my private page I can't use it to get the cookie and pass it to the AuthContext which was one way I thought I could make a request to an endpoint like /auth/me to get the user data but that would require the token cookie which the AuthContext does not have access to.
I am possibly doing something wrong obviously as updating a Header with a Logout button is something everyone has done before, can someone enlighten me?
1 Reply
Tonkinese
Why not just get the html component that you know will always be rendered, as long as you're on the client, and attach some css class and use that class to set a button to hidden or some other display style? Sure... a user could set that themselves and see the button they're not supposed to, but that protected page shouldn't be accessible regardless if the button is shown.