CSRF with Remix v2 and remix-utils 7

[rjaguilar]

I didn't see any deprecation notices or any release notes regarding missing the following helper utilities:

createAuthenticityToken()
verifyAuthenticityToken()

Was this on purpose or accident?

I did go over the new docs and I haven't been able to get this new CSRF implementation to work. When calling csrf.validate() I always end up with an object.

here's my current setup

// root.tsx

export const loader = async ({ request }: LoaderFunctionArgs) => {
const session = await getSession(request.headers.get('Cookie'));
const csrfToken = csrf.generate();
session.set('csrf', csrfToken);

return json(
    {
      csrf: csrfToken,
     },
     { headers: { 'set-cookie':  await commitSession(session) }}
}

// csrf.server

import { CSRFError } from "remix-utils/csrf/server";
import { redirectBack } from "remix-utils/redirect-back";
import { csrf } from "~/utils/csrf.server";

export async function action({ request }: ActionArgs) {
	try {
		await csrf.validate(request);
	} catch (error) {
		if (error instanceof CSRFError) {
			// handle CSRF errors
		}
		// handle other possible errors
	}

	// here you know the request is valid
	return redirectBack(request, { fallback: "/fallback" });
}

The internal parseCookie() function within validate() seems to return an object, of which I can see the csrf token, which matches the csrf token from AuthenticityTokenInput. But since it's an object it always gets caught within validate:

if (typeof cookie !== "string") {
            throw new CSRFError("invalid_token_in_cookie", "Invalid CSRF token in cookie.");
        }

am I missing something?

[sergiodxa]

The release notes mentioned a new cookie-based CSRF tokenYou shouldn't set the CSRF token in the session, save it in a separate cookie, if you use the same cookie for CSRF and the session it will fail because the session is stored as an object and the CSRF expects the cookie to be a string.

[romuloa]

Hmm ok. Thanks for the insight! If using this in tandem with remix-auth are their any other gotchas we should be aware of?

[sergiodxa]

There's nothing special since Remix Auth uses a session storage and CSRF uses a different cookie.

[rjaguilar]

In root, how do you now go about setting multiple 'set-cookies' into the headers now? - 1 for auth and 1 for csrf in the return response. In the previous implementation didn't need to do this. I've tried:

const session = await getSession(request.headers.get('Cookie'));
const [csrfToken, csrfHeader] = await csrf.commitToken(request);  
const headers = new Headers();

headers.append('set-cookie', await commitSession(session));

  if (csrfHeader) { // Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.
    headers.append('set-cookie', csrfHeader);
  }
  
  
  return json(
    {
      csrf: csrfToken,
     // other properties
    },
    {
      headers,
    },
 

but no luck.

[sergiodxa]

This should work. Try to open a different issue if it doesn’t and provide a repo where to replicate it.

[rjaguilar]

ok. maybe I'm encountering a different issue with my remix and remix-utils upgrade. I'll post back if I find something out. Thanks for your help and awesome library!

[JClackett]

@sergiodxa occasionally I am getting csrf validation errors: CSRFError: Can't verify CSRF token authenticity

{ code: 'mismatched_token' }

I am deployed on vercel and am thinking this is happening after a new deployment but the user still has the "old" version still in the browser, can you think of why this would be happening? I would have thought it was signed with the same secret key and so should still be valid?

[sergiodxa]

It means the user has sent a different token on the FormData than the one in the cookie, it could be happening if you either sent the token only once to the UI or you didn't overwrote the token in the cookie.

[JClackett]

well I send it in the root like you suggested, store in a cookie, pass that into the auth provider, use that in the forms, validate on the backend. why would the token be mismatched other than the signature is not the same between deploys or something?

[sergiodxa]

I never saw it happening myself, but as you can see here

remix-utils/src/server/csrf.ts

Lines 151 to 159 in 703aeb3

	// if the body csrf token doesn't match the session csrf token, throw an
	// error
	if (formData.get(this.formDataKey) !== cookie) {
	throw new CSRFError(
	"mismatched_token",
	"Can't verify CSRF token authenticity.",
	);
	}
	}

that error can only happen if there's a token in both the cookie and FormData but they don't match.

I would try to check if the cookie may not be being saved on the browser.

[JClackett]

It's definitely being saved and I'm pretty sure it's due to new deployments on vercel, if I refresh on my site to get a new cookie, then deploy a new version, then call an action, I get the "mismatched_token" error. But I have no idea why that would cause the tokens to mismatch, will keep investigating.