Teams App Won't Authenticate in New Outlook

Copper Contributor

I have a Teams app that is about to be upgraded to the new manifest so it will run in Outlook. I uploaded the app to test it, and in the old Outlook it works fine. I can see the interface, click the button to authenticate with my cloud system, it pops up a small window inside Outlook, I authenticate, and it works. Just like Teams.

 

If a switch to the New Outlook, it doesn't work. I can still see the interface, but when I click the button to authenticate with my cloud system it does not pop up a small window inside Outlook. Instead it send me to the web browser. This will always fail as the Teams JS requires Outlook to be notified of the success in the small window it must provide (like old Outlook and Teams does).

 

How can I get this to work? We've had reports among our customers in the past that this happens in Teams and the only thing I've ever seen work is to log out of Teams entirely. But in Outlook that's not an option. I've tried to repair and reset Outlook via the Settings app in Windows to no avail.

 

 

4 Replies
Hello @bmedenwald - Thanks for raising your query.
Could you please share repro steps and details so that we can quickly check your issue ? (Code, Manifest package and logs if possible)
The reproduction steps are:

1. Upload an app that uses Microsoft Teams JS v2.x for authentication.
2. Load the app in the Outlook interface, which presents a login button in our interface.
3. Click the login button

In traditional Outlook, this pops up a little window to authenticate, per the Teams JS library's behavior. In the new Outlook, this sends the user to a webpage which is a broken behavior as the Teams JS promise cannot be resolved in a web browser.

I can probably provide a test manifest on request that would reproduce, though I assume this is an often-used use case no?

When I call Teams JS v2 "authenticate" method I am not passing a value for "isExternal". This has never been a problem, but did new Outlook change the default under the covers?

Hi @bmedenwald,

To address your Teams app's authentication issue in the new Outlook client, ensure your authentication flow works in both old and new versions of Outlook. If the process redirects to a web browser instead of opening a window in Outlook, follow these steps:

  1. Update Authentication Flow: Ensure compatibility with the new Outlook client and handle authentication within Outlook itself.
  2. Use MSAL: Implement the Microsoft Authentication Library (MSAL) for seamless authentication and token acquisition.
  3. Handle Callbacks: Properly manage authentication callbacks to redirect back to Outlook after completing the process.
  4. Test and Debug: Thoroughly test in both Outlook versions and use developer tools for debugging. 

Sample Code Snippet using MSAL:

const msalConfig = {
 auth: {
   clientId: 'your_client_id',
   authority: 'https://login.microsoftonline.com/your_tenant_id',
 }
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
const loginRequest = { scopes: ['user.read'] };
msalInstance.loginPopup(loginRequest)
 .then(response => {
   console.log('Authentication successful:', response);
 })
 .catch(error => {
   console.error('Authentication error:', error);
 });

Please refer the MSAL Documentation and Authentication in Microsoft Teams Apps documents. These steps should resolve the authentication issue in the new Outlook client, ensuring a consistent user experience.

I have done all this. As I mentioned in my posting, we've had a Teams app for years. It first used callbacks, but now with the Microsoft Teams JS v2.x we use Promises.

Our code works in old Teams, new Teams, and old Outlook. It does not work in new Outlook. That's the problem.