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:Jump to solution
There are two ways you can handle this:
1. Make a middleware with NextAuth (withAuth in next-auth/middleware) which kicks the user to the login page when the user is logged out.
2. Import useSession from next auth and use it in useEffect to update the child component.
I am not an expert in this as I have only used next auth in 3 of my project. But I use these option if I encounter the problem that you described above....
1 Reply
Solution
There are two ways you can handle this:
1. Make a middleware with NextAuth (withAuth in next-auth/middleware) which kicks the user to the login page when the user is logged out.
2. Import useSession from next auth and use it in useEffect to update the child component.
I am not an expert in this as I have only used next auth in 3 of my project. But I use these option if I encounter the problem that you described above.