Forum Discussion
How to avoid errors in the authentication pop-up when using the mgt Teams Provider ?
I am building a Teams tab using the Microsoft Graph Toolkit with Teams Provider in a React.js application.
The page corresponding to my tab is the following :
import React from "react";
import { Providers, TeamsProvider } from '@microsoft/mgt';
import * as microsoftTeams from "@microsoft/teams-js";
// Set up Teams Provider for ms graph
TeamsProvider.microsoftTeamsLib = microsoftTeams;
Providers.globalProvider = new TeamsProvider({
clientId: '*-*-*-*-*',
authPopupUrl: 'https://***.eu.ngrok.io/auth'
})
// Define custom mgt elements as intrinsic JSX elements to avoid tsx errors
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'mgt-login': any;
}
}
}
const MgtTab: React.FC = () => {
return (
<div>
<mgt-login></mgt-login>
<h1>Test from content</h1>
</div>
)
}
export default MgtTab;
The authentication page is the following:
import React from 'react';
import * as microsoftTeams from "@microsoft/teams-js";
import {TeamsProvider} from '@microsoft/mgt';
const Auth: React.FC = () => {
TeamsProvider.microsoftTeamsLib = microsoftTeams;
TeamsProvider.handleAuth();
return (
<>
</>
)
}
export default Auth;
When I click on the sign-in button on my tab page I have one the following errors:
It seems my application registration is correctly configured:
Does anyone see what am I doing wrong and what could explain the errors I have ?
- Nikitha-MSFTMicrosoft
alexandrenedelec - Could you please try adding the auth enpoint as shown
- alexandrenedelecBrass Contributor
Nikitha-MSFT I am not sure to understand, where do I need to add the auth endpoint ?
I had a look at the sample but this is a NodeJs application but it does not seem to correspond to my use case which is to use the Microsoft Graph Toolkit Teams Provider without having exceptions.