Wire cookie-based dark mode preference into app using root TSX file and theme module for seamless light-dark theme toggling.

Master cookie-based theme selection, updating UI dynamically for a superior user experience in your web app.

Implementing Cookies for Theme Selection

[00:00] So actually, I'm going to take things a little differently than what I had you do in the exercise, because I want to kind of iteratively get to the point where we have this cookie happening. So we are going to go to our root. We're going to go to the action that's handling this form submission. And I'm going to add a set cookie header right here

[00:18] that says set cookie, and the value is going to be theme equals dark, okay? And if I come over to my network, we clear this out and I click on this, then we're going to get a post request and we get this set cookie header right here, theme equals dark. If I look over here at my application now,

[00:37] I'm going to have a theme is dark, cool. Okay, so what if we just say theme equals submission.value? And it looks like Copilot wants us to be HTTP only and same site lacks. Yeah, sure, let's do all of that as part of our cookie set. So now if I refresh and here, let's clear out the cookies. There we go, we have our CSRF cookie that's always going to show up there

[00:57] because we've got that in our root loader. But now I click on this and we're going to get theme is object. Yeah, that's not what we want. Thanks anyway, Copilot. So the value is going to have a theme property. There we go, let's try that again. So refresh here, theme is dark. Awesome, that's looking pretty good.

[01:17] Okay, so let's go over to our loader then and get the theme from that cookie value. So here we're going to get our cookie header is request. We're going to need that request from the loader. So request, this is data function ARDS and this is going to be request headers get cookie.

[01:36] And ooh, now this is where things get a little bit tricky. Let's console log the cookie header. So we can take a look at what that is doing. We have theme equals dark and then our CSRF thing. So I mean, yeah, we can parse that ourselves. I do not recommend this. We're not going to end with this

[01:56] but we can do a split on the semicolon. And here, yeah, let's say or empty string so that TypeScript's not mad at us. And sure, let's keep going with this, why not? So we've got our const, a theme header or a theme value.

[02:17] And then we'll do a find, yep, where C includes theme. So this is going to be our, yeah, theme cookie. There we go. And then we can say dot split on the equal sign. There we go. And grab the first, yep, there we go. Now that's going to be our theme value.

[02:36] Okay, so then we'll say theme equals theme value. All right, so let's come over here. We'll hit refresh and actually let's log it out so that we can take a look at what that value will be. So coming over to here, actually, heck,

[02:55] let's just do data dot theme. There we go. And this is going to complain because it could be string or undefined. So we'll just say as theme and now everything's happy. Oh my word, look at that. It totally worked. And then we click on this.

[03:11] Oh my goodness, ah, we have a working theme. How cool is that? Okay, so this is not our final form. Like this is not what I want this to actually look like. But I think it is pretty instructive for how all of this stuff works.

[03:28] The idea is you set a cookie value in your action as part of your response. That response comes back to the browser and based on this funny syntax, it parses that out and sets that value according to these rules that we have. So we've got our path and we've got HTTP only, same site lax, all that stuff. And so it just stores it in the cookie

[03:48] and then every request that it makes thereafter, like the request it makes to our loader, is going to have that cookie value. And so we can parse out, doing this terrible thing, we can parse out the value of that cookie and then pass it as our JSON to the client. The benefit of doing it this way

[04:07] and making it HTTP only and all of that is that this will work on the server render. We definitely could in our component, we could say something like document.cookies and all that. And then this isn't really a private cookie or anything. We could totally make this not HTTP only, but by just doing it over HTTP only,

[04:27] it kind of forces us into putting the loading of that cookie in our loader, which runs on the server. And so we get a server render of our theme, which is nice. So you'll notice with this approach, I can hit refresh and it server renders as dark mode. If I take a look at this, we'll find, yeah, it's right there, server rendered as dark mode, which is nice.

[04:46] We don't have a flash of unstyled content. Now again, super duper, this is not what we want to end with. So let's clean all of this up and make sure that the app still works. We're gonna go to our theme.server and we're gonna do all of, like many of the same things that we were doing before,

[05:04] except this time we're going to use a proper cookie module for parsing things for us. So let's come over here and say, get the cookie header from the request. So this is the stuff that we're doing right here, this nonsense, yeah, we're not gonna do that. So starting here, we're gonna say, whoops,

[05:23] our const cookie header equals request headers get cookie. And then we're gonna get, if the cookie header exists, then we want to parse it. Otherwise we don't want to parse it at all. So we'll just say cookie header. If that exists, then we're gonna parse it. Otherwise we'll default to light.

[05:44] That's our fallback for our website. And if the cookie header is null, so basically if it's null, we're gonna return the default, which is light. What we're going to do though, is say if the parsed value, so here, let's call this parsed.

[06:03] And the parsed value is light or the parsed value is dark, then we can return the parsed value. Otherwise we'll return our default of light. And this is complaining because we're getting a object here.

[06:22] So this ends up being an object of the different possible parsed values of the different cookies that we can have. So we actually need to have a cookie name here. So this will be dot theme. What I'm going to do actually is we're gonna say const cookie name equals theme.

[06:42] So that's a particular cookie. We could also do a CSRF, right? Because we've got a CSRF cookie in here. So this is parsing all the cookies. We just want the theme one. And I'm gonna say cookie name right here because we're gonna want to use that same cookie name when we set the theme. So extracting it to a variable kind of helps with that. Okay, let's just stop right there

[07:02] and make sure that it will continue to work if we do this. So we'll say get theme from the request. And that get theme is gonna come from our theme server. Then we can get rid of this nonsense and that and save that. And let's make sure that this is still working. Ta-da, woo-hoo, it's still working, good.

[07:20] All right, so loading the cookie value is working as desired. And also, we could get rid of all of our cookies and make sure that we start on light mode. If I switch it to dark mode and then say let's get rid of all these, refresh, it defaults to light mode. So we're all good. Okay, so setting the theme,

[07:41] that's our stuff that we're doing in the action right here. We're gonna call that function there. We're gonna serialize it so we don't have to manually construct this string anymore. We're just going to serialize it using the cookie module. So this is actually a little bit easier than what we were doing with get theme.

[07:59] We simply return cookie.serialize and we pass the cookie name, which is theme, and then we pass the theme value and then set the path to slash. And that is the only config that we really care to set right now. We could also say HTTP only

[08:16] and various other, same site and secure, all that stuff. We're not gonna get to that right now. We might do some of that later. With a theme, it doesn't actually really need to be private anyway, so it's fine. Okay, so then we can say set theme. That's coming from our utils that we just wrote. And submission value dot theme.

[08:35] Ta-da! And that, that is that. Let's make sure that it still works. Refresh, do, do, do, do, do. It looks so great. You did awesome on this one. Good job, pat yourself on the back. This is sweet. So we've got a fully server renderable theme value,

[08:55] all working within our remix action to set that cookie. And so we're not talking to a database or anything unless you consider the cookie storage to be a database, which yes, maybe sort of a little bit. So we're just, the request is coming in and we're saying, hey, here's your response. It worked. You need to set this cookie value.

[09:14] And then in our loader right here, we're saying, hey, grab that cookie value and convert it into a theme. So if it is a valid theme of part light or dark, then return that valid theme. Otherwise, we'll default to light. And it's awesome. So well done. We're not going to get into actually setting this

[09:34] to be a system theme. That would be an extra credit thing that you can do if you wanna spend a little extra time on it. But we've got a pretty good solid start for this. So well done.

Adding User Preference for Dark Mode

[00:00] So the app already does have the ability to have a dark mode. We just need to control the class and poof, it turns into dark mode. So what you need to do is handle the wiring of the cookie so that we can preserve the user's preference between light and dark mode. And then once we are updating that cookie

[00:20] based on clicking on this, then we should be able to wire that into the class name on the HTML element. So that's what you're gonna be doing in this one. You're gonna be working in the root TSX, but we also have a theme module that you're gonna be working in as well. So get to it and we'll see you when you're done.

Most web applications feature user accounts in one form or another.

To the user, having a login form seems simple enough. But behind the scenes, there's a lot going on. You need to securely store and manage user sessions, handle authentication and authorization, and protect against malicious attacks.

Without knowledge of the underlying concepts, it's easy to make mistakes (even if you decide to use a third party service or library to do all the hard work for you). Weak authentication systems, misconfigured route protection, and flawed session management all lead to vulnerabilities and negative user experiences.

