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

Question

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 ?

Answer 1

@Alexandre : We are investigating this internally.