Securely verify user codes using database queries, Epic Web TOTP, dedicated route, and efficient error handling.

Implement a dynamic and robust verification process, handle query parameters, data validation, and enhance user experience.

Verification Flow and Dynamic Query Parameters

[00:00] Let's go over to the verify route and right up here we're going to add the type because we do set the type in our query params up here but we don't actually render the type and we could just hard code it as onboarding but we know that we're going to be having other verification types. We're

[00:16] going to add two-factor authentication and stuff like that. So we're going to add a type query param here. Export const type query param. This is going to be the type and then we're going to need

[00:29] a schema for validating that the type is valid and so right now we only have one valid type but we'll have more in the future. So we're going to say types is onboarding and we'll say this is

[00:43] as const. That way it literally is an array that has this string onboarding. That's all and from that we can create our verification type schema which will be a z enum of those types and we can

[01:00] also in the future we can like export the type of that schema and we'll be doing that but Kelly will handle that for us and that will be useful in the future you'll see. Okay great and then we're going to add the type query param to the schema and so that's going to be our verification type

[01:17] schema and so now we're going to actually verify that that is submitted as well so we have the access to that when we're grabbing the verification from the database. Okay great so let's go down to our UI actually and make sure that that gets submitted properly. So we're going to add the

[01:33] type query param here and then we can add a hidden input for the type as well. Input and let's see Copilot's got that yeah now we're talking. So we have just using conform the regular stuff that

[01:50] we've done before. Okay great so with that all out of the way we have this validate request. This validate request is actually called inside the loader and in the action and that's why we have it as like a separate thing because when the user clicks on the link they will show up on this page

[02:05] and they'll have the url search param set and we'll have the type and the target and the verification and so we can verify it right away for them rather than just filling it in and requiring them to press submit. Now I'm going to add a little caveat to this and that is that there

[02:19] are some email clients that will actually hit the email or the links that are inside of emails for spam detection and stuff like that. So because we're going to delete our verification after we've

[02:34] verified things then the one we're verifying is actually the who like whatever robot is checking for spam and so when the user clicks on it that verification will get deleted and it's gone forever.

[02:47] So this is definitely a trade-off that you might consider doing something in the future where you say we're not going to actually validate the request we'll just pre-fill it and so like to do that you'd literally just say pre-fill with all of the data that they have available to them

[03:05] and then require them to hit submit. So there are just some cases where you might consider doing something like that instead but in our case we're going to validate the request in both the loader and the action and now we're going to actually go and retrieve the verification. So let's get our

[03:21] verification is await prisma dot verification find unique and let's bring in prisma from there there we go and our where clause it's going to say the it's actually I think it's the target type

[03:37] there we go and the the target is going to come from the data and the type is going to come from the data also but this is going to be the type query param so that's going to be the value of that and actually we I like to do things this way target query param that way we keep these things

[03:57] in sync and in fact to make this even better let's go to sign up and we'll come over here and update these to use those as well that's why we're exporting them type query param and our target query oh actually no we don't want to set that we want to set this there we go type query param

[04:15] and this should be the target query param and then we have our code query param there we go okay cool so that way like I want to get rid of as many of these magic strings as we possibly can so

[04:31] there we go with that and then our where clause is actually not complete because I also want to verify that we aren't getting a verification that's expired so we're going to add an or clause here to say that it's it either shouldn't have an expiration at at all

[04:50] or it should have an expiration that is less than the current date so we're going to say the expires at should be greater than the current date or it should be null it should be one of whoops it should be one of those two things so we've got our verification and then there we go

[05:12] now we just have to add an issue if there is no verification so if there's not a verification then we're going to do actually pretty much the same thing as this below here so we've got a context at issue on the code it's a custom type of issue and the message is invalid code

[05:32] then we're going to return z.never which will make sure that our types are all happy and all good okay great and then finally we're going to use the verify code util from epic web totp and

[05:46] that is not auto importing for some weird reason so we're going to import that from totp there it is right there okay and let's see maybe I spelled it wrong verify totp there it is okay so it's

[06:01] verify totp and it takes the one-time password as well as all the verification arguments so we're going to say otp is going to come from our data code query param and then the rest of this

