> ## 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 getIcon = () => {
switch (type) {
case 'info':
return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
case 'success':
return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm4.293 6.293L9 11.586 5.707 8.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414l4 4c.391.391 1.024.391 1.414 0l6-6c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%230CC26D'/%3E%3C/svg%3E";
case 'warning':
return "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxMDgwJyBoZWlnaHQ9JzEwODAnPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3RyYW5zcGFyZW50Jy8+PHBhdGggZD0nTTEzLjc5NCAxMC43NSA4LjMgMS4yNWExLjUgMS41IDAgMCAwLTIuNiAwbC01LjQ5NCA5LjVBMS40OTQgMS40OTQgMCAwIDAgMS41IDEzaDExYTEuNDkzIDEuNDkzIDAgMCAwIDEuMjk0LTIuMjVNNi41IDUuNWEuNS41IDAgMCAxIDEgMFY4YS41LjUgMCAwIDEtMSAwek03IDExYS43NS43NSAwIDEgMSAwLTEuNS43NS43NSAwIDAgMSAwIDEuNScgc3R5bGU9J3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojZmY5ZjM1O2ZpbGwtcnVsZTpub256ZXJvO29wYWNpdHk6MScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLjAyIDE5LjMwNSlzY2FsZSg3Ny4xNCknLz48L3N2Zz4=";
case 'danger':
return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm5.707 4.293L10 9.586 4.293 4.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414L8.586 11l-5.707 5.293c-.391.391-.391 1.024 0 1.414s1.024.391 1.414 0L10 12.414l5.707 5.293c.391.391 1.024.391 1.414 0s.391-1.024 0-1.414L11.414 11l5.707-5.293c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%23F45252'/%3E%3C/svg%3E";
case 'note':
return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
default:
return "";
}
};
return
{title &&
{title}
}
{children}
;
};
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_REGION = "app" // Change to "eu" if using Superblocks EU
const SUPERBLOCKS_BASE_API = `https://${SUPERBLOCKS_REGION}.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": [""],
};
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:
```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 ?
:
User not authenticated
}
}
```
For more code examples from Auth0, check out [Auth0's code samples](https://developer.auth0.com/resources/code-samples) library.
Your user is now authenticated with Superblocks! Go further with SSO by reading the full docs on Embedded App Authentication.