Simple Next.js & React Authentication With Clerk



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:
https://clerk.com

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

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

Follow Clerk On Twitter:

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

source