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

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

Cartrogen
Jun 19, 2023

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

Answered by Cartrogen

Aug 12, 2024

Hi @Byron0000 and @KrishnaCodez,

So I solved my entire auth problem by doing it on the backend. Basically I used passportjs in my backend nestjs repository to issue a JWT. I then pass this JWT to the frontend as an HTTPONLY cookie which get stored in the browser. This JWT is then passed over to the backend from the frontend with every endpoint call and I created an auth guard (again with passportjs) which extracts the JWT verifies it and either allow the user through or kick them out and the frontend redirects them to login page.

Now the only issue with this is that if you want to implement a feature such that your frontend does not make a call if a JWT does not exist or is expirted, you …

View full answer

Cartrogen · 2023-06-20T15:11:27Z

Cartrogen
Jun 20, 2023
Author

I'd like to add something that might be too obvious for guys with more experience. My server auth is NOT using next-auth. I am using NestJS on the backend and I am doing all the backend auth by myself. Which includes hashing passwords upon creation, comparing upon login, and generating a JWT when successful login using nest-jwt library. I am also using passport-local and passport-jwt on the backend.

My point of all this is that I am using a different auth strategy on the backend (not next-auth). In this case, is it expected behaviour for useSession() to not be able to grab the session?

Thank you guys!

5 replies

Cartrogen Aug 25, 2023
Author

Hi @Gondrak08, were you able to figure this out? I switched over from next-auth to building my custom auth instead with a JWT and another cookie. Do let me know if you are having issues and would like to discuss other potential solutions. My solution works for my needs where I am able to verify if a user is logged in on the client side, and I am also able to validate a user every time they call a backend resource. Happy to share with you if you need.

Good luck!

Byron0000 Jan 31, 2024

Hi @Gondrak08, were you able to figure this out? I switched over from next-auth to building my custom auth instead with a JWT and another cookie. Do let me know if you are having issues and would like to discuss other potential solutions. My solution works for my needs where I am able to verify if a user is logged in on the client side, and I am also able to validate a user every time they call a backend resource. Happy to share with you if you need.

Good luck!

Could you please share how you solved this?

iurvish Aug 10, 2024

i am facing same issue. does anyone got solution ?

Cartrogen Aug 12, 2024
Author

Hi @Byron0000 and @KrishnaCodez,

So I solved my entire auth problem by doing it on the backend. Basically I used passportjs in my backend nestjs repository to issue a JWT. I then pass this JWT to the frontend as an HTTPONLY cookie which get stored in the browser. This JWT is then passed over to the backend from the frontend with every endpoint call and I created an auth guard (again with passportjs) which extracts the JWT verifies it and either allow the user through or kick them out and the frontend redirects them to login page.

Now the only issue with this is that if you want to implement a feature such that your frontend does not make a call if a JWT does not exist or is expirted, you will have to create a workaround. The issue is that if you make your JWT an HTTPONLY cookie, then your frontend JS code does not have access to this JWT. If you make your JWT not HTTPONLY, then you are opening yourself up to security risks. So I created another separate cookie which is merely a boolean like loggedIn: true when the user logs in, along with the actual JWT. This login cookie (token) is is not HTTPONLY because there is no sensitive information. The trick here is that I made this login cookie to have the same expiration time as the original JWT. Since this new login cooke is not HTTPONLY, my frontend code can access this cookie. So if it is expired, then I don't make calls to backend. This way I reduce the number of calls to my backend and kick the user out directly from the frontend if their cookie is expired.

Let me know if you have any questions about this or if anything is confusing. I am happy to share code snippets and a more detailed explanation if needed.

Answer selected by Cartrogen

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

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

Cartrogen Jun 19, 2023

Question 💬

How to reproduce ☕️

Contributing 🙌🏽

Replies: 1 comment · 5 replies

Cartrogen Jun 20, 2023 Author

Cartrogen Aug 25, 2023 Author

Byron0000 Jan 31, 2024

iurvish Aug 10, 2024

Cartrogen Aug 12, 2024 Author

Cartrogen
Jun 19, 2023

Replies: 1 comment 5 replies

Cartrogen
Jun 20, 2023
Author

Cartrogen Aug 25, 2023
Author

Cartrogen Aug 12, 2024
Author