Uploaded July 2023 | Updated September 2026, 2 weeks ago

---

In this project, we will buid an authentication system for Next.js using clerk. It can also be used with React SPAs and Remix.

Visit Clerk:
clerk.com

Project Code:
github.com/bradtraversy/clerk-app

Clerk Docs:
Main: clerk.com/docs
Next.js: clerk.com/docs/nextjs/get-started-with-nextjs
React: clerk.com/docs/quickstarts/get-started-with-create-react-app
Remix: clerk.com/docs/quickstarts/get-started-with-remix

Follow Clerk On Twitter:
twitter.com/ClerkDev

Timestamps:
0:00 - Intro
1:22 - Project Demo
5:07 - Next.js Setup
7:43 - Install & Setup Clerk
9:45 - Clerk Provider
12:24 - Header Component
17:23 - Protecting Pages - middleware.js
19:48 - .env routes
21:33 - Sign In Page
26:13 - Conditional Header Links
29:42 - UserButton Component
31:45 - UserProfile Component
33:35 - Email Signup & Verification Code
35:07 - Using Themes
37:13 - Start Custom Sign Up Flow
42:15 - Custom Form UI
44:29 - Handle Submit
46:35 - Email Verification
48:36 - Conclusion