Рет қаралды 77,192
Web Dev Roadmap for Beginners (Free!): 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 ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Starter Source Code: github.com/gitdagray/next-aut...
📺 Next-Auth Intro tutorial video: • Next-Auth Login Authen...
🔗 Completed Source Code: github.com/gitdagray/next-aut...
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: next-auth.js.org/
🔗 Next.js Official Site: nextjs.org/
🔗 NextAuth.js - Advanced Middleware Configuration: next-auth.js.org/configuratio...
🔗 NextAuth.js - Persisting the Role: authjs.dev/guides/basics/role...
🔗 NextAuth.js - TypeScript Module Augmentation: next-auth.js.org/getting-star...
🔗 NextAuth.js - JWT & Session Callbacks: next-auth.js.org/configuratio...
🔗 Next.js Rewrites: nextjs.org/docs/app/api-refer...
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