# 2.1 Embed Integration via SSO

{% embed url="<https://youtu.be/sXs_s7GHR2M>" %}
How to setup white label integrations as a SaaS company + SSO
{% endembed %}

The below steps explain how you can **integrate the Embed** (integration white label portal) **into your own SaaS application**.

In order to ensure that only your app can show the iframe and to connect your users' identity with the integrations (Flows) they might add you have to create a JWT which has to be dynamically passed. You can see a detailed setup guide below.

## **1. Passing data to** Locoia

**SSO** means **single sign-on**. This method allows SaaS company's end customers to enable integrations using Locoia without needing to log in - the most native way possible.

**SSO with a JWT claim, as per the payload-example below:**

```javascript
{
  "embed_user_id": "1234567890",
  "embed_user_name": "John Doe",
  "embed_account_id": "2345678545678",
  "embed_account_name": "ABC Ltd.",
  "embed_state": {
    "your_custom_field": "your_custom_value",
    "your_custom_field_2": "your_custom_value_2"
  },
  "client_authentication": {
    "auth_type": "username_password",
    "connector_id": "proprietary_connector_id",
    "name": "connector_auth_name",
    "auth_token": "",
    "auth_details": "",
    "api_endpoint": "",
    "refresh_token": "",
    "user_input": {},
    "password": "end_user_password",
    "username": "end_user_username"
  },
  "iat": 1516239022,
  "exp": 1516539022
}
```

#### **JWT payload explained:**

* **embed\_user\_id***: id of the end-user - required*
* **embed\_user\_name***: name (first and last) of the end-user - optional*
* **embed\_account\_id**: your account id of your end-customer *- required*
* **embed\_account\_name**: your account name of your end-customer *- optional*
* **embed\_state**: A string or dictionary to pass all kinds of values that you want to be accessible by the created embed flow *- optional*
* **client\_authentication**: A dictionary with the connector auth details for the proprietary connector specified in the embed. You can find [more details here](/embed-white-label-portal/embed-admin-setup/2.-configure-embed/proprietary-connector-setup.md) *- optional*
* **exp**: expiry time stamp in epoch seconds *- required*
* **iat**: issued timestamp in epoch seconds *- required*

## 2. Creating JWT

Here are code examples in Python and node.js to convert the payload with JWT and a secret to the jwtToken. You can find a secret in Embed details.

<figure><img src="/files/9pg1b0c3VFxKxNIRlNY7" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Python" %}

```python
# Preparing the JWT based on a payload and secret.

import jwt
import time

secret = "secret can be found in your Locoia account upon creation of embed"
epoch_time = int(time.time())

# epoch time plus 1 hour
payload =  {
    "embed_user_id": "1234567890",
    "embed_user_name": "John Doe",
    "embed_account_id": "2345678545678",
    "embed_account_name": "ABC Ltd.",
    "iat": epoch_time,
    "exp": epoch_time + 3600
}

jwtToken = jwt.encode(
    payload,
    secret,
    algorithm="HS256",
    headers={"alg": "HS256", "typ": "JWT"}
)

# Print jwtToken
print(jwtToken)

# Output: eyJhbGciOiJIUzI1Ni ... cPZg
```

{% endtab %}

{% tab title="node.js" %}

```javascript
import {SignJWT} from "jose";
const secret = 'secret can be found in your Locoia account upon creation of embed';
    const payload = {
        embed_user_id: '1234567890',
        embed_user_name: 'John Doe',
        embed_account_id: '2345678545678',
        embed_account_name: 'ABC Ltd.'
    };

    const signJWT = new SignJWT(payload)
    signJWT.setProtectedHeader({
        alg: "HS256"
    })
    signJWT.setIssuedAt(Date.now())
    signJWT.setExpirationTime(Date.now() + 3600)
    const token = await signJWT.sign(new TextEncoder().encode(secret))
```

{% endtab %}
{% endtabs %}

Similar examples can be found for other language&#x73;**.**

## **3.  Creating the white label iframe within your app**

In Embed details you can also find the iframe code. Here you only need to replace the **jwtToken** with the token - as per the above creation example.

{% tabs %}
{% tab title="HTML" %}

```markup
<iframe
  id="embedded"
  name="embedded"
  src="https://api.locoia.com/embedded?embeddedId={UUID4 provided by the app}&token={jwtToken}&lang=de"
  style="border-style: none; width: 100%; height: 1000px;"
>
</iframe>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.locoia.com/embed-white-label-portal/embed-admin-setup/2.-configure-embed/embed-integration-via-sso.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.