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
Isaac | Sciencx (2025-07-19T14:42:40+00:00) 🔐 Completed Authentication Flow for My Custom LMS – Dev Journal #1. Retrieved from https://www.scien.cx/2025/07/19/%f0%9f%94%90-completed-authentication-flow-for-my-custom-lms-dev-journal-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.