Cookie Session Storage
Loading "Toast Messages with Cookies"
Run locally for transcripts
π¨βπΌ We're not talking about
window.sessionStorage here. We're talking about
storing information about the current session. For this feature, we want to be
able to show the user a toast notification when they delete a note. And we'll
want our solution to be generic enough to use for other notifications in the
future.We could definitely use one of many React libraries to accomplish this, but
we're going to go OG with the web and use cookies. The idea is in our
action
for the deletion, we'll set a cookie that has the message we want to show. And
then the root loader will read that cookie and send the data along to the
UI where we'll display the toast notification.π§ββοΈ I've already implemented the UI bit for the toast notifications so you can
focus on the session storage bit. Feel free
to check out my work if you'd
like to see what that involved.
π¨βπΌ Based on our requirements, we'll use Remix's
createCookieSessionStorage API
to create a session storage object that we can use to store and retrieve the
toast information.π¨ Configure the cookie option with the following properties:
name:'en_toast'- this is the name of the cookie that will be created and should be unique relative to other cookies on your domain ("en" is short for "Epic Notes").sameSite:'lax'- The cookie is sent with "safe" HTTP methods (likeGET), and only when the request originates from the same site or when the user navigates to the URL from an external site, such as by following a link. This is a balance between security and usability, preventing the cookie from being sent with cross-site POST requests (which are often used in cross-site request forgery attacks), but still allowing the user to access content via regular navigation.path:'/'- The cookie is sent for all requests on the domain.httpOnly:true- The cookie is not accessible via JavaScript. This is important for security because it prevents cross-site scripting attacks from accessing the cookie.secrets:process.env.SESSION_SECRET.split(',')- This is an array of secrets that will be used to sign the cookie. This is important for security because it prevents the cookie from being tampered with. It's an array so you can rotate their values over time. We are using an environment variable for the secret. So you'll need to add that to the file. Once you have that set, you can update so you have type-safe access to that environment variable.secure:process.env.NODE_ENV === 'production'- The cookie is only sent over HTTPS. This is important for security because it prevents the cookie from being sent over an insecure connection. We only want to do this in production because while some browsers are fine ignoring this onlocalhost, Safari does not.
With that, you can add this to export all the bits of the sessionStorage so we
can use them throughout the app:
export const toastSessionStorage = createCookieSessionStorage({
// ...
})
There's no straightforward way to test that you've got this done correctly until the
next step, so you may check the diff to
make sure you got it right before moving on.