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

Video Description

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