Nextjs signOut on a server action raised a cookies error in next-auth 5.0.0-beta.17

[peppescg]

Enviromnent

System:
OS: macOS 14.3.1
CPU: (10) arm64 Apple M3 Pro
Memory: 198.45 MB / 32.00 GB

Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 8.15.3 - ~/Library/pnpm/pnpm

Browser:
Chrome: 124.0.6367.62 

npmPackages:
next: 14.1.4 
next-auth: 5.0.0-beta.16
react:  18.2.0

I am trying to call the signOut based on API status code 401

'use server'
import { signOut } from '@/auth'
export async function handleUnauthorizedError(
  error: { status: number } | unknown
) {
  if ((error as { status: number }).status === UNAUTHORIZED_STATUS_CODE) {
    await signOut({ redirect: true, redirectTo: '/signin' })
  }
}

This raised a cookies error
Error: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options

My understanding was that it is possible to call signOut on the server, but it seems not working.

[SantiagoGaonaC]

Same error: Error: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options

[levinqdl]

You are seeing this error because you are invoking the server action directly in a server component render. You should pass the server action to action attribute of form element, or invoke it in an event handler or useEffect.

[levinqdl]

Can you describe your scenario and goals in detail? If you just want to ensure that the session exists and is valid, then when the conditions are not met, you only need to redirect to the login page, without calling signOut.

[peppescg]

My goal is to match every 401 status code from an API call server side, and call signOut.

As you can see above I explicitly call signOut in a server action, called from my API layer

[levinqdl]

I think it is sufficient to directly redirect to the login page because 401 means the session has expired. Also, I believe the use case for signOut is when the user actively logs out, which is not necessary in this scenario.

[peppescg]

I am not totally sure it is necessary to clean the cookies data. It is dangerous to clean manually, signOut is able to do that in a proper way.

and also 401 comes from API, and it could be also a business logic for a restricted page, without a session expired.

[peppescg]

@SantiagoGaonaC usually you need to define a separate file for instance actions defined it as a server action, creating a fn myAmazingSignout that contains signOut from next-auth and call it in your page.tsx

but I think you will reach the same error of mine

[MarianoArg]

I'm also facing this same issue for a similar scenario (401 from my external API). Is there any workaround for this?

[Saran33]

+1 on this. It seems like it should be trivial to call signOut on the server. In my case, I have the same issue where I am storing an access token for our main API server in the next-auth JWT. If that token has expired, we need to clear the cookies and force the user to log in again which would trigger a fetch of a new access token.

[TomJD]

Have you managed to find a solution to this?

[Saran33]

@TomJD yes, I just synced the session expires with the access token exp. This can be done by syncing the JWT exp with the access token and then syncing the session with the JWT. The Auth.js JWT exp is a unix timestamp but the session expires property needs to be an ISO string.

Then, in the middleware, we can check if the token is expired, and if so, redirect to the login page with a query param signInAgain. A client component on the login page has a useEffect hook to check if this signInAgain query param is set, and if so, signs the user out.

// auth.config.ts callbacks
     async jwt({ token, user, account, trigger, session }) {
      if (user) {
        const { accessToken, ...userinfo } = user;
        token.accessToken = accessToken;
        token.exp = getTokenExp(accessToken!);
      //...
       // TODO: Add a token refresh mechanism
      // https://authjs.dev/guides/refresh-token-rotation
      if (token.exp < Math.floor(Date.now() / 1000)) {
        return {
          ...token,
          error: 'RefreshAccessTokenError',
        };
      } else if (token.error && token.error === 'RefreshAccessTokenError') {
        delete token.error;
      }
      // ...
      return token;
     async session({ session, token }) {
      const _session: Session = session;
      if (token) {
        if (session) {
        // ...
          _session.expires = new Date(token.exp * 1000).toISOString();
        }
      }
      return _session;
    },

In a client component on the login page:

import { signOut } from 'next-auth/react';
import { useSearchParams } from 'next/navigation';
// ...
const signInAgain = searchParams?.get('signInAgain');
  React.useEffect(() => {
    if (signInAgain === 'true') {
      signOut({ redirect: false }).catch(() => {
        console.error('Failed to sign out');
      });
      toast({
        title: 'Session Expired',
        description: 'Please sign in again to continue.',
        variant: 'destructive',
      });
    }
  }, [signInAgain]);

// middleware.ts
function redirectWithQuery(req: NextRequest, destination: string) {
  let from = req.nextUrl.pathname;
  if (req.nextUrl.search) from += req.nextUrl.search;
  // if the destination contains a query string, append the from query
  if (destination.includes('?')) {
    destination += `&from=${encodeURIComponent(from)}`;
  } else {
    destination += `?from=${encodeURIComponent(from)}`;
  }
  return NextResponse.redirect(new URL(destination, req.url));
}

const auth = NextAuth(authConfig).auth;

export default auth(async req => {
  const pathname = req.nextUrl.pathname;
  const authenticated = !!req.auth;
  const isTokenExpired =
    req.auth?.expires && new Date(req.auth.expires) < new Date();

  // Handle authenticated redirects from auth pages
  if (pathname.startsWith('/login') || pathname.startsWith('/register')) {
    if (authenticated && !isTokenExpired)
      return NextResponse.redirect(new URL(HOME_URL, req.url));
    return NextResponse.next();
  }

  // Handle unauthenticated access
  if (!authenticated) return redirectWithQuery(req, '/login');
  if (isTokenExpired) return redirectWithQuery(req, '/login?signInAgain=true');

  const scopes = req.auth?.scopes ?? [];
  const isAuthorized = scopeValidator.isAuthorized(scopes, pathname);

  // handle authorized redirects from signup page
  if (pathname.startsWith('/signup')) {
    if (isAuthorized) return NextResponse.redirect(new URL(HOME_URL, req.url));
    return NextResponse.next();
  }

  // Check if path requires specific scopes
  if (!isAuthorized) {
    return NextResponse.redirect(new URL('/signup', req.url));
  }

  return NextResponse.next();
});

Not ideal with all this complexity, but it should work. It would be nice to use axios to intercept 401s from the other server and call signout there, as mentioned above.

[KaranLala]

The issue is that server side signout cannot be called when a server component is rendering, it can only be called from a server action or a route. Another issue that I think gets a bit confusing is that, server actions can often be called during a server component render, and this too will cause the issue.

So the workaround is to create a route, like "app/signout/route.ts" and if you need to call signout, just redirect the user to '/signout', and invoke the signout function from the route.

//app/signout/route.ts
import { signOut } from '@/auth';


export async function GET()
{
    await signOut()
}

//a centralized session check and auth provider for server side
import { auth } from '@/auth'
import { redirect } from 'next/navigation'
import { cache } from 'react'

export default cache(async () =>
{
  const session = await auth()
  if (session?.error) redirect('/signout')
  return session
})

hope this helps anyone who runs into the same issue!

[judewang]

I did ended up to this solution, too.