Next.js Authentication & Login | Nextjs 15 Full Stack Project
Dave Gray
0:00 / 0:00
Next.js Authentication & Login | Nextjs 15 Full Stack Project
37 838 просмотров · 1 г. назад
Dave Gray
446 тыс. подписчиков
37 838 просмотров · 1 г. назад
In this video, you will learn how to add authentication to a full stack Next.js project. From login and logout screens to protecting routes with middleware, you will learn how to easily configure your Nextjs project.
⭐ Use the code "davegray" for 3 months free on the Team plan of Sentry for any new accounts:
Sentry Homepage: https://bit.ly/sentry-dg
Sentry Sign-up: https://bit.ly/try-sentry-dg
Sentry Next.js: https://bit.ly/sentry-nextjs-dg
Sentry Next.js Docs: https://bit.ly/sentry-docs-dg
🔒 Kinde Auth: https://kinde.com/dgray-nextjsstack/
🔥 Neon Postgres: https://fyi.neon.tech/davegray
👉 Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
💖 Support me on Patreon ➜ / davegray
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Ask Questions & Discuss on Discord ➜ / discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Next.js Full Stack Project playlist: • Next.js Full Stack Project with Nextjs 15 ...
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Course Resources: https://github.com/gitdagray/nextjs-f...
Next.js Authentication & Login | Nextjs 15 Full Stack Project
(0:00:00) Intro
(0:01:11) Tech Stack
(0:01:31) User Stories Checklist
(0:04:09) Kinde Auth vs "Roll Your Own"
(0:06:18) Set Up a Free Kinde Account
(0:08:53) Adding Kinde to an Existing Codebase
(0:10:05) Installing Kinde with Next.js 15
(0:13:45) Adding Environment Variables
(0:15:16) Required API Route
(0:16:56) Create a Login Page
(0:20:47) Kinde Auth Settings
(0:25:45) Add a User
(0:26:42) Add Permissions
(0:29:38) Multi-Factor Auth aka MFA
(0:31:09) Create a Logout Button
(0:35:43) Protecting Routes with Middleware
📚 Tutorial References:
🔗 Next.js: https://nextjs.org/
🔗 ShadCN/ui: https://ui.shadcn.com/
🔗 Sentry Next.js: https://bit.ly/sentry-nextjs-dg
🔗 Tailwind CSS: https://tailwindcss.com/
🔗 TypeScript: https://www.typescriptlang.org/
🔗 Neon Postgres: https://fyi.neon.tech/davegray
🔗 Kinde Auth: https://kinde.com/dgray-nextjsstack/
Was this Next.js Full Stack Authentication & Login tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #auth #login