The latest articles on DEV Community by Isaac (@king_xerxes). https://dev.to/king_xerxes https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1224464%2Fd2930bfe-9bac-47ea-85a4-e9342a84fc17.jpg https://dev.to/king_xerxes en Isaac Sat, 19 Jul 2025 14:42:40 +0000 https://dev.to/king_xerxes/completed-authentication-flow-for-my-custom-lms-dev-journal-1-i09 https://dev.to/king_xerxes/completed-authentication-flow-for-my-custom-lms-dev-journal-1-i09 <p>Hello, devs! <br> 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. </p> <h2> <strong>What I Built</strong> </h2> <p>This authentication flow is fully custom<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>- Admin &amp; User Sign-up - Login with Secure Password Hashing - OTP Email Verification - Password Reset with Secure Token - Form Validations + Toast Notifications - Protected API routes &amp; token handling - Responsive, animated UI </code></pre> </div> <h2> Tech Stack </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> - Frontend: Next.js (App Router) + TailwindCSS + ShadCN UI - State &amp; Feedback: React Hooks + Sonner for toast notifications - Form Validation: Zod + React Hook Form </code></pre> </div> <h2> Screenshots </h2> <p><strong>Sign Up Screen</strong></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1q72u6msx4vdkircq6pp.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1q72u6msx4vdkircq6pp.png" alt="Sign Up screen" width="800" height="363"></a></p> <p><strong>Sign In Screen</strong></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo9j9i6yi1r1na7vmve7v.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo9j9i6yi1r1na7vmve7v.png" alt="Admin Login Screen" width="800" height="362"></a></p> <p><strong>Admin Reset Password Screen</strong></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs7vdd5kgdm59q014v8os.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs7vdd5kgdm59q014v8os.png" alt="Admin Password Reset Screen" width="800" height="462"></a></p> <p><strong>What I Learned</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>- 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 </code></pre> </div> <h2> Next Steps </h2> <p>Now that authentication is done, I'm moving to:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> - Dashboard layout with protected routes - Track/course management </code></pre> </div> <p><strong>Thanks for reading!</strong><br> 🔗 <a href="https://dev.to/king_xerxes">Follow me </a>to see the next update on dashboards, course creation and more.</p>