Project - Next Auth Demo

Auth.js is one of the most commonly used authentication libraries in Next.js projects. Therefore, in this project, I have tried to integrate various tools to build a website login system, including Next.js, Auth.js, Shadcn form, Zod, Neon Database, Drizzle ORM, etc.

Authentication

By using Auth.js (formerly known as NextAuth.js), it handles authentication (verifying user identity), session management (tracking user login status), and authorization, so that we can implement functions such as login, register, reset password and protect routes for authenticated user.

Database

All user data is stored in the Neon Database, while Drizzle ORM simplifies some query processes and provides type safety.

Validation

For validation, I believe Shadcn form and zod make a great combination. Shadcn Forms are designed to work with React Hook Form, which manages form state efficiently. By using the zodResolver, you can directly connect your Zod schema to your form, enabling automatic validation and error handling with minimal boilerplate code.

And there is one thing I like the most about this combination, which is validation errors from Zod are automatically surfaced in the UI using Shadcn’s <FormMessage>, providing clear and user-friendly feedback to users.