What is the proper approach to handling MSAL authentication in an Outlook Add-in on Android?

Question

Hello,

I am developing an Outlook Add-in that requires MSAL authentication. The Add-in is a React app created with the Yeoman generator, and I am using the msal-react library for authentication.

To authenticate users, I use the loginPopup method of an MSAL instance. This approach works as expected on the web, iOS (where it redirects within the Outlook internal browser), and desktop applications.

However, I am encountering an issue on the Android version of the Outlook app. Instead of opening an in-app browser (as it does on iOS), loginPopup redirects users to an external browser for authentication. After logging in, users are not redirected back to the Outlook app. Instead, they are taken to the redirectUri specified in my MSAL configuration, which points to a webpage where my Add-in's source files are hosted.

My question is:

Do I need to specify a different redirectUri to ensure the user is redirected back to the Outlook app and properly authenticated within the Add-in?

Is there a recommended approach that ensures consistent behavior across all platforms (web, iOS, desktop, and Android)?

I would appreciate any guidance or best practices for handling this scenario.

Thank you!

Answer 1

I was able to fix the issue by migrating from "regular" app authentication to Nested App Authentication (NAA).

NAA is specifically designed for "nested" applications like Office add-ins, ensuring a seamless sign-in experience without redirecting users to an external browser. After making this change, my authentication flow worked correctly across all platforms.

🔗 Microsoft Docs: Enable Nested App Authentication