React Native

Abra o fluxo de verificação num app React Native ou Expo.

Ao final deste guia o fluxo abre dentro do seu app React Native, com os eventos chegando ao seu código JavaScript.

Pré-requisitos

• Uma access_credential emitida pelo seu backend, como em criar verificação.
• O bundle das duas plataformas registrado e verificado em Integrações → Segurança. applicationId no Android, bundle identifier no iOS.

Disponibilidade

O SDK React Native ainda não está publicado num registro que você possa instalar. Fale com o suporte para receber o pacote e as instruções da versão de preview.

Até lá, um app React Native pode abrir a verificação pelo módulo nativo de cada plataforma. Android e iOS, ou por link, que não exige biblioteca.

O restante desta página descreve o contrato previsto, para você dimensionar a integração.

Configure as permissões

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

No Expo, declare no app.json em vez de editar os projetos nativos.

Abra a sessão

TelaVerificacao.tsx

import { useEffect, useState } from "react";
import { LegitimuzVerification } from "@legitimuz/react-native-sdk";

export function TelaVerificacao({ refId }: { refId: string }) {
  const [credencial, setCredencial] = useState<string | null>(null);

  useEffect(() => {
    fetch("https://seu-backend.exemplo.com.br/verificacoes", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ref_id: refId }),
    })
      .then((r) => r.json())
      .then(({ entry }) => setCredencial(entry.access_credential));
  }, [refId]);

  if (!credencial) return null;

  return (
    <LegitimuzVerification
      accessCredential={credencial}
      onEvent={(evento) => console.log(evento.type)}
      onComplete={() => {
        // O titular terminou de interagir. O desfecho vem pelo webhook.
        navegarParaAguarde();
      }}
      onError={(erro) => console.warn(erro.code, erro.message)}
    />
  );
}

A chave de API nunca vai para o app, nem no .env do React Native, que acaba no bundle. O app recebe só a access_credential, do seu backend.

Peça a câmera antes

Nas duas plataformas, peça a permissão antes de montar o componente. Se o titular chega na captura sem a permissão concedida, o fluxo trava.

Próximo passo

Eventos

O catálogo e os payloads.

Receber a decisão

Onde o desfecho realmente chega.