How to execute code before a Promise is resolved

When using the msal library one can authenticate using the redirect flow. This means the user is navigated to the Microsoft sign in page and after successful authentication he is navigated back to the SPA. The following code handles this:

auth
  .handleRedirectPromise()
  .then(() => {
    const { setAccountID } = useAccount()
    setAccountID()
  })
  .catch((error) => {
    console.log('login with redirect failed: ', error)
  })

The msal method handleRedirectPromise returns a Promise which we use to set the logged on account once it’s resolved. However, it would be great if it was possible to set the state of a loading button to true before this Promise gets called.

Is there a way to “hook in” to the Promise so some code can be executed before it is called?

In pseudo terms it would be something like: If handleRedirectPromise is called set the button sate loading to true and once it’s resolved set it to false.

Answer

The answer above from asliwinski is the right approach. Set the state of the button to loading before you instantiate PublicClientApplication, and then set the state once handleRedirectPromise has completed.

More context: MSAL.js will invoke this method in the constructor of PublicClientApplication, and it will be run on every page load, even if you are not returning from a redirect operation. This means you do not need to determine whether or not handleRedirectPromise was run, because it will run every time. You can use a combination of traditional promise semantics and the resolved value of the promise to determine what happened:

let msalLoading = true;

const msalInstance = new PublicClientApplication();

msalInstance.handleRedirectPromise()
  .then(result => {
     msalLoading = false;

     if (result) {
      // If result is truthy, your app returned from a redirect operation,
      // and it completed successfully
     } else {
       // If .then was called but result is falsey, that means your app is not returning
       // from a redirect operation (e.g. user visiting the site for the first time)
     }
  })
  .catch(error => {
     msalLoading = false;

     // If .catch is called, this means your app was returning from a redirect operation
     // and an error occurred.
   });