I've been following the docs but I still end up getting undefined on my first render, why do i get. The RootProvider is just a react-query. I'm trying to create a dynamic sidebar wherein if the the role === admin, it will render different sidebar component.
what I did is I created a hook that I will just call to whenever I need the user.
app/hooks/user-current.ts
import { useSession } from "next-auth/react";
export const useCurrentUser = () => {
const session = useSession()
return session.data?.user
}
RootLayout.tsx
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const session = await auth();
return (
<SessionProvider session={session}>
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<RootProvider>
<Toaster />
{children}
</RootProvider>
</body>
</html>
</SessionProvider>
);
}
This is my sidebar coming from shadcn tutorial
export function AppSidebar() {
const session = useCurrentUser()
console.log(session?.role)
return (
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<Link href={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SignOutButton />
</SidebarFooter>
</Sidebar>
)
}
Now the main problem is after I successfully log in, and when I consoe.log() is get undefined, and i need to refresh my browser before it shows the role.