@salesforcedevs/dx-components 0.59.0-avatar-button-11 → 0.59.0-avatar-button-14

package/lwc.config.json

@@ -1,6 +1,7 @@
 {
     "modules": [{ "dir": "src/modules" }],
     "expose": [
+        "dx/avatarButton",
         "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.59.0-avatar-button-11",
+    "version": "0.59.0-avatar-button-14",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/avatarButton/avatarButton.html

@@ -22,8 +22,7 @@
                           |  
                         -->
                         <a
-                            href="#"
-                            onclick={handleComponentLogout}
+                            href="https://development.developer.salesforce.com/tbid/logout"
                             class="inline-link"
                         >
                             Logout

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

@@ -14,6 +14,8 @@ declare global {
         SFIDWidget?: {
             logout(): void;
             login(): void;
+            openid_response: any;
+            disabled: boolean;
         };
     }
 }
@@ -53,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();
         }
     }
@@ -70,15 +94,15 @@ 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
@@ -94,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) {
@@ -113,16 +138,14 @@ 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);
+            this._didReceiveUserInfo = true;
+        }
     };
 
     private handleComponentLogin = () => {
@@ -160,7 +183,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;