The Authentication Strategies & Implementation workshop is your guide to implementing industry standard user account flows in a modern web application.

Securely managing passwords, enabling two-factor authentication, and integrating with third-party providers are just some of the processes you will practice. You'll also learn how to handle user preferences, session data, and send emails to users. This will take you all the way to the point where you could easily add Single-Sign On (SSO) support–a must if you’re building a business-to-business application.

There are a lot of moving parts to consider, but this workshop will give you the confidence to tackle them all.

## Cookies

The workshop begins by diving into cookies. This fundamental part of web browsing is often misunderstood, but important to understand. We keep it simple to ramp you up slowly on the web’s original state management solution. This also introduces us to important UI patterns you’ll want to use in other areas of web development as well. It’s surprisingly deep! Topics include:

- Storing user theme preferences in a cookie
- Server-side cookie handling
- Using fetchers for non-navigation mutations
- Optimistic UI updating to apply changes immediately

## Session Storage

Storing user preferences in cookies is fine, but you need to be more careful when it comes to session data. It's vital that users with devtools or malicious client-side JavaScript can't access or modify the data inside of cookies. In this section, you'll learn:

- Cookie-based session data persistence
- Properly getting, setting, and updating session data
- Deleting data after reading
- The flash pattern for short-lived messages

## User Sessions

Depending on the amount of data you need to store, it may make sense to use a different storage mechanism for session data. For this workshop we will continue to use cookies, however we will switch to using a dedicated session cookie. This section will teach you:

- Create a session storage object for storing user data
- Transform form submissions into user objects for storage
- Retrieving user information from cookies then the database

## Passwords

Passwords are the most common way to authenticate that a user is who they say they are. Obviously, storing them in plain text is a bad idea, but even encryption isn't enough. You need to properly prepare to securely handle passwords:

- Create a Password model in the database
- Generate secure password hashes with the battle-tested bcrypt algorithm
- Protection against password attacks
- Update signup route to securely create records

## Login & Logout

At this point, you have the ability to create users and store their passwords. But how do you actually log them in? And how do you log them out? In this one we’re also going to learn about imperative mutations which you’ll definitely want to know for other app features. This section will teach you:

- Verify a user's password hash with bcrypt
- Handling optional vs. required user data
- Guard against timing attacks
- Clearing session data on logout
- Handle edge cases like deleted accounts
- Set expiration dates for session cookies
- Implement automatic logout after a set idle time

## Protecting Routes & Role-Based Access

Most web application have routes that you need to be logged in to access. It's one thing to prevent this in the UI, but the real thing you need to do is protect the data that powers those pages. There are also considerations for different user roles and permissions. This section will teach you how to:

- Ensure users only access data they own
- Restrict private pages to logged in users
- Implement smart redirects for login and logout
- Specify and enforce permissions with Role-Based Access Control (RBAC)

## Managed Sessions

Imagine a user logging in on a public computer, who then forgets to log out. This security risk can be mitigated by implementing a session management feature:

- Add a session model to the database
- Update auth utils, login, and logout routes to query sessions
- Refactor for session expiration support
- Create a page for displaying & managing active sessions

## Email Verification & Password Resets

Email is one of the most common ways to verify a user's identity. If a user loses access to their account, needs to reset their password, or wants to change their email address, you'll need to send them an email. While the actual sending of the email is best handled by a third-party service, the process flow behind the scenes is what you'll need to implement:

- Integrate a third-party email API
- Share session data between routes for multi-step flows
- Style HTML emails
- Generate time-based one time passwords (TOTP) for password resets
- Force verification of email address change

## Two-Factor Authentication

Two-factor authentication (2FA) is a great way to add an extra layer of security to your application. It requires the user to enter a code from a second device along with their username and password. Even if an attacker determines a password, they won't be able to access the account without the second factor. In this section, you'll add 2FA to the Epic Notes application:

- Handle the 2FA enable flow
- Provide the user with a QR code
- Implement a 2FA code input form
- Verify the code and log the user in
- Require re-verification
- Provide option to disable 2FA

## Third-Party Authentication

