Create a Logout Link Component

To log out your users, you can create a custom logout link component.

See examples for a logout link and profile menu in codeSamples/salesforceScopedModules/force-app/main/default/ in the code sample files.

Tip

To log out your users, redirect them to the [/sitePrefix]/secur/logout.jsp path where [/sitePrefix] is your site’s base path (without the /s). If your site doesn’t use a prefix, use an empty string.

Here’s an example of a component that only displays the logout link when a user is authenticated.

1<template>
2    <template if:false={isGuest}>
3        <a href={logoutLink}>Logout</a>
4    </template>
5 </template>

1import { LightningElement, api } from "lwc";
2import isGuest from "@salesforce/user/isGuest";
3import basePath from "@salesforce/community/basePath";
4
5export default class Logout extends LightningElement {
6
7    get isGuest() {
8        return isGuest;
9    }
10
11    get logoutLink() {
12        const sitePrefix = basePath.replace(/\/s$/i, ""); // site prefix is the site base path without the trailing "/s"
13        return sitePrefix + "/secur/logout.jsp";
14    }
15}

Alternatively, you can make calls to the provided system Apex classes to get the login and logout links.

1import getLogoutUrl from '@salesforce/apex/applauncher.IdentityHeaderController.getLogoutUrl';
2import getLoginUrl from '@salesforce/apex/system.Network.getLoginUrl';

By default, users are redirected to the login page after logging out. You can configure the logout page URL in Experience Workspaces under Administration | Login & Registration | Logout Page URL.

LWR Sites for Experience Cloud

Create a Logout Link Component