[06:17] is going to come from our verification and with that we'll know whether the code is valid and if it's not then we'll send an error otherwise we're good to proceed and so in that case we'll handle our errors and whatever right here and then we can proceed as if everything is good

[06:35] which of course it will be because we are only submitting good errors so we're going to get our we're going to call this the submission value from our submission and then we're going to delete the verification so await prisma verification delete and our where clause

[06:54] it's going to have the target from those values there we go and so now that verification will be gone from our database freeing ourselves up from potential issues in the future just having an

[07:09] ever-growing database of stuff that is unnecessary and yeah then we're going to do the same thing that we were doing in signup before we verified the url or the user their email now we're going to do that over here so i just gave that to you in here or cody gave that to us because um yeah

[07:26] we don't you already did that so we're just copying this over from our signup stuff and we have our onboarding session key and then our redirect right here so we're setting the onboarding

[07:38] email session to the value that submission value that we have and redirecting the user to onboarding so that we're basically transferring this data from this page to the onboarding page and that

[07:55] um that is that and what's cool about this is that now the way that we have this structured there's no way for a user to get the onboarding email session uh the onboarding email set into their cookie unless they've gone through the verification process and so once the verify

[08:14] session has this value in there we can be totally confident that the user has verified this email address which i think is pretty rad so let's try this out we're going to say hannah at example.com

[08:27] and there we go let's come over to our output right here and this is to hannah at example.com here's our code so we could copy this and paste it right in there and that would work or i can

[08:41] copy this and paste it right here and boom that takes me straight into the onboarding flow and if i were to actually since i'm still here if i were to try to submit this code now this will not work

[08:54] because that verification has been deleted at this point so invalid code but i do still have that onboarding email in my session and so i can't continue to onboard until that expires of course so our onboarding process is all set we can actually verify the user is who they say they are

[09:15] and now what we have is created this thing that we can actually use for doing all sorts of different kinds of verifications so what kelly the co-worker is going to do to this file is just fill it with a a bunch of nice pieces of abstraction that will make it easier for us to use this

[09:34] same stuff for verifying other things like two-factor auth for example so let's quickly review and then i'll let you go um to go take a break so what we did here was we added a type

[09:49] query param we added some verification on that type so we put that in our verify schema and then down in our ui we included that in our default value and added that to our hidden inputs

[10:04] so that would get submitted from the url search params the user will never have to enter that those values and then in our validate request we got the verification from the database making sure

[10:17] that it's not expired and we're grabbing the values for target and type from the submission so we're going to get whatever whatever they entered as their code that doesn't matter we're going to get this from the url search params the target that we're verifying so the user's email

[10:36] and then the type which in our case is onboarding and all that stuff is available in the search params right here there's nothing secret about that that's that's fine so we're grabbing that information right there to get our verification if that doesn't exist which is the case when i submitted this then we're going to send back an error that says hey invalid code we're not going

[10:54] to give them a ton of information just enough to say hey you got to try that again and then we're going to try and verify the one-time password the time-based one-time password with verify totp and if that code is valid oh and we're going to pass in the verification stuff that we got from the data database that that's why we stored it in the database in the first place

[11:14] and then we're going to take the data that they submitted which will include the code so that code right there and that will be the one-time password we're trying to verify if it is valid or if it's not valid then we'll return an error if it is valid then we're good to

[11:29] proceed so we come down here we grab the submission value we delete that verification from the database and then we do the same thing that we were doing in in our sign up before we did all of this actual verification stuff which is to grab the verify session set the onboarding email

[11:48] session and then redirect to onboarding and then onboarding can use that in its stuff right here so here first it has this require onboarding email that we did earlier and that from that we can

[12:04] actually create the user information so we do the signup process with that email now the user doesn't even have to enter their email in the onboarding flow because that's stored in their cookie after being verified so there that is the verification flow great work

Implementing User Code Verification with TOTP

[00:00] All right, it's time to actually implement this thing. So what we're going to be doing in this step of the exercise is we need to grab the code that the user has submitted in addition to all of the other data that we have in the URL

[00:14] search params to actually verify that the user is submitting the proper code. So we're going to have to look in the database for the target and type combo and then verify the one-time password that they submitted based on that config.

[00:32] And so you're going to be looking in the database and then calling the verify TOTP from Epic Web Dev, from the Epic Web TOTP package. And then if it's invalid, you need to send an error back. And if it is valid, then we'll go ahead and proceed and we'll delete the verification from the database.

[00:52] And we're actually taking all the verify cookie stuff that we were doing before in a sign-up page and we're moving it over to this verify route. So that stuff will be provided for you since you already did that. And so that's what we're going to be doing in this exercise. Have a good time.

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

Developers working on modern web applications today face a myriad of challenges.

The apps we build are expected to be good looking, fast, and secure. They need to be interactive, responsive, and accessible. They need to be SEO-friendly, and they need to be resilient to errors.

In order to be successful, you need to ensure you have a solid foundation to build on.

Full Stack Foundations is a comprehensive, in-depth workshop that sets the stage for the rest of the Epic Web series. It's designed to equip you with the current best practices for handling CSS, routing, data loading, and more.

This isn't some basic "intro" workshop! Even if you're an experienced developer, you'll learn new skills and techniques that will help you build better apps.

<Testimonial author={{name: "Gwen Shapira"}}>

It was 🤯. A lot of fun, and I learned so much in one day. Even with 23 years as a software engineer, I have a much clearer understanding of how the web actually works. Now, months after this workshop, I’m working on a web project and this gave me the mental framework I needed to quickly ramp up and feel competent. I’m not even using the same tools Kent uses in the workshops! 13/10.

</Testimonial>

## Styling

In recent years, CSS has seen a lot of evolution in its usage and tooling. There are new best practices for importing stylesheets, managing assets, and optimizing styles. Failing to follow them can lead to slow-loading pages and a maintenance nightmare.

Here, you'll learn how to handle styling right:

- Loading external stylesheets & other resources
- Managing assets with fingerprinting and caching
- Compilation with PostCSS and Tailwind CSS
- Bundling CSS for libraries and components

## Routing

The URL is critical for the web, and is closely tied to your application's routing. Making suboptimal decisions affects loading performance, navigation, and overall experience.

This section is a deep dive into routing, from the basic filesystem structure through nested routes and dynamic parameters:

- Conventions for signifying routes
- Layout and URL nesting
- Navigation and linking
- Dynamic route params
- Resource routes

## Data Loading

The web is all about data, and nothing frustrates users more than when loading is slow or broken. This section introduces you to AJAX/fetch and Remix loading features, giving you the tools to build stable, fast-loading applications:

- Working with `Request` and `Response` objects
- Fetching data for initial and subsequent loads
- Accessing environment variables
- Connecting routes to loaders

## Mutations

Interactivity makes apps engaging, but also introduces complexity. You need to ensure that the thing that happens when a form is submitted is what the user expects. Here you will use form methods and actions to mutate existing data in a mock database:

- Creating forms with `method` and `action`
- Storing and extracting form data
- Handling invalid submissions
- Form state management
- Specifying intent

*This module sets the stage for the complete Professional Web Forms workshop.*

## Scripting

The browser is capable of quite a lot on its own. Up until this point of the workshop, the Epic Notes application will work without any JavaScript. However, scripting allows us to enhance the user experience in ways that would otherwise be impossible.

In this section, you'll incrementally add in features like client-side pending UI, prefetching, and optimistic updates:

- Scroll position restoration
- Considerations when overriding default browser functionality
- Server and client bundles & entry files
- Preloading data & code for anticipated actions
- Transitions with the `useNavigation` hook

## Search Engine Optimization

Ignoring SEO is like building a store without a sign— people simply won't find you. If you want to be successful, your site needs to be discoverable and optimized for presentation on those platforms.

SEO is a very broad topic, but this section will get you set up on the technical side of the equation:

- Essential tags and attributes
- Overriding default metadata for specific pages
- Dynamically set metadata for social sharing
- Reusing parent data for nested routes

## Error Handling

Even the best apps can break, but what separates the good from the great is how they recover. Lack of proper error handling can lead to frustrated users and lost business.

