@salesforcedevs/dx-components 0.59.0-avatar-button-4 → 0.59.0-avatar-button-7

package/package.json

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

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

@@ -21,7 +21,11 @@
                         <a href="#" class="inline-link">Switch account</a>
                         &nbsp;&nbsp;|&nbsp;&nbsp;
                         -->
-                        <a href="#" onclick={handleLogout} class="inline-link">
+                        <a
+                            href="#"
+                            onclick={handleComponentLogout}
+                            class="inline-link"
+                        >
                             Logout
                         </a>
                     </div>

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

@@ -5,9 +5,18 @@ const TBID_SETTINGS_URL = `${TBID_BASE_URL}/settings`;
 const TBID_PROFILE_URL = `${TBID_BASE_URL}/id`;
 const TBID_API_BASE_URL = "https://development.developer.salesforce.com/tbid";
 const TBID_API_LOGOUT_URL = `${TBID_API_BASE_URL}/logout`;
-const TBID_API_USERINFO_URL = `https://development.developer.salesforce.com/tbid/userinfo`;
+const TBID_API_USERINFO_URL = `${TBID_API_BASE_URL}/userinfo`;
 const TBID_API_LOGIN_URL = `${TBID_API_BASE_URL}/dologin`;
-// const TBID_LOGOUT_URL = `${TBID_BASE_URL}/services/auth/idp/oidc/logout`;
+const TBID_API_TOKEN_URL = `${TBID_API_BASE_URL}/token`;
+
+declare global {
+    interface Window {
+        SFIDWidget?: {
+            logout(): void;
+            login(): void;
+        };
+    }
+}
 
 export interface UserInfo {
     avatarImgSrc?: string;
@@ -31,16 +40,21 @@ export default class AvatarButton extends LightningElement {
     private isLoading = false;
     private settingsUrl = TBID_SETTINGS_URL;
     private profileUrl = TBID_PROFILE_URL;
-    private loginUrl = TBID_API_LOGIN_URL;
     private _didReceiveUserInfo = false;
 
+    private get loginUrl() {
+        return `${TBID_API_LOGIN_URL}?startURL=${window.encodeURIComponent(
+            window.location.href
+        )}`;
+    }
+
     private get isLoggedIn() {
         return this._didReceiveUserInfo;
     }
 
     connectedCallback() {
         window.addEventListener("tbid-login", this.handleSsoLogin);
-        window.addEventListener("tbid-logout", this.handleLogout);
+        window.addEventListener("tbid-logout", this.handleSsoLogout);
 
         // Whenever this component is added to the DOM, 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
@@ -50,29 +64,71 @@ export default class AvatarButton extends LightningElement {
 
     disconnectedCallback() {
         window.removeEventListener("tbid-login", this.handleSsoLogin);
-        window.removeEventListener("tbid-logout", this.handleLogout);
-    }
-
-    // This will only be called for "seamless SSO" login by the embedded login widget (SFWidget) on the website, if it exists.
-    private handleSsoLogin(event: Event) {
-        const userInfo = (event as CustomEvent).detail;
-        if (userInfo) {
-            this.updateAvatarWithUserInfo(userInfo);
-            this._didReceiveUserInfo = true;
-        }
+        window.removeEventListener("tbid-logout", this.handleSsoLogout);
     }
 
-    // This can be called *either* by the embedded login widget (SFWidget) on the website, if it exists,
-    // in the event of "seamless SSO" logout, *or* by a user clicking logout on this component.
-    private async handleLogout() {
+    // This handles logout from within this component, rather than from SSO via the SFIDWidget.
+    private handleLogout = async (isSsoLogout: boolean) => {
         this._didReceiveUserInfo = false;
         this.isLoading = false;
         this.updateAvatarWithUserInfo({}); // clear old info
 
-        fetch(TBID_API_LOGOUT_URL); // no need to await this
-    }
+        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.
+            window.SFIDWidget.logout();
+        }
+
+        // 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.
+    private handleSsoLogout = this.handleLogout.bind(this, true);
+
+    private handleComponentLogout = this.handleLogout.bind(this, false);
+
+    // 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;
+
+        // `token` should always be defined if an SSO login occurs, but we check for extra safety
+        if (token) {
+            this.isLoading = true;
+            // If an SSO login occurred and we have an SSO access token, we want to start using
+            // it rather than some other non-linked access token, for the "seamless SSO"
+            // experience
+            try {
+                await fetch(TBID_API_TOKEN_URL, {
+                    method: "POST",
+                    body: token
+                });
+            } catch (ex) {
+                // If the request fails for some reason, fall back to whatever we've got
+                this.updateAvatarWithUserInfo(this.userInfo);
+                console.error(ex);
+                return;
+            }
+        }
+
+        // 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();
+    };
+
+    private handleComponentLogin = () => {
+        if (window.SFIDWidget) {
+            // If the SFIDWidget is around, defer to it for login. This will ensure that the SSO
+            // session is used if possible.
+            window.SFIDWidget.login();
+        } else {
+            window.location.href = this.loginUrl;
+        }
+    };
 
-    private updateAvatarWithUserInfo(userInfo: any) {
+    private updateAvatarWithUserInfo = (userInfo: any) => {
         if (!userInfo) {
             return;
         }
@@ -81,10 +137,10 @@ export default class AvatarButton extends LightningElement {
         this.userInfo.firstName = userInfo.given_name;
         this.userInfo.lastName = userInfo.family_name;
         this.userInfo.username = userInfo.preferred_username;
-        // TODO: Consider displaying initials if no photo. Is there always a photo?
-    }
+        // TODO: Consider displaying initials if no photo. Is there always a photo even if just a default one?
+    };
 
-    private async requestUserInfo() {
+    private requestUserInfo = async () => {
         this.isLoading = true;
 
         try {
@@ -101,5 +157,5 @@ export default class AvatarButton extends LightningElement {
         }
 
         this.isLoading = false;
-    }
+    };
 }