Configuring Tableau Lightning Web Components and Seamless Authentication

Tableau Lightning web components (LWC) allow Salesforce customers to drag and drop Tableau views and Tableau Pulse metrics onto Salesforce Lightning pages.

  • The Tableau View component allows you to add embedded views from Tableau Cloud or Tableau Server.
  • The Tableau Pulse component allows you to add embedded Tableau Pulse metrics from Tableau Cloud.

Tableau LWC seamless authentication allows you to view Tableau content using connected app trusted tokens without signing in. Seamless authentication is optional for Tableau View LWC, and is required for Tableau Pulse LWC.

Add Trusted URL

The Tableau view or Pulse URL that you want to add to your Lightning page must be added as a Trusted URL.

  1. From your Salesforce app, select the gear in the top-right corner, and then select Setup.
  2. On the left navigation pane, enter “Trusted URLs” in the Quick Find search bar.
  3. Select the Trusted URLs settings page.
  4. Select New Trusted URL.
  5. Enter an API Name and URL, following the instructions on the settings page. Note: The URL must begin with https://
  6. For CSP Context, select All.
  7. For CSP Directives, check all boxes.
  8. Select Save.

Turn on Tableau LWCs and set up seamless authentication

Configure Salesforce settings

The following steps only need to be completed one time by a Salesforce admin:

  1. From your Salesforce app, select the gear in the top-right corner, and then select Setup.
  2. On the left navigation pane, enter “Tableau” in the Quick Find search bar.
  3. Select the Tableau Embedding settings page.
  4. Select the checkboxes for Turn on Tableau Lightning Web Components and Turn on token-based single sign-on authentication.

    Note: Both of these boxes must be checked to configure the Tableau Pulse LWC. For the Tableau View LWC, you can choose not to set up token authentication and instead sign in manually when the component loads.

    To use Tableau View LWC on Mobile, you must turn on token-based authentication and set up seamless authentication.

  5. For Select Tableau User Identity field, set an org-level user field to authenticate the user in Tableau. You must select the Salesforce user field that corresponds with the Tableau username. The dropdown shows the field value for the current user, or null if no value is defined. If none of the user fields match the Tableau username, select an empty field (for example, Federation ID or a custom field). Then, populate the empty field with the Tableau username for your users.

    Note: The Tableau User Identity field setting applies to all users and doesn’t need to be set on an individual basis.

  6. Save your changes.
  7. If you're the Tableau admin, keep the Salesforce settings Tableau Embedding tab open while you configure Tableau settings in the next section. If you aren’t the admin, share the Issue URL and JWKS URI with your Tableau admin.

Configure Tableau settings

In one tab, open the Tableau Embedding settings page in your Salesforce org. In another tab, go to your Tableau site and follow these instructions to set up the Connected App.

For Tableau Server, follow these steps:

  1. As a Tableau Server admin, sign in to the Tableau Services Manager (TSM) web interface.
  2. Navigate to User Identity & Access, and then select the Authorization Server tab.
  3. Select the checkbox for Enable OAuth access for embedded content.
  4. Enter the Issue URL and JWKS URI, which you can find on the Salesforce org Tableau Embedding settings page. Use the Copy button on the Salesforce org settings page to copy the Issuer URL value, and then paste it into the TSM web interface. Repeat this process for the JWKS URI value.
  5. Note: The JWKS URI field is marked as optional in the TSM web interface, however this value is required to use Tableau LWC seamless authentication.

  6. Select Save Pending Changes.
  7. Select Pending Changes in the upper-right corner of the page, and then select Apply Changes and Restart to stop and restart Tableau Server.

For more information, see Register your EAS with Tableau Server(Link opens in a new window).

For Tableau Cloud, follow these steps:

  1. Open the Tableau Settings page, and then choose the Connected Apps tab.
  2. From the New Connected App dropdown, select OAuth 2.0 Trust.
  3. On the Create Connected App dialog, enter the Issue URL and JWKS URI, which you can find on the Salesforce org Tableau View Embedding settings page. Use the Copy button on the Salesforce org settings page to copy the Issuer URL value, and then paste it into the Tableau settings page. Repeat this process for the JWKS URI value.
  4. Important: The Create Connected App dialog notes the JWKS URI field as optional, however this value is required to use Tableau LWC seamless authentication.

  5. Select the checkbox for Enable connected app.
  6. Select Create.
  7. Note: The Connected App is named External Authorization Server.

