[email protected] TeamsUserCredential.getToken results in login required error

Question

I'm creating a Teams Static web application to be used in teams.

The error I am getting when trying to get the Teams a teams access token is as follows:

Failed to get access token cache silently, please login first: you need login first before get access token

Code that has the error:

const { 
  loading,
  theme,
  themeString,
  teamsUserCredential
} = useTeamsUserCredential({
        initiateLoginEndpoint: `${process.env.REACT_APP_INITIATE_LOGIN_ENDPOINT}/auth-start.html`,
        clientId: process.env.REACT_APP_AAD_APP_CLIENT_ID as string
    });
 
// calling getToken
const scopes = [
        "openid",
        "profile",
        process.env.REACT_APP_API_SCOPE as string,
    ];
 
// Throws the "please login first" error 

const token = await teamsUserCredential?.getToken(scopes)

The issue is only occurring on "New Teams" for Mac. The same code works on "New Teams" on Windows.

To get around the issue I have added code to allow the user to login:

teamsUserCredential.login(scopes)

Logging in solves the issue temporarily, however if I close teams and open it again users are forced to login again.

Business requirement was to put the application into Teams so that users did not have to login.

---------------- UPDATE -------------

Using a sample project from microsoft I tried the following and it still failed:

const apiClient = createApiClient( 
  ${baseUrl}/,
  new BearerTokenAuthProvider(async () => (await credential!.getToken(scopes))!.token) 
) 

apiClient.get('accounts').then((response: any) => { 
  return response.data; })
.catch((err: any) => { trackException(err); });

Answer 1

The issue was related to the @azure/msal-browser package.

The auth-start.html and auth-end.html used a different msal-browser version than my application was using. The sessionStorage cache was not compatible between the different versions.

My auth-start.html and auth-end.html files referenced msal-browser 2.21.0 using a cdn reference.

The @microsoft/teamsfx package.json used msal-browser: "^2.21.0" this led to a msal-browser version "2.37.1" being installed.

The cache created with version 2.21.0 was not compatible with 2.37.1.

I upgraded my CDN reference to a more recent msal-browser version and it works!!

Answer 2

The error message indicates that the app failed to silently get access token using Auth Code flow. Currently Auth Code flow is not quite stable on different Teams platforms due to several problems.

OBO flow can solve your problem, and you can find sample app here.