Update Session on Server Side

[ChrisLegaxy]

Description 📓

Hello everyone. With the Next 13 with RSC by default, we tend to think more about the server-side approach.

For now, I'm not sure quite sure how to update the session on the server side.

Currently, I'm using CredentialProvider which gives me accessToken & refreshToken which I stored in my session.

The refreshToken is short-lived, only 30 mins, meaning if the user is idle for 30 mins, it won't work anymore, it will push user back to the login page and delete the session. (Just detailing)

Right now let's say I'm trying to return all the user's project/info on an RSC component. Meaning I'd have to call an API on the server side correct? Meaning everything only happens on the server side.

I'm using axios interceptor for this part, but now I'm only able to read the session (getServerSession), I can't find a way to update the session with the new accessToken/refreshToken. Since we only have useSession hook that provides the update method, I'm not sure how we can have that functionality on the server side as well.

The functionality I aim for:

1. axios call in server side with the accessToken
2. If the accessToken expire, it has the interceptor fall back to refreshToken
3. Then it updates the next auth session with the new accessToken/refreshToken, then retries the request

If anyone can assist on this, any suggestion is welcome, I'm not 100% sure if my use case is common or correct, but indeed kindly advise since I'm just starting Next 13 and indeed it quite confusing. I've gone through quite a lot of searches but couldn't find this part.

How to reproduce ☕️

N/A

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[angelhodar]

I think there isnt a way to update the session server side yet. I think #6642 is related

[Praiz001]

I have similar issue as the above! Can't update session in a server component as 'use session' which has the 'update' method only works on client side. Any idea to go around this would be appreciated.

[rinvii]

As far as I know, there is absolutely no way to update the session in a server component with Next.js app router because of the way React does streaming rendering of server components. Since you're wanting to update the session on the server, ideally you would need to set the cookies or headers. However, you just can't set cookie or headers during rendering of server components which is why the Next.js docs only say you can read them.

From what I've gathered, you can only check if the session is valid in a server component, but not update it. However, if you're wanting to update the cookies (in order to update the session), you would either have to do this on the client or in a middleware.

But since you want a more server-side approach, you can do this with middleware.

Right now let's say I'm trying to return all the user's project/info on an RSC component. Meaning I'd have to call an API on the server side correct? Meaning everything only happens on the server side.

I'm using axios interceptor for this part, but now I'm only able to read the session (getServerSession), I can't find a way to update the session with the new accessToken/refreshToken. Since we only have useSession hook that provides the update method, I'm not sure how we can have that functionality on the server side as well.

In the middleware, you can intercept those request tokens, validate those tokens (by a server-side function or API call), and finally set the response tokens and thereby updating the session.

[angelhodar]

@rinvii Thank you for the detailed response. I was thinking about implementing NextAuth with my custom backend but I dont know how to properly handle token refresh in sync with the NextAuth session expiration. I could just make my backend return tokens with 1 year expiration time but as the default session expiration for NextAuth is 1 month I think, I would like the accessToken from my backend stored inside the next-auth session to refresh when the next auth session is updated. As you say I should do it in the middleware, but I dont know how to properly do that. Do you have some sample code to check and study?

[mistercorea]

Hmmm, can it be a little smarter? so that if the client updates the access token by update method then the client can call the backend API to update the backend access token.

is that possible?

[rinvii]

@angelhodar @mistercorea

You can probably do something like this:

export const config = {
  matcher: "/:path*",
};

export const middleware: NextMiddleware = async (request: NextRequest) => {
  if (request.nextUrl.pathname.startsWith("/protected")) {
    const cookiesList = request.cookies.getAll();
    const sessionCookie = env.NEXTAUTH_URL?.startsWith("https://")
      ? "__Secure-next-auth.session-token"
      : "next-auth.session-token";

    // no session token present, remove all next-auth cookies and redirect to sign-in
    if (!cookiesList.some((cookie) => cookie.name.includes(sessionCookie))) {
      const response = NextResponse.redirect(new URL("/sign-in", request.url));

      request.cookies.getAll().forEach((cookie) => {
        if (cookie.name.includes("next-auth"))
          response.cookies.delete(cookie.name);
      });

      return response;
    }

    // session token present, check if it's valid
    const session = await fetch(`${ env.NEXTAUTH_URL }/api/auth/session`, {
      headers: {
        "content-type": "application/json",
        cookie: request.cookies.toString(),
      },
    } satisfies RequestInit);
    const json = await session.json();
    const data = Object.keys(json).length > 0 ? json : null;

    // session token is invalid, remove all next-auth cookies and redirect to sign-in
    if (!session.ok || !data?.user) {
      const response = NextResponse.redirect(new URL("/sign-in", request.url));

      request.cookies.getAll().forEach((cookie) => {
        if (cookie.name.includes("next-auth"))
          response.cookies.delete(cookie.name);
      });

      return response;
    }
    
    // session token is valid so we can continue
    const newAccessToken = await fetch("path/to/custom/backend") // or a server-side function call
    const response = NextResponse.next()
    const newSessionToken = await encode({
      secret: env.NEXTAUTH_SECRET,
      token: {
        ...otherTokenData,
        accessToken: newAccessToken,
      },
      maxAge: 30 * 24 * 60 * 60, // 30 days, or get the previous token's exp
    })

    // update session token with new access token
    response.cookies.set(sessionCookie, newSessionToken)

    return response;
  }

  return NextResponse.next()
}

[angelhodar]

@rinvii Thank you so much for the code! I currently dont have much time for testing but I will do it for sure this weekend, the only missing piece is the encode function that I dont know where is exported from next-auth. I think this should be added to the next auth documentation, I have seen some issues that could be solved with this. Maybe its planned to be added in v5? Any maintainer can confirm?

[arminhupka]

@rinvii Thank you so much for the code! I currently dont have much time for testing but I will do it for sure this weekend, the only missing piece is the encode function that I dont know where is exported from next-auth. I think this should be added to the next auth documentation, I have seen some issues that could be solved with this. Maybe its planned to be added in v5? Any maintainer can confirm?

import {encode} from 'next-auth/jwt'

[arminhupka]

@rinvii the one issue with your solution is that we getting old token in getServerSession after refresh. We need reload page to get new token.

[angelhodar]

@rinvii I have reworked and tested your idea and it works!!! I just moved the signOut functionality to a function to make it more clear (as next-auth doesnt provdce a way to sign out server side I think). The only problem, as @arminhupka mentioned, is that the previous session gets stale, so the page needs to get reloaded. I dont know if there is a way to force next-auth to get the new session or if the middleware can force a page reload.
)

import { NextMiddleware, NextRequest, NextResponse } from "next/server";
import { encode, getToken } from 'next-auth/jwt'

export const config = {
  matcher: "/protected",
};

const sessionCookie = process.env.NEXTAUTH_URL?.startsWith("https://")
  ? "__Secure-next-auth.session-token"
  : "next-auth.session-token";

function signOut(request: NextRequest) {
  const response = NextResponse.redirect(new URL("/api/auth/signin", request.url));

  request.cookies.getAll().forEach((cookie) => {
    if (cookie.name.includes("next-auth"))
      response.cookies.delete(cookie.name);
  });

  return response;
}

function shouldUpdateToken(token: string) {
  // Check the token expiration date or whatever logic you need
  return true
}

export const middleware: NextMiddleware = async (request: NextRequest) => {
  console.log("Executed middleware")

  const session = await getToken({ req: request })

  if (!session) return signOut(request)

  const response = NextResponse.next()

  if (shouldUpdateToken(session.accessToken)) {
    // Here yoy retrieve the new access token from your custom backend
    const newAccessToken = "Session updated server side!!"

    const newSessionToken = await encode({
      secret: process.env.NEXTAUTH_SECRET,
      token: {
        ...session,
        accessToken: newAccessToken,
      },
      maxAge: 30 * 24 * 60 * 60, // 30 days, or get the previous token's exp
    })

    // Update session token with new access token
    response.cookies.set(sessionCookie, newSessionToken)
  }

  return response
}

[rinvii]

@arminhupka @angelhodar Everything is aggressively cached in Next.js https://nextjs.org/docs/app/building-your-application/caching. So I’m going to need more context about the session staleness. Otherwise it just sounds like a caching problem where soft navigations don’t trigger middleware in the way that you want (I think).

[angelhodar]

@arminhupka @angelhodar Everything is aggressively cached in Next.js https://nextjs.org/docs/app/building-your-application/caching. So I’m going to need more context about the session staleness. Otherwise it just sounds like a caching problem where soft navigations don’t trigger middleware in the way that you want (I think).

I have tested with the example next-auth template which is based on the pages router. I think the new caching mechanism that seems to be more aggresive and sometimes gives problems is only in the new app router, am I right? The main session staleness problem I think that comes mainly from the SessionProvider, because I suppose it stores the session in memory to just return it in the useSession hook instead of making a network request everytime the hook is called (I dont know internally how it works but makes sense)

One possible solution would be to return an extra cookie that tells the client if it has to call the new update method from the useSession hook to force a session reload. That could be implemented in a background component that just executes its useEffect on every route change. I am sure that there is a more elegant solution to force next-auth to refresh the session but I dont know how to do it.

Edit: I have just read in the docs that the update method doesnt sync across tabs, so the getSession function should be called as its specified:

If you have session expiry times of 30 days (the default) or more then you probably don't need to change any of the default options in the Provider. If you need to, you can trigger an update of the session object across all tabs/windows by calling getSession() from a client side function