How to authenticate angular2 app with MFA enabled Azure AD?

Question

I have developed an webapp using angular2 front end with rest controller service layer. i registered my app in azure ad. system admin enabled the MFA for the web app. Now while running the application i am getting the below error.

at [Source: {"error":"interaction_required","error_description":"AADSTS50076: Due to a configuration change made by your administrator, or because you moved to a new location, you must use multi-factor authentication to access

Can someone provide any tutorials or sample code to implement authentication against MFA enabled azure AD ?

Answer 1

Without knowing which auth library you're using I can only give you an abstract answer about this error.

This is caused when you have a signed in user, and are trying to silently request access to a resource that requires multi-factor authentication.

You have two ways to solve this:

1. In the initial sign in, request the resource or scope that it's failing on. This will prompt MFA at that initial request so that any subsequent token acquisitions will succeed. The downside here is the app will prompt for the additional requirements even if the end user doesn't end up using the access you're requesting (just signing in, never needs to call some api)

2. When you encounter an interaction_required error, intiate a new interactive token acquisition request specifying the failed resource or scope. If you're using ADAL.js, this would mean using acquireTokenPopup or acquireTokenRedirect rather than acquireToken (which only succeeds if it can do so without sign in ui).