Teams MSAL2 Provider - no_account_error in "non SSO" mode

[sebastienlevert]

Discussed in https://github.com/microsoftgraph/microsoft-graph-toolkit/discussions/1615

^{Originally posted by TobiKr March 17, 2022} Hi!

I am trying to acquire an access token with the Teams MSAL2 Provider (instead of creating my own MSAL2 implementation).

async componentDidMount(){
    // Initialize the Microsoft Teams SDK
    microsoftTeams.initialize();

    // Get the user context from Teams and set it in the state
    microsoftTeams.getContext((context: microsoftTeams.Context) => {
      this.setState({context});
    });

    
   // Initialize Graph Toolkit Auth Provider
   TeamsMsal2Provider.microsoftTeamsLib = microsoftTeams;

   let msal2Config: TeamsMsal2Config = {
     clientId: `${process.env.REACT_APP_GRAPH_CLIENTID}`,
     authPopupUrl: '/authpopup',
     scopes: [`${process.env.REACT_APP_GRAPH_SCOPES}`],
     httpMethod: HttpMethod.POST,
     autoConsent: true
     }

   Providers.globalProvider = new TeamsMsal2Provider(msal2Config); 

   let token: string = await Providers.globalProvider.getAccessToken();   
   console.log(token);
   
  }

I am getting this error:

Uncaught (in promise) BrowserAuthError: no_account_error: No account object provided to acquireTokenSilent and no active account has been set. Please call setActiveAccount or provide an account on the request.

What am I missing?

Thanks Tobias

[ghost]

Hello sebastienlevert, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[sebastienlevert]

Hey @TobiKr, let's continue the conversation here :)

Would you mind sharing a repro of your issue? I would love to dig into it! Thanks!

[TobiKr]

Hey @sebastienlevert , thanks for opening this issue :) I cannot share the entire repo, but the affected component (see below). It is quite straight forward and will hopefully help you to reproduce the issue.

Thanks, Tobias

import React, {Fragment} from 'react'
import * as microsoftTeams from '@microsoft/teams-js';
import { Text } from '@fluentui/react-northstar';
import { PeoplePicker, PersonType, UserType  } from '@microsoft/mgt-react';
import { IPerson } from '../../lib/Interfaces';
import { ProviderState, SimpleProvider } from '@microsoft/mgt-element';
import { Providers } from '@microsoft/mgt-element';

export interface ITabProps {
  selectedPerson: (selectedPerson: IPerson) => void;
}
interface ITabState {
  context?: microsoftTeams.Context;
  accessToken?: string;
  selectedPerson?: IPerson;
}
class CardManagerPeoplePicker extends React.Component<ITabProps, ITabState> {

  constructor(props: ITabProps){
    super(props)
    this.state = {
      context: undefined
    }

    this.onChange = this.onChange.bind(this); 
  }

  onChange(e: any){
    this.props.selectedPerson(e.detail[0]);
  }

  async componentDidMount(){
    // Initialize the Microsoft Teams SDK
    microsoftTeams.initialize();

    // Get the user context from Teams and set it in the state
    microsoftTeams.getContext((context: microsoftTeams.Context) => {
      this.setState({context});
    });
    
   // Initialize Graph Toolkit Auth Provider
   TeamsMsal2Provider.microsoftTeamsLib = microsoftTeams;

   let msal2Config: TeamsMsal2Config = {
     clientId: `${process.env.REACT_APP_GRAPH_CLIENTID}`,
     authPopupUrl: '/authpopup',
     scopes: [`${process.env.REACT_APP_GRAPH_SCOPES}`],
     httpMethod: HttpMethod.POST,
     autoConsent: true
     }

   Providers.globalProvider = new TeamsMsal2Provider(msal2Config); 

   let token: string = await Providers.globalProvider.getAccessToken();   
   console.log(token);
   
  }

  render() {   
    return (
        <Fragment>
            <div className="header">
                <div className="title">
                    <h2>Personen-Auswahl</h2>                    
                </div>
            </div>
            <div className="container-div" >
                <Text styles={{ width: '100%' }}>Bitte wähle hier die Person aus, für die du die Zugangskarten-Einstellungen bzw. das/die Zugangsprofil/e anpassen möchtest.</Text>
            </div>
            <div className="container-div" >
                <PeoplePicker 
                    selectionMode="single"
                    type={PersonType.person}
                    userType={UserType.user}
                    placeholder="Person suchen..."
                    selectionChanged={this.onChange}
                />
            </div>
        </Fragment>
    );
  }
}

export default CardManagerPeoplePicker;

[gavinbarron]

Closing this as the Teams MSAL2 Provider is deprecated