Search code examples
azure-active-directoryazure-ad-msalmsal-angularazure-app-registrationmsal

MSAL Redirect on Failure AADSTS50105


I have an Angular App set up with MSAL (msal-angular 2.5.5). My app authenticates against an App Registration on Azure which has "Assignment Required" as true.

Ideally, I'd like it that if a user has successfully signed in, but has not been assigned to the application - they're directed back to the Angular App to an anonymously available (No MsalGuard route) page which informs them what steps they need to take to get permission to access the app.

My understanding is that it's not possible to redirect in this case. Once the user fails to meet the condition, they're sent to this page (not my image, but same error) and I lose all control over the flow:

enter image description here

Is this the case? And if so, are my only options the following:

  1. Don't automatically route users to sign in page - route them to a page informing them the requirements to access the application, alongside a "Sign In" button which will bring them to sign in on Microsoft?

  2. Create another App Registration which all users are a member of, and use this to do a "pre-check" to ensure they're members of the groups which have access to the target application (requiring two sign ins)

  3. Add all users to the target application, and restrict access based on their group membership / assigned roles

Does this sound correct?


Solution

  • When using MSAL with Azure AD, if a user isn't assigned to the application and tries to sign in, they’ll get an error (like AADSTS50105).

    enter image description here

    • Azure AD will handle this error and show its default error page. Unfortunately, this means your Angular app can’t control what happens next.

    enter image description here

    • Azure AD takes over the error handling, and you can’t easily change the flow to redirect users to your own page when they fail to meet the app’s requirements.

    Manual Routing to Informational Page:

    • You can create an informational page in your Angular app that explains the access requirements. This page will have a "Sign In" button, allowing users to manually start the sign-in process instead of being automatically redirected.

    Pre-Check with Another App Registration:

    • You could set up a separate App Registration that all users are part of. This app would serve as a "pre-check" to confirm if users belong to the necessary groups to access the main application, though it would require them to sign in twice.
    • This approach creates extra complexity because users need to sign in twice. It also adds more work, as you’ll have to manage two apps and their permissions.

    Assign All Users to the Target Application:

    enter image description here

    • If all users have default access to the app, you can use Azure AD’s groups and roles to control what they can do within the app, preventing them from encountering the AADSTS50105 error.
    • If you have too many users, adding them all to the target application might become difficult to manage.

    Handling AADSTS50105 Errors with MSAL:

    • You can use MSAL’s handleRedirectPromise or acquireTokenSilent methods in your Angular app to check if the user is logged in. If the user encounters the AADSTS50105 error, you can catch it and redirect them to a custom page instead of the default Azure error page.
    • This helps to control the user experience, but requires to manage error handling and user redirects within your app.

    Otherwise, implement a custom error handling mechanism in your application.