How to Customize Azure AD B2B Login Error Screen to Hide Detailed Error Messages in Angular...

Background

I am developing an Angular application that uses Azure AD B2B for authentication via OpenID Connect (OIDC). The front-end is built with Angular, and we use angular-auth-oidc-client for authentication.

When users fail to log in due to access issues (e.g., not assigned to the app), Azure AD displays a detailed error message that includes information like:

• Application ID
• Correlation ID
• Troubleshooting details
• User’s email or username

I want to customize or hide these error details and show a more user-friendly message instead.

Microsoft login error screen

• Is there a way to completely replace the Azure AD default error screen with a custom error page?
• Can I configure Azure AD to suppress detailed error messages and show a simple error message instead?
• Is it possible to intercept these errors in Angular and redirect users before they see the default error screen?

Continue reading...