OidcClient Error in OfficeJS Excel Integration

Question

I am trying to integrate Login flow with oidc-client in Office JS excel add-in and below are the findings.

1. I could able to integrate as attached below code flow but in that i am getting some issue as attached in screen shot.
   
2. Kindly review the below latest code and suggest what i am missing.
3. Attached kind of CORS issue was not getting when tried with another library(office-js-helpers)with same end point parameters.

PFB updated latest code:

auth.ts

Office.initialize = function () {

    var settings = {
      authority: "https://xxxxxx.com/xxxx/xx",      
      client_id: "https://xxxxxxx.com/",
      redirect_uri: "https://localhost:3000/taskpane.html",
      // silent_redirect_uri:"https://localhost:3000/taskpane.html", 
      post_logout_redirect_uri: "https://xxxxxxx.com/",       
      response_type: "id_token token",
      scope: "openid read:xxxx read:xxxxxx read:xxxxxxx",
      state: true,
      clearHashAfterLogin: false,
      filterProtocolClaims: true,  
      loadUserInfo: true,
      nonce:true,       
    };
    Oidc.Log.logger = console;
    var mgr = new Oidc.UserManager(settings); 
    mgr.signinRedirect();
    mgr.signinRedirectCallback().then((user) => {       
      if (user) {
        console.log(user);

      } else {
        mgr.signinPopupCallback().then(function (user) {
          window.location.href = '../';
        }).catch(function (err) {
          console.log(err);
        });
        throw new Error('user is not logged in');
      }
    });    
  };

taskpane.ts

const loginpopup = function () {
      if (OfficeHelpers.Authenticator.isAuthDialog())
        return;     
      Office.context.ui.displayDialogAsync(
        url,
        { height: 60, width: 60, /*displayInIframe:true*/ },
        dialogCallback);
      function dialogCallback(asyncResult) {
        if (asyncResult.status == "failed") {
         
          switch (asyncResult.error.code) {
            case 12004:
              console.log("Domain is not trusted");
              break;
            case 12005:
              console.log("HTTPS is required");
              break;
            case 12007:
              console.log("A dialog is already opened.");
              break;
            default:
              console.log(asyncResult.error.message);
              break;
          }
        }
        else {
          dialog = asyncResult.value; 
          dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);
        }
      }
      function messageHandler(arg: any) {
        if (arg != "jsonMessage") {
          $(".loader").show();
          var test = JSON.parse(arg.message).value.split("#")[1].split("&")[1].split("=");         
          dialog.close();
        };
      }
}