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

[alexandrenedelec]

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 ?

[#2]

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

also Could you please check this docs and sample ?

[#3]

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