For more information, see Register your EAS with Tableau Cloud(Link opens in a new window).

If you want to create a host mapping for this site, leave the Connected Apps tab open. You can use the URL for this page and the Copy Site ID button to populate the host mapping fields in the following section.

Set up or edit host mapping

Follow these steps to create or edit a host mapping.

Tip: The Tableau User Identity field setting applies to all users and doesn’t need to be set on an individual basis.

Create a new host mapping

  1. From your Salesforce app, select the gear in the top-right corner, and then select Setup.
  2. On the left navigation pane, enter “Tableau” in the Quick Find search bar.
  3. Select the Tableau Embedding settings page.
  4. From the Tableau Host Mapping section, select Create New.
  5. Fill in the host mapping details:
    1. Tableau site URL: Enter a URL for the Tableau site that you want to map. The URL should contain the site name, unless it’s an on-prem installation using the Default site. Note: If you want to create a host mapping for this site, leave the Connected Apps tab open. You can use the URL for this page and the Copy Site ID button to populate the host mapping fields in the following section.
    2. Tableau site ID: Enter the site ID for the Tableau site that you want to map. You can use the Copy Site ID button on the Connected App settings page or on the Share dialog.
    3. Tableau site host type: Select Tableau Cloud or Tableau Server.
  6. Select Save. Or, if you want to return to the Tableau Embedding settings page without saving, select Cancel.

Edit a host mapping

You can update the site ID and host type for an existing mapping. If you need to change the site URL, delete the existing mapping, and then create a new one with the correct URL.
  1. From the Salesforce app Tableau Embeddings settings page, select Edit next to an existing host mapping.
  2. Edit the Tableau site ID or Tableau site host type fields as needed.
  3. Select Save. Or, if you want to return to the Tableau Embedding settings page without saving, select Cancel.

Add Tableau LWCs to a Lightning page using Lightning App Builder

Tableau LWCs are available on App, Home, and Record Lightning pages only. For more information about Lightning page types and using the Lightning App Builder, see Lightning App Builder in Salesforce Help.

To add a Tableau View or Tableau Pulse LWC to an existing Lightning page, follow these steps:

  1. Navigate to the Lightning page that you want to edit.
  2. Select the gear icon in the top right.
  3. Select Edit Page.
  4. Proceed to the Add a Tableau LWC to a Lightning page section below.

To add a Tableau View or Tableau Pulse LWC to a new Lightning page, follow these steps:

  1. From your Salesforce app, select the gear in the top-right corner, and then select Setup.
  2. On the left navigation pane, enter “Lightning App Builder” in the Quick Find search bar.
  3. Select the Lightning App Builder setup page.
  4. Select New.
  5. Select the page type that you want to create. Tableau LWCs are available on App, Home, and Record pages.
  6. Select Next.
  7. Enter a name and select a layout for the new page, and then select Done.

Add a Tableau LWC to a Lightning page

  1. From the Components list on the left side of the page, drag and drop the Tableau View or Tableau Pulse component onto the page.
  2. Configure the LWC:

Save and activate the page

  1. When you’ve finished adding and configuring a Tableau View or Tableau Pulse LWC, select Save.
  2. If you’ve created a new page, you are prompted to activate the page so that it’s visible to users. Select Activate.
  3. On the Page Settings tab of the Activation page, enter a name, choose an icon, and select your visibility preference.
  4. (Optional) On the Lightning Experience tab of the Activation page, you can add the page to various Lightning Experience Apps.
  5. (Optional): On the Mobile Navigation tab of the Activation page, you can add the page to the Mobile Navigation Menu.
    Note: Tableau Pulse LWC isn't available on Mobile.
  6. Select Save.

Embed multiple Tableau views

You can embed more than one Tableau view on a Salesforce Lightning page as long as all views come from the same site. Tableau only supports a single session, and that session is specific to the site. The most recently granted session will wipe out the previous one.

To embed Tableau views from multiple sites, you must create a separate Lightning page that is site-specific.

