useSession data is undefined in production (next auth) but not in dev
Unanswered
Kurilian Bobtail posted this in #help-forum
Kurilian BobtailOP
getSession works in production but not the useSession why is that? 2nd screenshot is what i get from the useSession in production
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { User } from "@/types";
import { AvatarProps } from "@radix-ui/react-avatar";
import { useSession } from "next-auth/react";
import Image from "next/image";
export type UserAvatarProps = AvatarProps & {
user?: Pick<User, "avatar" | "name"> | undefined;
};
export function UserAvatar({ user, ...props }: UserAvatarProps) {
const { data: session } = useSession();
if (session) {
console.log("session", session);
}
const avatarSrc = user?.avatar || session?.user.avatar;
return (
<Avatar {...props}>
{avatarSrc ? (
<Image src={avatarSrc} alt="avatar" fill={true} sizes="300px" />
) : (
<AvatarFallback>
<div className="w-full h-full text-white rounded-full flex items-center justify-center bg-hb-pink">
<span>
{user
? user?.name.charAt(0).toUpperCase()
: session?.user.name.charAt(0).toUpperCase()}
</span>
</div>
</AvatarFallback>
)}
</Avatar>
);
}1 Reply
Kurilian BobtailOP
honestly i dont get the idea why it works when i updated it like this
basically
n ot passing the session = await getServerSession into SessionProvider made it work
basically
n ot passing the session = await getServerSession into SessionProvider made it work
"use client";
import React from "react";
import { SessionProvider } from "next-auth/react";
const AuthProvider = ({ children }: any) => {
return <SessionProvider>{children}</SessionProvider>;
};
export default AuthProvider; const session = await getServerSession();
return (
<html lang="en">
<body className={inter.className}>
<AuthProvider>{children}</AuthProvider>
<Toaster />
Provider
</body>
</html>
);