This section will teach you how to anticipate, handle, and recover from errors, making your application resilient and user-friendly.

- HTTP status codes
- Using `ErrorBoundary` components to contain errors
- Handle thrown errors when fetching data
- Error bubbling from child routes to parent routes
- Implement useful 404 pages

Full Stack Foundations

Forms are the primary mechanism for interactivity on the web.

But for all of their importance, forms can be incredibly frustrating for developers and users alike.

There are a lot of moving parts to consider: 

You need to validate user input and handle complex data structures, while being secure from bots and data-stealing attacks. The UI should inform users of any issues as quickly as possible, and be accessible for all.

The Professional Web Forms Workshop will equip you with the tools to handle all of these challenges and more.

## Form Validation

HTML has several attributes built-in that help with form element validation. Unfortunately, they're not enough on their own. On the client-side, bad actors can bypass checks by manually adding the `novalidate` attribute or making requests directly. On the server side, there's no standard way to respond to validation errors other than a generic 400 status code.

In this section, you'll implement a base level of form validation:

- Essential HTML attributes for validation
- Server-side validation with JSON responses
- Displaying errors with the `useActionData` hook
- Disabling default browser validation messages with `useHydrated`

## Accessibility

Accessibility is often an afterthought, but should be a priority. While forms are just one part of the accessibility equation, they're a big one. In this section, you'll learn how to make sure your forms accessible and usable by all of your application's users:

- Properly associating labels with input fields
- Adding appropriate ARIA attributes when necessary
- Manage keyboard focus in response to errors and user interactions
- Creating and using a `useFocus` hook to direct the user’s focus
- Considerations for accessibility testing

## Schema-Based Validation

Manually writing conditional checks for every field in every form is tedious and error-prone: *Is there content in the field? Is it the right type? Is it within the acceptable range? There must be a better way!*

Fortunately, the combination of the Zod and Conform libraries makes it easy to define reusable declarative schemas to validate form data on the client and server:

- Safely replace HTML validation attributes with schemas
- Zod error handling & message customization
- Progressively enhanced validation with Conform
- Share type-safe validation logic between client and server

## File Uploads

Forms need to support more than just text. Images, videos, audio files, and other documents need a different type of input. Depending on the size of the file, you'll have considerations for how and where it is uploaded. In this section, you'll learn how to handle file uploads in a secure and efficient way:

- Uploading images from an `ImageChooser` component
- Handling file uploads on the server
- Schema validation for file uploads with Zod

## Complex Data Structures

The `FormData` API does not support representing objects or arrays– only key/value pairs. It also won't allow you to nest forms within each other. This makes representing complex data structures difficult without jumping through some hoops. Luckily for us, Conform has a great solution when your forms get complex. Here you'll practice:

- Infer field types with Zod
- Nesting objects as a form
- Represent arrays of fields with the `useFieldList` utility
- Add and remove items with Conform's `intent` buttons

## Spam Prevention with Honeypots

Spam bots are constantly crawling the web, looking for forms to submit junk data to boost their client’s search engine rankings and find holes in your security. This can strain server resources, contaminate databases, and cause other unforeseen consequences. One way to combat this is by using a "honeypot", which will prevent a form from being submitted by a bot. This section will teach you how to:

- Create a simple hidden-field validation
- Add a configurable honeypot instance to an action
- Prevent form submissions that are too fast
- Use environment variables for encryption seeds

## CSRF Protection

Cross-Site Request Forgery (CSRF) attacks are a type of malicious exploit where a user is tricked into performing an action they did not intend to. This is usually done by embedding a link or form in a page that the user is already authenticated to. Think of a user logged into their bank account clicking a link that transfers money from their bank account to the attacker's. To prevent this type of attack, you'll want to:

- Create a signed cookie in the user's browser
- Include unique user tokens in forms
- Validate tokens on the server via request headers

## Rate Limiting

You definitely want to prevent bad actors from making tons of requests to try to brute-force their way into your app or cause general chaos. However, malicious intent and spam aren't the only reasons you need to protect your site. Even too many legitimate requests can cause problems. Rate limiting is a way to prevent users from overloading your server with requests. Here you'll learn:

