Cookie Session Storage

πŸ‘¨β€πŸ’Ό 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.
🐨 Please to initialize this session storage object.
🐨 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 (like GET), 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 on localhost, 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.

Access Denied

You must login or register for the workshop to view the diff.

Check out this video to see how the diff tab works.