I am trying to get the access token in a teams app. but i always end up with this error “app resource defined in manifest and iframe origin do not match”

after creating the Entra ID app then using it in the teams developer platform then opening the app in teamstoolkit in debugger chrome, I tried to fetch the access token in the teams app, but i always get this error “app resource defined in manifest and iframe origin do not match”

I tried changing the manifest > webApplicationInfo > resouce : between this
“api://localhost:53000/{AAD App client id}”
and this “api://{domain where teams is deployed}/{AAD App client id}”

but still getting the same error

src="https://res.cdn.office.net/teams-js/2.24.0/js/MicrosoftTeams.min.js"

microsoftTeams.authentication.getAuthToken({
    successCallback: function (result) {
    
    console.log(result);
    document.getElementById("token").innerText = "User token: " + result;
        },
    failureCallback: function (error) {
        // Handle error here
        console.log(error);
        document.getElementById("token").innerText = "error: " + error;
    },
    resources: ["https://graph.microsoft.com"],
});

In the manifest i have the following

"validDomains": [
    "localhost:53000"
],
"webApplicationInfo": {
    "id": "{AAD App client id}",
    "resource": "api://localhost:53000/{AAD App client id}"
},