@salesforcedevs/dx-components 0.59.0-avatar-button-10 → 0.59.0-avatar-button-13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.59.0-avatar-button-10",
+    "version": "0.59.0-avatar-button-13",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -15,7 +15,6 @@
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
-        "cometd": "^7.0.7",
         "debounce": "^1.2.0",
         "lodash.get": "^4.4.2",
         "microtip": "0.2.2",

package/src/modules/dx/avatarButton/avatarButton.ts

@@ -1,5 +1,4 @@
 import { api, LightningElement } from "lwc";
-import { CometD } from "cometd";
 
 const TBID_BASE_URL = "https://dev1-trailblazer-identity.cs192.force.com";
 const TBID_SETTINGS_URL = `${TBID_BASE_URL}/settings`;
@@ -15,6 +14,8 @@ declare global {
         SFIDWidget?: {
             logout(): void;
             login(): void;
+            openid_response: any;
+            disabled: boolean;
         };
     }
 }
@@ -27,9 +28,6 @@ export interface UserInfo {
     readonly fullName: string;
 }
 
-// @ts-ignore
-window.COMETD = CometD;
-
 export default class AvatarButton extends LightningElement {
     @api size: "small" | "medium" | "large" = "medium";
 
@@ -57,13 +55,35 @@ export default class AvatarButton extends LightningElement {
     }
 
     connectedCallback() {
+        if (
+            new URLSearchParams(window.location.search).get("loginSuccess") ===
+            "true"
+        ) {
+            this.isLoading = true;
+        }
+
         window.addEventListener("tbid-login", this.handleSsoLogin);
         window.addEventListener("tbid-logout", this.handleSsoLogout);
 
-        // Whenever this component is added to the DOM and there is not an SFIDWidget present, immediately request
-        // user info; if the user is logged in and we receive the info, this component will display the avatar UI;
-        // otherwise, it will display the login button.
-        if (!window.SFIDWidget) {
+        const isWidgetDisabled = window.SFIDWidget?.disabled;
+        const isWidgetLoggedIn = window.SFIDWidget?.openid_response;
+
+        // If the component loads and (1) we are logging in and (2) the embedded login widget script
+        // is in the DOM but (3) the widget has either not loaded or not completed login yet, we
+        // defer the userInfo request in order to allow the SFIDWidget the time to trigger it (via
+        // it's own login handler) after SSO login. If any of (1) - (3) are false, then we request
+        // user info immediately. The check prevents duplicate requests.
+        if (
+            this.isLoading &&
+            (!window.SFIDWidget || (!isWidgetDisabled && !isWidgetLoggedIn)) &&
+            document.querySelector('script[src*="authProviderEmbeddedLogin"]')
+        ) {
+            setTimeout(() => {
+                if (!window.SFIDWidget?.openid_response) {
+                    this.requestUserInfo();
+                }
+            }, 1000);
+        } else {
             this.requestUserInfo();
         }
     }
@@ -74,21 +94,21 @@ export default class AvatarButton extends LightningElement {
     }
 
     // This handles logout from within this component, rather than from SSO via the SFIDWidget.
-    private handleLogout = async (isSsoLogout: boolean) => {
+    private handleLogout = (isSsoLogout: boolean) => {
         this._didReceiveUserInfo = false;
         this.isLoading = false;
         this.updateAvatarWithUserInfo({}); // clear old info
 
-        if (!isSsoLogout && window.SFIDWidget) {
-            // If the SFIDWidget is around and logout was not *already* triggered by SSO logout,
-            // defer to the SFIDWidget. This will ensure that the SSO session is logged out as
-            // well.
+        if (!isSsoLogout && window.SFIDWidget?.openid_response) {
+            // If the SFIDWidget is around and has an access token, and if logout was not *already*
+            // triggered by SSO logout, defer to the SFIDWidget. This will ensure that the SSO
+            // session is logged out as well.
             window.SFIDWidget.logout();
+        } else {
+            // Always clear the session token; if not SSO logout, this will also revoke the token with
+            // TBID; if SSO logout, that step is already taken care of
+            fetch(`${TBID_API_LOGOUT_URL}?isSsoLogout=${isSsoLogout}`); // no need to await this
         }
-
-        // Always clear the session token; if not SSO logout, this will also revoke the token with
-        // TBID; if SSO logout, that step is already taken care of
-        fetch(`${TBID_API_LOGOUT_URL}?isSsoLogout=${isSsoLogout}`); // no need to await this
     };
 
     // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
@@ -98,7 +118,8 @@ export default class AvatarButton extends LightningElement {
 
     // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
     private handleSsoLogin = async (event: Event) => {
-        const token = (event as CustomEvent).detail.userInfo?.access_token;
+        const { userInfo } = (event as CustomEvent).detail;
+        const token = userInfo?.access_token;
 
         // `token` should always be defined if an SSO login occurs, but we check for extra safety
         if (token) {
@@ -117,16 +138,13 @@ export default class AvatarButton extends LightningElement {
                     })
                 });
             } catch (ex) {
-                // If the request fails for some reason, fall back to whatever we've got
-                this.updateAvatarWithUserInfo(this.userInfo);
-                console.error(ex);
-                return;
+                console.error(`Attempt to update token failed: ${ex}`);
             }
         }
 
-        // Unfortunately, the user info provided by the SFIDWidget on SSO login does not contain
-        // image URLs, so we also have to request it manually again
-        this.requestUserInfo();
+        if (userInfo) {
+            this.updateAvatarWithUserInfo(userInfo);
+        }
     };
 
     private handleComponentLogin = () => {
@@ -164,7 +182,7 @@ export default class AvatarButton extends LightningElement {
             }
         } catch (ex) {
             // TODO: Something not directly related to auth went wrong. Unsure what to do here.
-            console.error("Invalid response received from TBID API, aborting.");
+            console.error(`Could not request user info: ${ex}`);
         }
 
         this.isLoading = false;