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.