next_auth_react__WEBPACK_IMPORTED_MODULE_4__.useSession) is not a function

[stabla]

Hi there,

I would need your support. After a moment working on NextAuth, I do not understand what I am doing wrong.

My goal is to display some user's data once he is logged in, within the /dashboard page.

Login page and SignIn are working great so far.

Theoritical steps:
Login page > Connect > Autorize him > Redirect him to the /dashboard page > Show "Hi {username}!"

However, the last steps does not work.

auth.config.ts

import` type { NextAuthConfig } from 'next-auth';

export const authConfig = {
    secret: process.env.AUTH_SECRET,
    pages: {
        signIn: '/login',
        signOut: '/'
      },
      session: {
        strategy: 'jwt',
        maxAge: 60*60*24*20
      },
      callbacks: {
        authorized({ auth, request: { nextUrl } }) {
          const isLoggedIn = !!auth?.user;
          const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
          const isOnSettings = nextUrl.pathname.startsWith('/settings')
          if (isOnDashboard || isOnSettings) {
            if (isLoggedIn) return true;
            return false; // Redirect unauthenticated users to login page
          } else if (isLoggedIn) {
            return Response.redirect(new URL('/dashboard', nextUrl));
          }
          return true;
        },
        async jwt({ token, account, user }) {
          if (account) {
            console.log('JWT: ', {token, account, user})
          }
          return token
        }
    },
    providers: [], // Add providers with an empty array for now
  } satisfies NextAuthConfig;

page.tsx (Dashboard page)

import { signOut } from '@/auth';
import { PowerIcon } from '@heroicons/react/24/outline';
import { useSession } from 'next-auth/react';

export default function Dashboard() {

    const { data : session} = useSession();
    console.log( { session });

    return (
          <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
            <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
            <form
              action={async () => {
                'use server';
                await signOut({redirect: true, redirectTo: "http://localhost:3000/"});
       
              }}
            >
              <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
                <PowerIcon className="w-6" />
                <div className="hidden md:block">Sign Out</div>
              </button>
            </form>
 
          </div>
      );
}

The terminal tells:

TypeError: (0 , next_auth_react__WEBPACK_IMPORTED_MODULE_4__.useSession) is not a function
    at Dashboard (./src/app/dashboard/page.tsx:21:90)
    at stringify (<anonymous>)
digest: "1797612278"
   5 | export default function Dashboard() {
   6 |
>  7 |     const { data : session} = useSession();
     |                                         ^
   8 |     console.log( { session });
   9 |
  10 |     return (

Nor useSession(), getSession() are working.... same error.

Would anyone have any idea how to fix this?

Thank you for your help!

[JasperAlexander]

useSession and getSession only work on client side pages. Have you added use client?

[stabla]

Thanks, I don't know how I fixed it, but after few hours of investigation, I just did this to retrieve the session's info:

const session = await auth()
console.log(session?.user?.name)

I will close the ticket!