Kinde•11mo ago

Trying to get the user session in server side Next.js v14 pages directory, always returns null

I'm pretty sure I might have screwed something up in the setup, but the docs for setting up the provider for pages directory still show an app directory layout, has anyone set it up succesfully for Next.js pages directory v14?

10 Replies

Kunal BagariaOP•11mo ago

The client side works properly, shows proper authentication status and user data but returns null in the server side

ooi cat•11mo ago

can you provide an example I'm no kinde staff, but actively working with kinde in next.js 14 app router version, so might be able to help

Kunal BagariaOP•11mo ago

hey, so I'm not used to the app router, was building with the pages router, hence just wanted to set it up should I give in to the app router, or try to make it work with pages router

ooi cat•11mo ago

https://kinde.com/docs/developer-tools/nextjs-prev-sdk/

Kinde Docs

NextJS Pages Router SDK v2 - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

ooi cat•11mo ago

This seems to be the SDK for your setup. Here it says they recommend going for the app router

Kunal BagariaOP•11mo ago

yeah, I think I need to set up the layout separately in an app directory even if using pages directory

ooi cat•11mo ago

How are you calling kinde on server side? I assume you do this in getServerSideProps for example, since it's next.js pages router Here is an example from the doc:

import {
  getKindeServerSession,
} from "@kinde-oss/kinde-auth-nextjs/server";

export async function getServerSideProps({
  req,
  res,
}: {
  req: Request;
  res: Response;
}) {
  const {
    getUser,
    getPermissions,
    getOrganization,
  } = getKindeServerSession(req, res);

  const organization = await getOrganization();
  const permissions = await getPermissions();
  const user = await getUser();

  return {
    props: {
      user,
      permissions,
      organization,
    },
  };
}

export default function Server({
  user,
  permissions,
  organization,
}: any) {
    console.log("user", user);
    console.log("permissions", permissions);
    console.log("organization", organization);

  ...
}

import {
  getKindeServerSession,
} from "@kinde-oss/kinde-auth-nextjs/server";

export async function getServerSideProps({
  req,
  res,
}: {
  req: Request;
  res: Response;
}) {
  const {
    getUser,
    getPermissions,
    getOrganization,
  } = getKindeServerSession(req, res);

  const organization = await getOrganization();
  const permissions = await getPermissions();
  const user = await getUser();

  return {
    props: {
      user,
      permissions,
      organization,
    },
  };
}

export default function Server({
  user,
  permissions,
  organization,
}: any) {
    console.log("user", user);
    console.log("permissions", permissions);
    console.log("organization", organization);

  ...
}

also, check that your imports are correct, my autoimporter somehow didn't recognize the right paths, I had to manually type in the imports

Kunal BagariaOP•11mo ago

hey thanks a lot for your help and time, I had to move quick so decided to go with moving everything to app router :/

Oli - Kinde•11mo ago

Hey @Kunal Bagaria, @gooby.wooby is right, we recommend NextJS App Router, but of course we can help you out if you are using Pages Router. Sounds like you have gone ahead and implemented NextJS App Router. Please let me know if you are still having issues, I am here to help!

Kunal BagariaOP•11mo ago

thanks Oli, yep I've implemented the app router, will let you know if I face any issues

Gaming

Programming

Trying to get the user session in server side Next.js v14 pages directory, always returns null