Set Up Components

Components are simple to set up and maintain. Once you’ve integrated a component into your application, it will reflect up-to-date data for the given company that is accessing it in your application.

To set up components, you’ll need to do two things:

  1. Generate a short-lived access token to make requests on behalf of a given company
  2. Embed the SchematicEmbed component in your React frontend using a Component ID from Schematic

Both steps are covered below.

1. Set up your server for token exchange

Schematic components use short-lived, company-scoped temporary access tokens to make requests on behalf of a company. You’ll need to issue these from your server, using a secret access token.

If you haven’t already done so, start by installing the Schematic developer SDK of your choosing. Then, you can implement the token exchange:

1// Initialize Schematic SDK
2import { SchematicClient } from "@schematichq/schematic-typescript-node";
3const apiKey = process.env.SCHEMATIC_API_KEY;
4const client = new SchematicClient({ apiKey });
5
6// Get a temporary access token
7export async function getTemporaryAccessToken(companyId: string) {
8 resourceType: "company",
9 lookup: { companyId }, // Use your company keys
10 });
11
12 return resp.data?.token;
13}

Temporary access tokens are valid for 15 minutes.

2. Use the SchematicEmbed component in your React frontend application

Once you’ve issued a temporary access token and provided it to your frontend React application, you can simply pass it to the SchematicEmbed component along with your Component ID to render it:

1import { SchematicEmbed } from "@schematichq/schematic-components";
2
3export default function CustomerPortal({ accessToken }: { accessToken: string }) {
4 const componentId = process.env.NEXT_PUBLIC_SCHEMATIC_COMPONENT_ID;
5 if (!componentId) {
6 return <NotFound />;
7 }
8
9 return (
10 <SchematicEmbed accessToken={accessToken} id={componentId} />
11 );
12}