Something went wrong when run Teams app in local environment

Hi, @Kudos-Ng
Thank you for answers!! Those advises let me figure out the next step. Before your answers, I thought if setting is correct, it could success to add custom tab in meeting, no matter where the meeting come from.

The main target is --> I want to add custom tab in all type meeting's side panel.(no matter where the meeting come from)

So I have the main question for this. --> Do I need to setting all types meeting in manifest.json? And if so, is other setting in Azure or Teams Admin Center?

Hi, @Kudos-Ng
I have another question with only can "Select a channel" when I run in local environment.

There is no meeting can choose to test the feature for side panel in meeting.

Hi Avery Lin,

Thanks for your questions. I'm glad that my previous response helps you.

You don’t need to set all meeting types in the manifest. The ability to add custom tabs in the side panel is limited to supported meeting types by default in Teams, so no extra settings in Azure or Admin Center are required. Just configure your app as before and test it in supported meetings (e.g., scheduled channel meetings).

Hi, @Kudos-Ng
Thank you for your answers!! I successfully show on side panel.
But still can't use graph api.

This is my screenshot(part of code) and API permissions setting on Azure, can you check if anything else I need to setting?

Hi Avery Lin,

Thank you for sharing the details and the screenshot. Based on your configuration and the error message, here’s what I’ve observed:

The permission OnlineMeetings.Read that you added in Azure AD App Registration is a Microsoft Graph API permission. It works when you call Graph API endpoints such as: GET /me/onlineMeetings/{meetingId} or when using the Graph SDK. This permission is not used by the Teams JavaScript SDK.

In your current implementation, you are calling meeting.getMeetingDetails() from the Teams SDK, not Graph API. For this method to work, the app needs RSC (Resource-Specific Consent) permissions declared in the manifest.

I see that you have declared OnlineMeeting.ReadBasic.Chat in your manifest, which is correct for reading meeting details in context. However, according to Microsoft’s documentation on RSC, this permission currently supports Application type only, not Delegated.
This means:

• It is designed for scenarios where the app uses an application token (app-only context).
• It does not work with a delegated token (user sign-in flow), which your app appears to be using.

If your goal is to retrieve joinWebUrl or meeting details while using delegated authentication, you might consider calling Microsoft Graph API instead of the Teams SDK.
Refer to this endpoint: https://free.blessedness.top/en-us/graph/api/onlinemeeting-get?view=graph-rest-1.0&tabs=http
Or use the Graph SDK: https://free.blessedness.top/en-us/graph/sdks/sdks-overview

I hope this clarifies why the error occurs and helps you move forward.

Hi, @Kudos-Ng
Thank for specify 2 types of token. It's very helpful!!
I want to use Microsoft Graph API by "authentication.getAuthToken()" (Delegated type), but have error on token.

I send manifest.json and local.yml on message to you.

The error show https://localhost:53000 not match, but I already replace this local url on local.yml.

{
	message: "App resource defined in manifest and iframe origin do not match",
	stack: "Error: App resource defined in manifest and iframe origin do not match\n    at https://localhost:53000/static/js/bundle.js:3305:13"
}

Can you take a look? Thank you!!

Hi Avery Lin,

Thank you for sharing your manifest and configuration details.

After reviewing the documentation for the library you’re using and the way you implemented authentication, it appears you’re currently using SSO for your Teams app, correct? Based on that, here’s what’s happening and how you can resolve the issue.

The error occurs because authentication.getAuthToken() is designed to issue a Microsoft Entra token for the resource defined in your manifest (webApplicationInfo.resource). In your latest manifest, this resource is set to https://graph.microsoft.com, which is incorrect for Teams SSO. This method does not return a Graph token directly; it returns a token for your app’s resource so you can authenticate with your backend or exchange it for a Graph token using the On-Behalf-Of (OBO) flow.

To fix the mismatch and enable proper token handling:

