@pega/custom-dx-components 8.8.10 → 8.8.12

package/src/auth.js

@@ -1,256 +1,272 @@
 class PegaAuth {
-    constructor(ssKeyConfig) {
-        if (typeof ssKeyConfig === "string") {
-            this.ssKeyConfig = ssKeyConfig;
-            this.#reloadConfig();
-        } else {
-            // object with config structure is passed in
-            this.config = ssKeyConfig;
-        }
-        this.urlencoded = 'application/x-www-form-urlencoded';
-        this.isNode = typeof window === 'undefined';
-
-        // For isNode path the below attributes are initialized on first method invocation
-        if (!this.isNode) {
-            this.crypto = window.crypto;
-            this.subtle = window.crypto.subtle;
-        }
-        if (!this.config.serverType) {
-            this.config.serverType = 'infinity';
-        }
+  constructor(ssKeyConfig) {
+    if (typeof ssKeyConfig === 'string') {
+      this.ssKeyConfig = ssKeyConfig;
+      this.#reloadConfig();
+    } else {
+      // object with config structure is passed in
+      this.config = ssKeyConfig;
     }
+    this.urlencoded = 'application/x-www-form-urlencoded';
+    this.isNode = typeof window === 'undefined';
 
-    #reloadConfig() {
-        if (!this.ssKeyConfig) {
-            return;
-        }
-        const peConfig = window.sessionStorage.getItem(this.ssKeyConfig);
-        let obj = {};
-        if (peConfig) {
-            try {
-                obj = JSON.parse(peConfig);
-            } catch (e) {
-                try {
-                    obj = JSON.parse(this.#atob(peConfig));
-                } catch (err) {
-                    obj = {};
-                }
-            }
-        }
-        this.config = peConfig ? obj : {};
+    // For isNode path the below attributes are initialized on first method invocation
+    if (!this.isNode) {
+      this.crypto = window.crypto;
+      this.subtle = window.crypto.subtle;
     }
+    if (!this.config.serverType) {
+      this.config.serverType = 'infinity';
+    }
+  }
 
-    #updateConfig() {
-        if (this.ssKeyConfig) {
-            window.sessionStorage.setItem(this.ssKeyConfig, this.#btoa(JSON.stringify(this.config)));
+  #reloadConfig() {
+    if (!this.ssKeyConfig) {
+      return;
+    }
+    const peConfig = window.sessionStorage.getItem(this.ssKeyConfig);
+    let obj = {};
+    if (peConfig) {
+      try {
+        obj = JSON.parse(peConfig);
+      } catch (e) {
+        try {
+          obj = JSON.parse(this.#atob(peConfig));
+        } catch (err) {
+          obj = {};
         }
+      }
     }
+    this.config = peConfig ? obj : {};
+  }
 
-    async #importSingleLib(libName, libProp) {
-        return import(libName).then((mod) => {
-            this[libProp] = mod.default;
-        }).catch((e) => {
-            console.error(`Library ${libName} failed to load`);
-        });
+  #updateConfig() {
+    if (this.ssKeyConfig) {
+      window.sessionStorage.setItem(this.ssKeyConfig, this.#btoa(JSON.stringify(this.config)));
     }
-
-    async #importNodeLibs() {
-        // Also current assumption is using Node 18 or better
-        return Promise.all([
-            this.#importSingleLib('node-fetch', 'fetch'),
-            this.#importSingleLib('open', 'open'),
-            this.#importSingleLib('node:crypto', 'crypto'),
-            this.#importSingleLib('node:https', 'https'),
-            this.#importSingleLib('node:http', 'http'),
-            this.#importSingleLib('node:fs', 'fs')
-        ]).then(() => {
-            this.subtle = this.crypto.subtle || this.crypto.webcrypto.subtle;
-            /* eslint-disable-next-line no-global-assign */
-            fetch = this.fetch;
-        });
+  }
+
+  async #importSingleLib(libName, libProp) {
+    return import(libName)
+      .then((mod) => {
+        this[libProp] = mod.default;
+      })
+      .catch((e) => {
+        console.error(`Library ${libName} failed to load`);
+      });
+  }
+
+  async #importNodeLibs() {
+    // Also current assumption is using Node 18 or better
+    return Promise.all([
+      this.#importSingleLib('node-fetch', 'fetch'),
+      this.#importSingleLib('open', 'open'),
+      this.#importSingleLib('node:crypto', 'crypto'),
+      this.#importSingleLib('node:https', 'https'),
+      this.#importSingleLib('node:http', 'http'),
+      this.#importSingleLib('node:fs', 'fs')
+    ]).then(() => {
+      this.subtle = this.crypto.subtle || this.crypto.webcrypto.subtle;
+      /* eslint-disable-next-line no-global-assign */
+      fetch = this.fetch;
+    });
+  }
+
+  // For PKCE the authorize includes a code_challenge & code_challenge_method as well
+  async #buildAuthorizeUrl(state) {
+    const {
+      serverType,
+      clientId,
+      redirectUri,
+      authorizeUri,
+      authService,
+      sessionIndex,
+      appAlias,
+      userIdentifier,
+      password,
+      noPKCE,
+      isolationId
+    } = this.config;
+    const bInfinity = serverType === 'infinity';
+
+    if (!noPKCE) {
+      // Generate random string of 64 chars for verifier.  RFC 7636 says from 43-128 chars
+      const buf = new Uint8Array(64);
+      this.crypto.getRandomValues(buf);
+      this.config.codeVerifier = this.#base64UrlSafeEncode(buf);
     }
 
-    // For PKCE the authorize includes a code_challenge & code_challenge_method as well
-    async #buildAuthorizeUrl(state) {
-        const { serverType, clientId, redirectUri, authorizeUri, authService, sessionIndex, appAlias,
-            userIdentifier, password, noPKCE, isolationId } = this.config;
-        const bInfinity = serverType === 'infinity';
-
-        if (!noPKCE) {
-            // Generate random string of 64 chars for verifier.  RFC 7636 says from 43-128 chars
-            const buf = new Uint8Array(64);
-            this.crypto.getRandomValues(buf);
-            this.config.codeVerifier = this.#base64UrlSafeEncode(buf);
-        }
-
-        // If sessionIndex exists then increment attempts count (we will stop sending session_index after two failures)
-        if (sessionIndex) {
-            this.config.sessionIndexAttempts += 1;
-        }
-        // Persist codeVerifier in session storage so it survives the redirects that are to follow
-        this.#updateConfig();
-
-        if (!state) {
-            // Calc random state variable
-            const buf = new Uint8Array(32);
-            this.crypto.getRandomValues(buf);
-            state = this.#base64UrlSafeEncode(buf);
-        }
-
-        // Trim alias to include just the real alias piece
-        const addtlScope = appAlias ? `+app.alias.${appAlias.replace(/^app\//, '')}` : '';
-        const scope = (bInfinity ? `openid${addtlScope}` : 'user_info');
-
-        // Add explicit creds if specified to try to avoid login popup
-        const authServiceArg = authService ? `&authentication_service=${encodeURIComponent(authService)}` : '';
-        const sessionIndexArg = sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '';
-        const userIdentifierArg = userIdentifier ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}` : '';
-        const passwordArg = password && userIdentifier ? `&Password=${encodeURIComponent(window.atob(password))}` : '';
-        const moreAuthArgs = bInfinity
-            ? `&enable_psyncid=true${authServiceArg}${sessionIndexArg}${userIdentifierArg}${passwordArg}`
-            : `&isolationID=${isolationId}`;
-
-        let pkceArgs = '';
-        if (!noPKCE) {
-            const cc = await this.#getCodeChallenge(this.config.codeVerifier);
-            pkceArgs = `&code_challenge=${cc}&code_challenge_method=S256`;
-        }
-        return `${authorizeUri}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scope}&state=${state}${pkceArgs}${moreAuthArgs}`;
+    // If sessionIndex exists then increment attempts count (we will stop sending session_index after two failures)
+    if (sessionIndex) {
+      this.config.sessionIndexAttempts += 1;
+    }
+    // Persist codeVerifier in session storage so it survives the redirects that are to follow
+    this.#updateConfig();
+
+    if (!state) {
+      // Calc random state variable
+      const buf = new Uint8Array(32);
+      this.crypto.getRandomValues(buf);
+      state = this.#base64UrlSafeEncode(buf);
     }
 
-    async login() {
-        if (this.isNode && !this.crypto) {
-            // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
-            await this.#importNodeLibs();
-        }
-        const { grantType } = this.config;
-        if (grantType && grantType !== 'authCode') {
-            return this.getToken();
-        }
-        return this.#authCodeStart();
+    // Trim alias to include just the real alias piece
+    const addtlScope = appAlias ? `+app.alias.${appAlias.replace(/^app\//, '')}` : '';
+    const scope = bInfinity ? `openid${addtlScope}` : 'user_info';
+
+    // Add explicit creds if specified to try to avoid login popup
+    const authServiceArg = authService ? `&authentication_service=${encodeURIComponent(authService)}` : '';
+    const sessionIndexArg =
+      sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '';
+    const userIdentifierArg = userIdentifier ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}` : '';
+    const passwordArg = password && userIdentifier ? `&Password=${encodeURIComponent(window.atob(password))}` : '';
+    const moreAuthArgs = bInfinity
+      ? `&enable_psyncid=true${authServiceArg}${sessionIndexArg}${userIdentifierArg}${passwordArg}`
+      : `&isolationID=${isolationId}`;
+
+    let pkceArgs = '';
+    if (!noPKCE) {
+      const cc = await this.#getCodeChallenge(this.config.codeVerifier);
+      pkceArgs = `&code_challenge=${cc}&code_challenge_method=S256`;
     }
+    return `${authorizeUri}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scope}&state=${state}${pkceArgs}${moreAuthArgs}`;
+  }
 
-    // authCode login issues the authorize endpoint transaction and deals with redirects
-    /* eslint-disable-next-line sonarjs/cognitive-complexity */
-    async #authCodeStart() {
-        const fnGetRedirectUriOrigin = () => {
-            const redirectUri = this.config.redirectUri;
-            const nRootOffset = redirectUri.indexOf("//");
-            const nFirstPathOffset = nRootOffset !== -1 ? redirectUri.indexOf("/", nRootOffset + 2) : -1;
-            return nFirstPathOffset !== -1 ? redirectUri.substring(0, nFirstPathOffset) : redirectUri;
+  async login() {
+    if (this.isNode && !this.crypto) {
+      // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
+      await this.#importNodeLibs();
+    }
+    const { grantType } = this.config;
+    if (grantType && grantType !== 'authCode') {
+      return this.getToken();
+    }
+    return this.#authCodeStart();
+  }
+
+  // authCode login issues the authorize endpoint transaction and deals with redirects
+  /* eslint-disable-next-line sonarjs/cognitive-complexity */
+  async #authCodeStart() {
+    const fnGetRedirectUriOrigin = () => {
+      const redirectUri = this.config.redirectUri;
+      const nRootOffset = redirectUri.indexOf('//');
+      const nFirstPathOffset = nRootOffset !== -1 ? redirectUri.indexOf('/', nRootOffset + 2) : -1;
+      return nFirstPathOffset !== -1 ? redirectUri.substring(0, nFirstPathOffset) : redirectUri;
+    };
+
+    const redirectOrigin = fnGetRedirectUriOrigin();
+    const state = this.isNode ? '' : this.#btoa(window.location.origin);
+
+    return new Promise((resolve, reject) => {
+      this.#buildAuthorizeUrl(state).then((url) => {
+        let myWindow = null; // popup or iframe
+        let elIframe = null;
+        let elCloseBtn = null;
+        const iframeTimeout = this.config.silentTimeout !== undefined ? this.config.silentTimeout : 5000;
+        let bWinIframe =
+          !this.isNode &&
+          iframeTimeout > 0 &&
+          ((!!this.config.userIdentifier && !!this.config.password) ||
+            this.config.iframeLoginUI ||
+            this.config.authService !== 'pega');
+        let tmrAuthComplete = null;
+        let checkWindowClosed = null;
+        const myWinOnLoad = () => {
+          try {
+            if (bWinIframe) {
+              elIframe.contentWindow.postMessage({ type: 'PegaAuth' }, redirectOrigin);
+            } else {
+              myWindow.postMessage({ type: 'PegaAuth' }, redirectOrigin);
+            }
+          } catch (e) {
+            // Exception trying to postMessage on load (perhaps should console.warn)
+          }
         };
-
-        const redirectOrigin = fnGetRedirectUriOrigin();
-        const state = this.isNode ? '' : this.#btoa(window.location.origin);
-
-        return new Promise((resolve, reject) => {
-            this.#buildAuthorizeUrl(state).then((url) => {
-                let myWindow = null; // popup or iframe
-                let elIframe = null;
-                let elCloseBtn = null;
-                const iframeTimeout = this.config.silentTimeout !== undefined ? this.config.silentTimeout : 5000;
-                let bWinIframe = !this.isNode &&
-                    iframeTimeout > 0 &&
-                    ((!!this.config.userIdentifier && !!this.config.password) ||
-                        this.config.iframeLoginUI ||
-                        this.config.authService !== 'pega');
-                let tmrAuthComplete = null;
-                let checkWindowClosed = null;
-                const myWinOnLoad = () => {
-                    try {
-                        if (bWinIframe) {
-                            elIframe.contentWindow.postMessage({ type: "PegaAuth" }, redirectOrigin);
-                            console.log("authjs(login): loaded a page in iFrame");
-                        } else {
-                            myWindow.postMessage({ type: "PegaAuth" }, redirectOrigin);
-                        }
-                    } catch (e) {
-                        console.log("authjs(login): Exception trying to postMessage on load");
-                    }
-                };
-                /* eslint-disable prefer-promise-reject-errors */
-                const fnOpenPopup = () => {
-                    if (this.config.noPopups) {
-                        return reject("no-popups");
-                    }
-                    myWindow = (this.isNode ? this.open : window.open)(url, '_blank', 'width=700,height=500,left=200,top=100');
-                    if (!myWindow) {
-                        // Blocked by popup-blocker
-                        return reject("blocked");
-                    }
-                    checkWindowClosed = setInterval(() => {
-                        if (myWindow.closed) {
-                            clearInterval(checkWindowClosed);
-                            reject("closed");
-                        }
-                    }, 500);
-                    if (!this.isNode) {
-                        try {
-                            myWindow.addEventListener("load", myWinOnLoad, true);
-                        } catch (e) {
-                            console.log("authjs(login): Exception trying to add onload handler to opened window;");
-                        }
-                    }
-                };
-                /* eslint-enable prefer-promise-reject-errors */
-                const fnCloseIframe = () => {
-                    elIframe.parentNode.removeChild(elIframe);
-                    elCloseBtn.parentNode.removeChild(elCloseBtn);
-                    elIframe = null;
-                    elCloseBtn = null;
-                    bWinIframe = false;
-                };
-                const fnCloseAndReject = () => {
-                    fnCloseIframe();
-                    /* eslint-disable-next-line prefer-promise-reject-errors */
-                    reject("closed");
-                };
-                let authMessageReceiver = null;
-                /* Retrieve token(s) and close login window */
-                const fnGetTokenAndFinish = (code) => {
-                    if (!this.isNode) {
-                        window.removeEventListener("message", authMessageReceiver, false);
-                    }
-                    this.getToken(code).then(token => {
-                        if (bWinIframe) {
-                            clearTimeout(tmrAuthComplete);
-                            fnCloseIframe();
-                        } else if (!this.isNode) {
-                            clearInterval(checkWindowClosed);
-                            myWindow.close();
-                        }
-                        resolve(token);
-                    })
-                        .catch(e => {
-                            reject(e);
-                        });
-                };
-                // If there is a userIdentifier and password specified or an external SSO auth service,
-                //  we can try to use this silently in an iFrame first
-                if (bWinIframe) {
-                    const nFrameZLevel = 99999;
-                    elIframe = document.createElement('iframe');
-                    elIframe.id = `pe${this.config.clientId}`;
-                    const loginBoxWidth = 500;
-                    const loginBoxHeight = 700;
-                    const oStyle = elIframe.style;
-                    oStyle.position = 'absolute';
-                    oStyle.display = 'none';
-                    oStyle.zIndex = nFrameZLevel;
-                    oStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2)}px`;
-                    oStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2)}px`;
-                    oStyle.width = '500px';
-                    oStyle.height = '700px';
-                    // Add Iframe to top of document DOM to have it load
-                    document.body.insertBefore(elIframe, document.body.firstChild);
-                    // document.getElementsByTagName('body')[0].appendChild(elIframe);
-                    elIframe.addEventListener('load', myWinOnLoad, true);
-                    // Disallow iframe content attempts to navigate main window
-                    elIframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
-                    // Adding prompt=none as this is standard OIDC way to communicate no UI is expected (expecting Pega security to support this one day)
-                    elIframe.setAttribute('src', `${url}&prompt=none`);
-
-                    const svgCloseBtn = `<?xml version="1.0" encoding="UTF-8"?>
+        /* eslint-disable prefer-promise-reject-errors */
+        const fnOpenPopup = () => {
+          if (this.config.noPopups) {
+            return reject('no-popups');
+          }
+          myWindow = (this.isNode ? this.open : window.open)(url, '_blank', 'width=700,height=500,left=200,top=100');
+          if (!myWindow) {
+            // Blocked by popup-blocker
+            return reject('blocked');
+          }
+          checkWindowClosed = setInterval(() => {
+            if (myWindow.closed) {
+              clearInterval(checkWindowClosed);
+              reject('closed');
+            }
+          }, 500);
+          if (!this.isNode) {
+            try {
+              myWindow.addEventListener('load', myWinOnLoad, true);
+            } catch (e) {
+              // Exception trying to add onload handler to opened window
+              console.error(`Error adding event listener on popup window: ${e}`);
+            }
+          }
+        };
+        /* eslint-enable prefer-promise-reject-errors */
+        const fnCloseIframe = () => {
+          elIframe.parentNode.removeChild(elIframe);
+          elCloseBtn.parentNode.removeChild(elCloseBtn);
+          elIframe = null;
+          elCloseBtn = null;
+          bWinIframe = false;
+        };
+        const fnCloseAndReject = () => {
+          fnCloseIframe();
+          /* eslint-disable-next-line prefer-promise-reject-errors */
+          reject('closed');
+        };
+        let authMessageReceiver = null;
+        /* Retrieve token(s) and close login window */
+        const fnGetTokenAndFinish = (code) => {
+          if (!this.isNode) {
+            window.removeEventListener('message', authMessageReceiver, false);
+          }
+          this.getToken(code)
+            .then((token) => {
+              if (bWinIframe) {
+                clearTimeout(tmrAuthComplete);
+                fnCloseIframe();
+              } else if (!this.isNode) {
+                clearInterval(checkWindowClosed);
+                myWindow.close();
+              }
+              resolve(token);
+            })
+            .catch((e) => {
+              reject(e);
+            });
+        };
+        // If there is a userIdentifier and password specified or an external SSO auth service,
+        //  we can try to use this silently in an iFrame first
+        if (bWinIframe) {
+          const nFrameZLevel = 99999;
+          elIframe = document.createElement('iframe');
+          elIframe.id = `pe${this.config.clientId}`;
+          const loginBoxWidth = 500;
+          const loginBoxHeight = 700;
+          const oStyle = elIframe.style;
+          oStyle.position = 'absolute';
+          oStyle.display = 'none';
+          oStyle.zIndex = nFrameZLevel;
+          oStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2)}px`;
+          oStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2)}px`;
+          oStyle.width = '500px';
+          oStyle.height = '700px';
+          // Add Iframe to top of document DOM to have it load
+          document.body.insertBefore(elIframe, document.body.firstChild);
+          // document.getElementsByTagName('body')[0].appendChild(elIframe);
+          elIframe.addEventListener('load', myWinOnLoad, true);
+          // Disallow iframe content attempts to navigate main window
+          elIframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-same-origin');
+          // Adding prompt=none as this is standard OIDC way to communicate no UI is expected (expecting Pega security to support this one day)
+          elIframe.setAttribute('src', `${url}&prompt=none`);
+
+          const svgCloseBtn = `<?xml version="1.0" encoding="UTF-8"?>
                       <svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                         <title>Dismiss - Black</title>
                         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -262,347 +278,365 @@ class PegaAuth {
                           </g>
                         </g>
                       </svg>`;
