When viewing a SharePoint page within an MS Teams tab, http requests made after switching the page to edit mode are failing

Requests are made using the MSGraphClientFactory provided in the @microsoft/sp-http package.

This package automatically acquires a token from the SharePoint api endpoint AcquireOBOToken providing a clientId. The problem is that the clientId changes when you edit the SharePoint page. This results in the token aquisition failing.

Upon refreshing the iframe, the web part displays correctly again.

This behaviour is observed using MS Teams for web and SPFx 1.19.0.

Is it possible to allow a user to edit a SharePoint page from within MS Teams without causing the api requests to fail like this?

Steps to reproduce

• Create a standard ReactJS SPFx webpart

• Install @microsoft/sp-http library in the package

• In the React component, make a request to the Graph API

  import * as React from 'react';
  import type { IHelloWorldProps } from './IHelloWorldProps';
  import { MSGraphClientFactory } from '@microsoft/sp-http';
  
  export default class HelloWorld extends React.Component<IHelloWorldProps, {email:string}> {
    constructor(props:IHelloWorldProps){
      super(props);
      this.state = {
        email: ""
      };
    }
    public componentDidMount(): void {
      const { serviceScope } = this.props;
      serviceScope.whenFinished(async ()=>{
        const msGraphClientFactory = serviceScope.consume(MSGraphClientFactory.serviceKey);
        const msGraphClient = await msGraphClientFactory.getClient('3');
        const me = await msGraphClient.api(`/me`).get();
        this.setState({
          email: me.mail
        });
      });
    }
    public render(): React.ReactElement<IHelloWorldProps> {
      return (
        <div>
          {this.state.email && <p>Your email is {this.state.email}</p>}
        </div>
      );
    }
  }
  

• Build, Bundle & Package the solution and upload to the app catalog

• Add the web part to the homepage of a SharePoint site connected to a Teams channel

• View the page in MS Teams and observe expected behvaiour – the email address is displayed

• Edit the page and then save the page

• Observe the email address is no longer displaying as expected