Components

<SignIn/>

One component for the whole login experience: passkeys, MFA, social and SSO. Drop it in hosted or embedded, theme it with tokens, and send the actor wherever you want afterwards.

<SignIn/> renders a complete, accessible sign-in flow. It handles credential entry, passkeys, MFA challenges, social providers and SSO redirects, and it talks to the OrthID API for you. When the actor is authenticated it establishes a session and redirects to your app. Pair it with <SignUp/> for registration.

The component is part of @orthid/react and works in any React app. In Next.js it renders inside the App Router with no extra wiring beyond the provider and middleware.

Import and render

Mount the component anywhere inside your <OrthIDProvider>. The provider supplies the publishable key and region so the component knows which tenant and residency boundary to authenticate against.

app/sign-in/page.tsx

import { SignIn } from "@orthid/react";

export default function SignInPage() {
  return (
    <div className="auth-shell">
      <SignIn afterSignInUrl="/dashboard" signUpUrl="/sign-up" />
    </div>
  );
}

The provider is set up once, usually in your root layout. If you are starting from scratch, follow the React quickstart first.

app/layout.tsx

import { OrthIDProvider } from "@orthid/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <OrthIDProvider
          publishableKey={process.env.NEXT_PUBLIC_ORTHID_PUBLISHABLE_KEY}
        >
          {children}
        </OrthIDProvider>
      </body>
    </html>
  );
}

Hosted vs embedded

There are two ways to run the flow, and they differ only in where the UI lives:

Embedded renders the flow inline in your own page, as shown above. You own the layout, the surrounding chrome and the URL. This is the default and the right choice for most apps.
Hosted sends the actor to an OrthID-hosted sign-in page in the configured region, then returns them to your app. Use it when you want OrthID to own the login surface, for example across several apps that share one identity.

To use the hosted page, redirect to it instead of rendering the component. The hosted page reads your theme and redirect settings from the dashboard.

Hosted redirect

import { redirectToSignIn } from "@orthid/react";

// e.g. from a server action or a route guard
redirectToSignIn({ afterSignInUrl: "/dashboard" });

Routing

The component manages its own internal steps (credential, MFA, factor selection) using the routing prop. Choose "path" to give each step a real URL segment, or "hash" to keep step state in the URL fragment. Use path when the component owns a route subtree and you want deep links to steps; use hash when it sits on a single page.

Path routing

// renders steps at /sign-in, /sign-in/factor-one, /sign-in/sso-callback
<SignIn routing="path" path="/sign-in" afterSignInUrl="/dashboard" />

Path routing needs a catch-all route

With routing="path", mount the component on a catch-all segment (for example app/sign-in/[[...rest]]/page.tsx) so the internal steps can own their own URLs. With routing="hash" a single page is enough.

Redirects

Control where the actor lands after authentication. These props take precedence over the defaults configured in the dashboard:

afterSignInUrl sends a returning actor to your app after a successful sign-in.
redirectUrl is a convenience fallback used when a specific after-URL is not set.
signUpUrlpoints the “Create account” link at your registration page.

Allowlist your redirect URLs

OrthID only redirects to URLs you have allowlisted for the tenant in the dashboard. This prevents open-redirect abuse, so add your production and preview origins before going live.

Theming

Style the component with the appearance prop. It accepts design tokens for color, radius and typography, plus per-element class overrides, so it matches your product without custom CSS. Tokens cascade to every step of the flow.

Theming with tokens

<SignIn
  appearance={{
    tokens: {
      colorPrimary: "#004a99",
      colorText: "#0b1f3a",
      borderRadius: "12px",
      fontFamily: "Inter, sans-serif",
    },
    elements: {
      card: "shadow-lg border border-slate-200",
      formButtonPrimary: "rounded-xl",
    },
  }}
  afterSignInUrl="/dashboard"
/>

Hide or reorder the social providers with the socialButtons prop. Set it to an empty array to show only credential and SSO sign-in.

Social providers

<SignIn socialButtons={["google", "microsoft", "apple"]} />

Props

Prop	Type	Default	Description
`appearance`	`AppearanceConfig`	-	Theme the flow with design tokens (colorPrimary, colorText, borderRadius, fontFamily) and per-element class overrides.
`routing`	`"hash" \| "path"`	"hash"	How internal steps are encoded in the URL. Use path for real URL segments (needs a catch-all route), hash to keep step state on one page.
`path`	`string`	-	Base path the component is mounted at. Required when routing is path so steps resolve correctly.
`afterSignInUrl`	`string`	-	URL to redirect to after a successful sign-in. Must be allowlisted for the tenant.
`redirectUrl`	`string`	-	Fallback redirect used when a more specific after-URL is not provided.
`signUpUrl`	`string`	-	Destination for the create-account link shown in the flow.
`socialButtons`	`Provider[]`	all enabled	Which social providers to show and in what order. Pass an empty array to hide them.

Next steps

React quickstart - get the provider, hooks and components wired up.
<UserButton/> - add the signed-in avatar menu.