I am trying to implement Auth.js
in my Next.js
project and I managed to make the login work but when I try to access the user data from the session the user object is always empty even tho the session says authenticated and has an expiration date.
I mainly followed the official docs to set it up. Here is the code I have in auth.ts
:
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
Credentials({
credentials: {
email: {},
password: {},
},
authorize: async (credentials) => {
let data = {
email: credentials.email as string,
password: credentials.password as string,
}
const user = await AuthService.login(data)
console.log('the user', user)
return user
},
}),
],
})
When I perform a login, it all works fine and the user variable shows with all the user data in the console.log I have there. I made an AuthProvider
component where I import the auth
method of the configuration above to get the session data:
import { SessionProvider } from "next-auth/react";
import { auth } from "@/lib/auth";
export interface Props {
children: React.ReactNode;
}
export default async function AuthProvider({ children }: Props) {
const session = await auth();
return (
<SessionProvider session={session}>
{children}
</SessionProvider>
)
}
I use the component to wrap the children of my main layout.tsx
file like so:
export default async function RootLayout({
return (
<AuthProvider>
{children}
</AuthProvider>
);
}
All well and good, now here is where I run into an issue, I have a UserPanel
component where I want to show the info from the session. I have it setup like this:
export default function UserPanel() {
const { data: session, status } = useSession();
console.log('the session', session, status);
return (
<div>
<p>{session.user.name}</p>
</div>
)
}
When I log in successfully the the info I get from useSession() returns and empty user object:
{
"user": {},
"expires": "2024-09-09T03:21:18.233Z"
}
It shows an expiration date and the status says authenticated. But none of the user data that my API returns is available.
How do I get the user data with useSession? Thanks in advance.