@Josie Everson - Teams app doesn't recognize sub iframes. Therefore, it'll not load if there is an iframe within the tab app.
You can choose any third-party OAuth provider, such as LinkedIn, Google, and others. The process to enable authentication for these providers is similar to using Azure AD as a third-party OAuth provider.
Azure AD, like most identity providers, doesn't allow its content to be placed in an iframe. This means that you'll need to add a pop-up page to host the identity provider. In the following example, this page is /tab-auth/simple-start. Use the authentication.authenticate() function of the Microsoft Teams client SDK to launch this page when the button is selected.
import { authentication } from "@microsoft/teams-js";
authentication.authenticate({
url: window.location.origin + "/tab/simple-start-v2",
width: 600,
height: 535})
.then((result) => {
console.log("Login succeeded: " + result);
let data = localStorage.getItem(result);
localStorage.removeItem(result);
let tokenResult = JSON.parse(data);
showIdTokenAndClaims(tokenResult.idToken);
getUserProfile(tokenResult.accessToken);
})
.catch((reason) => {
console.log("Login failed: " + reason);
handleAuthError(reason);
});
Here is sample that contains a static tab that requests an access token for Microsoft Graph, and shows the current user's basic profile information from Azure AD.
Reference document-https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad?tabs=teamsjs-v2#navigate-to-the-authorization-page-from-your-pop-up-page
Thanks,
Sayali
If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link