SDKs / Client

React

TypeScript Themeable Playground

@identra/react

Drop-in React components and headless hooks, built on the framework-agnostic core.

Install

pnpm add @identra/react @identra/js

Wrap your app

The provider builds the client and holds the session; compose control-flow components and the drop-in UI inside it.

tsx

import { IdentraProvider, SignedIn, SignedOut, SignIn, UserButton } from "@identra/react";

export function App() {
  return (
    <IdentraProvider baseUrl="http://localhost:8080" applicationId={APP_ID}>
      <SignedOut>
        <SignIn />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </IdentraProvider>
  );
}

Headless hook

Build your own screens: `useIdentra()` exposes reactive auth state and the client's flow methods.

tsx

import { useIdentra } from "@identra/react";

function Profile() {
  const { state, client } = useIdentra();
  if (!state.isLoaded) return null;
  if (!state.isSignedIn) return <button onClick={() => client.signInWithPassword({ email, password })}>Sign in</button>;
  return <p>Signed in as {state.user.primary_email}</p>;
}

Theme it

Every drop-in component reads `--idt-*` CSS variables from any ancestor. No stylesheet import needed.

tsx

<div style={{ "--idt-accent-color": "#7a2020", "--idt-radius-base": "3px" }}>
  <SignIn />
</div>

Drop-in components

SignInSignUpUserButtonManageAccountSessionListSignedInSignedOutProtectVerifyEmailMagicLinkResetPasswordAcceptInvitation

Try these in the playground

API

IdentraProvideruseIdentra()useIdentraClient()