Over the past 24 hours, I tackled a series of authentication and UI challenges while migrating a Next.js app to use Azure AD authentication via MSAL.js. The process was a deep dive into React, Next.js App Router, and the intricacies of modern authentication. Here’s a recap of the issues, solutions, and key takeaways. The Challenge: Modernizing Authentication The goal was to fully migrate from a custom JWT-based authentication system to Azure AD using MSAL.js, ensuring that all API calls used MSAL tokens and that the user experience was seamless across login, logout, and protected routes. Along the way, I also wanted to modernize the app’s layout using shadcn/ui components and improve the sidebar and header for better usability. …
Continue reading From Login Loops to Seamless Auth: Lessons from Migrating to Azure AD & MSAL in Next.js