We will provide a lightweight JavaScript library to make JWT-based authentication easier to use while maintaining the simplicity of iframe embedding. This method also supports authentication methods not natively supported by GoodData (e.g., SAML, LDAP, custom authentication).

import { ShowBase } from "react-admin";
import { ErrorBoundary } from "react-error-boundary";
import { AxiosInstance } from "axios";
import tigerFactory, {
  ContextDeferredAuthProvider,
  redirectToTigerAuthentication,
} from "@gooddata/sdk-backend-tiger";
import { BackendProvider, WorkspaceProvider } from "@gooddata/sdk-ui";
import { Dashboard } from "@gooddata/sdk-ui-dashboard";
import "@gooddata/sdk-ui-dashboard/styles/css/main.css";
import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

const DashboardEmbed: React.FC = () => {
  // Setup GoodData.
  const gdAuthProvider = new ContextDeferredAuthProvider(
    redirectToTigerAuthentication
  );
  const backend = tigerFactory()
    .onHostname("<https://dashboards.goarrowsup.com>")
    .withAuthentication(gdAuthProvider);

  return (
    <BackendProvider backend={backend}>
      <WorkspaceProvider workspace={"arrows-up"}>
        <Dashboard dashboard={"af05374e-58ab-4603-ae93-62ad99351059"} />
      </WorkspaceProvider>
    </BackendProvider>
  );
};

export const GoodDataDashboardShow = (api: AxiosInstance) => {
  return (
    <ShowBase resource="gooddata-dashboard-config">
      <ErrorBoundary fallback={<div>Something went wrong</div>}>
        <DashboardEmbed />
      </ErrorBoundary>
    </ShowBase>
  );
};

Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.

InsightView