Quickstart
The Northwind Tasks showcase
A live, end-to-end demo of every Authio platform feature on a single B2B SaaS — and how to read its source so you can copy the patterns.
Northwind Tasks is a fictional project tracker we built end-to-end on Authio. It’s a real, deployed Next.js app whose only purpose is to exercise every Authio surface a real B2B SaaS would touch — passwordless sign-in, multi-org sessions, FGA decisions, Admin Portal SSO, audit log, recovery codes, step-up auth, billing.
Open the live demo → · GitHub source →
What it proves
- Multi-org switcher — top-bar dropdown with role-per-org context.
- Passkey enroll + sign-in via the @authio/nextjs SDK pattern.
- Magic-link fallback — same screen, same flow shape.
- Social sign-in (Google + Microsoft) via auth-core OAuth.
- SAML SSO — Admin Portal token mint + redirect.
- Multi-org with different roles per workspace.
- FGA view/edit/delete decisions surfaced in the UI.
- Audit log — last 50 events from the management-API.
- Recovery codes via auth-core.
- Step-up auth before a destructive delete.
- Custom-domain hint for branded sign-in.
- Billing surface from authio_billing.
Code to read
The demo follows the same BFF pattern we recommend for any Next.js relying-party. Start with these files:
| To learn | Read |
|---|---|
| How to verify Authio JWTs server-side | lib/jwt.ts — mirrors @authio/nextjs/server verifyToken |
| How to call auth-core from a BFF | app/api/auth/passkey/login/options/route.ts and the rest of app/api/auth/* |
| How to resolve the active org per request | lib/session.ts + lib/org-context.ts |
| How to call FGA from a Server Component | lib/fga.ts + usage in app/(main)/app/[orgSlug]/projects/[id]/page.tsx |
| How to launch the Admin Portal | app/(main)/app/[orgSlug]/settings/sso/page.tsx |
| How to wire step-up auth into a Server Action | app/api/orgs/delete/route.ts + app/(main)/app/[orgSlug]/settings/danger/DeleteOrgButton.tsx |
| How to embed the audit log | app/(main)/app/[orgSlug]/audit/page.tsx |
| How to read live billing for a tenant | lib/billing.ts + app/(main)/app/[orgSlug]/settings/billing/page.tsx |
| How to bootstrap a fresh Authio tenant idempotently | scripts/seed.ts |
Walking through the demo
- Land on / — public marketing splash. Notice the tiny “Built on Authio” badge in the bottom-right; that badge is on every page of the app.
- Click “Try it live” — drops you on the sign-in page with passkey, magic-link, social, and SAML options. The cleanest demo flow is “Sign up” tab → enter any email → enroll a passkey. You’re signed in within a second.
- You land in Acme Corp — the BFF auto-adds new users to all three demo workspaces with different roles. The top-bar org switcher shows them all.
- Open a project — see three permission badges (view/edit/delete) with the exact FGA tuple that resolved each decision.
- Switch to Initech (viewer role) — same project UI but now edit is denied. The FGA reasoning is shown inline.
- Settings → SSO → Configure SSO — bounces you to the live Admin Portal with a one-time token.
- Settings → Danger zone → Delete — type the workspace name and click. The destructive action triggers a fresh passkey assertion (step-up) before the management-API call runs.
Clone and customize
The README in the demo repo documents every env var and the bootstrap commands we ran to create the Northwind tenant + FGA store + seed data. Clone it, change the tenant name + accent color in app/globals.css, point the env vars at your own Authio project, and you have a starting point for dogfooding the platform inside your own app.