HTML DOM blocked on first login when generating a token using implicit grant flow

[akshay_k]

Hi there everyone!

We are temporarily using Implicit grant flow in Power Apps portal to generate a token and access images from Dataverse tables using the generated token by passing the token with an XMLHttpRequest that returns an Image blob.

Once the user logs into the website the getToken() function will be called automatically that generates the token

function getToken() {
    var ret_token;
     authContext.acquireToken(resource,
        function(errorDesc, token) {
        if (errorDesc) {
          authContext.login();
        } else {
          ret_token = token;
        }
      });
    return ret_token;
  };

The first time the user logs into the website using Azure AD login, the function getToken() does not even get called and this results in a DOM Reflow. After the reflow, the function is called a second time and now the token is generated but the DOM will be blocked and images cannot be set into the DOM.

Only after refreshing the page after the first login once the images will be set.

After closing the browser and restarting the browser the issue exists. Once you close all tabs and open the website without closing the browser entirely the issue does not exist.

Any help would be greatly appreciated and it has been a very confusing issue.

Thank you all!

[chleverenz]

Hi @akshay_k ,

i think the problem is the use of the variable ret_token. This will not be set i assume as the acquiretoken method is called asynchronously.

I might be wrong but i think you have to pass in a callback which is called instead to ret_token = token assignment.

So, the functionsignature could be something like getToken(callback) and instead of ret_token = token; you use callback(token).

Even better would be to rewrite it as a promise and do sth like gettoken().then(...)

Hope this is no bull**bleep** comment and helps a little bit,

  Christian