How to embed an existing full-stack (React + .NET + External identity management system) Azure-hosted web app into Microsoft Teams and support all screens with authentication?

Question

Hi everyone,

I have a full-stack web application hosted on Azure, built with:

Frontend: React (SPA)

Backend: .NET Web API

• Authentication: Some external identity management system

The application is already running smoothly on the web and being used by users. Now I want to embed the entire app (not just a single page) inside Microsoft Teams so that users can access it directly as a tab.

I tried to go through couple of articles and youtube videos related to it, but nowhere I found any reference for hosting a full fledge full stack app (which has a login) as a tab in MS Teams.

I have a few specific questions:

1. What’s the recommended approach for embedding an existing full-stack app (with multiple React routes and Auth0 authentication) inside Teams?

Do I need special configuration for React Router or .NET CORS to ensure all screens and API calls work correctly from within Teams?

Is it advisable (and secure) to embed the entire app, or should I expose only selected parts optimized for Teams?

Answer 1

Hi Shantanu Kalamdane

Thank you for reaching out to Microsoft Q&A forum

First of all, I would like to inform you that, as a forum moderator, I have limited access to resources and testing environments, the method I am about to share is purely based on my personal experience and the sources I have researched. Therefore, for technical in-depth information such as your requirements, the information I gather may not be able to completely meet all the requirements, however, I hope it can be helpful to you as well as we can discuss this issue further. 

Regarding your first question: What’s the recommended approach for embedding an existing full-stack app (with multiple React routes and Auth0 authentication) inside Teams? 

As far as I know, the recommended approach is to bed your existing web app as a Microsoft Teams tab using the Teams JavaScript SDK. 

Initially, host your React SPA and .NET Web API (e.g., on Azure) and ensure the frontend is publicly accessible.  

• In the Teams Developer Portal, create an app and define its manifest.json with metadata, icons, and tab configuration.  
• Set your React app’s root URL as the tab’s content URL, allowing the full SPA, including React Router routes to load inside Teams via an iframe.  
• Map your app’s use cases (personal, channel, or group tabs) to Teams features like deep linking for navigation. 

For Auth0 authentication, use the OAuth 2.0 flow with the Teams JS SDK (v1.4.1+). Call authentication.authenticate() in your React app to open a popup for Auth0 login. After login, handle the returned access token securely and validate the state parameter.  

In Auth0, allow the Teams domain and set cookies with SameSite=Lax for iframe compatibility. For enterprise or multi-tenant setups, consider linking Auth0 identities with Microsoft Entra ID for smoother SSO. 

Link references:

Integrate Web App Experience in Teams - Teams | Microsoft Learn

Configure OAuth Authentication for Tab - Teams | Microsoft Learn

Enable OAuth Authentication for Tab - Teams | Microsoft Learn  

Regarding your second question: Do I need special configuration for React Router or .NET CORS to ensure all screens and API calls work correctly from within Teams? 

Yes, specific configurations are required to handle the iframe embedding in Teams.  

For React Router: 

It usually works fine inside Teams since routing happens client-side. You have to make sure the tab content URL points to your SPA’s entry point (index.html) and use relative paths for assets and API calls to avoid iframe path issues. 

If navigation problems occur, try using HashRouter instead of BrowserRouter and handle deep links via the Teams JS SDK. 

For .NET CORS: 

Configure it in your Web API to allow cross-origin requests from Teams, as the tab runs in an iframe from domains like teams.microsoft.com.  

• In Program.cs, use AddCors to define a policy with WithOrigins("https://teams.microsoft.com") (or specific allowed origins), AllowAnyMethod(), AllowAnyHeader(), and AllowCredentials() if needed for authenticated requests.  
• Apply the policy globally with UseCors() middleware after UseRouting() and before UseAuthorization(), or use the [EnableCors] attribute on controllers for granular control.  

This handles preflight OPTIONS requests automatically and prevents CORS errors during API calls from the embedded React app. If your app uses credentials (e.g., cookies), avoid wildcard origins for security.  

Link references: 

Enable Cross-Origin Requests (CORS) in ASP.NET Core | Microsoft Learn

Geeting CORS in API while calling inside Teams APP TAB | Microsoft Community Hub

Finally, your last question: Is it advisable (and secure) to embed the entire app, or should I expose only selected parts optimized for Teams? 

From my perspective view, embedding the entire app is advisable if it fits user workflows in Teams, but best practices favor exposing selected, optimized parts for better usability and performance with full embedding without adaptation risks issues like poor mobile support or cluttered UI. Use tabs for core features, deep linking for navigation, and external links for the full app

From a security perspective, embedding the entire app is secure if implemented correctly: Use OAuth with Auth0 for authentication, enforce multifactor authentication (MFA), and validate all identity info rather than trusting Teams context. Implement single sign-on (SSO) where possible via identity mapping with Microsoft Entra ID, restrict third-party access through app permission policies, and follow Teams design guidelines to prevent vulnerabilities like cross-site scripting (XSS). Avoid exposing sensitive APIs without proper CORS and credential controls. If the app handles sensitive data, consider compliance with environments like GCC, and monitor for risks such as phishing in embedded links. Overall, partial exposure reduces attack surface while maintaining security. 

Link references:

Security guide for Microsoft Teams overview - Microsoft Teams | Microsoft Learn

Factors to Consider for App Integration - Teams | Microsoft Learn  

As mentioned above, my testing environment is very limited, and this error is completely beyond my control in this role. Therefore, I suggest you can try to reach out to another forum such as Microsoft Tech Communityor GitHub, where there are many experienced experts for more insight.

Hope my answer will help you, for any further concern, kindly let me know in the comment section.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".     

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

To embed your existing full-stack web application (React + .NET) into Microsoft Teams as a tab, you should consider the following steps and recommendations:

1. Embedding the Application: You can embed your entire application within a Teams tab by creating a manifest for your app that includes the necessary configurations. This allows your app to load inside an <iframe> within Teams. Ensure that your application is accessible via HTTPS, as Teams requires secure connections.
2. Authentication: Since your application uses an external identity management system (like Auth0), you will need to ensure that the authentication flow works seamlessly within the Teams environment. Teams supports Single Sign-On (SSO), which can be beneficial for users who are already authenticated in Teams. You may need to configure your authentication provider to allow for this integration.
3. React Router Configuration: If your application uses React Router for navigation, you should ensure that it can handle the routing correctly when embedded in Teams. This typically involves making sure that your routes are compatible with the <iframe> context. You might need to adjust your routing strategy to handle deep links properly within Teams.
4. CORS Configuration: For your .NET Web API, ensure that Cross-Origin Resource Sharing (CORS) is configured to allow requests from the Teams domain. This is crucial for API calls made from your embedded application to function correctly.
5. Security Considerations: While embedding the entire app is possible, consider whether all parts of the app are necessary for the Teams experience. It may be more secure and efficient to expose only the parts of the application that are optimized for Teams, especially if there are sensitive operations or data involved.
6. Testing and Optimization: After embedding, thoroughly test the application within Teams to ensure that all functionalities work as expected. Pay attention to performance and user experience, as embedding can introduce new challenges in these areas.

By following these guidelines, you can successfully embed your full-stack application into Microsoft Teams while ensuring that authentication and routing work seamlessly.

---

References:

• Embed Microsoft Teams in your app
• Considerations for building for Microsoft Teams using SharePoint Framework