How to avoid errors in the authentication pop-up when using the mgt Teams Provider ?

Brass Contributor

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://***'

// 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 (
            <h1>Test from content</h1>

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;
    return (

export default Auth;



When I click on the sign-in button on my tab page I have one the following errors:error_2.pngerror_1.png

It seems my application registration is correctly configured:



Does anyone see what am I doing wrong and what could explain the errors I have ?

2 Replies

@Alexandre Nedelec - Could you please try adding the auth enpoint as shown


also Could you please check this docs and sample ?

@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.