OrthıD
Browse the docs
Quickstarts

React quickstart

Add OrthID to a single-page React app built with Vite or Create React App. Wrap the app in the provider, then use drop-in components and hooks.

Preview
The OrthID SDKs and public API are in active development and available to design partners. The samples below are illustrative of the planned API. Talk to us to get early access.

This guide targets a client-rendered React app (Vite or CRA). You only need the publishable key here; the secret key stays on your backend. If you have not set up a project yet, run the Quickstart first.

1. Get the React package

The @orthid/react package ships the provider, hooks, and components. Request preview access, and you will receive install instructions for your design-partner build.

2. Wrap your app in the provider

Mount <OrthIDProvider> at the root and pass your publishable key. With Vite, client env vars are exposed through import.meta.env and must be prefixed with VITE_.

src/main.tsx (planned API)
import React from "react";
import ReactDOM from "react-dom/client";
import { OrthIDProvider } from "@orthid/react";
import App from "./App";

const publishableKey = import.meta.env.VITE_ORTHID_PUBLISHABLE_KEY;

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <OrthIDProvider publishableKey={publishableKey}>
      <App />
    </OrthIDProvider>
  </React.StrictMode>,
);
Note
On Create React App the variable is process.env.REACT_APP_ORTHID_PUBLISHABLE_KEY instead. Either way, only the publishable key (pk_...) belongs in client code; never ship the secret key to the browser.

3. Render signed-in and signed-out states

Use the useUser() hook to branch on auth state. While the session is loading, isLoaded is false; once ready, user is either the signed-in actor or null. Drop in <SignIn/> for signed-out visitors and <UserButton/> for signed-in ones.

src/App.tsx (planned API)
import { SignIn, UserButton, useUser } from "@orthid/react";

export default function App() {
  const { isLoaded, user } = useUser();

  if (!isLoaded) {
    return <p>Loading...</p>;
  }

  if (!user) {
    return (
      <main className="grid min-h-screen place-items-center">
        <SignIn afterSignInUrl="/" />
      </main>
    );
  }

  return (
    <main>
      <header className="flex items-center justify-between p-4">
        <span>Hello, {user.firstName}</span>
        <UserButton afterSignOutUrl="/" />
      </header>
      <h1>Your dashboard</h1>
    </main>
  );
}
Tip
<UserButton/> renders the avatar, account management, device list, and sign-out in one component, so you rarely need to build a profile menu yourself.

Next steps