- Considerations for different limits for `GET` vs. `POST` requests
- Implementing basic rate limiting with Express middleware
- Tiered rate limiting depending on which form is being submitted

Professional Web Forms

Data modeling is as a critical skill for the full stack developer. After all, data is the foundation of your application.

If you don't do it right, you'll find yourself stuck before you even get started. A poorly designed database schema can lead to a lot of headaches down the road when you need to make changes or add new features. Inefficient queries can slow down your application, leading to a poor user experience. Analyzing root causes to issues like these can be a time-consuming and frustrating process.

Web developers spend a ton of time into making their UI handle a slow backend well which is great and you should do that too (you don’t control network latency after all). But *****great***** web developers put effort into making it so their users hardly ever experience that great pending UI by making the backend as fast as possible. Your UI can’t be any faster than your slowest database query.

The Data Modeling Deep Dive Workshop will help you develop a keen understanding of databases and how to manage them. You'll learn the same tools and techniques used at the top tech companies to design robust database architectures and optimize query performance.

We'll be using production grade tools like Prisma and SQLite, but the concepts you learn in this workshop will be applicable to other database systems as well.

## Database Schema

A well-designed database schema is the foundation of your application. It's critical to get it right from the start, as it can be difficult to make changes down the road. This section provides a background on SQL before introducing Prisma's suite of tools. You'll learn:

- SQLite database initialization with Prisma
- Prisma's Object Relational Mapper (ORM)
- Defining a schema with Prisma's declarative schema language
- Converting a schema to SQL with the Prisma CLI
- Viewing and editing your database in Prisma Studio

## Relationships

Poorly planned relationships between database models can lead to data inconsistencies and increased query complexities and performance problems. To avoid these issues, you need to understand the different types of relationships and how to implement them. This section provides you with practical experience in recognizing relationships:

- One-to-many relationships (User has many Notes)
- One-to-one relationships (User has one UserImage)
- Updating the database with Prisma
- Planning models for the future
- Generate an Entity Relationship Diagram (ERD) for visualization

## Migrations

As your application evolves, so will your database schema. It's not uncommon for there to be "breaking changes" that affects one or more of your database models. This is where migrations come in.

Migrations allow you to track and synchronize schema changes across environments. Traditionally migrations have been tricky to manage, but this section will teach you how to use migrations to ensure your development, staging, and production environments are always in sync:

- Generating SQL migration code with Prisma
- Best practices for documenting & tracking migrations
- The "widen then narrow" approach for eliminating downtime
- Experimenting with migrations before permanently applying them

## Seeding Data

Manually adding data to a database is not only time-consuming but also prone to errors. Scripting to the rescue!

Here you'll learn how to populate your databases with consistent data for development and testing purposes:

- Initializing a SQLite database
- Idempotent scripting
- Resetting the database with Prisma
- Nesting SQL queries to simplify foreign key connections

## Generating Seed Data

Using hardcoded seed data works great for small applications, but it won't provide the best idea of how your application will perform at scale. You also shouldn't use real user data during development for plenty of obvious reasons.

A better approach is to use a library like Faker.js. This section will teach you how to use Faker.js to generate seed data for your database:

- Balancing realism with practicality when generating data
- Creating realistic user information
- Varying data quantities and randomness
- Validating against the schema
- Enforce data uniqueness

## Querying Data

In SQL, queries are written with the `SELECT` statement. This is one of the most powerful statements available, but it can also be one of the most complex. This is where tools like Object Relational Mappers (ORMs) come in, helping developers write SQL in a more intuitive way. Although it isn't a traditional ORM, the Prisma Client is an indispensable tool for modern web development. In this section, you'll learn how to get the most out of it:

- Understanding how Prisma's API maps to SQL
- Handling Hot Module Replacement (HMR)
- Logging slow queries
- Pre-connecting the client to the database

## Updating Data

Data mutation is a common task, but doing it incorrectly can lead to data corruption or loss. Especially when a single user action results in multiple database changes (for example, transferring money between user’s bank accounts). Getting mutations wrong can be a serious problem for your app’s success. This section will walk you through techniques for working safely:

- Deleting and updating data
- Conditional upserts
- Combining multiple queries into a transaction
- Rolling back to a previous transaction

## SQL

No matter how great an ORM is, sometimes you have to write raw SQL. In this section, you'll learn how to write raw SQL queries and execute them with Prisma. You'll also practice with:

- Wildcard queries
- Runtime schema validation with Zod
- Using joins to enable more complex queries
- Specifying query result ordering for more efficient searching

## Query Optimization

Nobody likes a slow application.

There are many stories of companies spending millions of dollars on scaling hardware, adding multiple levels of caching, and even rewriting their entire application in pursuit of a faster performance– only to find out later that the solution was optimizing their database indexes and queries.

In this final section, you'll learn how to optimize your queries for maximum performance:

- Identifying the index
- Analyzing raw SQL queries
- Multi-column indexing
- Balancing premature optimization with practicality

Data Modeling Deep Dive

We all know the drill. The code works on your machine but you didn’t realize the impact of the change you made and it breaks in production. This problem grows exponentially as your application’s size and usefulness grows. Unpredictability can be a developer's worst nightmare.

However, many developers find it difficult to effectively test their code. Manual testing gets tedious fast. Complex logic and async code can be tricky to test effectively.

The Full Stack Testing Workshop will equip you with the tools you need to ensure your app works now and in the future. You'll learn how to write modular, maintainable tests that cover all of your code, from the backend to the frontend.

As the author of the de-facto standard testing library for web development (called eh… Testing Library), I have some solid opinions that have led many teams to much more confidence shipping their code. Let’s get you some of that confidence.

## End-to-End Testing with Playwright

With end-to-end (E2E) testing, you can validate a web app from the user's perspective. This is the closest you can get to a real user interacting with your app. In this section, you'll learn the ins and outs of writing a test with Playwright:

- Best practices for setup before running tests
- Simulating user actions like interacting with the UI to perform a search
- Creating a new user in the database
- Cleaning up after tests have run
- Using playwright fixtures for reliable setup/teardown

## Mocking & Authentication for E2E Tests

When your application relies on external services, you need to have a way to test them without actually using them. Similarly, you don't want to fully onboard a new account every time you test an authenticated user flow. In this section, you'll learn how to re-use the same mocks we’ve been using for development to mock third-party services and simulate logging in:

- Use Mock Service Worker to intercept network requests
- Replace email verification with a local file solution
- Attach cookies to Playwright
- Reusing 2FA logic for local testing
- Testing behavior with different HTTP responses

## Unit Testing

Sometimes you’ve got some really complicated business logic in your app. Business logic that is critical to your application. For this stuff, it’s nice to package it up in its own function or module to keep all that logic in one place. This is the perfect situation where lower level unit testing comes in handy. Here, we'll dive into unit testing with the Vitest framework to ensure that each function and module behaves as expected:

- Organizational best practices
- Asserting outcomes with `expect`
- Recording function calls with spies
- Specifying test behavior with Vitest hooks
- Keeping test output clean to avoid cluttering up the terminal

## Component and Hook Testing

When building React components, you should focus on two users: the user who interacts with a component, and the developer who renders it. By using Testing Library, we can avoid mocking React and its hooks and instead test components as they would be used in a real app:

- Render components with Testing Library
- Simulate the DOM environment on a per-test basis
- Querying for missing elements
- Testing hooks in isolation from React
- Stubbing React context
- Cleanup after testing

## Authenticated Integration

Similar to higher-level E2E tests, it is often necessary to simulate an authenticated user. However, we don't want to test the entire user flow every time we make a change. In this section, you'll learn how to test authenticated operations without the overhead of a full E2E test:

- Generating random session IDs
- Associating sessions with users
- Testing authenticated routes
- Asserting user state in responses

## Custom Assertions

Writing tests is good; writing readable and maintainable tests is better. Custom assertions can make your test code easier to understand and modify. Here you'll learn to encapsulate complex checks into simple, understandable assertions:

- Create matchers for specific states
- Share assertions across tests
- Add custom assertions to TypeScript definitions
- Format test output with colors for readability

## Test Database

