Next-Auth Login Authentication Tutorial with Next.js App Directory
Merci à Cyril T. pour sa contribution le 03/08/2023
Anglais
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/
⭐ 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
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/
⭐ 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