Update child client component on change in props passed from parent server component
I have a server component which asynchronously gets a next-auth user session using getServerSession. This session is then passed to a child component (client component). However, whenever session state changes (i.e. logged-in | logged-out), the child component is not updated. Does anyone know a good solution to this? Currently, I need to refresh the entire page...
Solution
There are two ways you can handle this:
- Make a middleware with NextAuth (withAuth in next-auth/middleware) which kicks the user to the login page when the user is logged out.
- Import useSession from next auth and use it in useEffect to update the child component.