There are some decisions to make when writing tests that interact with the database. Testing with the development database has benefits, but requires us to remember to delete data after each test. By using a test database, we can avoid accidents while still being able to run our test suites:

- Set up a test-specific database instance
- Seeding a minimal amount of data
- Defining a global setup for Vitest
- Understanding the importance of module import order

Web Application Testing

Kent C. Dodds is joined by expert developers, library creators, and tech industry leaders who share their insights and experience working within the ever-evolving world of web development.

These conversations cover a wide range of topics ranging from the intricacies of database efficiency, the future of authorization, the role of leadership in tech, and everything in between.

No matter your level of experience in web development, these conversations offer a wealth of knowledge and ideas that will inspire you to refine your craft, push boundaries, and become an Epic Web dev!

## Content Management Systems with Alexandra Spalato

Alexandra Spalato, a Developer Relations Engineer at Storyblok, discusses the future of content management systems. She emphasizes the significance of a CMS in simplifying complex processes into user-friendly interfaces and making content creation more accessible to non-developers.

## Leadership in Tech with Ankita Kulkarni

Developer and leadership educator Ankita Kulkarni discusses the intersection of leadership and development. The conversation explores the acquisition of leadership skills, and how to find the balance between coding and leadership roles. Ankita provides strategies for advancing into leadership positions, emphasizing the importance of proactive career management.

## API Mocking with Artem Zakharchenko

Artem Zakharchenko, the creator of Mock Service Worker (MSW), joins Kent to discuss the evolution of MSW from a weekend project into to a powerful open-source tool for API mocking and debugging.

## Enhancing SQLite with Ben Johnson

Ben Johnson is a developer with a 20-year coding career spanning roles from Oracle to creating BoltDB. In this conversation, Ben discusses LiteFS and Litestream, both tools aimed at expanding SQLite's utility. Topics include a dive into SQLite's architectural elements, and how LiteFS enhances scalability on a single node.

## The Evolution of Type Safety with Colin McDonnell

Colin McDonnell, a Developer Relations representative at Bun and the creator of Zod, discusses how Zod has grown from its original usage in medical software into a prominent tool in the TypeScript ecosystem. Colin also touches on TRPC, an end-to-end type safety library, and the challenges it addresses.

## Navigating the Testing Terrain with Debbie O'Brien

Debbie O'Brien, a community advocate for Playwright at Microsoft, discusses the adaptability and versatility of Playwright as a testing tool. She emphasizes its value in various testing scenarios and its role in Microsoft's application testing, including VSCode, Bing, and Teams.

## Simplifying Web Form Management with Edmund Hung

Edmund Hung, web developer at Delivery Hero, discusses how Conform has become a crucial component of the Epic Stack. He highlights Conform's unique approach to form management, which bypasses native browser validation in favor of its own system.

## Scalable Databases and Authentication with Iheanyi Ekechukwu

Iheanyi Ekechukwu, a software engineer at PlanetScale, explore database and hosting options, highlights PlanetScale's scalability and the role of Vitess in the technology. The conversation also covers authentication solutions, and cautions against over-reliance on external services.

## Understanding Web Development with Jacob Paris

Jacob Paris joins Kent to discuss his work on Remix. He highlights some of the challenges of server rendering, including handling user preferences and time zones. One the client side, Jacob emphasizes the importance of server output for correct client rendering, especially when users disable JavaScript.

## The Depth of Software Testing with Jessica Sachs

Jessica Sachs, software engineer at Ionic and a testing & QA expert, joins Kent in a conversation about various testing paradigms. They discuss topics ranging from Test-Driven Development to End-to-End testing, emphasizing the importance of a balanced approach.

## Platform Engineering with Jocelyn Harper

Jocelyn "Josie" Harper, tech lead at The New York Times, discusses her tech journey into roles including platform engineering and system design. Additional topics include backend optimization and the significance of documentation.

## Exploring the Front-End Ecosystem with Mark Dalgleish

Mark Dalgleish, co-creator of CSS Modules and contributor at Shopify, discusses the evolution of CSS, React, and design systems. Touching on CSS Modules and CSS-in-JS, the conversation also goes into the challenges of managing design systems, particularly when it comes to balancing flexibility with standardization.

