Custom LogOut Button in LWC Community

Question

I have added Custom global header component on my Community using the below code

<div class="slds-global-header__item">
                <ul class="slds-global-actions" style="margin-right: 40px;">

                    <li class="slds-global-actions__item">
                        <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
                            <button class="slds-button slds-global-actions__avatar slds-global-actions__item-action"
                                title="person name" onclick={handleshowloggOffButton} aria-haspopup="true">
                                <span class="slds-avatar slds-avatar_profile-image-large">
                                    <span class="slds-assistive-text">Person name</span>
                                </span>
                            </button>
                            <section if:true={showLoggOffButton} aria-describedby="dialog-body-id-14"
                                aria-label="My Favorites" class="slds-popover slds-nubbin_top slds-dynamic-menu"
                                role="dialog" style="position:absolute;left:-1rem;top:42px; width: 82px;">
                                <div class="slds-popover__body slds-p-horizontal_none" id="dialog-body-id-14">
                                    <div id="listbox-unique-id" role="listbox">
                                        <ul class="slds-listbox slds-listbox_vertical slds-dropdown_length-10"
                                            role="group" aria-label="My Favorites">
                                            <li role="presentation" class="slds-listbox__item">
                                                <a onclick={handleLogout}
                                                    class="slds-text-link_reset slds-text-link slds-align_absolute-center">Log
                                                    Out</a>                                               
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </li>
                </ul>
            </div>

handleLogout() {
        var newURL =
            window.location.protocol +
            "//" +
            window.location.host +
          "/" +
          window.location.pathname;        
        window.location.href = newURL + '/secure/logout.jsp';        
    }

on click of log off It's showing Invalid Page. Can anyone help me what i am missing here.

Answer 1

handleLogout(){
    this[NavigationMixin.Navigate]({
        type: 'comm__loginPage',
        attributes: {
            actionName: 'logout'
        }
    });
}

See documentation: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_page_reference_type

Answer 2

window.location.pathname returns a value that starts with /. Because you're also adding an additional / when combining the location values, you end up having a malformed url such as https://{communityName}.force.com//s/.

Because the logout page is within the same domain, could you just change this button into an anchor tag and set the href attribute to /secure/logout.jsp?

Answer 3

Logout should be done using the named page with the logout action. see this example:

import {LightningElement} from "lwc";
import {NavigationMixin} from "lightning/navigation";

const LOGOUTPAGEREF = {
    type: "comm__loginPage",
    attributes: {
        actionName: "logout"
    }
};

export default class ComLogoutButton extends NavigationMixin(LightningElement) {
    logout() {
        this[NavigationMixin.Navigate](LOGOUTPAGEREF);
    }
}

the template can look like this:

<template>
    <a onclick={logout}>
        <lightning-icon icon-name="utility:logout" alternative-text="Logout"> </lightning-icon>
    </a>
</template>

for everyone else's convenience I have created a repo with a quick deploy option here: https://github.com/Henk3000/communityLogoutButton