CSRF Setup
Loading "CSRF Protection with Cookies"
Run locally for transcripts
π¨βπΌ We've got to get some things set up with the
remix-utils CSRF utilities
before we can actually start protecting our forms. We'll dive deeper into
cookies in the Web Auth workshop later, but you do
need to set a signed cookie in the user's browser so you can use
Remix's createCookie
to help with that.import { createCookie } from '@remix-run/node'
const cookie = createCookie('csrf', {
path: '/',
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
secrets: process.env.SESSION_SECRET.split(','),
})
You'll notice we're using another environment variable. π¨ You'll need to set
that up like we did with the
HONEYPOT_SECRET earlier.Feel free to read the Remix docs
all about cookies if you want to learn more about these options, but we'll get
to this stuff in more depth in the Web Auth workshop.
π¨ Once you have the cookie object created, you can use that to create a CSRF
utility;
import { CSRF } from 'remix-utils/csrf/server'
// ...
export const csrf = new CSRF({ cookie })
Now, we need to get the user's unique token in our UI for our forms and in the
user's cookie so we can validate it on the server. We'll do that
in . π¨ See you there!
