Angular migration to AWS with Azure AD SSO

Introduction:
Migrating enterprise applications to the cloud is no longer just a trend — it’s a necessity for scalability, security, and performance. In this blog, I’ll walk you through how I migrated a large-scale Angular application to AWS, while integrating Azure Active Directory (Azure AD) Single Sign-On (SSO) for secure authentication. This journey involved balancing frontend requirements, cloud infrastructure, and identity management, and I’ll share both the technical steps and the lessons learned along the way. Whether you’re a developer, architect, or IT professional, this case study will give you practical insights into combining Angular, AWS, and Azure AD in a real-world scenario.

Problem Statement:
Our enterprise Angular application was originally hosted on-premises. While functional, this setup had several limitations:

• Scalability issues
  Handling peak traffic often led to performance bottlenecks and slow loading times.

• Server maintenance challenges Regular patching, monitoring, and hardware upkeep consumed significant time and resources.

• Server end-of-life concerns
  Legacy infrastructure was reaching end-of-support, creating risks for reliability and compliance.

• Authentication complexity
  Managing user identities securely across multiple systems was difficult, with risks of misconfiguration.

• Deployment bottlenecks
  Manual deployments slowed down release cycles and introduced errors.

The business needed a cloud
-native solution that could scale easily, reduce maintenance overhead, address infrastructure lifecycle concerns, and integrate with existing identity systems for secure authentication. That’s when we decided to migrate to AWS and integrate Azure AD SSO.

Migration Steps
Step1. Preparing the Angular App

• Updated Angular dependencies for compatibility with modern cloud hosting.
• Integrated MSAL.js to handle authentication flows with Azure AD.
• Configured OAuth 2.0 and OpenID Connect for secure token management.

Step 2: Setting up AWS Infrastructure

• Hosted static Angular files on Amazon S3.
• Used CloudFront as a CDN for faster global delivery.
• Configured Route 53 for domain management and DNS routing.

Step 3: Integrating Azure AD SSO

• Registered the application in Azure AD.
• Configured redirect URIs and client IDs.
• Created Azure AD groups ,Roles and map those roles to registered application in Azure.
• Implemented secure token handling in Angular using MSAL.js in Authorization mode instead of ID token.

Step 4: CI/CD Pipeline

• Created Gradle configuration for building Angular application.
• Integrated GitHub Actions for continuous integration.
• Uses Cloudbees for Continuous deployment to S3 bucket.
• Secured environment variables and secrets with AWS Secrets Manager.

Challenges & Solutions
During the migration, we faced several technical hurdles that required careful troubleshooting and collaboration across teams:

• Profiles not fetched properly from Azure AD:
  At times, user profiles were not retrieved correctly. We resolved this by refining MSAL.js configuration and ensuring proper Graph API permissions.

• Redirect URL issues:
  Incorrect redirect URIs caused login failures. This was fixed by updating the Azure AD app registration with accurate environment-specific URLs.

• Token scope problems:
  Tokens were not returning the expected scopes, leading to authorization errors. We addressed this by revalidating API permissions and adjusting consent settings.

• Backend API integration challenge:
  Authentication tokens were not consistently passed to backend APIs. We solved this by implementing secure token forwarding and validating headers.

• Multiple calls to Azure AD
  The app was making redundant authentication requests, creating performance issues. We optimized MSAL.js interaction patterns to reduce unnecessary calls.

• Auth callback issues:
  Callback handling sometimes failed, breaking the login flow. This was corrected by refining Angular routing and callback logic.

• Deployment to S3 bucket:
  Initially, the application failed to load in the dev environment due to incorrect folder structure. We reorganized the build output and updated S3 bucket paths.

• CloudFront configuration problems:
  Using a single CloudFront distribution for multiple buckets caused behavior conflicts and origin mismatches. We resolved this by carefully defining behavior patterns and separating origins where necessary.

Each of these challenges taught us valuable lessons about the importance of precise configuration, environment-specific testing, and cross-team collaboration during cloud migrations.

Lessons Learned

• Plan before migration:
  A clear roadmap saves time and avoids surprises.

• Collaboration is key:
  Frontend, backend, and DevOps teams must work together.

• Identity management matters:
  Azure AD integration requires careful configuration but pays off in security.

• Automation accelerates success:
  CI/CD pipelines reduce manual effort and errors.

Migrating an enterprise Angular app to AWS with Azure AD SSO was a rewarding experience. It improved scalability, enhanced security, and streamlined deployments. Most importantly, it reinforced the importance of planning, collaboration, and automation in cloud projects.
If you’re considering a similar migration, I hope this case study provides practical insights and confidence to take the leap.