I have a custom app deployed from Teams Admin center and have configured the endpoints as needed in Entra ID(Azure portal).

But with the authConfig file in microsoft/teamsfx, the graph client works fine in web app i.e., if I'm using Teams inside chrome on Web, at the same time if I run the app in Native teams app in Desktop, the graph client throws an error saying, "Please login first" for the same account

Using microsoft/teamsfx, microsoft/teamsjs, and microsoft/react-teamsjs

I expected the graph client to work in the same manner, with the teams sso token being available to it

Can someone help me with correct approach:

This is my code:

import React, { createContext, useState, useEffect } from "react";
import { TeamsUserCredential } from "@microsoft/teamsfx";
import { app, authentication } from "@microsoft/teams-js";
import { Theme } from "@fluentui/react-components";
import config from '@/config';
import { useTeamsUserCredential } from "@microsoft/teamsfx-react";
import { Client } from "@microsoft/microsoft-graph-client";
import { TokenCredentialAuthenticationProvider } from "@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials";
import Spinner from "@/components/Spinner";

export const TeamsFxContext = createContext<{
  theme?: Theme;
  themeString: string;
  teamsUserCredential?: TeamsUserCredential;
  ssoToken?: string;
  graphClient?: Client;
  userProfile?: any;
  userProfileImage: string;
}>({
  theme: undefined,
  themeString: "",
  teamsUserCredential: undefined,
  ssoToken: undefined,
  graphClient: undefined,
  userProfile: undefined,
  userProfileImage: ''
});

const TeamsFxContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<Theme | undefined>(undefined);
  const [themeString, setThemeString] = useState<string>("");
  const [ssoToken, setSsoToken] = useState<string | undefined>(undefined);
  const [inTeams, setInTeams] = useState<boolean>(false);
  const [userProfile, setProfileInfo] = useState<any>();
  const [userProfileImage, setUserProfileImage] = useState<string>('');

  const authConfig = {
    clientId: import.meta.env.VITE_CLIENT_ID,
    initiateLoginEndpoint: import.meta.env.VITE_START_LOGIN_PAGE_URL,
  };
  
  const { teamsUserCredential } = useTeamsUserCredential(authConfig);

  const [graphClient, setGraphClient] = useState<Client | undefined>(undefined);

  // Initialize Teams SDK and get token silently
  useEffect(() => {
    app.initialize().then((res) => {
      app.notifySuccess(); // Notify app ready
    });
  }, []);

  useEffect(() => {
    getTokenSilently();
  }, [app])

  const getTokenSilently = () => {
    authentication.getAuthToken()
    .then((token) => {
      app.getContext().then(
        (context) => {
          console.log("Context received:", context);
        });
      setSsoToken(token);
    })
    .catch((error) => {
      console.error("Error getting token:", error);
    });
  };

  useEffect(() => {
    if (teamsUserCredential) {
      getTokenSilently();
      const authProvider = new TokenCredentialAuthenticationProvider(teamsUserCredential, {
        scopes: [".default"], // Use default scopes from Azure AD
      });
  
      const client = Client.initWithMiddleware({ authProvider });
      setGraphClient(client);
    }
  }, [teamsUserCredential]);

  useEffect(() => {
    async function getUserProfile() {
      if (graphClient) {
        const profile = await graphClient.api("/me").get();
        setProfileInfo(profile);
      }
    }
    
    getUserProfile();
  }, [graphClient]);

  if (!userProfile) return <Spinner />

  return (
    <TeamsFxContext.Provider
      value={{
        theme,
        themeString,
        teamsUserCredential,
        ssoToken,
        graphClient,
        userProfile,
        userProfileImage
      }}
    >
      {children}
    </TeamsFxContext.Provider>
  );
};

export default TeamsFxContextProvider;