-                    const bCloseWithinFrame = false;
-                    elCloseBtn = document.createElement('img');
-                    elCloseBtn.onclick = fnCloseAndReject;
-                    elCloseBtn.src = `data:image/svg+xml;base64,${this.#btoa(svgCloseBtn)}`;
-                    const oBtnStyle = elCloseBtn.style;
-                    oBtnStyle.cursor = 'pointer';
-                    // If svg doesn't set width and height might want to set oBtStyle width and height to something like '2em'
-                    oBtnStyle.position = 'absolute';
-                    oBtnStyle.display = 'none';
-                    oBtnStyle.zIndex = nFrameZLevel + 1;
-                    const nTopOffset = bCloseWithinFrame ? 5 : -10;
-                    const nRightOffset = bCloseWithinFrame ? -34 : -20;
-                    oBtnStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2) + nTopOffset}px`;
-                    oBtnStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2) + loginBoxWidth + nRightOffset
-                        }px`;
-                    document.body.insertBefore(elCloseBtn, document.body.firstChild);
-                    // If the password was wrong, then the login screen will be in the iframe
-                    // ..and with Pega without realization of US-372314 it may replace the top (main portal) window
-                    // For now set a timer and if the timer expires, remove the iFrame and use same url within
-                    // visible window
-                    tmrAuthComplete = setTimeout(() => {
-                        clearTimeout(tmrAuthComplete);
-                        // remove password from config
-                        if (this.config.password) {
-                            delete this.config.password;
-                            this.#updateConfig();
-                        }
-                        // Display the iframe where the redirects did not succeed (or invoke a popup window)
-                        if (this.config.iframeLoginUI) {
-                            elIframe.style.display = 'block';
-                            elCloseBtn.style.display = 'block';
-                        } else {
-                            fnCloseIframe();
-                            fnOpenPopup();
-                        }
-                    }, iframeTimeout);
-                } else {
-                    if (this.isNode) {
-                        // Determine port to listen to by extracting it from redirect uri
-                        const { redirectUri, cert, key } = this.config;
-                        const isHttp = redirectUri.startsWith('http:');
-                        const nLocalhost = redirectUri.indexOf("localhost:");
-                        const nSlash = redirectUri.indexOf('/', nLocalhost + 10);
-                        const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash), 10);
-                        if (nLocalhost !== -1) {
-                            const options = key && cert && !isHttp ? {
-                                key: this.fs.readFileSync(key),
-                                cert: this.fs.readFileSync(cert)
-                            } : {};
-                            const server = (isHttp ? this.http : this.https).createServer(options, (req, res) => {
-                                const { winTitle, winBodyHtml } = this.config;
-                                // console.log(`HTTP request received: ${req.url}`);
-                                res.writeHead(200, { 'Content-Type': 'text/html' });
-                                // Auto closing window for now.  Can always leave it up and allow authConfig props to set title and bodyHtml
-                                res.end(`<html><head><title>${winTitle}</title><script>window.close();</script></head><body>${winBodyHtml}</body></html>`);
-                                const queryString = req.url.split('?')[1];
-                                const urlParams = new URLSearchParams(queryString);
-                                const code = urlParams.get('code');
-                                if (code) {
-                                    // console.log(`Auth code received: ${code}`);
-                                    // Stop receiving connections and close when all are handled.
-                                    server.close();
-                                    fnGetTokenAndFinish(code);
-                                }
-                            });
-                            /* eslint-enable no-undef */
-                            server.listen(nPort);
-                        }
-                    }
-                    fnOpenPopup();
-                }
-
-                if (!this.isNode) {
-                    /* Handler to receive the auth code */
-                    authMessageReceiver = (event) => {
-                        // Check origin to make sure it is the redirect origin
-                        if (event.origin !== redirectOrigin) return;
-                        if (!event.data || !event.data.type || event.data.type !== 'PegaAuth') return;
-                        console.log('authjs(login): postMessage received with code');
-                        const code = event.data.code.toString();
-                        fnGetTokenAndFinish(code);
-                    };
-                    window.addEventListener('message', authMessageReceiver, false);
-                    window.authCodeCallback = (code) => {
-                        console.log('authjs(login): authCodeCallback used with code');
-                        fnGetTokenAndFinish(code);
-                    };
+          const bCloseWithinFrame = false;
+          elCloseBtn = document.createElement('img');
+          elCloseBtn.onclick = fnCloseAndReject;
+          elCloseBtn.src = `data:image/svg+xml;base64,${this.#btoa(svgCloseBtn)}`;
+          const oBtnStyle = elCloseBtn.style;
+          oBtnStyle.cursor = 'pointer';
+          // If svg doesn't set width and height might want to set oBtStyle width and height to something like '2em'
+          oBtnStyle.position = 'absolute';
+          oBtnStyle.display = 'none';
+          oBtnStyle.zIndex = nFrameZLevel + 1;
+          const nTopOffset = bCloseWithinFrame ? 5 : -10;
+          const nRightOffset = bCloseWithinFrame ? -34 : -20;
+          oBtnStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2) + nTopOffset}px`;
+          oBtnStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2) + loginBoxWidth + nRightOffset
+            }px`;
+          document.body.insertBefore(elCloseBtn, document.body.firstChild);
+          // If the password was wrong, then the login screen will be in the iframe
+          // ..and with Pega without realization of US-372314 it may replace the top (main portal) window
+          // For now set a timer and if the timer expires, remove the iFrame and use same url within
+          // visible window
+          tmrAuthComplete = setTimeout(() => {
+            clearTimeout(tmrAuthComplete);
+            // remove password from config
+            if (this.config.password) {
+              delete this.config.password;
+              this.#updateConfig();
+            }
+            // Display the iframe where the redirects did not succeed (or invoke a popup window)
+            if (this.config.iframeLoginUI) {
+              elIframe.style.display = 'block';
+              elCloseBtn.style.display = 'block';
+            } else {
+              fnCloseIframe();
+              fnOpenPopup();
+            }
+          }, iframeTimeout);
+        } else {
+          if (this.isNode) {
+            // Determine port to listen to by extracting it from redirect uri
+            const { redirectUri, cert, key } = this.config;
+            const isHttp = redirectUri.startsWith('http:');
+            const nLocalhost = redirectUri.indexOf('localhost:');
+            const nSlash = redirectUri.indexOf('/', nLocalhost + 10);
+            const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash), 10);
+            if (nLocalhost !== -1) {
+              const options =
+                key && cert && !isHttp
+                  ? {
+                    key: this.fs.readFileSync(key),
+                    cert: this.fs.readFileSync(cert)
+                  }
+                  : {};
+              const server = (isHttp ? this.http : this.https).createServer(options, (req, res) => {
+                const { winTitle, winBodyHtml } = this.config;
+                res.writeHead(200, { 'Content-Type': 'text/html' });
+                // Auto closing window for now.  Can always leave it up and allow authConfig props to set title and bodyHtml
+                res.end(
+                  `<html><head><title>${winTitle}</title><script>window.close();</script></head><body>${winBodyHtml}</body></html>`
+                );
+                const queryString = req.url.split('?')[1];
+                const urlParams = new URLSearchParams(queryString);
+                const code = urlParams.get('code');
+                if (code) {
+                  // Stop receiving connections and close when all are handled.
+                  server.close();
+                  fnGetTokenAndFinish(code);
                 }
-            });
-        });
-    }
-
-    // For PKCE token endpoint includes code_verifier
-    /* eslint-disable-next-line sonarjs/cognitive-complexity */
-    getToken(authCode) {
-        // Reload config to pick up the previously stored codeVerifier
-        this.#reloadConfig();
-
-        const { serverType, isolationId, clientId, clientSecret, redirectUri, tokenUri, codeVerifier, grantType,
-            sessionIndex, customTokenParams, userIdentifier, password, noPKCE } = this.config;
-
-        const bAuthCode = !grantType || grantType === 'authCode';
-        if (bAuthCode && !authCode && !this.isNode) {
-            const queryString = window.location.search;
-            const urlParams = new URLSearchParams(queryString);
-            authCode = urlParams.get('code');
-        }
-
-        const formData = new URLSearchParams();
-        formData.append('client_id', clientId);
-        if (clientSecret) {
-            formData.append('client_secret', clientSecret);
-        }
-        /* eslint-disable camelcase */
-        const fullGTName = {
-            "authCode": "authorization_code",
-            "clientCreds": "client_credentials",
-            "customBearer": "custom-bearer",
-            "passwordCreds": "password"
-        }[grantType];
-        const grant_type = fullGTName || grantType || 'authorization_code';
-        formData.append('grant_type', grant_type);
-        if (serverType === 'launchpad' && grantType !== 'authCode') {
-            formData.append('isolation_ids', isolationId);
-        }
-        if (bAuthCode) {
-            formData.append('code', authCode);
-            formData.append('redirect_uri', redirectUri);
-            if (!noPKCE) {
-                formData.append('code_verifier', codeVerifier);
+              });
+              /* eslint-enable no-undef */
+              server.listen(nPort);
             }
