Frontend Setup

There are two ways to deploy dashboard in your front end:

iFrame Embedding
Native React Component Embedding 🔒

Please click on the Deploy button in the Hub.

You will need to get the JWT for the current user and the dashboard ID to render the correct dashboard. The JWT is generated by following the steps in Backend Setup. The dashboard ID could be found in the URL when you are viewing the dashboard you want to embed.

Below is an example of deploying component with JWT using Clerk middleware:

"use client";
import React from "react";
import { useUser } from "@clerk/nextjs";

const Analytics: React.FC = () => {
  // Get the user information from Clerk and extract the Upsolve token from the metadata
  const { user } = useUser();
  const upsolveToken = user?.publicMetadata?.["upsolveToken"];

  // Embed the component into your app
  return (
    <>
      {upsolveToken != null && typeof upsolveToken === "string" && (
        <iframe
          id="c5da5cb3-fedb-4656-9170-0cc65c9db29a"
          title="Example Dashboard"
          width="1000"
          height="1000"
          src="https://hub.upsolve.ai/share/dashboard/c5da5cb3-fedb-4656-9170-0cc65c9db29a?theme=light&jwt=<upsolveToken>"
        />
      )}
    </>
  );
};

export default Analytics;

For Supabase-specific setups, you need to include a database auth token (dbAuthToken) in the iFrame src URL. This token is used to authenticate users and identify what RLS policies should apply to the given user.

Example updated iFrame URL:

<iframe
  id="c5da5cb3-fedb-4656-9170-0cc65c9db29a"
  title="Example Dashboard"
  width="1000"
  height="1000"
  src="https://hub.upsolve.ai/share/dashboard/c5da5cb3-fedb-4656-9170-0cc65c9db29a?theme=light&jwt=<upsolveToken>&dbAuthToken=<yourDbAuthToken>"
/>

dbAuthToken: This token is the auth token you get from Supabase session retrieval.

Retrieving the Session Token

To retrieve the session token (dbAuthToken), you can use Supabase’s auth.getSession method. Below is an example:

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  'https://your-supabase-project.supabase.co', // Replace with your Supabase project URL
  'public-anon-key' // Replace with your Supabase anon key
);

async function getDbAuthToken() {
  const {
    data: { session },
    error,
  } = await supabase.auth.getSession();

  if (error) {
    console.error('Error retrieving session:', error.message);
    return null;
  }

  // Return the access token from the session
  return session?.access_token;
}

getDbAuthToken().then((dbAuthToken) => {
  console.log('dbAuthToken:', dbAuthToken);
  // Use dbAuthToken in the iframe URL
});

Refer to the Supabase API docs for more details on managing sessions and tokens.

Get Started

Data Connection

Charts

Dashboards

Filtering

Data Permissioning

Customize

Dashboard Deployment

Sharing and Export

Retrieving the Session Token