## Navigating Changing Web Technologies with Mark Thompson

Mark Thompson from Google's Angular team joins Kent to share his career journey, the web's evolution, and AI's role in software development. Additional topics include the transformational role of APIs and Angular's transition from the View Engine to Ivy.

## The Magic of TypeScript with Matt Pocock

Matt Pocock, internet-renowned as the "TypeScript guy", discusses the merits and challenges of the TypeScript ecosystem. Highlighting its benefits in IDE capabilities and bug reduction, Matt also touches upon complexities in managing types and creating libraries.

## Building Deep Skills with Michael Chan

Educator and enthusiast Michael Chan shares his thoughts on the changing React landscape, emphasizing the significance of TypeScript and libraries like React Query. He advocates for building a deep understanding over surface-level knowledge. Both Michael and Kent stress the joy of creating meaningful projects and the importance of a comprehensive web development understanding.

## Examining MDX with Monica Powell

Monica Powell, a senior software engineer at Newsela, dives into MDX, which allows for developers to combine JSX with Markdown for creating rich content. She highlights MDX's role in the Unify ecosystem, as well as its challenges when getting started with CMS integration.

## Efficient Form Management with Sandrina Pereira

Sandrina Pereira, a staff front-end engineer at remote.com, emphasizes the significance of web accessibility using the POUR principles. Additional topics include the complexities of managing large-scale forms dynamically for users across the world. 

## Transitioning from Rails to Remix with Sergio Xalambrí

Sergio Xalambrí shares his experience transitioning from a Rails and Next.js setup to Remix at fintech startup Duffy. Some of the challenges include highlighting challenges in internationalization and adding middleware. The conversation also into remix-auth's authentication strategies and contrasting Remix's modular approach with Rails' cohesive framework.

## The Capabilities and Ecosystem of Tailwind CSS with Simon Vrachliotis

Simon Vrachliotis, a Tailwind expert at Thinkmill, praises the benefits and adaptability of Tailwind CSS, emphasizing its alignment with React's component-level concerns. Simon discusses solving for type safety in addition to recommending tools for enhancing the Tailwind workflow.

## The Crucial Role of Database Optimization with Tyler Benfield

Tyler Benfield, a software engineer at Prisma, dives into the intricacies of database efficiency, emphasizing backend optimization for enhanced frontend performance. Tyler also explores the advantages and limitations of ORM tools like Prisma, the potential of SQLite in production, and the universal importance of SQL knowledge across platforms.

## Product Management with Nevi Shah

Nevi Shah, a product manager at Cloudflare, combined her technical and business skills to  transition from academia and consulting into product management. She highlights the role of a product manager in understanding user needs and introduces Cloudflare Pages as a solution for serverless architecture, while also discussing alternative hosting options like Fly.io.

## Remix Behind the Scenes with Ryan Florence

Ryan Florence, co-founder of Remix and React Training, discusses the innovations behind Remix and its transition from React Router. The framework's compatibility with the web's fetch API broadens its server architecture reach, and its recent acquisition by Shopify promises a bright future for Remix.

## From Tech Sales to Engineering with Shaundai Person

Shaundai Person, a senior software engineer at Netflix, joins Kent to discuss transitioning from tech sales to software engineering. She highlights the importance of recognizing and building individual strengths, especially communication, in large corporate settings.

## Art, Code, and Data Visualization with Shirley Wu

Shirley Wu, an award-winning creator specializing in data-driven art, transitioned from the business sector to web development. She shares how her work offers artistic fulfillment and financial stability, but she emphasizes the importance of ethical considerations.

## Understanding the Future of Authentication with Will Johnson

Will Johnson from Auth0 highlights the limitations of password-based authentication and discusses the potential of alternatives like the Web Authentication API (WebAuthn). Will shares his anticipation for a future where biometrics or digital verification replace traditional passwords, as well as a need for more nuanced access controls in growing organizations.


Interviews with Experts

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

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

Adding User Preference for Dark Mode

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.

Authentication Strategies & Implementation

Authentication Strategies & Implementation

Transcript

Implementing User Code Verification with TOTP

Transcript