'Invalid audience' from Strapi Microsoft provider callback request in Angular app

Question

I am trying to configure authentication using Microsoft in an Angular app. I am able to authenticate in the app successfully. When I send the token I receive to http://localhost:1337/auth/microsoft/callback?access_token=${token} I get a response back saying 'Access token validation failure. Invalid audience.' I checked the token I am sending in jwt.io and the audience matches the client id configured in the Strapi admin config for the Microsoft provider. Am I missing a step?

My request looks like this and is fired after auth is complete and the token is set.

let token = window.localStorage.getItem('msal.idtoken') this.http.get(http://localhost:1337/auth/microsoft/callback?access_token=${token}`) .subscribe((res) => { console.log(res); });

EDIT:

Token decoded:

Azure App Registration:

Strapi Config:

EDIT:

Did not realize the access token was separate from the idToken. After digging through the network tab, I found the actual one and posted below. Calling this api to Strapi gets back a valid token. So it appears to be working. But I don't know how to retrieve this token programatically in the front end as it is being called as a Redirect URI. Is there a common strategy for capturing it from the url before it disappears to save in storage?

Accesstoken:

Permissions:

Answer 1

In your code, I find that you get the id token and use it to access your api, as you mentioned,it will raise 'Access token fail. Invalid audience.' error.You should use an access token to access your api.

For your question, Do you want to programmatically get access token?If so,you can refer to this.

The code usually like this:

getToken() {
        const accessTokenRequest = {
             scopes: [
                 "your api url",
             ],
            clientId: "xxxxxxxxxxxxxxxx",
            authority: "https://login.microsoftonline.com/(tenant)ID or tenant name",
            redirectUri: "http://localhost:4200",
        };
        this.authService
            .acquireTokenSilent(accessTokenRequest)
            .then((res) => {
                console.log("acquireTokenPopup");
                this.token = res.accessToken;
                this.getUser();
            })
            .catch((e) => {
                console.log("acquireTokenPopup catch");
                console.log(e);
            });
    }

And if you just want to store access token:

To save a string in Local Storage you use

window.localStorage.setItem(key, value);

You can get the value later with:

window.localStorage.getItem(key);

window.localStorage.setItem('access_token',token); window.localStorage.getItem('access_token');

hope it helps you.