Server-side Auth with Remix, Prisma, and the Web Platform

Rate this content
Bookmark

In this talk, we'll get a live coded demo of building custom hand-rolled authentication. When you have the right tools (and we do), authentication can be quite simple and secure. This is more (and better) than just: "Install this library and you're good to go." When we're done we'll have our own auth code that can evolve with our ever-changing requirements without a need to learn some library-specific APIs. We'll be leveraging the Web Platform the way it was meant to be done to give us simple and secure server-side authentication for the web.


You can check the slides for Kent's talk here as well as demo code.

Kent C. Dodds
Kent C. Dodds
34 min
18 Feb, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk is about server-side authentication with Remix, Prisma, and the web platform. It covers adding authentication to a Remix app, troubleshooting and login setup, handling user login and session creation, creating user sessions and redirects, handling user ID retrieval and validation, and working with cookies in Remix. The speaker emphasizes that Remix is ready for production and suitable for enterprise apps. Remix simplifies the mental model and improves performance by bridging the network gap between the front end and back end.

Available in Español

1. Introduction to Server-side Auth with Remix

Short description:

Hey Node Congress, my name is Kent C. Dodds and I'm really excited to give this talk, server-side auth with Remix, Prisma and web platform. We're working in Node because Node is awesome and Remix runs on Node and I love Remix. This talk is a live code demo of adding auth to an existing app based on the tutorial from Remix. It's a condensed version, but it should give you a good idea of how Remix approaches authentication.

Hey Node Congress, my name is Kent C. Dodds and I'm really excited to give this talk, server-side auth with Remix, Prisma and web platform. We're working in Node because Node is awesome and Remix runs on Node and I love Remix.

So if you aren't familiar with me, I work at Remix as the director of developer experience, so if you've tried Remix and your developer experience wasn't good, it's my bad, sorry. I'm working on making all that better. I'm also the creator of epicreact.dev and testingjavascript.com and you can check out my website kentcdodds.com because it's pretty legit.

What this talk is is a live code demo of adding auth to an existing app and we're actually basing this off of part of the tutorial from Remix. So if you've gone through the jokes tutorial in Remix, that's kind of what we're going through here. This is not complete. I only get about 20 minutes with you, and so it's not going to have everything, but it should give you the right idea of how Remix approaches authentication, and I think it's in a really good way.

2. Adding Authentication to Remix App

Short description:

Let's start by adding authentication to our Remix app. Currently, anyone can add jokes without authentication, and we want to prevent that. We'll begin by adding a user model in the schema.prisma file and associate jokes with specific users. We'll store hashed passwords for security. After updating Prisma, we'll create a jokester named Cody and use their ID to associate jokes with them. Finally, we'll push the changes to the database and resolve any type errors caused by seeding jokes without associated jokesters.

So let's go ahead and get started since we don't have a lot of time, let's jump right into the coding. So here we're actually going to take the full screen off, get rid of this, Remix you can find at Remix.run and you can read all about it and scroll through this, it's actually a pretty cool scrolling experience to go through that and get an idea of what Remix is.

This is the app that we're going to be working on, Remix, so great it's funny. It's a jokes app where you can get random jokes and it'll just have a bunch of different jokes for you. It's pretty fun and then you have permalinks and stuff and in the tutorial we add the ability to delete the jokes, you can add your own, and this actually works right now, but the problem is that there's no authentication going on right here so anybody in the world could add their own jokes, we'd never know who did it and people who add jokes they can't remove those jokes and we don't want to add that capability until they can log in because we don't want people removing other people's jokes.

So that is what we're going to be adding to our app, it's just the ability to authenticate. So we're going to start out in our schema.prisma file, so we've already got Prisma up and running that's holding all of our jokes and we have a seed to get all of these jokes put into the database already, but we want to add user authentication and so to do that we're going to need a user model so we can associate jokes to specific users. So let's go say model user and Copilot is going to help us out with this stuff. Not all this is what we want though, so we get an ID, I like the UUID personally, thanks a lot Copilot. We do want the created app, we want the updated app, and then we're going to have a username, not just a name and this needs to be unique. And then we don't really need an email here so we'll get rid of that, we do want a password though, but we're not storing like raw passwords, we're going to store a hash of the passwords to make it nice and secure. And then we have a relationship with the joke model inside of this user so we'll have jokes and that is an array of jokes. And it looks like my datetime, or Copilot didn't quite get this right so this is going to default to now, and there we go. So now we're getting a red underline here because the joke model is not associated to the user model and, whew, that was a close call, we had two N's right there. So now we want to add a jokester ID, and this is going to be a string, and then we'll have the jokester, which in this case is going to be a user, and we're going to add a relation with the fields for this relation is just the jokester ID, there we go, thank you, and the references is just the ID, and then on delete we'll cascade. So when we delete the jokester all their jokes are going to be gone. And let's make sure we spell this correctly. There we go. Okay, cool, so we've gotten Prisma updated, let's go ahead and run a couple of Prisma scripts, so we'll run npx Prisma db push, to push all of these changes. Yes, we were going to delete all of the things, and now we should have some type errors right in here, because we're now seeding the database with jokes that don't have jokesters associated. So let's go ahead and make our first jokester. And this is going to be Cody, we're going to await Prisma user create, and the data for this is going to have the username of Cody. And the password hash, is actually going to be twixrocks. And I have this pasted over here, because I, you don't want to watch me type that out. But this is basically twixrocks, hashed. And so that's going to be our password for our Cody user. So now that we have Cody, we can use Cody for generating or creating all of these jokes. So we'll say our data is going to be all the joke properties plus the jokester ID of Cody.ID. And so that can be our data. And now our TypeScript stuff, hopefully it will go away.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.

Workshops on related topic

Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Node.js Masterclass
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Top Content
Workshop
Matteo Collina
Matteo Collina
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate