Interactive visualizations of enterprise SSO authentication flows. Step through every redirect, cookie, and token exchange to see what actually happens when a user clicks "Sign in with SSO."
Live site: ssowhat.dev
Each demo walks through a complete authentication flow step by step, showing what the user sees in the browser alongside the HTTP exchanges happening behind the scenes. Decoded SAML assertions, JWT tokens, and protocol details are shown at each stage.
The example application is Onetime Secret (OTS) — an open-source tool for sharing sensitive information via self-destructing links. It serves as a realistic stand-in for any web application adding SSO support.
| Demo | Protocols | Architecture |
|---|---|---|
| Enterprise SAML for Modern Apps | OIDC, SAML | Caddy + Logto bridge OIDC to SAML with Entra ID |
| SP-Initiated SAML with Okta | SAML 2.0 | OTS redirects to Okta, assertion posted back |
| IdP-Initiated SAML with Okta | SAML 2.0 | User clicks Okta dashboard tile, unsolicited assertion pushed to OTS |
| OAuth2 Social Login with Google | OAuth 2.0, OIDC | Authorization Code Flow with PKCE via Google |
| SCIM Provisioning with Okta | SCIM 2.0 | Okta pushes user lifecycle changes (create, update, deactivate) to the OTS SCIM API — live-mode pilot |
Planned: multi-IdP federation patterns.
pnpm install
pnpm devOpen localhost:5184.
The demos are curated static traces — the map. Demos that opt in can also replay their server-to-server calls against a real mock server — the territory — and show both side by side. Live results render through the same trace schema as the static fixtures: one schema, two producers. The SCIM demo is the pilot.
pnpm mock:devThen flip the Static/Live toggle in the demo. Live mode is opt-in per demo and per click; the site itself is fully static and never depends on the backend — when the server is unreachable, the static traces render exactly as before. Server contract: packages/mock-server/README.md.
pnpm build
pnpm previewProduces a fully static site in build/ via @sveltejs/adapter-static.
Copy the template and customize:
cp -r src/lib/sso-demos/_template src/lib/sso-demos/your-demo-nameThen create a route at src/routes/your-demo-name/+page.svelte. See the component docs for the full guide.
- SvelteKit with static adapter
- Svelte 5 (runes)
- Tailwind CSS v4
- TypeScript, Vite
MIT — Onetime Secret Inc