role based authentication system in nextjs 14/15 with lucai auth
lucia auth credentials
NextJS Authentication Made Easy with Lucai Auth: Multi User Roles Management - abtahi hasan
In this video, Level up Your NextJS App: Implementing Lucai Auth for Authentication and Multi User Roles Management system.
The complete guide to building your first Next.js 14 application! Next.js is a popular JavaScript framework that provides high-performance and alternative routing configuration for modern web applications. Through this video, you will gain comprehensive knowledge about the methods of building Next.js applications.
✅ next js playlist https://youtube.com/playlist?list=PLaFV1330_fr470GrayeBa5yxu8FGaZbQt
✅ next js authentication playlist https://youtube.com/playlist?list=PLaFV1330_fr6XmIR6VkIPi55t9ZzX5mbC
✅next js project playlist https://www.youtube.com/playlist?list=PLaFV1330_fr6OzxdWOPUef_u8CtNP7-yg
Key Features:
- how to create login system in next js
- how to config credentials login system in lucia auth
- how to setpu prisma in next js latest version
- create model in prisma
- how to create role based authentication system
- learn next js server actions
📽️ Timestamps:
- 00:00 project overview
- 03:10 next js 14 installation
- 05:06 setup shadcn
- 06:17 setup prisma with postgres in next js latest version
- 08:22 setup user and session model
- 10:42 set up credentials system in lucia auth configuration
- 26:57 get user data function for server action and server components
- 38:44 set up login sign up and logout with next js server action
- 01:10:22 create sign up page and configuration sign up server action with shadcn form with zod validation
- 01:32:04 fixed password hashing error
- 01:37:15 create auth Protected route wrapper for only logged in server
- 01:41:40 create login page and configuration sign up server action with shadcn form with zod validation
- 01:46:59 create multiple roles based authentication system (user, admin)
- 01:52:52 update auth Protected route wrapper for multiple roles
- 01:59:05 create hooks for getting user data in client components
Source Code
Commands
- npm i @node-rs/argon2 @prisma/client @lucia-auth/adapter-prisma @hookform/resolvers lucia lucide-react prisma zod
- yarn add @node-rs/argon2 @prisma/client @lucia-auth/adapter-prisma @hookform/resolvers lucia lucide-react prisma zod
- pnpm add @node-rs/argon2 @prisma/client @lucia-auth/adapter-prisma @hookform/resolvers lucia lucide-react prisma zod
- npx prisma init
Next Steps
- for db push "npx prisma db push"