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

%3CLINGO-SUB%20id%3D%22lingo-sub-1876039%22%20slang%3D%22en-US%22%3EHow%20to%20avoid%20errors%20in%20the%20authentication%20pop-up%20when%20using%20the%20mgt%20Teams%20Provider%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1876039%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20building%20a%20Teams%20tab%20using%20the%20Microsoft%20Graph%20Toolkit%20with%20Teams%20Provider%20in%20a%20React.js%20application.%3C%2FP%3E%3CP%3EThe%20page%20corresponding%20to%20my%20tab%20is%20the%20following%20%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20React%20from%20%22react%22%3B%0Aimport%20%7B%20Providers%2C%20TeamsProvider%20%7D%20from%20'%40microsoft%2Fmgt'%3B%0Aimport%20*%20as%20microsoftTeams%20from%20%22%40microsoft%2Fteams-js%22%3B%0A%0A%2F%2F%20Set%20up%20Teams%20Provider%20for%20ms%20graph%0ATeamsProvider.microsoftTeamsLib%20%3D%20microsoftTeams%3B%0AProviders.globalProvider%20%3D%20new%20TeamsProvider(%7B%0A%20%20%20%20clientId%3A%20'*-*-*-*-*'%2C%0A%20%20%20%20authPopupUrl%3A%20'https%3A%2F%2Fhrflow.eu.ngrok.io%2Fauth'%0A%7D)%0A%0A%2F%2F%20Define%20custom%20mgt%20elements%20as%20intrinsic%20JSX%20elements%20to%20avoid%20tsx%20errors%0Adeclare%20global%20%7B%0A%20%20%20%20%2F%2F%20eslint-disable-next-line%20%40typescript-eslint%2Fno-namespace%0A%20%20%20%20namespace%20JSX%20%7B%0A%20%20%20%20%20%20%20%20interface%20IntrinsicElements%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20'mgt-login'%3A%20any%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%0Aconst%20MgtTab%3A%20React.FC%20%3D%20()%20%3D%26gt%3B%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CDIV%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CMGT-LOGIN%3E%3C%2FMGT-LOGIN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CH1%20id%3D%22toc-hId-587532558%22%20id%3D%22toc-hId-587532558%22%20id%3D%22toc-hId-587532558%22%20id%3D%22toc-hId-587532558%22%3ETest%20from%20content%3C%2FH1%3E%0A%20%20%20%20%20%20%20%20%3C%2FDIV%3E%0A%20%20%20%20)%0A%7D%0A%0Aexport%20default%20MgtTab%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThe%20authentication%20page%20is%20the%20following%3A%3CBR%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20React%20from%20'react'%3B%0Aimport%20*%20as%20microsoftTeams%20from%20%22%40microsoft%2Fteams-js%22%3B%0Aimport%20%7BTeamsProvider%7D%20from%20'%40microsoft%2Fmgt'%3B%20%0A%0A%0Aconst%20Auth%3A%20React.FC%20%3D%20%20()%20%3D%26gt%3B%20%20%7B%0A%20%20%20%20TeamsProvider.microsoftTeamsLib%20%3D%20microsoftTeams%3B%0A%20%20%20%20TeamsProvider.handleAuth()%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%26lt%3B%26gt%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20)%0A%7D%0A%0Aexport%20default%20Auth%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EWhen%20I%20click%20on%20the%20sign-in%20button%20on%20my%20tab%20page%20I%20have%20one%20the%20following%20errors%3A%3C%2FSPAN%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22error_2.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F232900iCA50A2CA0CC433D8%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22error_2.png%22%20alt%3D%22error_2.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22error_1.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F232898i41CBC116A3ED6E0A%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22error_1.png%22%20alt%3D%22error_1.png%22%20%2F%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EIt%20seems%20my%20application%20registration%20is%20correctly%20configured%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22configuration_azuread.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F232899i9AC5A8D030620534%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22configuration_azuread.png%22%20alt%3D%22configuration_azuread.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EDoes%20anyone%20see%20what%20am%20I%20doing%20wrong%20and%20what%20could%20explain%20the%20errors%20I%20have%20%3F%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1876039%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1894423%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20avoid%20errors%20in%20the%20authentication%20pop-up%20when%20using%20the%20mgt%20Teams%20Provider%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1894423%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F208427%22%20target%3D%22_blank%22%3E%40Alexandre%20Nedelec%3C%2FA%3E%26nbsp%3B-%20Could%20you%20please%20try%20adding%20the%20auth%20enpoint%20as%20shown%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Nikitha-MSFT_0-1605610782606.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F234092i27522138007C4724%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Nikitha-MSFT_0-1605610782606.png%22%20alt%3D%22Nikitha-MSFT_0-1605610782606.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3Ealso%20Could%20you%20please%20check%20this%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsamples%2Fofficedev%2Fmicrosoft-teams-sample-auth-node%2Fmicrosoft-teams-auth%2F%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Edocs%3C%2FA%3E%20and%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOfficeDev%2Fmicrosoft-teams-sample-auth-node%2Ftree%2Fmaster%2F%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Esample%3C%2FA%3E%20%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1894996%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20avoid%20errors%20in%20the%20authentication%20pop-up%20when%20using%20the%20mgt%20Teams%20Provider%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1894996%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F590590%22%20target%3D%22_blank%22%3E%40Nikitha-MSFT%3C%2FA%3E%26nbsp%3BI%20am%20not%20sure%20to%20understand%2C%20where%20do%20I%20need%20to%20add%20the%20auth%20endpoint%20%3F%3CBR%20%2F%3E%3CBR%20%2F%3EI%20had%20a%20look%20at%20the%20sample%20but%20this%20is%20a%20NodeJs%20application%20but%20it%20does%20not%20seem%20to%20correspond%20to%20my%20use%20case%20which%20is%20to%20use%20the%20Microsoft%20Graph%20Toolkit%20Teams%20Provider%20without%20having%20exceptions.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional 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://***.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:error_2.pngerror_1.png

It seems my application registration is correctly configured:

 

configuration_azuread.png

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

Nikitha-MSFT_0-1605610782606.png

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.