OrthıD
Start free
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.

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. Install the React package

The @orthid/react package ships the provider, hooks, and components.

Terminal
npm install @orthid/react

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
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
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