CSRF Verification

Loading "Authenticity with Token Protection"

👨‍💼 First we're going to need to update our root component to include the CSRF token in context using the remix-utils AuthenticityTokenProvider component.

import { AuthenticityTokenProvider } from 'remix-utils/csrf/react'

// ...

return (
	<AuthenticityTokenProvider token={data.csrfToken}>
		<App />
	</AuthenticityTokenProvider>
)

From there, all our forms just need a <AuthenticityTokenInput /> component from remix-utils/csrf/react in the UI, and then we can validate the csrf in our actions and we'll be in business:

import { CSRFError } from 'remix-utils/csrf/server' // <-- for the extra credit...
import { csrf } from '#app/utils/csrf.server.ts'

// ...

await csrf.validate(formData, request.headers)

07. Cross-Site Request Forgery/02. CSRF Verification (💪 problem)

CSRF Verification