Authio docs

Lobby quickstart

Drop in passwordless sign-in. Done — in five minutes.

This is the canonical 5-minute integration for Lobby. We start with Next.js because most B2B SaaS teams ship Next.js today; a Vite + @authio/react mirror is at the bottom.

1. Install the SDK

pnpm add @authio/nextjs @authio/react

2. Add the middleware

// middleware.ts
import { authMiddleware } from "@authio/nextjs";

export default authMiddleware({
  publicRoutes: ["/", "/pricing", "/sign-in"],
});

export const config = {
  matcher: ["/((?!_next|.*\\..*).*)"],
};

3. Drop in the sign-in page

// app/sign-in/page.tsx
import { SignIn } from "@authio/react";

export default function SignInPage() {
  return <SignIn redirectAfter="/dashboard" />;
}

4. Read the session in any server component

// app/dashboard/page.tsx
import { auth } from "@authio/nextjs/server";

export default async function Dashboard() {
  const { user, activeOrg } = await auth();
  return <p>Hi {user.email} (active org: {activeOrg?.name})</p>;
}

5. Set the env

# .env.local
AUTHIO_PROJECT_ID=proj_...
AUTHIO_HOSTED_UI_URL=https://lobby.authio.com
AUTHIO_API_URL=https://api.authio.com

That’s the whole Lobby integration. Sign-in, sessions, and edge-runtime JWT verification are all handled. Add <OrganizationSwitcher /> when you’re ready for the multi-org pivot.

Vite + @authio/react mirror

For pure-SPA apps without a Next.js BFF, use @authio/react directly:

pnpm add @authio/react

// src/main.tsx
import { AuthioProvider, SignIn } from "@authio/react";

createRoot(document.getElementById("root")!).render(
  <AuthioProvider
    projectId={import.meta.env.VITE_AUTHIO_PROJECT_ID}
    hostedUiUrl={import.meta.env.VITE_AUTHIO_HOSTED_UI_URL}
  >
    <App />
  </AuthioProvider>,
);

Where to next

Methods — pick which sign-in surfaces to enable.
Sessions — how the silent refresh + cookie helpers work.
Widgets — drop in IT-admin widgets so your customers self-serve SSO/SCIM.
Customizing — custom domains, custom claims, org policies.