useSession() hook returning undefined in NextJS v13.4.3 #7839

Cartrogen · 2023-06-19T21:33:59Z

Question 💬

I am new to NextJS and I am using v13.4.3. My backend is performing auth and upon login, it is returning a JWT as HTTPONLY cookie which is attached to the browser. My requirement is to build components on the frontend that have conditional buttons/text based on whether the user is logged in or not.

My understanding is that I can use the useSession hook in my components to grab the session from the cookie when the page is rendering and this should tell me whether the user is logged in or not. The problem is that the useSession hook is always returning undefined.

How to reproduce ☕️

Here is my code and structure. I am using the app structure since I am on the newer version of Next as June 2023.

In my app folder, I have created a folder called auth which has a file called auth-context.tsx - src/app/auth/auth-context.tsx

'use client';

import { SessionProvider } from 'next-auth/react';

export interface AuthContextProps {
  children: React.ReactNode;
}

export default function AuthContext({ children }: AuthContextProps) {
  return <SessionProvider>{children}</SessionProvider>;
}

In my app folder in the main layout file - src/app/layout.tsx

import '@styles/global.css';
import AuthContext from './auth/auth-context';

export const metadata = {
  title: 'myTitle',
  description:
    'myDescription',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {
  return (
    <AuthContext>
      <html lang="en">
        <body>
          <main>{children}</main>
        </body>
      </html>
    </AuthContext>
  );
}

I have done the above in order to wrap the useSession in a sessionProvider by creating a separate client as mentioned by NextJS documentation. I followed this thread to learn about this - #5647

Now the component that needs access to the session is sitting in the (dashboard) folder in app folder - src/app/(dashboard)/home/page.tsx

'use client';

import { useSession } from 'next-auth/react';

export default function Home() {
  const { data } = useSession();
  console.log('LINE7', data);

  return (
    <div>
      HOME
      <p>{data?.user?.name}</p>
      <p>{data?.user?.email}</p>
    </div>
  );
}

The problem I am facing is that the object data always comes back as undefined when I navigate to the home page. When I check the browser, I am seeing the cookie being passed correctly. I decoded the cookie on jwt.io and it is the right cookie that my backend is passing. So it seems like my login functionality is working fine but I am unable to grab the session.

The console in the browser logs this - LINE7 null The console in vs code logs this - LINE7 undefined

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

The text was updated successfully, but these errors were encountered:

Cartrogen added the question Ask how to do something or how something works label Jun 19, 2023

nextauthjs locked and limited conversation to collaborators Jun 20, 2023

balazsorban44 converted this issue into discussion #7845 Jun 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

useSession() hook returning undefined in NextJS v13.4.3 #7839

useSession() hook returning undefined in NextJS v13.4.3 #7839

Cartrogen commented Jun 19, 2023 •

edited

This issue was moved to a discussion.

This issue was moved to a discussion.

useSession() hook returning undefined in NextJS v13.4.3 #7839

useSession() hook returning undefined in NextJS v13.4.3 #7839

Comments

Cartrogen commented Jun 19, 2023 • edited

Question 💬

How to reproduce ☕️

Contributing 🙌🏽

This issue was moved to a discussion.

Cartrogen commented Jun 19, 2023 •

edited