Blank Page After Azure AD SSO Login in Angular Application

Scenario:


In my Angular application, I am experiencing an issue during the SSO login process with Azure AD. After receiving a successful response from the backend containing the Azure AD authorization URL, I redirect the user using window.location.href = azureAdRedirectUrl;.

Upon successful authentication, Azure AD redirects the user back to my application with a 302 status code, along with the updated URL containing the query parameter code (e.g., https://myapp.com/login?code=someValue). However, instead of proceeding with the login flow, my application displays a blank page and remains stuck, despite the browser reflecting the correct redirected URL in the address bar.

This issue was not present earlier and was working fine a few days ago. Additionally, I have verified that no recent frontend changes were pushed by anyone in my organization that could have affected this behavior.

code overview

1. The user clicks the SSO login button.
2. My backend returns an Azure AD authorization URL.
3. I redirect the browser using something like window.location.href = azureAdRedirectUrl;.
4. After the user authenticates on Azure AD, they are redirected back to my Angular app with query parameters (e.g., ?code=...).

In my login component, I subscribe to the query parameters to extract the code and then call the appropriate API to complete authentication. A simplified snippet of my code is as follows:

// login.component.ts
ngOnInit() {
console.log('LoginComponent initialized');

// Get a snapshot of query params (for debugging)
const ssoCode = this.route.snapshot.queryParams?.['code'];
console.log('Snapshot query param code:', ssoCode);

// Subscribe to query parameters for real-time updates
this.route.queryParams.subscribe((params) => {
console.log('Query params subscription fired:', params);
if (params?.code || params?.guidId) { // guid is for SAML
// Show a loader and process the SSO response
this.showAuthLoader(true, false);

let loginResponse$: Observable<ITokenModel>;
if (this.authenticationType === 'ATP2_AzureAD') {
loginResponse$ = this.getTokenDtoByAzureLogin(params);
console.log('Processing AzureAD login');
} else if (this.authenticationType === 'ATP4_SamlSSO') {
loginResponse$ = this.getTokenDtoBySamlLogin(params);
console.log('Processing SamlSSO login');
}

loginResponse$.subscribe({
next: (userToken) => {
this.authenticateUser(userToken);
this.showAuthLoader(false, false);
console.log('Login response successful:', userToken);
},
error: (err) => {
this.showAuthLoader(false, false);
this.authService.redirectConsoleLogin(this.userTypeId);
console.error('Error in login response:', err);
}
});
} else if (params?.error) {
this.globalUtil.errorToast(params.message);
this.router.navigate(['Error'], { queryParams: { code: params.statusCode } });
console.warn('error occurred:', params.error);
} else {
console.log('for debugging => query params:', params);
}
});
}


Observations:

• If I refresh the page with DevTools closed, the issue persists—the application remains on a blank screen and does not proceed to the next step in the login process.
• However, if I open DevTools and then reload the page, the application functions correctly, processes the query parameters, and continues the login workflow as expected.

This suggests that opening DevTools influences the execution flow, potentially pointing to a timing issue, race condition, or an execution delay that affects the app’s bootstrapping.

Question:
What could be causing this intermittent blank page after the Azure AD redirect? Could this be due to a race condition or timing issue in Angular’s bootstrapping or query parameter processing? Sometimes, Why would opening Developer Tools cause the issue to resolve itself?

Any insights or debugging suggestions would be greatly appreciated.

What I’ve Tried:

• I added extensive logging to ensure that Angular’s lifecycle hooks and the query parameter subscription are being hit. (storing logs in IndexDB)
• I verified that the URL is correctly updated with the query parameters.
• I tested in multiple browsers (Chrome and Edge) on our internal environments.
• The blank page issue appears intermittently (and sometimes it doesn't when DevTools are opened)

Continue reading...