@pega/custom-dx-components 2.0.20 → 2.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -23,19 +23,22 @@
     "babel-loader": "^8.2.5",
     "chalk": "^5.0.1",
     "compression-webpack-plugin": "^10.0.0",
+    "crypto": "^1.0.1",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "^4.1.0",
-    "execa": "^6.1.0",
     "eslint": "^8.4.1",
+    "execa": "^6.1.0",
     "file-loader": "6.2.0",
     "fs-extra": "^10.1.0",
     "gitignore": "^0.7.0",
+    "http": "^0.0.1-security",
     "inquirer": "^9.1.1",
     "listr": "^0.14.3",
     "mini-css-extract-plugin": "2.6.1",
     "mustache": "^4.2.0",
     "ncp": "^2.0.0",
     "node-fetch": "^3.2.10",
+    "open": "^8.4.2",
     "ora": "^6.1.2",
     "pascalcase": "^2.0.0",
     "postcss": "^8.4.16",
@@ -51,7 +54,7 @@
     "ts-loader": "^9.3.1",
     "typescript": "^4.8.3",
     "url-loader": "4.1.1",
-    "webpack": "5.74.0"
+    "webpack": "5.76.1"
   },
   "author": "Custom component dev",
   "license": "SEE LICENSE IN LICENSE",

package/src/auth.js

