SPFx adal acquire token renewal failed

Question

I have created an angular-adal SPFx project, now when I'm trying to acquire the token. It always displays a message:

Token renewal operation failed due to timeout

adal.acquireToken("Dynamic 365 API", (error, token)=>{

console.log("error");

});

EDIT

After using the inbuilt spfx AadHttpClient, the issue which I am Facing.

Error: The requested operation is part of an experimental feature that is not supported in the current environment.

Code

this.context.aadHttpClientFactory.getClient('https://tenant.onmicrosoft.com/{ApplicationId}').then((client: AadHttpClient): void => {
    client.get('https://graph.microsoft.com/v1.0/me', AadHttpClient.configurations.v1).then((response: HttpClientResponse): Promise<JSON> => {
      debugger;
      return response.json();
    })
    .then((responseJSON: JSON): void => {

      debugger;
      var claimsTable = this.domElement.getElementsByClassName("azFuncClaimsTable")[0];
      for (var key in responseJSON) {
        var trElement = document.createElement("tr");
        // trElement.innerHTML = `<td class="${styles.azFuncCell}">${key}</td><td class="${styles.azFuncCell}">${responseJSON[key]}</td>`;
        claimsTable.appendChild(trElement);
      }
    });
  });

Line where error comes

client.get('https://graph.microsoft.com/v1.0/me', AadHttpClient.configurations.v1).then((response: HttpClientResponse): Promise<JSON> => {

Image Description

Thanks for the help!

Answer 1

If possible, I recommend you to upgrade your solution to the latest SPFx 1.6 version and get rid of adal.js in your code. Read here more about the release and how to upgrade your solution.

Why I suggest moving to 1.6:

• adal.js inside SPFx has lots of caveats you should be aware of. You should implement everything by yourself, which might be error prone because of complexity
• SPFx 1.6 introduced new helper classes for such things as Azure AD authentication. Please read this article to learn, how to send authenticated http requests to your API with SPFx 1.6. It's not surprise, that internally Microsoft uses adal.js, however they use patched version, which works smoothly

This great article by @Vardhaman Deshpande contains a very good sample on how to call Azure AD protected API hosted as Azure function with SPFx 1.6 features.