Authenticate Embedded App users using Auth0

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 to configure your Embedded App SSO flow.

Prerequisites

To follow this guide you'll need:

• An Auth0 Account
• A client-side app using Auth0 for user authentication. See code examples 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.

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.

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

   /**
   * 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": ["<YOUR_GROUP_IDS>"],
       };
   
       const response = await axios.request({
           method: 'post',
           url: api_url,
           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 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 and access the token as follows:

src/views/embed_page.tsx

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://app.superblocks.com/embed/applications/<APP_ID>'
                token={token}
            /> :
            <div>User not authenticated</div>
        }
    </>
}

For more code examples from Auth0, check out Auth0's code samples library.

tip

Your user is now authenticated with Superblocks! Go further with SSO by reading the full docs on Embedded App Authentication.