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

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/items?itemName=Codium.codium or visit: https://www.codium.ai/

💖 Support me on Patreon ➜ https://patreon.com/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 ➜ https://discord.gg/neKghyefqh

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

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

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

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/items?itemName=dsznajder.es7-react-js-snippets

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