CSRF Verification
Loading "Authenticity with Token Protection"
Run locally for transcripts
π¨βπΌ 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)