Search code examples
authenticationoauth-2.0microsoft-teams

How to pass the scopes I need in the microsoftTeams.authentication.authenticate() method


After creating a teams-tab-app using the vscode teams toolkit, I see that in the default auth-start.html file the script tries to extract the scopes from the URL (that was constructed by the microsoftTeams.authentication.authenticate() method), however I don't see any reference in the documentation on how to pass these scopes in this method.

Does anyone know how to pass these scopes?


Solution

  • I've wondered about this myself when looking at a toolkit, but I haven't used it for any production systems so never bothered to look too deep. I do see that in useTeamsFx.tsx is where it's doing the redirect to startLoginPageUrl, so presumably you need to set REACT_APP_START_LOGIN_PAGE_URL to be the path to the auth-start.html, so you could set it to include a querystring as well. It needs the app Id so you'd need to set that as well, but the useTeamsFx also wants REACT_APP_CLIENT_ID which you'd set as well. As a result, it might make sense to store the scopes you want in your code or in an environment variable as well, and then compose the value you send to initiateLoginEndpoint. Basically, instead of

    var startLoginPageUrl = process.env.REACT_APP_START_LOGIN_PAGE_URL;
    ...
    initiateLoginEndpoint: startLoginPageUrl
    ...
    

    you might instead make it

    var startLoginPageUrl = process.env.REACT_APP_START_LOGIN_PAGE_URL;
    var scopes = process.env.REACT_APP_SCOPES;  // <-- this is added
    ...
    initiateLoginEndpoint: `${startLoginPageUrl}?clientId=${clientId}&scope=${scopes}`
    ...
    

    but this is untested, so no guarantees.

    On a separate but related note, in my sample project, in auth-start, it refers to a very old version of MicrosoftTeams.min.js (v 1.6, and current is 1.11). I might just have a very old Teams Toolkit, but maybe not...