There are several reasons to use third-party authentication providers. It can be a great way to reduce friction for users, or allow easier access to other data. The most common way to do this is with OAuth 2. Once you’re finished with this section, you’ll be geared up to implement third party auth with any provider. Including Single-Sign On (SSO) flows. We’ll be following these steps:

- Add an authentication strategy to enable GitHub login
- Create a connections model to associate users with providers
- Prevent duplicate account connections & hijack attempts
- Pre-fill user account data based on third-party login
- Mocking third party APIs for testing
- Gracefully handle login errors
- Implement smart redirection to return to original page after login

Learn best practices for managing user sessions, passwords, 2FA, email verification, OAuth, and more in the Authentication Strategies & Implementation Workshop!

Authentication Strategies & Implementation

Kent C. Dodds

Full Stack Vol 1

Discover the ins and outs of web authentication, including role-based access control, session management, third-party authentication, 2fa, and more.

Intro to Authentication Strategies & Implementation Workshop

Intro to Authentication Strategies & Implementation

Intro to Cookies

Learn how to properly set and manage the theme preference in a form using Conform and UseFetcher. 

Implement a theme switcher with hidden input, user-based theme, and no page refresh using useFetcher.

Creating a Theme Switcher with Form Submission and Fetcher in React

Implementing Theme Switching with Conform and UseFetcher

Optimize UI for theme switching: Instantly update UI on theme switch, improving user experience by eliminating network delay.






Leverage useTheme hook for optimistic theme changes: Extract data from fetchers, manage fallbacks, and simplify with Remix for seamless UI updates.






Implementing Optimistic UI with Remix

Implementing Optimistic UI for Theme Switching

Discover the value of taking breaks to refresh and solidify information in your brain during your learning journey. Don't underestimate the power of a short break to enhance your learning experience.

Dad Joke Break Cookies

Cookies

Intro to Session Storage

Utilize cookies for dynamic toast messages in your web app: Set and read cookie values to display informative alerts and success notifications to users.






Set up secure cookie session storage for toast messages in server-side code: Configure, sign, and rotate with step-by-step guidance.










Configuring Cookie Session Storage for Toast Messages

Toast Messages with Cookies

Implement Toast messages for user feedback during delete actions: Set up frontend and backend components for seamless notification display.

Utilize cookie sessions for dynamic toast messages: Read, set cookies, serialize objects, and manage toasts via session storage, independent of global state.

Managing Toast Messages with Cookie Sessions

Adding Toast Notifications to Delete Functionality 

Efficiently delete notes, set multiple cookies using utility, eliminate persistent toast for a smoother user experience.






Sync browser-server state efficiently: Unset and serialize cookie properties, optimize performance, and enhance user experience with header management insights.

Efficiently Updating and Serializing Cookies 

Improving Note Deletion Functionality with Multiple Cookies

Use "flash and get" for temp notifications like toasts, skip needless unsets, and embrace session management's flashes.

Use Flash API to auto-remove toast messages on the next get call, maintaining clean code and up-to-date cookie storage.






Efficiently Removing Toast Messages with Flash API

Implementing Flash Messages for Temporary Notifications

Dad Joke Break Session Storage

Session Storage

Intro to User Sessions

Securely manage user login info with separate session cookies, similar to Toast messages in session storage. Gain valuable insights for effective handling.

Set up secure session storage for user info in cookies with RemixRunNode. Configure for enhanced security and protection against unauthorized access.

Secure Cookie Session Storage 

Managing User Sessions with Separate Cookies

Learn how to authenticate users, set session values, and create cookies for user identification and access control.

Learn how to create a secure login process using form data, user validation, and session storage, including error handling and user authentication.

User Authentication and Session Management with Login Forms

User Authentication and Session Management

Resolve user IDs to display avatars for a personalized logged-in experience. Refresh the page to see avatars appear dynamically.

Implement user auth and session management with Prisma, TypeScript, and session storage, including retrieving user data from cookies for UI integration.

Handling User Authentication and Session Management with Prisma

Load User Avatars

Dad Joke Break User Sessions

User Sessions

Intro to Password

Learn how to add a one-to-one password model in Prisma schema with optional fields, understanding the unique constraints and implications for database design.

Learn how to create one-to-one relationships in Prisma database schema and handle password security by separating password hash in a separate model.

Model Relationships and Handling Passwords in Database Schema

