> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superblocks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Login embed users with Auth0

export const Alert = ({type, title, children}) => {
  const variant = ["info", "success", "warning", "danger", "note"].includes(type) ? type : "note";
  return <div className={`alert alert--${variant}`}>
      <div className="alert-icon" />
      <div className="alert-content">
        {title && <div className="alert-title">{title}</div>}
        <div className="alert-body">{children}</div>
      </div>
    </div>;
};

If your app uses Auth0 for authentication, you can easily extend your existing login flow to log users into Superblocks as well. This tutorial shows how to use [Auth0 Actions](https://auth0.com/docs/customize/actions) to configure your [Embedded App SSO](/hosting/embedded-apps/authentication) flow.

## Prerequisites

To follow this guide you'll need:

* An [Auth0 Account](https://auth0.com/signup?place=header\&type=button\&text=sign%20up)
* A client-side app using Auth0 for user authentication. See [code examples](https://developer.auth0.com/resources/guides?type=web-app%2Cspa) to create one

## Configure login flow

Use the following instructions to authenticate embedded app users with Superblocks by requesting a session token when logging users into Auth0 using [Auth0 Login Flow](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow).

### Step 1. Generate an Embed access token

To get Superblocks session tokens for your Auth0 users, you'll need an **Embed** access token. See docs on Access Tokens to see how to [Create an Embed access token](/admin/org-administration/auth/access-tokens).

### Step 2. Add Superblocks Login action

Add an action to get a user session token from Superblocks.

1. Navigate to **Auth0 Dashboard → Actions → Library**, then select **Create Action → Build from scratch**

2. Enter the following in the Create action form, then select **Create**

   | Field | Value to enter |
   | - | - |
   | Name | Superblocks Login |
   | Trigger | Login / Post Login |

3. Click **Add secret** and configure it as follows, then select **Create**

   | Field | Value to enter |
   | - | - |
   | Key | `SUPERBLOCKS_TOKEN` |
   | Value | Paste in the **Embed access token** you created in Step 1 |

4. Click on the **Dependency** icon in the left sidebar

5. Click **Add dependency**. In the **Name** field specify `axios`, then click **Create**

6. Copy/paste the following Action into the code editor

```js theme={null}
/**
* Handler that will be called during the execution of a PostLogin flow.
*
* @param {Event} event - Details about the user and the context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
*/
exports.onExecutePostLogin = async (event, api) => {
    const axios = require("axios");

    const SUPERBLOCKS_TENANT = "app" // "app" for Cloud US, "eu" for Cloud EU, or your Cloud-Prem tenant name
    const SUPERBLOCKS_BASE_API = `https://${SUPERBLOCKS_TENANT}.superblocks.com/api/v1/public/token`;

    const user = {
        "email": event.user.email,
        "name": event.user.name,
        "metadata": {
            // Additional user or organization metadata
            //"externalUserId": event.user.user_metadata.id,
            //"externalOrgId": event.organization.metadata.id
        },
        //"groupIds": ["<YOUR_GROUP_IDS>"],
    };

    const response = await axios.request({
        method: 'post',
        url: SUPERBLOCKS_BASE_API,
        headers: { 
            'authorization': `Bearer ${event.secrets.SUPERBLOCKS_TOKEN}`, 
            'content-type': 'application/json'
        },
        data : user
    });
    const token = response.data;

    api.idToken.setCustomClaim(`superblocks_token`, token.access_token);
};
```

7. Click on the **Test** icon in the left side panel. Test the action to make sure it runs without any errors
8. Click **Deploy** to save and deploy the action

### Step 3. Add Superblocks Login action to login flow

Now that you have a Superblocks Login action, you can add it to your [Auth0 Login Flow](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow) so a session token is generated each time a user logs in using Auth0.

1. Navigate to **Auth0 Dashboard → Actions → Flows**
2. Select the **Login** flow and drop **Superblocks Login** into the flow
3. Select **Apply**

### Step 4. Pass token to your embed

Your login flow is now configured to add a `superblocks_token` to the user's `idToken` each time the user logs in via Auth0.

To get the `superblocks_token`, either decode the `idToken` stored by Auth0, or use an [Auth0 SDK](https://auth0.com/docs/libraries) and access the token as follows, replacing `{tenant}` with the value for your instance from [Instance URLs](/enterprise/instance-urls):

```tsx src/views/embed_page.tsx icon="react" theme={null}
import React, { useState, useEffect } from 'react';
import { SuperblocksEmbed } from '@superblocksteam/embed-react';
import { useAuth0 } from "@auth0/auth0-react";

const PageWithEmbed = () = {
    const { user } = useAuth0();
    return <>
        { user.superblocks_token ?
            <SuperblocksEmbed
                src='https://{tenant}.superblocks.com/code-mode/embed/applications/<APP_ID>'
                token={token}
            /> :
            <div>User not authenticated</div>
        }
    </>
}
```

For more code examples from Auth0, check out [Auth0's code samples](https://developer.auth0.com/resources/code-samples) library.

<Alert type="success">
  Your user is now authenticated with Superblocks! Go further with SSO by reading the full docs on <a href="/hosting/embedded-apps/authentication">Embedded App Authentication</a>.
</Alert>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.