@@ -0,0 +1,563 @@
+// Below imports needed for when this file is used for a Node apps/Jest tests
+// (can't do conditional imports...so should remove them for regular browser scenarios)
+
+import fetch from 'node-fetch';
+import open from 'open';
+import crypto from 'crypto';
+import http from 'http';
+
+
+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.isNode = typeof window === 'undefined';
+        this.crypto = this.isNode ? crypto : window.crypto;
+
+        // Tried both preferring the subtle and the webcrypto but both still yileded different behavior on digest
+
+        // Prefer webcrypto.subtle over regular subtle
+        // this.subtle = this.isNode ? (crypto.webcrypto ? crypto.webcrypto.subtle : crypto.subtle) : window.crypto.subtle;
+
+        // Prefer regular subtle over webcrypto.suble for now
+        this.subtle = this.isNode ? (crypto.subtle ? crypto.subtle : crypto.webcrypto.subtle) : window.crypto.subtle;
+    }
+
+    #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 (e) {
+                    obj = {};
+                }
+            }
+        }
+        this.config = peConfig ? obj : {};
+    }
+
+    #updateConfig() {
+        if (this.ssKeyConfig) {
+            window.sessionStorage.setItem(this.ssKeyConfig, this.#btoa(JSON.stringify(this.config)));
+        }
+    }
+
+    // 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 } =
+            this.config;
+
+        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 = (serverType === 'infinity' ? `openid${addtlScope}` : 'user_info');
+
+        // Add explicit creds if specified to try to avoid login popup
+        const moreAuthArgs = (serverType === 'infinity' ?
+            '&enable_psyncid=true' +
+            (authService ? `&authentication_service=${encodeURIComponent(authService)}` : '') +
+            (sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '') +
+            (userIdentifier
+                ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}${password ? `&Password=${encodeURIComponent(this.#atob(password))}` : ''}` : '')
+            : '');
+
+        let pkceArgs = '';
+        if (!noPKCE) {
+            const cc = await this.#getCodeChallenge(this.config.codeVerifier);
+            pkceArgs = `&code_challenge=${cc}&code_challenge_method=S256`;
+        }
+        const authUrl = `${authorizeUri}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scope}&state=${state}${pkceArgs}${moreAuthArgs}`;
+        // console.log(`authUrl: ${authUrl}`);
+        return authUrl;
+    }
+
+    async login() {
+        const { grantType } = this.config;
+        if (grantType && grantType !== 'authCode') {
+            return this.getToken();
+        } else {
+            return this.#authCodeStart();
+        }
+    }
+
+    // authCode login issues the authorize endpoint transaction and deals with redirects
+    async #authCodeStart() {
+        const fnGetRedirectUriOrigin = () => {
+            let redirectUri = this.config.redirectUri;
+            let nRootOffset = redirectUri.indexOf("//");
+            let 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(location.origin);
+
+        return new Promise((resolve, reject) => {
+            /* eslint-disable consistent-return */
+            this.#buildAuthorizeUrl(state).then((url) => {
+                let myWindow = null; // popup or iframe
+                let elIframe = null,
+                    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,
+                    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");
+                    }
+                };
+                const fnOpenPopup = () => {
+                    myWindow = (this.isNode ? 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;");
+                        }
+                    }
+                };
+                const fnCloseIframe = () => {
+                    elIframe.parentNode.removeChild(elIframe);
+                    elCloseBtn.parentNode.removeChild(elCloseBtn);
+                    elIframe = elCloseBtn = null;
+                    bWinIframe = false;
+                };
+                const fnCloseAndReject = () => {
+                    fnCloseIframe();
+                    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,
+                        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');
+                    elIframe.setAttribute('src', url);
+
+                    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">
+                          <g transform="translate(1.000000, 1.000000)">
+                            <circle fill="#252C32" cx="16" cy="16" r="16"></circle>
+                            <g transform="translate(9.109375, 9.214844)" fill="#FFFFFF" fill-rule="nonzero">
+                              <path d="M12.7265625,0 L0,12.6210938 L1.0546875,13.5703125 L13.78125,1.0546875 L12.7265625,0 Z M13.7460938,12.5507812 L1.01953125,0 L0,1.01953125 L12.7617188,13.6054688 L13.7460938,12.5507812 Z"></path>
+                            </g>
+                          </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 } = this.config;
+                        const nLocalhost = redirectUri.indexOf("localhost:");
+                        const nSlash = redirectUri.indexOf('/', nLocalhost + 10);
+                        const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash));
+                        if (-1 !== nLocalhost) {
+                            const server = http.createServer((req, res) => {
+                                const { method, url } = req;
+                                const { winTitle, winBodyHtml } = this.config;
+                                // console.log(`HTTP request received: ${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 = 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);
+                                }
+                            });
+                            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 = function (code) {
+                        console.log('authjs(login): authCodeCallback used with code');
+                        fnGetTokenAndFinish(code);
+                    };
+                }
+            });
+        });
+    }
+
+    // For PKCE token endpoint includes code_verifier
+    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);
+        }
+        const fullGTName = {
+            "authCode": "authorization_code",
+            "clientCreds": "client_credentials",
+            "customBearer": "custom-bearer",
+            "passwordCreds": "password"
+        }[grantType];
+        const grant_type = fullGTName ? fullGTName :
+            (grantType ? 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);
+            }
+        } else if (sessionIndex) {
+            formData.append('session_index', sessionIndex);
+        }
+        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));
+        }
+        // console.log(`getToken form data: ${formData.toString()}`);
+
+        return fetch(tokenUri, {
+            method: 'POST',
+            headers: new Headers({
+                'content-type': 'application/x-www-form-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.errors : token)}`);
+                } else {
+                    // .expires_in contains the # of seconds before access token expires
+                    // add property to keep track of current time when the token expires
+                    /* eslint-disable camelcase */
+                    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;
+                /* eslint-enable camelcase */
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+    }
+
+    /* eslint-disable camelcase */
+    async refreshToken(refresh_token) {
+        const { clientId, clientSecret, tokenUri } = this.config;
+
+        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, {
+            method: 'POST',
+            headers: new Headers({
+                'content-type': 'application/x-www-form-urlencoded'
+            }),
+
+            body: formData.toString()
+        })
+            .then((response) => {
+                if (!response.ok && 401 === response.status) {
+                    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);
+            });
+    }
+
+    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;
+
+        let hdrs = { 'content-type': 'application/x-www-form-urlencoded' };
+        if (clientSecret) {
+            hdrs['authorization'] = 'Basic ' + this.#btoa(clientId + ':' + clientSecret);
+        }
+        let 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, {
+                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();
+        }
+    }
+    /* 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());
+            });
+        } else {
+            return this.subtle.digest('SHA-256', new TextEncoder().encode(str));
+        }
+    }
+
+    /* btoa to work with node or browser - create B64 string*/
+    #btoa(str) {
+        if (this.isNode) {
+            return Buffer.from(str, 'binary').toString('base64');
+        } else {
+            return window.btoa(str);
+        }
+    }
+
+    /* atoa to work with node or browser - convert B64 to binary */
+    #atob(str) {
+        if (this.isNode) {
+            return Buffer.from(str, 'base64').toString('binary');
+        } else {
+            return window.atob(str);
+        }
+    }
+
+    // Base64 encode
+    /* eslint-disable-next-line class-methods-use-this */
+    #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 */
+    #getCodeChallenge(code_verifier) {
+        return this.#sha256Hash(code_verifier)
+            .then((hashed) => {
+                return this.#base64UrlSafeEncode(hashed);
+            })
+            .catch((error) => {
+                console.log(error);
+            })
+            .finally(() => {
+                return null;
+            });
+    }
+    /* eslint-enable camelcase */
+}
+
+export default PegaAuth;