• Update webApplicationInfo.resource in your manifest to match the Application ID URI configured in Azure AD under Expose an API, for example:

    api://<your-ngrok-backend-domain>/<Azure AD App ID> 
  

• Add both localhost and your ngrok domain to validDomains so Teams allows the iframe origin during development.
• In Azure AD, ensure the Application ID URI matches the value you set in the manifest.

Once this is corrected, remember that the token from getAuthToken() is for your app resource, not Graph. To call Microsoft Graph, you have two options:

• If you have a backend (your ngrok API), implement the OBO flow to exchange the Teams SSO token for a Graph token. This is the recommended approach for security and silent authentication. The following are quick OBO steps::
  1. Receive the token from getAuthToken() in your backend.
  2. Call https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token with:
     • grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer
     • requested_token_use=on_behalf_of
     • scope=https://graph.microsoft.com/.default
     • assertion=<Teams SSO token>
  3. Microsoft Identity Platform returns a Graph token you can use to call endpoints like: GET https://graph.microsoft.com/v1.0/me/onlineMeetings/{meetingId}
  Full guide: https://free.blessedness.top/en-us/entra/identity-platform/v2-oauth2-on-behalf-of-flow#first-case-access-token-request-with-a-shared-secret
• If your app is client-only and you prefer not to use OBO, use MSAL.js to request Graph scopes directly (e.g., User.Read, OnlineMeetings.Read). This will prompt user consent and return a Graph token you can use immediately. Guide: https://free.blessedness.top/en-us/entra/identity-platform/quickstart-single-page-app-sign-in?pivots=workforce&tabs=javascript-workforce%2Cjavascript-external

I hope the insights above are helpful.

Hi Avery Lin,

I hope you're doing well. Just wanted to follow up and see if there's been any progress on the issue we discussed. 

Let me know if there's anything I can assist you with further. 

Hi, @Kudos-Ng
Thank you for give the advice to use msal.js.
I want to use msal.js to get token and use graph api to get join meeting link.

But I get error on "msalInstance.loginPopup(loginRequest)".

Here is the error and code.

And I sent config and settings on messages, can you take a look? thanks!!
the error id(correlationId), I sent on messages.

error

{
    "errorCode": "url_parse_error",
    "errorMessage": "URL could not be parsed into appropriate segments.",
    "subError": "",
    "name": "ClientConfigurationError",
    "correlationId": "sent id on messages"
}

code

const MSAL_CONFIG = {
  auth: {
    clientId: "teams app id",
    authority: "teams app tenant id",
    redirectUri: "ngrok url for side panel website path",
  },
};

function initializeAndLogin() {
	const msalInstance = new msal.PublicClientApplication(MSAL_CONFIG);
	return msalInstance
	  .initialize()
	  .then(() => {
		const loginRequest = {
		  scopes: ["User.Read", "OnlineMeetings.Read"],
		};
		return msalInstance.loginPopup(loginRequest);
	  })
	  .then((loginResponse) => {
		console.error("loginResponse:", loginResponse);
		
		return loginResponse.accessToken;
	  })
	  .catch((error) => {
		console.error("error:", error);
		throw error;
	  });
}

initializeAndLogin()
	.then((accessToken) => {
	  if (accessToken) {
		fetch("https://graph.microsoft.com/v1.0/me/onlineMeetings", {
		  headers: {
			Authorization: `Bearer ${accessToken}`,
		  },
		})
		  .then((res) => {
			console.error("res:", res);
			return res.json();
		  })
		  .then((res) => {
			console.error("res:", res);
		  })
		  .catch((error) => {
			console.error("error:", error);
			throw error;
		  });
	  }
	})
	.catch((error) => {
	 console.error("error:", error);
});

Hi Avery Lin,

Thank you for the update and for sharing the latest error details and code.

I reviewed your MSAL configuration for the client tab app and the error ClientConfigurationError: url_parse_error. Here is what I have observed:

The error indicates a malformed auth.authority. MSAL requires a fully qualified authority URL, not a bare tenant string. The correct format is: https://login.microsoftonline.com/<tenant-id-or-tenant-domain>

Using values such as "teams app tenant id" triggers this parsing error. Please replace it with your tenant GUID or domain (e.g., contoso.onmicrosoft.com).

Hope this helps.

Hi, @Kudos-Ng
Thank you for helping me find the error on config!!
I change to use "https://login.microsoftonline.com/common" in authority of MSAL_CONFIG.
https://free.blessedness.top/en-us/entra/identity-platform/msal-client-application-configuration

but I get error below:

{
    "errorCode": "popup_window_error",
    "errorMessage": "Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.",
    "subError": "",
    "name": "BrowserAuthError",
    "correlationId": "send id in messages"
}

So I change to redirect function "msalInstance.loginRedirect(loginRequest)", but get another error.

{
    "errorCode": "redirect_in_iframe",
    "errorMessage": "Redirects are not supported for iframed or brokered applications. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs.",
    "subError": "",
    "name": "BrowserAuthError"
}

Please take a look, thank you!!

Hi Avery Lin,

Thank you for sharing the latest errors and context.

Based on your app running as a Teams tab (meeting side panel), the behavior you’re seeing aligns with documented limitations of MSAL in iframe environments.

About loginRedirect in an iframe
MSAL’s redirect APIs aren’t supported when the app is rendered inside an iframe. The library intentionally blocks full‑frame redirects in embedded contexts because the Microsoft Entra sign‑in pages refuse to render in iframes to prevent clickjacking. This is why you receive BrowserAuthError: redirect_in_iframe.

Reference: https://free.blessedness.top/en-us/entra/msal/javascript/browser/iframe-usage

In an iframe tab, the only interactive option MSAL permits is the popup flow (loginPopup). However, your current popup_window_error indicates the popup cannot be opened (or MSAL cannot obtain a valid window handle). In Teams web this commonly results from popup blockers, host restrictions, or policy/CSP settings that prevent popups in embedded content. Please review the following references:

• Known issues due to popup blockers (IE/Edge) and null window handles: https://free.blessedness.top/en-us/entra/identity-platform/msal-js-known-issues-ie-edge-browsers#issues-due-to-popup-blockers
• MSAL popup API guidance and initialization notes: https://free.blessedness.top/en-us/entra/msal/javascript/browser/initialization#popup-apis
• Community report of popup_window_error and handling considerations: https://stackoverflow.com/questions/78208429/browserautherror-popup-window-error-error-opening-popup-window-on-azure-msal

Hope this helps.

Hi @Kudos-Ng ,
Thank for help me to resolves popup issue, now the popup is show up.
But I get the error on the popup, can you take a look? thanks!!

The config is as same as sent on message.

Hi Avery Lin,

Thank you for the update and the screenshot.

The error shown is AADSTS50011: The redirect URI … does not match the redirect URIs configured for the application. This indicates that the redirectUri your MSAL popup flow sends does not exactly match any Redirect URI registered for your app in Microsoft Entra ID (Azure AD).

Please ensure that the exact redirectUri used by your client (including scheme, host, path, and any trailing slash) is added under App registrations > Authentication > Single‑page application.

For additional guidance, see:

• How to add a redirect URI: https://free.blessedness.top/en-us/entra/identity-platform/how-to-add-redirect-uri
• Why redirect URIs must be added to an app registration: https://free.blessedness.top/en-us/entra/identity-platform/reply-url#why-do-redirect-uris-need-to-be-added-to-an-app-registration

Hope this help!

Hi @Kudos-Ng ,
Thank you for help me to resolves redirectURL, now it works!!

It seems popup redirect twice, one is for microsoft auth, and then go to redirectURL.

But I can't find some confirm or clickable button on popup. (like accept or reject)
And I also can't find token on popup url. (I sent "popup url" on messages to you.)
Here is setting on config and azure.

Please take a look, thank you!!