TanStack Start

Ao final deste guia o fluxo de verificação abre num app TanStack Start, com o componente montando no cliente e a credencial vindo de uma server function.

Pré-requisitos

Node.js 20 ou superior.
Uma sdkUrl emitida pelo seu backend, como em emitir a credencial.

Monte o fluxo

Carregue o SDK

Declare o script no head da rota raiz. Ele registra window.Legitimuz antes do bundle.

src/routes/__root.tsx

import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router";

export const Route = createRootRoute({
  head: () => ({
    scripts: [{ src: "https://sdk.legitimuz.com/v1/websdk.js" }],
  }),
  component: () => (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  ),
});

Declare o global

O build de CDN não traz tipos. Reaproveite a declaração do guia de React; ela é a mesma.

Emita a credencial numa server function

src/server/criar-verificacao.ts

import { createServerFn } from "@tanstack/react-start";

export const criarVerificacao = createServerFn({ method: "POST" }).handler(async () => {
  const usuario = await autenticar();
  const cadastro = await db.cadastro.porUsuario(usuario.id);

  const resposta = await fetch("https://api.legitimuz.com/public/verifications", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.LEGITIMUZ_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      schema_version: "1.0",
      ref_id: cadastro.id,
      document: { type: "cpf", number: cadastro.cpf },
      integration_origin_public_id: process.env.LEGITIMUZ_ORIGIN_ID!,
    }),
  });

  const { verification, entry } = await resposta.json();
  await db.cadastro.vincular(cadastro.id, verification.public_id);
  return { sdkUrl: entry.url as string };
});

Server functions rodam só no servidor. A chave nunca chega ao bundle do cliente.

Use na rota

src/routes/verificacao.tsx

import { createFileRoute } from "@tanstack/react-router";
import { useLegitimuz } from "../hooks/useLegitimuz";
import { criarVerificacao } from "../server/criar-verificacao";

export const Route = createFileRoute("/verificacao")({
  loader: () => criarVerificacao(),
  component: Verificacao,
});

function Verificacao() {
  const { sdkUrl } = Route.useLoaderData();
  const { containerRef, status } = useLegitimuz({ sdkUrl });

  return (
    <>
      <div ref={containerRef} style={{ height: 640 }} />
      <p>{status}</p>
    </>
  );
}

O hook useLegitimuz é o mesmo do guia de React: monta uma vez por sdkUrl e chama destroy() no cleanup.

Confira que funcionou

A primeira tela aparece dentro do container e o status vira pronto.

Boas práticas

Loader no servidor, montagem no cliente

O loader chama a server function e entrega só a sdkUrl ao componente. O useEffect do hook roda no browser, onde window.Legitimuz já existe.

Guia rápido

Desenvolvedores

Web

SDKs

Pré-requisitos

Monte o fluxo

Confira que funcionou

Boas práticas

Loader no servidor, montagem no cliente

Próximo passo

Opções do mount()

Testar

​Pré-requisitos

​Monte o fluxo

​Confira que funcionou

​Boas práticas

Loader no servidor, montagem no cliente

​Próximo passo

Opções do mount()

Testar

Pré-requisitos

Monte o fluxo

Confira que funcionou

Boas práticas

Próximo passo