Creating an Optional Password Model in Prisma Schema

Update seed script to generate secure passwords for user accounts, ensuring all users have passwords and enhancing app security.

Utilize bcrypt to generate secure password hashes, integrate them into seed scripts, and bolster your test suite.

Secure Password Creation with Prisma

Generating Passwords for Secure User Creation

Learn how to integrate password creation functionality into an existing user creation process, allowing for a seamless onboarding experience.

Securely create and hash passwords during user sign-up with bcrypt.js for data integrity and improved Node.js app performance.

Creating and Hashing Passwords for User Sign-Up

Enhancing User Creation by Adding Passwords

Dad Joke Break Password

Password

Verify passwords with bcrypt, UI for authenticated users, and hooks to prevent timing attacks. 

Intro to Login

Learn how to compare hashed passwords for secure authentication using bcrypt compare in a Node.js application.

Learn how to securely verify passwords during the user login process, ensuring that the password hash matches and avoiding potential security risks. 

Implementing Secure Password Verification in User Login

Secure Password Authentication with bcrypt Compare in Node.js

Create utility functions to selectively hide new note, delete, and edit buttons on user profiles to ensure they are only visible on the user's own profile.

Learn how to use utility functions to handle user data and create dynamic UI elements based on authentication status and user roles. 

Leveraging Utility Functions for User Data Handling and UI Customization

Securing UI Elements

Dad Joke Break Login

Login

Make logout button functional, auto-logout after time, explore 'expires' cookie property, handle deleted user accounts.

Intro to Logout

Enhance web app security by converting logout link to a secure POST request instead of GET.

Implement secure logout with session storage, protect against CSRF attacks, post logout request, destroy session cookie, ensure user experience.

Logout Functionality with Session Storage and CSRF Protection

Transforming a Logout Link into a Secure Logout Form

Set session cookie expiration with 'Remember Me' checkbox, configure/update expiration for flexible session persistence without compromising security.

Configure session expiration with 'Remember Me' checkbox, enable users to stay logged in, and refresh cookie expiration for active sessions.

Implementing Remember Me Functionality

Implementing Remember Me Functionality for Login Sessions

Discover techniques to detect and destroy invalid sessions, preventing unnecessary database requests.

Learn how to handle sessions without user IDs, destroy sessions, and handle weird states to ensure proper functioning of your web application.

Destroying Sessions and Handling Weird States

Managing Inactive User Sessions

Create an inactivity logout modal for web apps, explore use cases, detection methods, and customization for a seamless experience.

Auto-logout users after inactivity in a web app. Set up logout timer, detect user activity, use imperative submissions for efficient session control.

Auto-Logout Functionality

Implementing Automatic Logout with Modals

Step away and engage in physical activity to recharge your brain and enhance your learning experience. Return revitalized and ready to absorb more knowledge.

Dad Joke Break Logout

Logout

Secure routes with access control, authenticate, authorize users, and enforce data restrictions for app safety.

Intro to Protecting Routes

Create protected routes to restrict logged-in users and auto-redirect them to the homepage.

Centralize auth logic, use requireAnonymous function for login/signup routes, ensure proper redirection.

Creating an Auth Utility 

Creating Protected Routes 

Craft dynamic profile page: edit details, change pic, download data, delete, auth, error handling.

Protect routes/actions with requireUserId to limit access to authenticated users, ensuring data security.

User Authentication and Authorization

Building a Profile Page 

Authenticate and authorize users for secure note access and actions, enforcing ownership verification.

Secure your app with user auth and authorization. Protect routes, handle user IDs, enhance security.

Authorization and User Authentication

Securing User Access 

Improve UX with post-auth redirection, taking users back to their original location for efficiency.

Secure user auth redirects with optional URLs to protect sensitive info.

Handling Redirects Safely in User Authentication

Redirect Functionality 

Take a moment to enjoy a dad joke, take a break, and come back recharged for the remaining content. Refreshments and high fives optional!

Dad Joke Break Protecting Routes

Protecting Routes

RBAC simplifies permissions, secures actions, enables granular control, attaches permissions to roles, and enhances app security and scalability. 

Intro to Permissions

Establish role-based access control with Prisma's many-to-many relationships for users, roles, and permissions.

Design Prisma models for permissions, roles, and data integrity with many-to-many relationships.

Modeling Permissions and Roles in Prisma Database

Role-Based Access Control with Prisma

Seed roles and permissions, assign to new users, optimize seeding for local and production environments.

Update seed script: delete, create, connect roles, permissions, and generate permissions dynamically for cleaner code. 

Seed Data

Managing Roles and Permissions

Implement user permissions, distinguish admin from regular users, handle user-specific actions, and automate permission checks for robust app development.

Implement role-based permissions for note deletion, hide unauthorized delete options for a seamless user experience.

Implementing Role-Based Permissions

Implementing User Permissions and Authorization Logic

Implement user permissions to secure admin pages and optimize queries with utility functions and loaders.

Implement role-based access control, create permission checks, secure backend actions, and manage UI permissions for app security.

Implementing Role-based Access Control and Permissions

Securing Admin Pages with User Permissions

Breaks enhance learning, prevent brain overload, and improve retention. Incorporate them for a better study experience.

Dad Joke Break Permissions

Permissions

Implement simultaneous sign-out across sessions with managed sessions and database updates for proactive session deletion.

Intro to Managed Sessions

Store user session data in the database, update download feature, and explore seeding session limitations.

Create session model, manage expiration, relate to user ID, and enhance login process for efficient, secure DB  

Integrating User Sessions into the Login Process

Managing User Sessions and Allowing Data Downloads

Move from user ID to session-based auth, update AuthServer to resolve session IDs to user IDs for login/signup.

Enhance authentication with session IDs, rename variables, manage sessions for login/signup, and handle session deletion with error resilience.

Authentication Logic with Session IDs and User Creation

Implementing Session-Based Authentication

Switch to session-based auth, update routes, auth server, and rename user ID to session ID for security

Refactor login/signup to use session-based auth, update variables, queries, and validate sessions for security, performance. 

Updating Login and Signup Routes to Use Sessions instead of User IDs

Improving Login and Signup Flows with Session Management

Learn how to implement a button that allows users to delete multiple sessions, ensuring proactive logout and improved security.

 Explore techniques for session deletion and session ID verification to enhance user control and privacy.

Managing Sessions and Sign Out in Web Applications

Proactive Session Management

Take a well-deserved break, engage in activities you enjoy, like playing video games or reading a book, before diving back into the course content with renewed energy.

Dad Joke Break Man Sessions

Managed Sessions

Mock email sending in development, use Resend for production, leverage React Email components, and pass data for efficient email workflow.

Intro to Email

Set up email API keys, manage environment variables, create send email function, and use mocks for dev.   

Configure env variable, set up email server, make fetch calls with Resend API, handle errors, mock for local dev.

Sending Emails with the Resend API using Fetch

Integrating Email Services 

Use MSW to create mock API handlers for development and testing, saving costs and improving performance.

Setting Up a Mock Server with MSW Node

Mocking APIs with MSW and Testing

Integrate email verification in sign-up, log email content for testing, enhance onboarding process. 

Implement email verification with custom content, utility functions, user ownership check, and onboarding redirection.

User Verification Emails

Email Verification Flow

Safely pass user emails between signup and onboarding using cookies for verification and security. 

Safely pass data between routes with session storage and cookies for seamless web app data persistence.

Passing Data Between Routes

Secure Email Transfer and Storage with Cookies for Onboarding

Discover the importance of taking regular breaks to optimize brain function and overall well-being. Learn how simple physical activity can boost blood flow and enhance productivity in your coding journey.

Dad Joke Break Email

Email

Implement secure email ownership verification with time-based OTPs, rate limiting, and use cases for 2FA and account recovery.

Intro to Verification

Learn how to create a database model for storing verification information and generate one-time password data for secure authentication processes.

Build Prisma verification model for secure OTPs, expiration, unique constraints, target/type lookup, robust verification.

Creating a Verification Model in Prisma for User Verification

Implementing One-Time Password Verification with Database Storage

Implement a user verification workflow by generating URLs with pre-filled parameters, such as target, redirect, and creating database verification entries.

Learn how to generate secure one-time passwords for user verification in a signup flow. 

Authentication Strategies & Implementation

Authentication Strategies & Implementation

Transcript

Adding User Preference for Dark Mode

Transcript