Add user management to a Next.js site with React server components, server actions, and AuthKit

MORE: https://lwj.dev/newsletter — The most tedious and difficult part of building a web app is authentication. But a new tool just entered the discussion that’s hoping to change that. There are lots of options to get auth set up quickly, but they often aren't built to handle the more complex, enterprise features that you hope to grow into over time. In the other direction, user management that's powerful enough for a more mature company is usually so cumbersome and expensive to set up that it's borderline foolish to start with it. AuthKit (https://www.authkit.com/) caught my attention because its stated intention is to fit the needs of early-stage companies as well as more mature, complex use cases. They have a hosted UI for getting full-featured user management set up in a few lines of code, plus they have a full SDK for building custom user management flows and adding enterprise features like SSO. I love this, because it lines up with my views on progressive disclosure of complexity in software: https://jason.energy/progressive-disclosure-of-complexity/ ---------------------------------------------------------------------------------------------------------------------- Thank you to WorkOS for sponsoring this video! https://lwj.dev/workos ---------------------------------------------------------------------------------------------------------------------- ## Resources and further reading - AuthKit: https://www.authkit.com/ - WorkOS User Management: https://workos.com/docs/reference/user-management - Radix: https://www.radix-ui.com/ - `jose` on npm: https://www.npmjs.com/package/jose ## Chapters 00:00 Auth is tedious to add to web apps 00:54 Enable AuthKit in the WorkOS dashboard 01:19 Cloning the repo, setting env vars, starting local dev server 03:01 Add working sign in / sign-up URLs to the Next app 05:05 Handle successful login in a Next.js API route 07:15 Add functions to verify and read token data 08:24 Protect routes using Next.js middleware 09:28 Show logged in user data in the UI 09:47 Allow logout with Next server actions 10:35 Update the home page based on login state 11:08 Customizing AuthKit UI and flows + adding SSO 11:58 Why I think AuthKit is worth considering