Open
Description
I am working to publish a b2b SaaS app specifically in teams as a tab application. The tab application fails to mount the b2b app into iframe as shown in the screenshot below, but I am not seeing any relevant errors in chrome devtools (both network and console).

I am using the following CSP headers -
const nextConfig = {
reactStrictMode: true,
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Content-Security-Policy',
value:
'frame-ancestors https://teams.microsoft.com https://*.teams.microsoft.com https://*.office.com https://*.cloud.microsoft;'
}
]
}
];
}
};
module.exports = nextConfig;
Also, I have created a custom component to initialise the app from teams js sdk and used it in the root page (note: I am not seeing any of the console logs in Chrome Devtools console) -
'use client';
import { useEffect } from 'react';
const TeamsInit = () => {
useEffect(() => {
if (
typeof window !== 'undefined' &&
window.navigator.userAgent.includes('Teams')
) {
import('@microsoft/teams-js')
.then(({ app }) => {
app
.initialize()
.then(() => console.log('✅ Teams SDK initialized'))
.catch((err) => console.error('❌ Teams SDK init failed', err));
})
.catch((err) =>
console.error('❌ Failed to dynamically import Teams SDK', err)
);
}
}, []);
return null; // No UI
};
export default TeamsInit;
And used the custom component in the root page like this -
import dynamic from 'next/dynamic';
const TeamsInit = dynamic(() => import('../components/ms-teams/TeamsInit'), {
ssr: false
});
<Provider store={store}>
<ThemeProvider theme={theme}>
<TeamsInit />
<Layout {...pageProps}>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</Provider>
Any idea why this wouldn't be working?
Metadata
Metadata
Assignees
Labels
No labels