---
schema_version: "1"
id: fb06c296f77f7692252d40f7728044b713515344a940ce1066dfb72b5535c6bc
title: Set Up Authentication for Lightning Out 2.0
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/lightning_out_auth.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 305f5ba5cfb9ccc69f0b6afba4c453c3309587f707b0528bda1713e991a0bf51
description: For an external app to access components in a Lightning Out 2.0 app, the end user must be authenticated in Salesforce. The external app must also be authorized to access Salesforce resources. To set up authentication and authorization, implement an OAuth 2.0 flow and configure an External Client App (ECA) in your org. Then configure your external app to either call the Lightning Out 2.0 UI Bridge endpoint or the standard Salesforce UI Bridge endpoint. The call generates a frontdoor URL at run time, which is used to establish a Salesforce session for the Lightning Out 2.0 app.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Set Up Authentication for Lightning Out 2.0

For an external app to access components in a Lightning Out 2.0 app, the end user must be authenticated in Salesforce. The external app must also be authorized to access Salesforce resources. To set up authentication and authorization, implement an OAuth 2.0 flow and configure an External Client App (ECA) in your org. Then configure your external app to either call the Lightning Out 2.0 UI Bridge endpoint or the standard Salesforce UI Bridge endpoint. The call generates a frontdoor URL at run time, which is used to establish a Salesforce session for the Lightning Out 2.0 app.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
          <colgroup>
            <col>
          </colgroup>
          <tbody>
            <tr class="">
              <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience</td>

            </tr>
            <tr class="">
              <td class="slds-cell-wrap" style="vertical-align:top;">
                <p style="margin-bottom:0;">Available in: <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>,
                  <strong>Unlimited</strong>, all <strong>Agentforce 1 Editions</strong>, and <strong>Developer</strong>
                  Editions
                </p>
              </td>

            </tr>
          </tbody>
        </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
          <colgroup>
            <col style="width:50%">
            <col style="width:50%">
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d103492e86">User Permissions Needed</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">To create local External Client Apps:</td>

              <td class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">Create, edit, and delete External Client Apps</td>

            </tr>
            <tr class="">
              <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">To configure External Client Apps OAuth settings:</td>

              <td class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">Create, edit, and delete External Client Apps</td>

            </tr>
            <tr class="">
              <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">To modify CORS settings:</td>

              <td class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">Modify All Data AND Customize Application</td>

            </tr>
            <tr class="">
              <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">To create and modify a Lightning Out 2.0 app:</td>

              <td class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e86 ">Customize Application</td>

            </tr>
          </tbody>
        </table>