package/src/constants.js

@@ -10,7 +10,37 @@ export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/pub
 export const LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_component';
 export const OOTB_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/ootb_component';
 export const DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component';
-export const TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
+export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
+export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';
+export const LP_TOKEN_URL = 'uas/oauth/token';
+export const LP_AUTHORIZE_URL = 'uas/oauth/authorize';
+
+export const AUTHENTICATE_SCHEMA = {
+  serverType: [
+    {
+      name: 'Infinity',
+      value: 'infinity'
+    },
+    {
+      name: 'Launchpad',
+      value: 'launchpad'
+    }
+  ],
+  grantType: [
+    {
+      name: 'Authorization code',
+      value: 'authCode'
+    },
+    {
+      name: 'Password credentials',
+      value: 'passwordCreds'
+    },
+    {
+      name: 'Client credentials',
+      value: 'clientCreds'
+    }
+  ]
+};
 
 export const COMPONENT_SCHEMA = {
   framework: [
@@ -108,7 +138,7 @@ export const COMPONENT_SCHEMA = {
         value: 'Picklist'
       }
     ],
-    template: ['DETAILS', 'DETAILS-region', 'FORM', 'FORM-region', 'PAGE' ],
+    template: ['DETAILS', 'DETAILS-region', 'FORM', 'FORM-region', 'PAGE'],
     widget: [
       {
         name: 'CASE',

package/src/tasks/authenticate/helper.js

@@ -1,24 +1,73 @@
 /* eslint-disable import/prefer-default-export */
 import { getPegaServerConfig } from '../../util.js';
 
+import { AUTHENTICATE_SCHEMA } from '../../constants.js';
+
 export const getAuthQuestions = async () => {
   const defaultPegaConfig = await getPegaServerConfig();
 
   return [
+    {
+      name: 'serverType',
+      type: 'rawlist',
+      message: 'Enter Pega server type',
+      default: answers => {
+        return defaultPegaConfig.serverType;
+      },
+      choices: AUTHENTICATE_SCHEMA.serverType,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Pega server type cannot be empty';
+      },
+      when: answers => {
+        if (!defaultPegaConfig.serverType) {
+          answers.serverType = "infinity";
+        }
+        return (defaultPegaConfig.askServerType ? true : false);
+      }
+    },
     {
       name: 'server',
       message: 'Enter pega server url',
       default: defaultPegaConfig.server
     },
+    {
+      name: 'isolationId',
+      message: 'Enter isolation id',
+      default: defaultPegaConfig.isolationId,
+      when: answers => {
+        return answers.serverType === "launchpad";
+      }
+    },
+    {
+      name: 'grantType',
+      type: 'rawlist',
+      message: 'Enter OAuth 2.0 grant type',
+      default: defaultPegaConfig.grantType,
+      choices: answers => {
+        return AUTHENTICATE_SCHEMA.grantType.filter(gt => !(answers.serverType === "launchpad" && gt.value === "passwordCreds"));
+      },
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Grant type cannot be empty';
+      }
+    },
     {
       name: 'user',
       message: 'Enter user id',
       default: defaultPegaConfig.user,
-      validate: value => {
-        if (value.trim()) {
+      validate: (value, answers) => {
+        if (value.trim() || answers.grantType === "authCode") {
           return true;
         }
         return 'Username cannot be empty';
+      },
+      when: answers => {
+        return (answers.serverType === "infinity" && answers.grantType !== "clientCreds");
       }
     },
     {
@@ -26,11 +75,14 @@ export const getAuthQuestions = async () => {
       type: 'password',
       message: 'Enter password',
       default: defaultPegaConfig.password,
-      validate: value => {
-        if (value.trim()) {
+      validate: (value, answers) => {
+        if (value.trim() || answers.grantType === "authCode") {
           return true;
         }
         return 'Password cannot be empty';
+      },
+      when: answers => {
+        return (answers.serverType === "infinity" && answers.grantType !== "clientCreds");
       }
     },
     {
@@ -49,8 +101,8 @@ export const getAuthQuestions = async () => {
       type: 'password',
       message: 'Enter clientSecret',
       default: defaultPegaConfig.clientSecret,
-      validate: value => {
-        if (value.trim()) {
+      validate: (value, answers) => {
+        if (value.trim() || answers.grantType === "authCode") {
           return true;
         }
         return 'clientSecret cannot be empty';

package/src/tasks/authenticate/index.js

@@ -1,83 +1,138 @@
 import path from 'path';
 import fs from 'fs';
-import https from 'https';
 
 import chalk from 'chalk';
 import inquirer from 'inquirer';
-import fetch from 'node-fetch';
 
-import { checkPathAccess, getTokenUrl, showVersion } from '../../util.js';
-import { TOKEN_PATH } from '../../constants.js';
+import { checkPathAccess, showVersion } from '../../util.js';
+import { TOKEN_PATH, INF_TOKEN_URL_V1, INF_AUTHORIZE_URL_V1, LP_TOKEN_URL, LP_AUTHORIZE_URL } from '../../constants.js';
 
 import { getAuthQuestions } from './helper.js';
+import PegaAuth from '../../auth.js';
 
 export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
 
 const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
+let server = null;
 
 const generateAccessToken = async config => {
-  const formData = new URLSearchParams();
-  formData.append('client_id', config.clientId);
-  formData.append('client_secret', config.clientSecret);
-  formData.append('username', config.user);
-  formData.append('password', config.password);
-  formData.append('grant_type', 'password');
-
-  const accessTokenUri = await getTokenUrl(config.server);
-  fetch(accessTokenUri, {
-    agent: new https.Agent({ rejectUnauthorized: false }),
-    method: 'POST',
-    headers: { 'content-type': 'application/x-www-form-urlencoded' },
-    body: formData.toString()
-  })
-    .then(response => {
-      if (response.ok && response.status === 200) {
-        return response.json();
-      } else {
-        throw new Error(`Failed with status: ${response.status}`);
-      }
-    })
-    .then(data => {
-      if (data && data.errors) {
-        const errMessages = data.errors;
-        errMessages.forEach(msgArr => {
-          throw new Error(`Failed with error - ${JSON.stringify(msgArr.message)}`);
-        });
-      }
-      if (data.token_type) {
-        fs.writeFile(TOKEN_PATH, JSON.stringify(data), err => {
-          if (err) {
-            console.error(err);
-          }
-          console.log(`${chalk.bold.green('Authenticated successfully !!')}`);
-        });
+
+  let authSuccess = false;
+  const { serverType, isolationId, grantType, clientId, clientSecret, user, password } = config;
+  const server = config.server.endsWith('/') ? config.server : `${config.server}/`;
+
+  return new Promise((resolve, reject) => {
+    const sTokenUri = `${server}${serverType === 'infinity' ? INF_TOKEN_URL_V1 : LP_TOKEN_URL}`;
+    const sAuthorizeUri = `${server}${serverType === 'infinity' ? INF_AUTHORIZE_URL_V1 : LP_AUTHORIZE_URL}`;
+    // console.log(`grantType: ${config.grantType}`);
+
+    // Build auth config structure
+    const authConfig = {
+      serverType: serverType,
+      grantType: grantType,
+      authorizeUri: sAuthorizeUri,
+      tokenUri: sTokenUri,
+      clientId: clientId,
+      clientSecret: clientSecret,
+      winTitle: 'DXCB',
+      winBodyHtml: `Authentication is complete.  This browser window may be closed.`
+    };
+    if (serverType === 'infinity') {
+      authConfig.authService = 'pega';
+      if (grantType !== 'clientCreds' && user && password) {
+        authConfig.userIdentifier = user;
+        authConfig.password = Buffer.from(password).toString('base64');
       }
-    })
-    .catch(e => console.log(`${chalk.bold.red(e)}`));
+    }
+    if (serverType === 'launchpad') {
+      authConfig.isolationId = isolationId;
+      // authConfig.noPKCE = true;
+    }
+    if (grantType === 'authCode') {
+      authConfig.redirectUri = 'http://localhost:4010/';
+    }
+    const auth = new PegaAuth(authConfig);
+    // console.log(`...about to infoke auth.login\n${JSON.stringify(authConfig)}`);
+
+    auth.login()
+      .then((token) => {
+        if (token?.token_type) {
+          fs.writeFile(TOKEN_PATH, JSON.stringify(token), err => {
+            if (err) {
+              console.error(err);
+              return reject(authSuccess);
+            }
+            console.log(`${chalk.bold.green('Authenticated successfully !!')}`);
+            authSuccess = true;
+            return resolve(authSuccess);
+          });
+        } else {
+          console.log(`${chalk.bold.red('Authentication failed:' + JSON.stringify(token.errors ? token.errors : token))}`);
+          return reject(authSuccess);
+        }
+      })
+      .catch((e) => {
+        console.log(`${chalk.bold.red(e)}`);
+        return reject(authSuccess);
+      });
+  });
 };
 
 export default async options => {
+
+  let authOK = false;
+
   showVersion();
 
   await checkPathAccess(pegaConfigJsonPath);
 
-  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
-  data = data && JSON.parse(data);
+  let cfgData = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  let data = null;
+  if (cfgData) {
+    try {
+      data = JSON.parse(cfgData);
+    } catch (e) {
+      console.log(`${chalk.red('Invalid JSON within tasks.config.json')}`);
+      process.exit(1);
+    }
+  }
 
   const serverConfig = data['server-config'];
   const params = options.params;
 
   const questions = await getAuthQuestions(params);
   const answers = await inquirer.prompt(questions);
+  serverConfig.serverType = answers.serverType;
   serverConfig.server = answers.server;
-  serverConfig.user = answers.user;
-  serverConfig.password = answers.password;
+  // Isolation id only needed for launchpad
+  if (answers.serverType === 'launchpad') {
+    serverConfig.isolationId = answers.isolationId;
+  }
+  serverConfig.grantType = answers.grantType;
+  if (answers.serverType === 'infinity' && answers.user && answers.password) {
+    serverConfig.user = answers.user;
+    serverConfig.password = answers.password;
+  }
   serverConfig.clientId = answers.clientId;
   serverConfig.clientSecret = answers.clientSecret;
-  await generateAccessToken(serverConfig);
 
-  data = JSON.stringify(data, null, 2);
-  fs.writeFile(pegaConfigJsonPath, data, err => {
-    if (err) throw err;
-  });
+  try {
+    authOK = await generateAccessToken(serverConfig);
+  } catch (e) {
+  }
+
+  if (authOK) {
+    console.log(`${chalk.green('Writing updated config...')}`);
+    let updCfg = null;
+    try {
+      updCfg = JSON.stringify(data, null, 2);
+      fs.writeFileSync(pegaConfigJsonPath, updCfg, err => {
+        if (err) throw err;
+      });
+    } catch (e) {
+
+    }
+  }
+
+  process.exit(1);
 };

package/src/tasks/create/templates/Constellation/Field/Text-URL/index.jsx.mustache

@@ -3,7 +3,7 @@ import { Input, FieldValueList, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
 
 // includes in bundle
-import {formatExists,textFormatter, urlFormatter, suggestionHandler} from "./text-url";
+import {formatExists,textFormatter, urlFormatter} from "./text-url.jsx";
 import handleEvent from "./event-utils";
 import { suggestionsHandler } from './suggestions-handler';
 

package/src/tasks/create/templates/Constellation/Field/Text-URL/{text-url.js.mustache → text-url.jsx.mustache}

@@ -1,4 +1,5 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
+import { useState, useRef, React} from "react";
+import { EmailDisplay, PhoneDisplay, URLDisplay, Image, Button, Lightbox } from '@pega/cosmos-react-core';
 
 export const formatExists = (formatterVal) => {
     const formatterValues = [

package/src/tasks/init/index.js

@@ -140,7 +140,7 @@ export default async options => {
     '\n',
     `Inside that directory, you can run several commands:`,
     '\n\n',
-    `${chalk.blueBright('npm start')}`,
+    `${chalk.blueBright('npm run start-storybook')}`,
     `\n  Start Storybook in development mode`,
     '\n\n',
     `${chalk.blueBright('npm run create')}`,
@@ -158,7 +158,7 @@ export default async options => {
     '\n\n',
     `${chalk.blueBright('cd')} ${chalk.bold(projectName)}`,
     '\n',
-    `${chalk.blueBright('npm start')}`,
+    `${chalk.blueBright('npm run start-storybook')}`,
     '\n'
   );
   return true;

package/src/tasks/init/template/package.json.mustache

@@ -5,7 +5,7 @@
   "organization": "{{organization}}",
   "main": "src/index.js",
   "scripts": {
-    "start": "start-storybook --port 6040 --quiet",
+    "start-storybook": "start-storybook --port 6040 --quiet",
     "build": "tsc -b tsconfig.build.json",
     "lint": "run-p -cl lint:*",
     "fix": "run-p -cl fix:*",
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.3.4",
-    "@pega/custom-dx-components": "^2.0.20",
+    "@pega/custom-dx-components": "^2.0.22",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

package/src/tasks/init/template/tasks.config.json

@@ -1,7 +1,9 @@
 {
   "components-directory-path": "src/components",
   "server-config": {
+    "serverType": "infinity",
     "server": "https://localhost:38764/prweb",
+    "grantType": "authCode",
     "user": "user",
     "password": "password",
     "rulesetName": "rulesetName",

package/src/util.js

@@ -16,8 +16,7 @@ import {
   TOKEN_PATH,
   OOTB_COMPONENT_SERVICE_REST_ENDPOINT,
   DELETE_COMPONENT_SERVICE_REST_ENDPOINT,
-  OOTB_COMPONENTS,
-  TOKEN_URL_V1
+  OOTB_COMPONENTS
 } from './constants.js';
 
 const access = promisify(fs.access);
@@ -226,7 +225,7 @@ export const showVersion = () => {
   const pData = require("@pega/custom-dx-components/package.json");
 
   console.log(chalk.green("DX Component Builder v" + pData.version));
-}
+};
 
 export const getOOTBComponents = async () => {
   return new Promise((resolve, reject) => {
@@ -281,7 +280,3 @@ export const getOOTBComponents = async () => {
     });
   });
 };
-
-export const getTokenUrl = async (server) => {
-  return server.endsWith('/') ? `${server}${TOKEN_URL_V1}` : `${server}/${TOKEN_URL_V1}`;
-};