Next-Auth Login Authentication Tutorial with Next.js App Directory

Опубликовано: 20 Февраль 2025
на канале: Dave Gray

282,587

5.4k

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this Next-Auth login authentication tutorial with Next.js app directory, you will learn how to protect all of your pages with credentials or an OAuth login from providers like GitHub. Learn how to protect any page in your app.

*Get CodiumAI for FREE:* https://marketplace.visualstudio.com/... or visit: https://www.codium.ai/

💖 Support me on Patreon ➜   / davegray

⭐ Become a full-stack web dev with Zero To Mastery Courses:
Complete Next.js Developer: https://bit.ly/CompNextJSDev
Advanced React: https://bit.ly/AdvReactDev
Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions - Please post them to my Discord ➜   / discord

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray
LinkedIn:   / davidagray

🔗 Source Code: https://github.com/gitdagray/next-aut...

Next-Auth Login Authentication Tutorial with Next.js App Directory

(00:00) Intro
(00:05) Welcome
(00:28) CodiumAI
(01:39) Create Next.js Project & Dependencies
(02:21) NextAuth.js Introduction
(04:20) Auth Route Handler
(05:49) NextAuth options
(10:13) NEXTAUTH_SECRET
(11:52) Setting up GitHub OAuth
(16:09) Configuring Providers in options
(23:08) Send a GET request to /api/auth/providers
(25:06) App Behavior for 3 different server pages
(26:27) Apply NextAuth with Middleware
(29:10) 3 Different Protection Approaches
(31:14) NextAuth with Client Components
(37:35) Next.js Images from an OAuth Provider
(39:26) Wrap-up

📚 Tutorial References:
🔗 NextAuth.js Official Site: https://next-auth.js.org/
🔗 Next.js Official Site: https://nextjs.org/
🔗 ES7 React Snippets Extension: https://marketplace.visualstudio.com/...

Was this Next-Auth tutorial using the Next.js 13 App Directory helpful? If so, please share. Let me know your thoughts in the comments.

#nextjs #next #auth