kentcdodds / epic-stack-with-csrf

An example of the Epic Stack with CSRF protection on forms

Epic Stack with CSRF Protection

This is an example of how to integrate the remix-utils package utilities for Cross-Site Request Forgery (CSRF) protection with the Epic Stack. The easiest way to explore the example is to pull up the commit history.

Following the steps laid out in the Remix Utils docs is sufficient for this:

1. Install remix-utils
2. Generate the authenticity token in the root.tsx loader (be certain to commit the session to set the cookie)
3. Wrap the App in the <AuthenticityTokenProvider /> and provide the token
4. Render a Form with the <AuthenticityTokenInput /> component
5. Verify in the Action using verifyAuthenticityToken and the session.

epic-stack-with-csrf's Issues

Doc suggestion: verifyAuthenticityToken cannot be used with request if the request body has been accessed

I've just used this example to add csrf to the site I was working on, and tripped over an issue that the verifyAuthenticityToken function needs to be given the response before the body of it has been accessed.

e.g. this doesn't work (it throws due to the request body "having been used"):

	let session = await getSession(request.headers.get('Cookie'))
	const formData = await request.formData()
	await verifyAuthenticityToken(request, session)

This does work:

	let session = await getSession(request.headers.get('Cookie'))
	await verifyAuthenticityToken(request, session)
	const formData = await request.formData()

This also works

	let session = await getSession(request.headers.get('Cookie'))
	const formData = await request.formData()
	await verifyAuthenticityToken(formData, session)

Since I'd been wanting to wrap the verify in a try/catch and send back the contents of the form data in the catch clause's error, I'd defaulted to using the first way only to be very confused when the catch clause was firing (the error object seemed to be empty as a result of misconfiguring winston, so I wasn't getting any useful information from it). It's an unexpected limitation that is really easy to trip over.

(Thank you so much for your work and examples on the Epic Stack!)