[BUG] mgt-teamsfx-provider failing to authenticate #3160
Comments
|
@SLdragon This looks to be an issue in the TeamsFxProvider |
|
Encountered the same issue in my project. Had another project that worked so tried to compare the two. Current dependencies: |
gavinbarron
changed the title
|
Had to downgrade the following dependencies according to your GitHub repo as well compared to the fluent-ui-tab-sample: |
Yep. This downgrade (along with a bunch of other changes for my actual application) fixed my issue. Definitely an issue with the teamsfx packages. |
|
The aforementioned packages have been updated recently. Do the new version cause the same issue? @seiggy @ThomasPe @kristofferarn |
care to share your solution for the issue? i'm struggling with this same thing. I've changed the deps following this thread and don't see the error anymore on the console but the components render empy 🥲 |
|
@musale, upgrading the packages to the latest version gives me the following error: |
|
@kristofferarn allow me to repro this and get back to you. |
|
@musale did you get a chance to repro? Would be nice if you could also check the teamsfx login and token logic with an external guest using iOS. |
@dario-pairup - So beyond the package changes here, because I was trying to write my React app to support running both in Teams and in the browser with SSO for both, the major change I made was splitting that out into two separate components instead of trying to use a single component to detect and load the correct provider. Now if the user comes from teams, I use a completely different host component I wrote that uses the <TeamsFxContext.Provider>, where my web host now uses my custom <AppContext.Provider> with MSAL. The Teams App host is pretty simple: export default function TeamsAppHost() {
const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredential({
initiateLoginEndpoint: config.initiateLoginEndpoint!,
clientId: config.clientId!
});
useEffect(() => {
const provider = new TeamsFxProvider(teamsUserCredential!, scopes);
Providers.globalProvider = provider;
}, [teamsUserCredential]);
const [state, setState] = useState({
searchTerm: '*',
sidebar: {
isMinimized: false
},
token: '',
theme: { key: 'default', fluentTheme: teamsLightTheme },
selectedTab: '',
breadcrumbs: ["None"] as BreadcrumbNavItem[]
});
return (
<TeamsFxContext.Provider value={{ theme, themeString, teamsUserCredential }}>
<FluentProvider
theme={
themeString === 'dark'
? teamsDarkTheme
: themeString === 'contrast'
? teamsHighContrastTheme
: {
...teamsLightTheme,
colorNeutralBackground3: "#eeeeee",
}
}
style={{ background: tokens.colorNeutralBackground3 }}
>
<AppContext.Provider value={{ state, setState }}>
{loading ? (
<Spinner style={{ margin: 100 }} />
) : (
<TeamsTab />
)}
</AppContext.Provider>
</FluentProvider>
</TeamsFxContext.Provider>
)
}I'm pretty new to React, so this is likely not anywhere near great code 🤣 |
|
@kristofferarn not yet :/ I've been engaged in another project so I'm getting back to MGT from this week. A little bit of backlog but I'll try my best to repro this week! |
Describe the bug
Following the tutorial from the MS Documentation on how to use Graph Toolkit with Teams Tab applications. After authorizing the app, the code throws errors in the console and nothing is displayed:
To Reproduce
Steps to reproduce the behavior:
3!-- if possible, please link to a GitHub project that reproduces the issue -->
Issue reproduced here:
https://github.com/seiggy/TeamsFxDebug
Expected behavior
The user's calendar should show up using the component.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
The text was updated successfully, but these errors were encountered: