Custom Teams Tab built with SharePoint SPFx - stuck at paging/navigation/authentication issues; NOT working in Teams DESKTOP client.

Serban 6 Reputation points
2020-11-20T10:18:48.507+00:00

Hi all,

I developed a custom MS Teams tab, using SPFx. So basically it's an SharePoint app (.sppkg file) installed in the SP AppCatalog Site, then deployed to Teams, and finally added as a tab in the channel (the "+" sign along the "Posts", "Files", etc. links. Inside it's a single-page app using a few react components.

At some point, I needed to obtain the authentication token from Azure: for this I created an app in my tenant's azure platform and I used adal.
Relevant code is extracted below:

export default class MyTab extends BaseClientSideWebPart<IMyTab> {  

    private _teamsContext: microsoftTeams.Context;  

    private getAzureToken(): void {  
        var options: AuthenticationContext.Options = {  
            clientId: this.properties.azureAppId, // I have this, it's an custom app property  
            extraQueryParameter: "scope=openid+profile&login_hint=" + encodeURIComponent(this._teamsContext.loginHint), //  
            popUp: true,  
            redirectUri: window.location.origin  
        };  
        let authContext = new AuthenticationContext(options);  
        authContext.acquireTokenPopup(authContext.config.loginResource, undefined, undefined, (errDesc, token, err) => {  
            // here I have the token and carry on...   
        });  
    }  
}  

This worked fine using Teams Web Client (FF, CH, Edge). When it needs to authenticate, it opens a small browser pop-up, where the user is prompted to choose the username, and once you click that, it's gone and the "callback" method continues running and has the token.

However, it does **not when running the Teams DESKTOP client**. A pop-up is opened in the system browser, but the Teams desktop app looses touch with it and continues execution without having access to the token. When I inspected the Teams desktop app developer tools section, I found the message "Popup Window is null. This can happen if you are using IE".

Then I tried an alternative approach using instructions from this page: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad , and this got me stuck at the "url" field.
I don't know what URL I should use, and I realized I don't know how to add a distinct "page" of my app, so that the user ***navigates* to it.**

Can somebody help me out with some hints, what/where to read about solving this issue ?

Thank you.

Microsoft Teams Development
Microsoft Teams Development
Microsoft Teams: A Microsoft customizable chat-based workspace.Development: The process of researching, productizing, and refining new or existing technologies.
2,843 questions
{count} votes