Welcome, fellow learner! In this blog, we'll walk you through the steps to create a login page for your Salesforce Experience Cloud using LWC. We'll start by enabling Experience Cloud in your Salesforce organization and setting up an Experience site. While you have the flexibility to choose different templates, we recommend using the 'Build Your Own (LWR)' template for more customization options.
Once you're set up, we'll dive into Experience Builder to explore how you can customize your site. We'll also guide you through the process of creating a user specifically for your Experience site, ensuring a smooth and seamless login experience. Let's get started!"
Note: We kindly request you to review our previous blogs for a better understanding of fundamental concepts such as the nature of Experience Cloud, its functioning, the various types of Experience Cloud, and the steps involved in creating a login page using Aura.
Requirement of Login Page
"Have you ever wondered how to design a login page like this for your portal or online community, making it easy for users worldwide to access exclusive content and resources? In this guide, we'll show you how to create these login pages in Salesforce Experience Cloud, ensuring that when visitors land on your page, they'll find the login option readily available.
Before we get into the specifics of crafting the login page, let's begin by understanding how to create an Experience Cloud in a Sandbox or any Developer org. This foundational step sets the stage for building your login page from scratch using LWC in Salesforce Experience Cloud."
Go to Setup by clicking the settings icon on the upper right side.
In the quick find search “Digital Experience” or “mmu”.
Click on the Settings below Digital Experience and click on the “Enable Digital Experience” checkbox to enable Experience Cloud in your sandbox or any dev org and then click on the Save button.
Now you have enabled digital experience in your org.
Again go to Settings after refreshing the page and click on the “Allow using standard external profiles for self-registration, user creation, and login” checkbox.
Now, click on All Sites to first create an Experience cloud site. Now After clicking on All Sites, click on the New button to first create an Experience site.
After clicking, you'll be prompted to choose a prebuilt template, each designed for a specific business process. In our case, we've opted for the "Build Your Own (Aura)" template previously. However, feel free to select any template that best aligns with your specific business needs and requirements.
Here you can explore all the template features and the customization options available. If you wish to learn more about this template, you can take a moment to review the provided information. When you're ready to proceed, simply click on the "Get Started" button.
Type any Name as we have written “Partners” as an example and in the URL which is optional.
The setup process for all the customizations in the Experience site by Salesforce will take approximately 2-3 minutes. Once that's complete, navigate to the Workspaces for the site you've created and access the “Administration” section. In the Settings, you'll find the "Activate" option. Simply click on "Activate," and your site will be activated. Now, you can access this site using the provided URL.
Go to the Developer Console of your organization (sandbox or development environment) and click on "File" >> "New" >> "Apex Class". Provide any class name (e.g., "LoginController") and insert the specified code into the newly created Apex Class.
LoginController.cls
Allows users to log in to the current site and then takes them to the startUrl. Please copy the site URL and create a custom label(Setup>> Custom Labels>> New) where we will paste the site URL as a value for the custom label then click on save. Now use System.Label to excess Custom Label site URL in Apex class. Configure the Site not to request a username and password if it is for unauthenticated users or users logging in with a third-party authentication provider.
global class LoginController {
@AuraEnabled
public static String login(String username, String password) {
String result = null;
try {
ApexPages.PageReference lgn = Site.login(username, password, '');
result = (lgn != null) ? lgn.getUrl() : null;
} catch (Exception ex) {
result = ex.getMessage();
}
return result;
}
@AuraEnabled(cacheable = true)
public static Boolean getIsUsernamePasswordEnabled() {
Auth.AuthConfiguration authConfig = getAuthConfig();
return authConfig.getUsernamePasswordEnabled();
}
@TestVisible
private static Auth.AuthConfiguration getAuthConfig() {
Id networkId = Network.getNetworkId();
Auth.AuthConfiguration authConfig = new Auth.AuthConfiguration(networkId, '');
return authConfig;
}
}After authorizing the Sandbox or Dev edition org, use VSCode or any suitable IDE to create a Lightning Web Component (LWC), which involves developing the LWC's HTML, JavaScript, and CSS files, along with the required metadata, for custom functionality in Salesforce.
CustomLoginFormLWC.cmp
<template>
<form>
<div>
<h3>{label.LOGINHERE}</h3>
</div>
<div>
<label>{label.USERNAME}</label>
<input type="text" placeholder={label.USERNAME} onchange={handleUsernameChange} required>
</div>
<div>
<label>{label.PASSWORD}</label>
<input type="password" placeholder={label.PASSWORD} onchange={handlePasswordChange} required>
</div>
<div>
<button type="submit" onclick={handleClick}>{label.LOGIN}</button>
</div>
<div class="icon-container">
<span>
<img src={icon.GOOGLEICON} onclick={openGoogle} class="icon">
</span>
<span >
<img src={icon.TWITTERICON} onclick={openTwitter} class="icon">
</span>
<span>
<img src={icon.LINKEDINICON} onclick={openLinkedin} class="icon">
</span>
<span >
<img src={icon.INSTAGRAMICON} onclick={openInstagram} class="icon">
</span>
</div>
</form>
</template>CustomLoginFormLWC.js
CustomLoginFormLWC.css
CustomLoginFormLWC.cmp-meta.xml
Next, navigate to the builder, which is called 'Experience Builder' and functions similarly to the 'Lightning App Builder' in Salesforce Sales Cloud. Within Experience Builder, select 'Home' and then click on ‘Login' This action will take you to the login page. On the login page, you'll notice that the login components are Standard Salesforce components. However, it's important to note that these standard components provided by Salesforce have limitations when it comes to customization to align with your specific business requirements. To address this, we will customize the login page by adding our own LWC component. Before doing that, we need to clear the existing components. You can remove any component by selecting it and clicking the delete button.
Now, navigate to "Workspaces," then select "Administration," and go to the "Members" section. From there, add the "Partner Community User" from the "Available Profiles" list to the "Selected Profiles" list.
Proceed to Experience Builder, access the "Settings" section, and navigateto "General." Click on the "Partner Profile" link, then select "Enable Apex Class Access" and search for the “LoginController” class in “Available Apex Classes” move it to the “Enabled Apex Classes” and then click on Save.
Now if you want to create a user for the Experience Cloud site, First go to the Account and click on New to create a new Account.
Next, create a related Contact for that Account by clicking on the "New" button. Enable it as a Partner Account (Account) and also enable it as a Partner User (Contact). After enabling the Partner User, you'll be redirected to the User Menu. In this menu, you need to assign a profile (typically "Partner Community") and proceed to create a user by filling in all the required fields. It's important to note that you should always assign a role to yourself (not the user) before creating an Experience Cloud user.
Following this, the user will receive an email with instructions to reset their password, using the email address provided during the user creation process. Once the password is reset, the user can access the Experience site by simply clicking on the URL in their web browser and entering their username and newly set password.
Conclusion
Utilizing the Custom login component allows for extensive modification and customization of the login page to align with specific business requirements. This level of customization greatly enhances the usability and functionality of login pages, resulting in a more streamlined and user-friendly experience.
If you'd like to see the code and resources used in this project, you can access the repository on GitHub.To access the AVENOIRBLOGS repository, click here. Feel free to explore the code and use it as a reference for your projects.
Happy Coding! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.
Blog Credit:
M. Gupta
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Are you in need of Salesforce Developers?
Reach Us Now!
Commenti