This content originally appeared on DEV Community and was authored by Isaac
Hello, devs!
This marks the first milestone in my journey of building a full-featured Learning Management System (LMS) from scratch using Next.js and a custom backend hosted on Azure. I’m documenting each major part as I build and today, I’m sharing the progress on the authentication system.
What I Built
This authentication flow is fully custom
- Admin & User Sign-up
- Login with Secure Password Hashing
- OTP Email Verification
- Password Reset with Secure Token
- Form Validations + Toast Notifications
- Protected API routes & token handling
- Responsive, animated UI
Tech Stack
- Frontend: Next.js (App Router) + TailwindCSS + ShadCN UI
- State & Feedback: React Hooks + Sonner for toast notifications
- Form Validation: Zod + React Hook Form
Screenshots
Sign Up Screen
Sign In Screen
Admin Reset Password Screen
What I Learned
- Managing useEffect properly during token validation
- Keeping forms clean, accessible, and user-friendly
- Structuring reusable API utilities for all auth actions
- Managing params in dynamic [token].tsx routes in Next.js App Router
Next Steps
Now that authentication is done, I’m moving to:
- Dashboard layout with protected routes
- Track/course management
Thanks for reading!
Follow me to see the next update on dashboards, course creation and more.
This content originally appeared on DEV Community and was authored by Isaac