Before you begin, complete the steps in [Prepare to Build a Lightning Out 2.0 App](https://help.salesforce.com/s/articleView?id=platform.lightning_out_prepare.htm&release=264.0.0&type=5 "Before you embed a Lightning Out 2.0 app into an external app, configure some security-related and administrative settings in Salesforce and in your external app. These settings allow Lightning Out 2.0 inline frames (iframes) to load in the external app.").

1. Design and implement a supported [OAuth 2.0 authorization flow](https://help.salesforce.com/s/articleView?language=en_US&id=xcloud.remoteaccess_oauth_flows.htm&type=5).
    
    ![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_important.png)
    
    Important Lightning Out 2.0 supports OAuth 2.0 flows that provide a web-scoped access token with user context, including the [web server flow](https://help.salesforce.com/s/articleView?id=xcloud.remoteaccess_oauth_web_server_flow.htm&type=5&language=en_US) and the [JSON Web Token (JWT) bearer flow](https://help.salesforce.com/s/articleView?id=xcloud.remoteaccess_oauth_jwt_flow.htm&type=5&language=en_US). The client credentials flow isn’t supported because it doesn’t provide user context, so Salesforce filters out the web scope from its access token.
2. In your org, create an external client app (ECA) with OAuth enabled.
    
    Use these instructions to get set up: [Create an External Client App](https://help.salesforce.com/s/articleView?id=xcloud.create_a_local_external_client_app.htm&type=5&language=en_US) and [Configure the External Client App OAuth Settings](https://help.salesforce.com/s/articleView?id=xcloud.configure_external_client_app_oauth_settings.htm&type=5&language=en_US).
3. In your ECA, use these OAuth settings.
    1. Include the **Manage user data via Web browsers (web)** or the **Full access (full)** OAuth scopes.
        
        If your ECA uses the JWT bearer flow, also include the **Perform requests at any time (refresh\_token)** scope.
    2. If your ECA uses one of the listed flows in the Flow Enablement section, enable and configure the settings for that flow.
        
        Remember that Lightning Out 2.0 doesn’t support the client credentials flow.
    3. In the Security section, you can keep these default settings selected: **Require secret for Web Server Flow**, **Require secret for Refresh Token Flow**, and **Require Proof Key for Code Exchange (PKCE) extension for Supported Authorization Flows**.
        
        Lightning Out 2.0 also supports refresh token rotation and JWT-based access tokens.
4. To obtain a frontdoor URL at run time, call a UI Bridge API endpoint from your external app by using one of these methods.
    - [Obtain a frontdoor URL from the Lightning Out 2.0 endpoint](https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&release=264.0.0&type=5 "The Lightning Out 2.0 servlet extends the UI Bridge API by providing CORS support and restricts Salesforce resource access to only Lightning Out 2.0 apps.").
        
        This method provides only access to Lightning Out 2.0 resources. It requires almost no extra setup and provides built-in Cross-Origin Resource Sharing (CORS) protection. To use this method, you must add your external app domain name to the Salesforce CORS allowlist. See [Prepare to Build a Lightning Out 2.0 App](https://help.salesforce.com/s/articleView?id=platform.lightning_out_prepare.htm&release=264.0.0&type=5 "Before you embed a Lightning Out 2.0 app into an external app, configure some security-related and administrative settings in Salesforce and in your external app. These settings allow Lightning Out 2.0 inline frames (iframes) to load in the external app.").
    - [Obtain a frontdoor URL from the standard UI Bridge API endpoint](https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&release=264.0.0&type=5 "Instead of using the Lightning Out 2.0 UI Bridge API endpoint, you can obtain a frontdoor URL from the standard UI Bridge API endpoint services/oauth2/singleaccess. This method requires you to configure ‌your own server-side authorization flow for your external app. However, this method allows for more fine-grained control if your company has specific security requirements.").
        
        This method requires you to configure ‌your own server-side authorization flow for your external app. However, this method allows for more fine-grained control if your company has specific security requirements.

## Obtain a Frontdoor URL from the Lightning Out 2.0 Endpoint

The Lightning Out 2.0 servlet extends the UI Bridge API by providing CORS support and restricts Salesforce resource access to only Lightning Out 2.0 apps.

Instead of the standard UI Bridge API endpoint `services/oauth2/singleaccess`, the Lightning Out 2.0 servlet uses the special endpoint `services/oauth2/lightningoutsingleaccess`. This endpoint directs to a Lightning Web Runtime app that sets a valid Salesforce session ID (SID) as a cookie. The SID is sent with all future requests to the org, so the user doesn’t need to reauthenticate while using the Lightning Out 2.0 app.

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_important.png)

Important Before you make a request to the Lightning Out 2.0 UI Bridge API endpoint, make sure that your Lightning Out 2.0 app is enabled from the Lightning Out 2.0 App Manager. See [Build a Lightning Out 2.0 App](https://help.salesforce.com/s/articleView?id=platform.lightning_out_build.htm&release=264.0.0&type=5 "Create and configure Lightning Out 2.0 apps with the low-code Lightning Out 2.0 App Manager. Add custom Lightning web components (LWCs) to each Lightning Out 2.0 app, and optionally define custom property values that your external apps can pass to these components. Generate a Lightning Out 2.0 code block that you can directly embed into an external app’s HTML markup.").

To generate a frontdoor URL, from your external app, send a POST request to the `https://MyDomainName.my.salesforce.com/services/oauth2/lightningoutsingleaccess` endpoint. Include your Lightning Out 2.0 app ID and the OAuth 2.0 access token as request body parameters.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
          <colgroup>
            <col style="width:50%">
            <col style="width:50%">
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d103492e351">Request body parameter</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d103492e354">Description</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Request body parameter" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e351 "><code>lightning_out_app_id</code></td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e354 ">
                <p>Required. The Lightning Out 2.0 app ID. </p>
                <p>You can find this ID on the Lightning
                  Out 2.0 App Manager page for the app.</p>
                <p style="margin-bottom:0;">This ID corresponds to the value of the
                  <code>app-id</code> attribute on the
                  <code>lightning-out-application</code> web component. For more information
                  about the Lightning Out 2.0 app component, see <a href="https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-architecture.html" target="_blank">Understand Lightning Out 2.0 Architecture</a> in
                  the <cite>Lightning Web Components Developer Guide</cite>.
                </p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Request body parameter" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e351 ">
                <code>access_token</code>
              </td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d103492e354 ">
                <p>Required. The valid OAuth 2.0 access token from the user’s initial session. </p>
                <p>It
                  can be an opaque access token or a JSON Web Token (JWT)-based access token. The
                  access token must have the <code>web</code> or <code>full</code> scope.
                  Specify scopes in the external client app settings for the app that issued the
                  access token.</p>
                <p style="margin-bottom:0;">The user associated with the access token can’t have the API
                  Only User permission.</p>
              </td>

            </tr>
          </tbody>
        </table>

Here’s an example POST request that uses cURL.

```
curl -X POST \
  'https://MyDomainName.my.salesforce.com/services/oauth2/lightningoutsingleaccess' \
--form 'access_token="access-token-value"' \
--form 'lightning_out_app_id="app-id"'
```

Here’s another example POST request that uses JavaScript. Make sure that the `Content-Type` header is declared as `application/x-www-form-urlencoded`.

```javascript
fetch(
    "https://MyDomainName.my.salesforce.com/services/oauth2/lightningoutsingleaccess", 
    {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "access_token=access-token-value&lightning_out_app_id=app-id"
    }
)
    .then((response) => {
        console.log("Status:", response.status);
        return response.json();
    })
    .then((data) => {
        console.log("Success:", data);
    })
    .catch((error) => {
        console.error("Error:", error);
    });
```

If successful, the UI Bridge API returns a JSON response with the frontdoor URL.

```
HTTP/1.1 200 OK

Content-Type: application/json
Cache-Control: no-cache,must-revalidate,max-age=0,no-store,private
....

{"frontdoor_uri":"https://MyDomainName.my.salesforce.com/secur/frontdoor.jsp?otp=otp_value"}
```

If unsuccessful, the API returns an error message. For error message descriptions, see [Generate a Frontdoor URL to Bridge into UI Sessions](https://help.salesforce.com/s/articleView?id=xcloud.frontdoor_singleaccess.htm&type=5&language=en_US).

When the frontdoor URL is returned, set the `frontdoor-url` attribute on the `lightning-out-application` component to the `frontdoor_uri` value. Make sure that the `frontdoor-url` attribute value is a string of only the URL, not the entire JSON response.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)

Tip To review what HTML elements comprise a Lighting Out 2.0 app, including the `lightning-out-application` component definition, see [Understand Lightning Out 2.0 Architecture](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-architecture.html).

After the `frontdoor-url` attribute is set, a Lightning Web Runtime app loads and sets a valid Salesforce session ID. Your Lightning Out 2.0 app now loads on the external host page.

## Obtain a Frontdoor URL from the Standard UI Bridge API Endpoint

Instead of using the Lightning Out 2.0 UI Bridge API endpoint, you can obtain a frontdoor URL from the standard UI Bridge API endpoint `services/oauth2/singleaccess`. This method requires you to configure ‌your own server-side authorization flow for your external app. However, this method allows for more fine-grained control if your company has specific security requirements.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_note.png)

Note Unlike the Lightning Out 2.0 endpoint, the standard UI Bridge API endpoint doesn’t support CORS settings configured in Salesforce Setup.

For instructions, see [Generate a Frontdoor URL to Bridge into UI Sessions](https://help.salesforce.com/s/articleView?language=en_US&id=xcloud.frontdoor_singleaccess.htm&type=5). In your request, don’t include the `redirect_uri` parameter. Instead of being taken to the Salesforce homepage, users see the Lightning Out 2.0 app components on the external host page.

When the frontdoor URL is returned, set the `frontdoor-url` attribute on the [`lightning-out-application` component](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-architecture.html) to the `frontdoor_uri` value. Make sure that the `frontdoor-url` attribute value is a string of only the URL, not the entire JSON response.

After the `frontdoor-url` attribute is set, a Lightning Web Runtime app loads and sets a valid Salesforce session ID. Your Lightning Out 2.0 app now loads on the external host page.

#### See Also

- [External Client Apps](https://help.salesforce.com/s/articleView?id=xcloud.external_client_apps.htm&type=5&language=en_US)
- [Authorize Apps with OAuth](https://help.salesforce.com/s/articleView?id=xcloud.remoteaccess_authenticate.htm&type=5&language=en_US)
- [Generate a Frontdoor URL to Bridge into UI Sessions](https://help.salesforce.com/s/articleView?id=xcloud.frontdoor_singleaccess.htm&type=5&language=en_US)
- [_Lightning Web Components Developer Guide_: Understand Lightning Out 2.0 Architecture](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-architecture.html)