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:

https://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