Tableau View LWC seamless authentication on Mobile

Note: Tableau View LWC is available on iOS 17.2.1+. Tableau Pulse LWC isn't currently available on iOS or Android.

Consider the following best practices to prevent issues for mobile users:

  • Lightning page type: Mobile users can access App Pages and Record Pages, but not Home Pages.

    Note: Record Pages must be associated with a specific type of record.

  • If you use the same page for both desktop and mobile users, select Activation to verify that the Lightning page is set as the Org Default for both desktop and phone form factors.
  • Consider creating separate Lightning pages for desktop and mobile to provide a tailored visual experience. The height for the Tableau View component is fixed and won’t dynamically adjust to different screen sizes.
  • To add a scroll bar to a view, select Show Toolbar from the Tableau View component properties pane.
  • For the App Page type, select Activation, and then select the Lightning Experience tab. Add your page to the LightningBolt list to make the page easier to find on mobile.
  • On mobile, iOS blocks cross-site traffic by default. Open your mobile settings, select Salesforce settings, and then turn on Allow Cross-Website Tracking. For more information, see Enable cross-website tracking(Link opens in a new window).

Troubleshooting Tableau View LWC seamless authentication

Verify the Salesforce and Tableau configuration

  1. Verify that the Issuer URL and JWKS URI values match in both Salesforce and Tableau Settings and that JWKS URI ends with id/keys.

    • For Tableau Cloud, open the Salesforce Settings Tableau Embedding page in one tab. In another tab, open the Tableau Settings Connected Apps tab. On the Connected Apps tab, select External Authorization Server, and then select Edit. Verify that the Issuer URL and JWKS URI values match and that the JWKS URI ends with id/keys.
    • For Tableau Server, open the Salesforce Settings Tableau Embedding page in one tab. Then, sign in to the Tableau Services Manager (TSM) web interface, navigate to User Identity & Access, and then open the Authorization Server tab.
  2. Verify Host Mapping: If you’ve saved a host mapping, verify that it has the correct site ID and host type.

Verify the JWT token

In the Tableau View Lightning web component property editor, select Debug Mode to verify that the JWT token is working as expected.

  1. Open the console logs and copy the token.
  2. Go to the jwt.io(Link opens in a new window) website and paste the token into the Encoded field.
  3. Verify the following:
    • The subject (“sub”) matches the Tableau username.
    • For Tableau Cloud, the audience (“aud”) is “tableau+SiteID”.
      For Tableau Server, the audience (“aud”) is “tableau”.
    • The scope (“scp”) includes both “tableau:views:embed” and “tableau:insights:embed”.
    • The issuer (“iss”) EAS server is accurate.

Verify page activation

Sometimes, a user creates a Lightning page, but it hasn’t been activated or assigned anywhere, so users can’t find it. Select Activation to verify that the Lightning page is set as the Org Default for the intended form factors.

Tip:When debugging, it’s helpful to drag and drop a Rich Text component onto your page. Add a brief description of the page type and the view URL that you’re trying to embed. This allows you to be sure that the page being viewed by the end user is the page that the admin is editing.

Confirm that Tableau View LWC is working without seamless authentication (Tableau View LWC only)

  1. From the Tableau View pane on your Lightning page, clear the checkbox for Default Authentication Token, and then save the changes.
  2. If you’re signed in to Tableau in another tab, sign out. Ensure that navigating to the View URL redirects you to the Tableau sign-in page. Do not sign in.
  3. Navigate to the Lightning page. The Tableau View LWC should display a Sign in to Tableau button.
  4. Select Sign in to Tableau, and then enter your Tableau credentials to sign in.
    Note: If the view doesn’t load, this indicates a broader issue with authenticating to Tableau.

Error: LWC component version no longer supported (Tableau View LWC only)

To resolve this error, follow these steps:

  1. In the Components list, search for “Tableau”, and then drag and drop a new Tableau View component onto the page.
  2. Copy all properties from the Tableau View pane for the old component over to the new component.
  3. Select the delete icon on the old component.

See Also

Troubleshoot Connected Apps(Link opens in a new window)

Register EAS to Enable SSO for Embedded Content

Thanks for your feedback!Your feedback has been successfully submitted. Thank you!