Sharepoint webpart not able to get the auth token from teams

Question

I have a teams tab app in which I have a component in which I have the following code.

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { ITokenIssuer } from 
"../../interfaces/tokenIssuer/ITokenIssuer";
class TeamsTokenIssuer implements ITokenIssuer {
constructor(context:WebPartContext) {
    this.initializeMicrosoftTeamsApp(context);
}

private initializeMicrosoftTeamsApp = async (context:WebPartContext) => {
    console.log("initialize teams app");
    console.log(context);
    await context.sdks.microsoftTeams?.teamsJs.app.initialize();
}
async getAccessToken(context: WebPartContext): Promise<string> {
    microsoftTeams
    console.log("user",await context.sdks.microsoftTeams?.teamsJs.authentication.getUser());
    let accessToken: string | undefined = "";
    try {

        accessToken = await context.sdks.microsoftTeams?.teamsJs.authentication.getAuthToken();
    } catch(e) {
        console.log(e);
    }
    if(!accessToken) return "";
    return accessToken;
}
}

export default TeamsTokenIssuer;

chunk.spfx-core-teamsenv-teamsJs-v2_none_6e125c783faf9954e07e.js:1 Uncaught (in promise) Error: App does not have the required permissions for this operation My permissions for the app are - MicrosoftGraph email openid offline access profile user.read Permissions in my manifest.json file

"permissions": [
    "identity",
    "messageTeamMembers"
],

I have deployed this app in sharepoint and the app is hosted on a sharepoint domain