Access LWC without Login using Lightning Out

by

In an earlier post, we checked how to access Visualforce Page without login which you can check here. In this post, we will implement the functionality to access LWC without a login on a Public Website using Lightning Out. Let’s just get into the implementation.

Implementation

To host lightning components on other web servers and access LWC without login, we have to make use of Lightning Out. In this implementation, we will create a Lightning Web Component and host it on a Public page or Website which can be accessed by anyone without any authentication.

First, create a Lightning Web Component that we want to access without login. Add the required mark up to the Lightning Web Component.

cardCmp.html

<template>
    <lightning-card  title="Hello from LWC">
        <lightning-button label="View" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small">
            This is a Lightning Web Component accessed outside the Salesforce without Authentication.
        </p>
        <p slot="footer">- A courtesy of Lightning Out</p>
    </lightning-card>
</template>

Then, create a Lightning App and add Aura Dependency of the Lightning Web Component that we created earlier to this app. This app is called Aura Dependency App. This App should extend ltng:outApp and implement the ltng:allowGuestAccess interfaces as we want to access this LWC without login. Add attribute access with value Global.

PublicApp.app

<aura:application extends="ltng:outApp" implements="ltng:allowGuestAccess" access="Global">
	<aura:dependency resource="c:cardCmp"/> 
</aura:application>

We can add Lightning Aura Component in the same way using aura:dependency.

Now, we need to expose this Lightning Component to the public page. In an earlier post, we used Salesforce Sites to expose the Visualforce page publically. We can use the same Visualforce page to host our Lightning Component as well. Create a Salesforce Site and expose a Visualforce Page as a Public Website. Please refer earlier post to check the implementation for the same.

Lightning Out

First, enable an origin server for use with Lightning Out by including the Lightning Out JavaScript library in Visualforce Page hosting our standalone Aura Dependency app. This can be done using a single line of code:

<script src="https://myDomain.my.salesforce.com/lightning/lightning.out.js"></script>

where, myDomain is the Domain of your Org.

If we are hosting a Lighting Component on a Public Website which is developed using Visualforce page, we can include a Lightning Out JavaScript library using below Tag.

<apex:includeLightning />

Then, we need to use below methods to use and create a Lightning Component in Javascript:

$Lightning.use() which takes four parameters:

  • appName: Name of our Aura Dependency app. Required.
  • callback: Callback method that will execute once the Lightning Component is loaded. Optional.
  • lightningEndPointURI: The Lightning URL of Salesforce instance. Optional.
  • authToken: The session ID or OAuth access token of an active Salesforce session. Optional.

$Lightning.createComponent() will be passed as a callback method for above method. This method accepts four parameters.

  • componentName: Name of a Lightning Component. Required.
  • attributes: To pass the attributes for the Lightning Component. If no attributes are required. Pass an empty object. Required.
  • domLocator: Id of an element or DOM element where the Lightning Component will be inserted. Required.
  • callback: Callback method that will be called once the Lightning Component is added on the page. Optional.

PublicPage.vfp

<apex:page standardStylesheets="true" showHeader="false">
	<apex:includeLightning />
    
    <div id="LightningAppDivId">
        <!-- Lightning Component will be included here. -->
    </div>

     <script>
         $Lightning.use(
             "c:PublicApp", // Name of Aura Dependency app where c is namespace.
             function() { // Callback function
                 $Lightning.createComponent(
                     "c:cardCmp", // Name of Lightning Component where c is namespace.
                     {}, // attribute parameters
                     "LightningAppDivId" // Id of the element where Lightning Component will be rendered.
                 );
             }
         );
     </script>
    
</apex:page>

That is all we need.

Access LWC without Login

This is how our implementation will look like on a Public Website. Just open the Salesforce Site URL in Browser.

https://niksdevsite-developer-edition.ap17.force.com/
Access LWC without Login using Lightning Out
Access LWC without Login using Lightning Out

This is how we can access LWC without login using Lightning Out. If you don’t want to miss a new implementation, please Subscribe here.

If you want to know more about Lightning Out, you can official Salesforce documentation here.

Following are some hand-picked implementations for you.

See you in the next post !