Code theme:

Auth SDK

Add authentication and subscription access control to your Next.js, React + Vite, or Hono app with the revnu Auth SDK

Automatic Setup

Connect your GitHub repository and we'll automatically generate a PR that integrates the auth SDK into your project. Go to Developer → Auto Setup in your dashboard to get started.

Overview

The @revnu/auth SDK provides pre-built components and hooks for authentication and access control. Users who purchase your product automatically get an account - no separate signup flow needed.

How It Works

1.User purchases your product via Stripe checkout
2.revnu creates their account automatically using their email
3.User receives a "Set up your password" email with a magic link
4.From then on, they sign in with email/password

Key Features

•Pre-built sign-in, password setup, and user menu components
•Real-time access checks with checkAccess()
•Server-side helpers for protected routes
•JWT-based auth with embedded product access - no webhook setup required
•Customizable appearance (colors, border radius, fonts)

Quick Start

1. Install the SDK

bun add @revnu/auth
# or
npm install @revnu/auth

1. Go to your revnu dashboard → Settings → Developers → Auth SDK
2. Click "Generate Public Key"
3. Copy the key (format: rev_pub_xxxxx)

2. Set Environment Variable

# .env.local
NEXT_PUBLIC_REVNU_KEY=rev_pub_xxxxxxxxxxxxx

3. Add the Provider

Wrap your app with RevnuAuthProvider:

// app/layout.tsx
import { RevnuAuthProvider } from '@revnu/auth';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <RevnuAuthProvider>
          {children}
        </RevnuAuthProvider>
      </body>
    </html>
  );
}

4. Create Auth Pages

Create these pages for the complete auth flow:

app/auth/sign-in/page.tsx

import { SignIn } from '@revnu/auth';

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignIn redirectTo="/dashboard" />
    </div>
  );
}

app/auth/setup/page.tsx (for new customers)

import { SetPassword } from '@revnu/auth';

export default function SetupPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SetPassword redirectTo="/dashboard" />
    </div>
  );
}

5. Protect Your Pages

Use auth guard components or the useRevnuAuth() hook:

'use client';

import { SignedIn, SignedOut, Protect, SignIn } from '@revnu/auth';

const PRODUCT_ID = "your-product-id"; // From revnu dashboard

export default function Dashboard() {
  return (
    <>
      <SignedOut>
        <SignIn redirectTo="/dashboard" />
      </SignedOut>
      <SignedIn>
        <Protect productId={PRODUCT_ID} fallback={<UpgradePrompt />}>
          <div>Protected content here</div>
        </Protect>
      </SignedIn>
    </>
  );
}

For server-side protection, import from @revnu/auth/nextjs:

import { getUser, checkAccess } from '@revnu/auth/nextjs';
import { redirect } from 'next/navigation';

export default async function Dashboard() {
  const user = await getUser();
  if (!user) redirect('/auth/sign-in');

  const hasPro = await checkAccess("your-product-id");
  // ...
}

Components

Pre-built sign-in form with email/password fields and forgot password link.

<SignIn
  redirectTo="/dashboard"      // Where to go after sign-in
  onSuccess={(user) => {}}     // Callback on success
  onError={(error) => {}}      // Callback on error
  appearance={{                // Customize styling
    variables: {
      colorPrimary: '#6366f1',
      borderRadius: '8px',
    }
  }}
/>

Button that triggers sign-in via modal or redirect.

// Redirect mode (navigates to sign-in page)
<SignInButton mode="redirect" redirectUrl="/auth/sign-in">
  Sign in
</SignInButton>

// Modal mode (opens sign-in form in overlay)
<SignInButton
  mode="modal"
  afterSignInUrl="/dashboard"
  onSuccess={(user) => console.log('Signed in:', user)}
  appearance={{ variables: { colorPrimary: '#6366f1' } }}
>
  Sign in
</SignInButton>

User avatar with dropdown menu for sign out.

<UserButton
  afterSignOutUrl="/"          // Where to go after sign-out
  appearance={{ variables: { colorPrimary: '#6366f1' } }}
/>

Other Components

<SetPassword />- Password setup form for new users (reads token from URL)
<ForgotPassword />- Request password reset email
<ResetPassword />- Reset password with token from email

Hooks

useRevnuAuth()

const {
  user,              // RevnuUser | null
  isLoading,         // boolean - true during initial load
  isAuthenticated,   // boolean - shorthand for !!user
  signIn,            // { email: (credentials) => Promise<AuthResponse> }
  signOut,           // () => Promise<void>
  checkAccess,       // (productId: string | string[]) => boolean
  refreshSession,    // () => Promise<void>
} = useRevnuAuth();

Checking Product Access

const { checkAccess } = useRevnuAuth();

// Check single product
const hasPro = checkAccess("prod_abc123");

// Check multiple products (returns true if ANY match)
const hasAnyPlan = checkAccess(["prod_basic", "prod_pro"]);

Server-Side Functions

import { getUser, checkAccess, requireAuth, requireAccess } from '@revnu/auth/nextjs';

const user = await getUser();           // Get current user (or null)
const hasPro = await checkAccess(id);   // Check product access
const user = await requireAuth();       // Get user or redirect
const user = await requireAccess(id);   // Check access or redirect

Environment Variables

# Next.js
NEXT_PUBLIC_REVNU_KEY=rev_pub_xxxxxxxxxxxxx

# React + Vite
VITE_REVNU_KEY=rev_pub_xxxxxxxxxxxxx

# Hono / Other
REVNU_KEY=rev_pub_xxxxxxxxxxxxx

Just one environment variable per framework. The SDK uses RS256 asymmetric cryptography with an embedded public key, so no secrets need to be configured.

Advanced: Webhooks

While the Auth SDK handles most use cases, you can also use webhooks for server-side event handling. See the Webhooks documentation for details on events, signature verification, and handler examples.