Next.js Role-Based User Authorization & Access Control | Next Auth Protected Routes

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

Learn Next.js role-based user authorization & access control and apply Next Auth protected routes with NextAuth.js middleware. NextAuth.js makes applying role-based access control easy with the Next.js 13 app router and middleware.

💖 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/

🔗 Starter Source Code: https://github.com/gitdagray/next-auth-intro
📺 Next-Auth Intro tutorial video: https://youtu.be/w2h54xz6Ndw

🔗 Completed Source Code: https://github.com/gitdagray/next-auth-role-based

Next.js Role-Based User Authorization & Access Control | Next Auth Protected Routes

(00:00) Intro
(00:05) Welcome
(00:31) Getting Started
(01:02) Starter Code
(01:54) Options – OAuth profile function
(05:46) Options – Credentials authorize function
(06:41) Persisting the role
(08:52) TypeScript Module Augmentation
(13:47) Middleware – withAuth wrapper
(18:27) Environment variables
(19:41) Trying out the configuration
(23:25) Analyzing the results
(24:16) Component changes
(27:12) Middleware – authorized callback changes
(27:49) Middleware – Role-Based Access Routing
(31:46) Denied page
(32:29) Trying out the new Middleware configuration

📚 Tutorial References:
🔗 NextAuth.js Official Site: https://next-auth.js.org/
🔗 Next.js Official Site: https://nextjs.org/
🔗 NextAuth.js – Advanced Middleware Configuration: https://next-auth.js.org/configuration/nextjs#advanced-usage
🔗 NextAuth.js – Persisting the Role: https://authjs.dev/guides/basics/role-based-access-control#persisting-the-role
🔗 NextAuth.js – TypeScript Module Augmentation: https://next-auth.js.org/getting-started/typescript#module-augmentation
🔗 NextAuth.js – JWT & Session Callbacks: https://next-auth.js.org/configuration/callbacks#jwt-callback
🔗 Next.js Rewrites: https://nextjs.org/docs/app/api-reference/functions/next-response#rewrite

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 #user #authorization