How to send nextauth CSRF + callbackUrl cookies from getServerSideProps properly ?

[ComicScrip]

Question 💬

I followed what is written in the docs to setup a simple credentials authentication with a custom signin page :

pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      async authorize(credentials, req) {
        // this is only for demontrating the issue
        if (
          credentials.username === 'admin' &&
          credentials.password === 'admin'
        ) {
          return {
            email: '[email protected]',
          };
        }
        return null;
      },
    }),
  ],
  secret: process.env.SECRET,
  session: {
    strategy: 'jwt',
  },
  pages: {
    signIn: '/login',
  },
});

pages/login.js

import { getCsrfToken } from "next-auth/react"

export default function SignIn({ csrfToken }) {
  return (
    <form method="post" action="/api/auth/callback/credentials">
      <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
      <label>
        Username
        <input name="username" type="text" />
      </label>
      <label>
        Password
        <input name="password" type="password" />
      </label>
      <button type="submit">Sign in</button>
    </form>
  )
}

// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
  return {
    props: {
      csrfToken: await getCsrfToken(context),
    },
  }
}

This implementation does not work when the user's browser visits the /login page for the first time and tries to authenticate with correct credentials, because although the CSRF token to put in the login form is set, the corresponding CSRF cookie is not.
So the first login attempt will fail, but will set the required cookie in the browser and then the second attempt will succeed because this time we have the cookie along with the CSRF form token.
To make the first attempt with correct credentials succeed, CSRF cookie should be set before validating the user's credentials in authorize.

A partial solution is written in the docs, calling signIn in the custom signin page instead of relying on the default form submission will handle the CSRF token :

<form
      method='post'
      action='/api/auth/callback/credentials'
      onSubmit={(e) => {
        e.preventDefault();
        // From https://next-auth.js.org/configuration/pages#credentials-sign-in :
        // "You can also use the signIn() function which will handle obtaining the CSRF token for you"
        signIn('credentials', {
          username: e.target.elements.username.value,
          password: e.target.elements.password.value,
        });
      }}
    >

The problem is that it works only when JS is enabled in the browser, because signIn rely on client side JS.
To make it work without client side JS enabled, I found a solution : Instead of calling signIn, I just send the CSRF cookies in getServerSideProps by adding headers to the response :

export default function Login({ csrfToken }) {
  return (
    <form method='post' action='/api/auth/callback/credentials'>
      <input name='csrfToken' type='hidden' defaultValue={csrfToken} />
      <label>
        Username
        <input name='username' type='text' />
      </label>
      <label>
        Password
        <input name='password' type='password' />
      </label>
      <button type='submit'>Sign in</button>
    </form>
  );
}

const getCsrfTokenAndSetCookies = async (context) => {
  // capturing the callback url if any, which should include the current domain for security ?
  const host =
    typeof context.query?.callbackUrl === 'string' &&
    context.query?.callbackUrl.startsWith(process.env.NEXTAUTH_URL)
      ? context.query?.callbackUrl
      : process.env.NEXTAUTH_URL;
  const redirectURL = encodeURIComponent(host);
  // getting both the csrf form token and (next-auth.csrf-token cookie + next-auth.callback-url cookie)
  const res = await fetch(
    `${process.env.NEXTAUTH_URL}/api/auth/csrf?callbackUrl=${redirectURL}`
  );
  const { csrfToken } = await res.json();
  const headers = res.headers;
  // placing the cookies on the response
  const [csrfCookie, redirectCookie] = headers.get('set-cookie').split(',');
  context.res.setHeader('set-cookie', [csrfCookie, redirectCookie]);
  return csrfToken;
};

export async function getServerSideProps(context) {
  return {
    props: {
      csrfToken: await getCsrfTokenAndSetCookies(context),
    },
  };
}

So finally, my questions :

• Did I miss something in the docs ?
• Is there a cleaner way to achieve the same result without relying on client side JS ?
• If this workaround is useful to some people other than me, could we consider adding getCsrfTokenAndSetCookies to the official NextAuth's API ?

How to reproduce ☕️

Here's a PR to show the fix I implemented : https://github.com/ComicScrip/nextauth-csrf-cookie-issue/pull/1/files

To test :

• checkout the main branch of the repo
• npm i && npm run dev
• visit http://localhost:3000/login directly (don't navigate to that page using the signin button on the homepage)
• try to log in with username: "admin", password: "admin"
• see that it fails.
• clear your browser's cookies
• checkout the "fix-csrf-cookie-custom-login" branch of the repo
• npm run dev
• visit http://localhost:3000/login directly (don't navigate to that page using the signin button on the homepage)
• try to log in with username: "admin", password: "admin"
• see that it works on first attempt

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[choutkamartin]

While I do agree, and I can confirm, that your method works, 👍 I'm curious, why would you want to use a JS framework, and at the same time try to make it work without JavaScript.

[ComicScrip]

While it's true that in practice only a very few users run their browsers with javascript disabled, those users still exist.
Since we have a way to make it work without client side JS, I was thinking it wouldn't cost much to make things even more accessible.
Plus, on the front page of NextAuth, we can see "Doesn't rely on client side JavaScript" 😜

[Agontuk]

For session, there's a method called getServerSession which sets the cookie properly in server side. I think we need a similar getServerCsrfToken method.

[ComicScrip]

I've updated my current implementation to make it work on Vercel :

const getCsrfTokenAndSetCookies = async ({ res, query }) => {
  // to make it work on Vercel
  const baseUrl = process.env.NEXTAUTH_URL || `https://${process.env.VERCEL_URL}`;
  // capturing the callback url if any, which should include the current domain for security ?
  const callbackUrlIsPresent = typeof query?.callbackUrl === 'string';
  const callbackUrlIsValid = callbackUrlIsPresent && query?.callbackUrl.startsWith(baseUrl);
  const host = callbackUrlIsValid ? query?.callbackUrl : baseUrl;
  const redirectURL = encodeURIComponent(host);
  // getting both the csrf form token and (next-auth.csrf-token cookie + next-auth.callback-url cookie)
  const csrfUrl = `${baseUrl}/api/auth/csrf?callbackUrl=${redirectURL}`;
  const csrfResponse = await fetch(csrfUrl);
  const { csrfToken } = await csrfResponse.json();
  const { headers } = csrfResponse;
  // placing the cookies
  const [csrfCookie, redirectCookie] = headers.get('set-cookie').split(',');
  res.setHeader('set-cookie', [csrfCookie, redirectCookie]);
  // placing form csrf token
  return csrfToken;
};

I'm almost sure there is a cleaner way to achieve that if we could integrate a getServerCsrfToken directly to nextauth's API (without having to mess with a network call ?), but I'm quite unfamiliar with nextauth's internals.
Do you have some clues on how to do that in a clean way by any chance ?
I might take some time to do a PR if some folks agree with me that it would be worth it and if I can get some help to start.

[Agontuk]

We can copy the current implementation of getServerSession and tweak a little bit. Here's the source link https://github.com/nextauthjs/next-auth/blob/main/src/next/index.ts#L81

export async function getServerCsrfToken(
  context:
    | GetServerSidePropsContext
    | { req: NextApiRequest; res: NextApiResponse },
  options: NextAuthOptions
): Promise<string | null> {
  const response = await NextAuthHandler<{}>({
    options,
    req: {
      host: detectHost(context.req.headers["x-forwarded-host"]),
      action: "csrf",
      method: "GET",
      cookies: context.req.cookies,
      headers: context.req.headers,
    },
  })

  const { body, cookies } = response

  cookies?.forEach((cookie) => setCookie(context.res, cookie))

  if (body && Object.keys(body).length) return body.csrfToken
  return null
}

I directly copied it & made some changes, so there might be some ts error. But it should work. If you want I can also submit a PR, but it may take a day or two.

[ComicScrip]

I've been really busy latetly, but I finally made a PR for this : #4492