Live demo
Northwind Tasks
A fictional B2B SaaS — project + task tracking for teams — we built end-to-end on the Authio platform. Every screen is authenticated with the same Authio services your customers would use in production.
Sign up with your own email and a brand-new passkey (or Google / Microsoft). You’ll be auto-added to three demo workspaces (Acme Corp, Globex Industries, Initech LLC) with different roles in each. Use the top-bar org switcher to move between them. Demo accounts auto-delete 24 hours after sign-up.
What the demo proves, feature by feature
Multi-org switcher
Top-bar dropdown listing every workspace you belong to. Switch in-session; no re-login.
Passkey + magic-link + social + SAML
All four sign-in methods on the same screen. Enroll a brand-new passkey under any email.
Multi-org with different roles
The demo account is owner of Acme, editor of Globex, viewer of Initech. Permissions follow you per workspace.
FGA permission checks
Project view/edit/delete decisions made by a real FGA store. Every page tells you which tuple was matched.
Self-serve SAML SSO
Settings → SSO → Configure SSO mints a one-time Admin Portal token. The hosted configuration UI is exactly what your customer IT teams would see.
Audit log
Last 50 events for the active workspace, filterable by action prefix and user.
Recovery codes
Account → Recovery codes generates a single-use batch via auth-core.
Step-up auth for destructive actions
Settings → Danger zone → Delete workspace triggers a fresh passkey assertion before the management-API call runs.
Billing surface
Live plan + usage from authio_billing. Renders the dashboard's stripe-not-configured banner because the Northwind tenant has no Stripe wiring.
Custom domain hint
Settings → Branding shows what your customer's sign-in URL would look like behind your own domain.
How to read the code
The demo lives in a self-contained Next.js 15 + Tailwind v4 repo and shows the BFF pattern we recommend for production Next.js apps: every Authio API call is server-side, the browser only ever sees an HttpOnly cookie, and Server Actions handle mutations.
Start with the quickstart writeup for a guided tour of each pattern, or jump straight to the source for any feature in the demo’s README.