How to access modified next-auth session in app router(next.js13-14)?

Question

With Next.js 14 app router structure, I am modifying my session inside [...nextAuth].ts middleware with basic JWT and Session callbacks.

When I get session with useSession callback in client side it is working correctly however, because my layout is server side rendered thanks to app router; when I get session with getServerSession(), it returns me only name and email which is not modified version.

How to fix this?

[..nextAuth] route.ts

export const authOptions: NextAuthCustomOptions = {
  debug: false,
  pages: {
    error: "/auth/error",
  },
  site: process.env.NEXTAUTH_URL,
  providers: [
    KeycloakProvider({
      clientId: process.env.NEXT_PUBLIC_KEYCLOAK_ID || "",
      clientSecret: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_SECRET || "",
      issuer: process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER || "",
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async session({ session, token }: ISessionCallbak) {
      session.accessToken = token.accessToken;
      session.expiresAt = token.expiresAt;
      session.refreshTokenExpiresIn = token.refreshTokenExpiresIn;
      session.refreshToken = token.refreshToken;
      session.tokenType = token.tokenType;
      session.registrationStep = token.registrationStep;
      return session;
    },

    async jwt({ token, user, account, profile }: IJwtCallback) {
      if (user) {
        token.id = user.id;
      }
...

layout.tsx

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await getServerSession(); //returns not modified session

I noticed that useSession (client side) session is modified successfully. But with getServerSession() it gives me default name and email data only.

Answer 1

How to Address the Problem

1. Make sure that getServerSession receives authOptions:

Make sure that when you call getServerSession(), the authOptions are passed correctly. This guarantees that the method makes advantage of your personalized parameters, such as the callbacks for JWT and session updates.

import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await getServerSession(authOptions); // Pass authOptions here
  console.log(session); // This should now include your custom session properties
  return <>{children}</>;
}

2. Verify that the callbacks are configured correctly:

Make sure your JWT and session callbacks are accurately adding the required properties to the session by double-checking them.

callbacks: {
  async session({ session, token }) {
    session.accessToken = token.accessToken;
    session.expiresAt = token.expiresAt;
    session.refreshTokenExpiresIn = token.refreshTokenExpiresIn;
    session.refreshToken = token.refreshToken;
    session.tokenType = token.tokenType;
    session.registrationStep = token.registrationStep;
    return session;
  },
  async jwt({ token, user }) {
    if (user) {
      token.id = user.id;
    }
    return token;
  },
}

3. Utilize Headers to Preserve Session Context:

When executing server-side requests, you may need to explicitly pass the cookies because server components don't have direct access to the browser's cookies. To get the session data, use headers() from next/headers.

import { headers } from "next/headers";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await fetch("/api/auth/session", {
    headers: headers(),
  }).then(res => res.json());

  console.log(session); // Check if this returns the modified session
  return <>{children}</>;
}

Extra Advice: Debugging and Logging: Record the session data at several points to see where the changes might be disappearing.

Verify Middleware and Server Configuration: Make sure that neither of these might be removing or improperly implementing the adjustments.

See the NextAuth and Next.js documentation and community conversations for further information. The documentation is updated frequently, and the community discussions frequently provide light on particular problems with new releases.

On both the client and server sides, you should be able to obtain the changed session data by making sure you pass the authOptions correctly and manage session cookies appropriately.