AcquireOBOToken failing when editing SharePoint page within Teams tab

[jacksonv1lle]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version - 1.19.0
• Node.js version - v18.19.1 MS Teams for web and SPFx

Describe the bug / error

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 to 08e18876-6177-487e-b8b5-cf950c1e598c (SharePoint Online Web Client Extensibility) when you edit the SharePoint page. This results in the token aquisition failing (Similar to this bug)

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

I have tried the steps outlined in this bug to re-generate the secret

Steps to reproduce

1. Create a standard ReactJS SPFx webpart

2. Install @microsoft/sp-http library in the package

3. 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>
        );
      }
    }
   

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

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

6. View the page in MS Teams and observe expected behvaiour - the email address is displayed

7. Edit the page and then save the page
8. Observe the email address is no longer displaying as expected

Expected behavior

The request should continue to work when editing a page