-        } else if (sessionIndex) {
-            formData.append('session_index', sessionIndex);
+          }
+          fnOpenPopup();
         }
-        /* eslint-enable camelcase */
-        if (grantType === 'customBearer' && customTokenParams) {
-            Object.keys(customTokenParams).forEach((param) => {
-                formData.append(param, customTokenParams[param]);
-            });
-        }
-        if (grantType === 'passwordCreds') {
-            formData.append('username', userIdentifier);
-            formData.append('password', this.#atob(password));
-        }
-
-        return fetch(tokenUri, {
-            agent: this.#getAgent(),
-            method: 'POST',
-            headers: new Headers({
-                'content-type': this.urlencoded
-            }),
 
-            body: formData.toString()
-        })
-            .then((response) => response.json())
-            .then((token) => {
-                if (token.errors || token.error) {
-                    // console.log(`formData: ${formData.toString()}`);
-                    console.log(`Token endpoint error: ${JSON.stringify(token.errors || token.error)}`);
-                } else {
-                    // .expires_in contains the # of seconds before access token expires
-                    // add property to keep track of current time when the token expires
-                    token.eA = Date.now() + token.expires_in * 1000;
-                    if (this.config.codeVerifier) {
-                        delete this.config.codeVerifier;
-                    }
-                    // If there is a session_index then move this to the peConfig structure (as used on authorize)
-                    if (token.session_index) {
-                        this.config.sessionIndex = token.session_index;
-                    }
-                    // If we got a token and have a session index, then reset the sessionIndexAttempts
-                    if (this.config.sessionIndex) {
-                        this.config.sessionIndexAttempts = 0;
-                    }
-                    this.#updateConfig();
-                }
-                return token;
-            })
-            .catch((e) => {
-                console.log(e);
-            });
+        if (!this.isNode) {
+          /* Handler to receive the auth code */
+          authMessageReceiver = (event) => {
+            // Check origin to make sure it is the redirect origin
+            if (event.origin !== redirectOrigin) return;
+            if (!event.data || !event.data.type || event.data.type !== 'PegaAuth') return;
+            const code = event.data.code.toString();
+            fnGetTokenAndFinish(code);
+          };
+          window.addEventListener('message', authMessageReceiver, false);
+          window.authCodeCallback = (code) => {
+            fnGetTokenAndFinish(code);
+          };
+        }
+      });
+    });
+  }
+
+  // For PKCE token endpoint includes code_verifier
+  /* eslint-disable-next-line sonarjs/cognitive-complexity */
+  getToken(authCode) {
+    // Reload config to pick up the previously stored codeVerifier
+    this.#reloadConfig();
+
+    const {
+      serverType,
+      isolationId,
+      clientId,
+      clientSecret,
+      redirectUri,
+      tokenUri,
+      codeVerifier,
+      grantType,
+      sessionIndex,
+      customTokenParams,
+      userIdentifier,
+      password,
+      noPKCE
+    } = this.config;
+
+    const bAuthCode = !grantType || grantType === 'authCode';
+    if (bAuthCode && !authCode && !this.isNode) {
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      authCode = urlParams.get('code');
     }
 
+    const formData = new URLSearchParams();
+    formData.append('client_id', clientId);
+    if (clientSecret) {
+      formData.append('client_secret', clientSecret);
+    }
     /* eslint-disable camelcase */
-    async refreshToken(refresh_token) {
-        const { clientId, clientSecret, tokenUri } = this.config;
-
-        if (this.isNode && !this.crypto) {
-            // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
-            await this.#importNodeLibs();
-        }
-
-        const formData = new URLSearchParams();
-        formData.append('client_id', clientId);
-        if (clientSecret) {
-            formData.append('client_secret', clientSecret);
-        }
-        formData.append('grant_type', 'refresh_token');
-        formData.append('refresh_token', refresh_token);
-
-        return fetch(tokenUri, {
-            agent: this.#getAgent(),
-            method: 'POST',
-            headers: new Headers({
-                'content-type': this.urlencoded
-            }),
-
-            body: formData.toString()
-        })
-            .then((response) => {
-                if (!response.ok && response.status === 401) {
-                    return null;
-                }
-                return response.json();
-            })
-            .then((token) => {
-                if (token) {
-                    // .expires_in contains the # of seconds before access token expires
-                    // add property to keep track of current time when the token expires
-                    token.eA = Date.now() + token.expires_in * 1000;
-                }
-                return token;
-            })
-            .catch((e) => {
-                console.log(e);
-            });
+    const fullGTName = {
+      authCode: 'authorization_code',
+      clientCreds: 'client_credentials',
+      customBearer: 'custom-bearer',
+      passwordCreds: 'password'
+    }[grantType];
+    const grant_type = fullGTName || grantType || 'authorization_code';
+    formData.append('grant_type', grant_type);
+    if (serverType === 'launchpad' && grantType !== 'authCode') {
+      formData.append('isolation_ids', isolationId);
     }
-
-    async revokeTokens(access_token, refresh_token = null) {
-        if (Object.keys(this.config).length === 0) {
-            // Must have a config structure to proceed
-            return;
-        }
-        const { clientId, clientSecret, revokeUri } = this.config;
-
-        if (this.isNode && !this.crypto) {
-            // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
-            await this.#importNodeLibs();
-        }
-
-        const hdrs = { 'content-type': this.urlencoded };
-        if (clientSecret) {
-            const basicCreds = window.btoa(`${clientId}:${clientSecret}`);
-            hdrs.authorization = `Basic ${basicCreds}`;
-        }
-        const aTknProps = ['access_token'];
-        if (refresh_token) {
-            aTknProps.push('refresh_token');
-        }
-        aTknProps.forEach((prop) => {
-            const formData = new URLSearchParams();
-            if (!clientSecret) {
-                formData.append('client_id', clientId);
-            }
-            formData.append('token', prop === 'access_token' ? access_token : refresh_token);
-            formData.append('token_type_hint', prop);
-            fetch(revokeUri, {
-                agent: this.#getAgent(),
-                method: 'POST',
-                headers: new Headers(hdrs),
-                body: formData.toString()
-            })
-                .then((response) => {
-                    if (!response.ok) {
-                        console.log(`Error revoking ${prop}:${response.status}`);
-                    }
-                })
-                .catch((e) => {
-                    console.log(e);
-                });
-        });
-        // Also clobber any sessionIndex
-        if (this.config.sessionIndex) {
-            delete this.config.sessionIndex;
-            this.#updateConfig();
-        }
+    if (bAuthCode) {
+      formData.append('code', authCode);
+      formData.append('redirect_uri', redirectUri);
+      if (!noPKCE) {
+        formData.append('code_verifier', codeVerifier);
+      }
+    } else if (sessionIndex) {
+      formData.append('session_index', sessionIndex);
     }
     /* eslint-enable camelcase */
-
-    #sha256Hash(str) {
-        // Found that the Node implementation of subtle.digest is yielding incorrect results
-        //  so using a different set of apis to get expected results.
-        if (this.isNode) {
-            return new Promise((resolve) => {
-                return resolve(this.crypto.createHash("sha256").update(str).digest());
-            });
-        }
-        return this.subtle.digest('SHA-256', new TextEncoder().encode(str));
+    if (grantType === 'customBearer' && customTokenParams) {
+      Object.keys(customTokenParams).forEach((param) => {
+        formData.append(param, customTokenParams[param]);
+      });
+    }
+    if (grantType !== 'authCode') {
+      formData.append('enable_psyncId', 'true');
+    }
+    if (grantType === 'passwordCreds') {
+      formData.append('username', userIdentifier);
+      formData.append('password', this.#atob(password));
     }
 
-    /* btoa to work with node or browser - create B64 string */
-    #btoa(str) {
-        if (this.isNode) {
-            return Buffer.from(str, 'binary').toString('base64');
+    return fetch(tokenUri, {
+      agent: this.#getAgent(),
+      method: 'POST',
+      headers: new Headers({
+        'content-type': this.urlencoded
+      }),
+
+      body: formData.toString()
+    })
+      .then((response) => response.json())
+      .then((token) => {
+        if (token.errors || token.error) {
+          console.error(`Token endpoint error: ${JSON.stringify(token.errors || token.error)}`);
+        } else {
+          // .expires_in contains the # of seconds before access token expires
+          // add property to keep track of current time when the token expires
+          token.eA = Date.now() + token.expires_in * 1000;
+          if (this.config.codeVerifier) {
+            delete this.config.codeVerifier;
+          }
+          // If there is a session_index then move this to the peConfig structure (as used on authorize)
+          if (token.session_index) {
+            this.config.sessionIndex = token.session_index;
+          }
+          // If we got a token and have a session index, then reset the sessionIndexAttempts
+          if (this.config.sessionIndex) {
+            this.config.sessionIndexAttempts = 0;
+          }
+          this.#updateConfig();
         }
-        return window.btoa(str);
+        return token;
+      })
+      .catch((e) => {
+        console.error(`Token endpoint error: ${e}`);
+      });
+  }
+
+  /* eslint-disable camelcase */
+  async refreshToken(refresh_token) {
+    const { clientId, clientSecret, tokenUri } = this.config;
+
+    if (this.isNode && !this.crypto) {
+      // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
+      await this.#importNodeLibs();
     }
 
-    /* atoa to work with node or browser - convert B64 to binary */
-    #atob(str) {
-        if (this.isNode) {
-            return Buffer.from(str, 'base64').toString('binary');
+    const formData = new URLSearchParams();
+    formData.append('client_id', clientId);
+    if (clientSecret) {
+      formData.append('client_secret', clientSecret);
+    }
+    formData.append('grant_type', 'refresh_token');
+    formData.append('refresh_token', refresh_token);
+
+    return fetch(tokenUri, {
+      agent: this.#getAgent(),
+      method: 'POST',
+      headers: new Headers({
+        'content-type': this.urlencoded
+      }),
+
+      body: formData.toString()
+    })
+      .then((response) => {
+        if (!response.ok && response.status === 401) {
+          return null;
         }
-        return window.atob(str);
+        return response.json();
+      })
+      .then((token) => {
+        if (token) {
+          // .expires_in contains the # of seconds before access token expires
+          // add property to keep track of current time when the token expires
+          token.eA = Date.now() + token.expires_in * 1000;
+        }
+        return token;
+      })
+      .catch((e) => {
+        console.warn(`Refresh token failed: ${e}`);
+      });
+  }
+
+  async revokeTokens(access_token, refresh_token = null) {
+    if (Object.keys(this.config).length === 0) {
+      // Must have a config structure to proceed
+      return;
     }
+    const { clientId, clientSecret, revokeUri } = this.config;
 
-    // Base64 encode
-    #encode64(buff) {
-        return this.#btoa(new Uint8Array(buff).reduce((s, b) => s + String.fromCharCode(b), ''));
+    if (this.isNode && !this.crypto) {
+      // Deferring dynamic loading of node libraries til this first method to avoid doing this in constructor
+      await this.#importNodeLibs();
     }
 
-    /*
-     * Base64 url safe encoding of an array
-     */
-    #base64UrlSafeEncode(buf) {
-        return this.#encode64(buf).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+    const hdrs = { 'content-type': this.urlencoded };
+    if (clientSecret) {
+      const basicCreds = window.btoa(`${clientId}:${clientSecret}`);
+      hdrs.authorization = `Basic ${basicCreds}`;
+    }
+    const aTknProps = ['access_token'];
+    if (refresh_token) {
+      aTknProps.push('refresh_token');
+    }
+    aTknProps.forEach((prop) => {
+      const formData = new URLSearchParams();
+      if (!clientSecret) {
+        formData.append('client_id', clientId);
+      }
+      formData.append('token', prop === 'access_token' ? access_token : refresh_token);
+      formData.append('token_type_hint', prop);
+      fetch(revokeUri, {
+        agent: this.#getAgent(),
+        method: 'POST',
+        headers: new Headers(hdrs),
+        body: formData.toString()
+      })
+        .then((response) => {
+          if (!response.ok) {
+            console.error(`Error revoking ${prop}:${response.status}`);
+          }
+        })
+        .catch((e) => {
+          console.error(`Error revoking ${prop}`);
+        });
+    });
+    // Also clobber any sessionIndex
+    if (this.config.sessionIndex) {
+      delete this.config.sessionIndex;
+      this.#updateConfig();
+    }
+  }
+  /* eslint-enable camelcase */
+
+  #sha256Hash(str) {
+    // Found that the Node implementation of subtle.digest is yielding incorrect results
+    //  so using a different set of apis to get expected results.
+    if (this.isNode) {
+      return new Promise((resolve) => {
+        return resolve(this.crypto.createHash('sha256').update(str).digest());
+      });
     }
+    return this.subtle.digest('SHA-256', new TextEncoder().encode(str));
+  }
 
-    /* Calc code verifier if necessary
-     */
-    /* eslint-disable camelcase */
-    async #getCodeChallenge(code_verifier) {
-        return this.#sha256Hash(code_verifier)
-            .then((hashed) => {
-                return this.#base64UrlSafeEncode(hashed);
-            })
-            .catch((error) => {
-                console.log(error);
-            })
-            .finally(() => {
-                return null;
-            });
+  /* btoa to work with node or browser - create B64 string */
+  #btoa(str) {
+    if (this.isNode) {
+      return Buffer.from(str, 'binary').toString('base64');
     }
-    /* eslint-enable camelcase */
+    return window.btoa(str);
+  }
 
-    /*
-     * Return agent value for POST commands
-     */
-    #getAgent() {
-        return this.isNode && this.config.ignoreInvalidCerts ? new this.https.Agent({ rejectUnauthorized: false }) : undefined;
+  /* atoa to work with node or browser - convert B64 to binary */
+  #atob(str) {
+    if (this.isNode) {
+      return Buffer.from(str, 'base64').toString('binary');
     }
+    return window.atob(str);
+  }
+
+  // Base64 encode
+  #encode64(buff) {
+    return this.#btoa(new Uint8Array(buff).reduce((s, b) => s + String.fromCharCode(b), ''));
+  }
+
+  /*
+   * Base64 url safe encoding of an array
+   */
+  #base64UrlSafeEncode(buf) {
+    return this.#encode64(buf).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+  }
+
+  /* Calc code verifier if necessary
+   */
+  /* eslint-disable camelcase */
+  async #getCodeChallenge(code_verifier) {
+    return this.#sha256Hash(code_verifier)
+      .then((hashed) => {
+        return this.#base64UrlSafeEncode(hashed);
+      })
+      .catch((error) => {
+        console.error(`Error calculation code challenge for PKCE: ${error}`);
+      })
+      .finally(() => {
+        return null;
+      });
+  }
+  /* eslint-enable camelcase */
+
+  /*
+   * Return agent value for POST commands
+   */
+  #getAgent() {
+    return this.isNode && this.config.ignoreInvalidCerts
+      ? new this.https.Agent({ rejectUnauthorized: false })
+      : undefined;
+  }
 }
 
 export default PegaAuth;