reauth.dev Integration Guide

reauth.dev is authentication, billing, and organizations as a service. Add passwordless login, Stripe subscriptions, credits/balance, and team management to your app with a few lines of code.

Choose Your Integration Path

Path	Best for	What you get
Hosted UI	Fastest setup	Pre-built login pages at `reauth.yourdomain.com`, zero frontend code
React SDK	React/Next.js apps	`AuthProvider`, `useAuth` hook, `ProtectedRoute` component
Headless	Custom UIs, non-React	Full API control, build your own login flow
Server only	API-to-API	JWT verification, balance operations, user management

Quick Start (5 minutes)

1. Create a domain

2. Verify DNS

Add the CNAME and TXT records shown in the dashboard to your DNS provider. See setup.md for details.

3. Install the SDK

npm install @reauth-dev/sdk

4. Add authentication

Hosted UI (simplest):

import { createReauthClient } from '@reauth-dev/sdk';

const reauth = createReauthClient({ domain: 'yourdomain.com' });

// Redirect to hosted login page
reauth.login();

// Check if user is authenticated
const session = await reauth.getSession();
if (session.valid) {
  console.log('User ID:', session.end_user_id);
  console.log('Email:', session.email);
}

React (Next.js App Router):

// app/providers.tsx
'use client';
import { AuthProvider } from '@reauth-dev/sdk/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider config={{ domain: 'yourdomain.com' }}>
      {children}
    </AuthProvider>
  );
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// app/page.tsx
'use client';
import { useAuthContext } from '@reauth-dev/sdk/react';

export default function Home() {
  const { user, loading, login, logout } = useAuthContext();

  if (loading) return <div>Loading...</div>;
  if (!user) return <button onClick={login}>Sign in</button>;

  return (
    <div>
      Welcome {user.email}
      <button onClick={logout}>Sign out</button>
    </div>
  );
}

Server-side verification:

import { createServerClient } from '@reauth-dev/sdk/server';

const reauth = createServerClient({
  domain: 'yourdomain.com',
  apiKey: process.env.REAUTH_API_KEY!,
});

// In your API route — zero network calls, local JWT verification
const result = await reauth.authenticate({
  headers: {
    authorization: request.headers.get('authorization') ?? undefined,
    cookie: request.headers.get('cookie') ?? undefined,
  },
});

if (result.valid && result.user) {
  console.log('User ID:', result.user.id);
  console.log('Roles:', result.user.roles);
  console.log('Subscription:', result.user.subscription);
}

Documentation Index

Getting Started

Domain Setup & Configuration — DNS, API keys, auth methods
Authentication Flows — Magic link, OAuth, session lifecycle

Feature Guides

React SDK — AuthProvider, useAuth, ProtectedRoute, headless hooks
Browser SDK Reference — Full client API: auth, billing, orgs, credits
Server SDK Reference — JWT verification, balance operations, webhooks
Organizations — Teams, roles, invitations, org-scoped data
Billing — Stripe subscriptions, checkout, plans, portal
Credits — Balance system, deposits, charges, auto top-up
Webhooks — Event types, signature verification, retry behavior

Reference

TypeScript Types — All exported SDK types
Troubleshooting — Common issues and production checklist

SDK Package Structure

@reauth-dev/sdk          — Browser client (createReauthClient)
@reauth-dev/sdk/react    — React hooks and components
@reauth-dev/sdk/server   — Server-side JWT verification and balance ops
@reauth-dev/sdk/webhooks — Webhook signature verification