Forum Discussion
bmedenwald
May 22, 2024Copper Contributor
Teams App Won't Authenticate in New Outlook
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 ...
ChetanSharma-msft
Microsoft
May 24, 2024Hello 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)
Could you please share repro steps and details so that we can quickly check your issue ? (Code, Manifest package and logs if possible)
- bmedenwaldMay 24, 2024Copper ContributorThe 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?- Dinesh-MSFTJun 03, 2024Iron Contributor
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:
- Update Authentication Flow: Ensure compatibility with the new Outlook client and handle authentication within Outlook itself.
- Use MSAL: Implement the Microsoft Authentication Library (MSAL) for seamless authentication and token acquisition.
- Handle Callbacks: Properly manage authentication callbacks to redirect back to Outlook after completing the process.
- 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.
- bmedenwaldAug 08, 2024Copper ContributorSee reproduction steps in my previous comment, you have all you need to reproduce the bug.