Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn Next.js rolebased user authorization & access control and apply Next Auth protected routes with NextAuth.js middleware. NextAuth.js makes applying rolebased access control easy with the Next.js 13 app router and middleware.
Support me on Patreon ➜ / davegray
⭐ Become a fullstack 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/WebDevRoadmapJrtoSr
Subscribe ➜ https://bit.ly/3nGHmNn
Course Updates ➜ https://courses.davegray.codes/
❓ Questions Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Starter Source Code: https://github.com/gitdagray/nextaut...
NextAuth Intro tutorial video: • NextAuth Login Authentication Tutori...
Completed Source Code: https://github.com/gitdagray/nextaut...
Next.js RoleBased 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 RoleBased Access Routing
(31:46) Denied page
(32:29) Trying out the new Middleware configuration
Tutorial References:
NextAuth.js Official Site: https://nextauth.js.org/
Next.js Official Site: https://nextjs.org/
NextAuth.js Advanced Middleware Configuration: https://nextauth.js.org/configuratio...
NextAuth.js Persisting the Role: https://authjs.dev/guides/basics/role...
NextAuth.js TypeScript Module Augmentation: https://nextauth.js.org/gettingstar...
NextAuth.js JWT & Session Callbacks: https://nextauth.js.org/configuratio...
Next.js Rewrites: https://nextjs.org/docs/app/apirefer...
Was this NextAuth tutorial using the Next.js 13 App Directory helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #user #authorization