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.
In every demo the actor labeled App is Onetime Secret — 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.
The traces are reconstructed educational examples, not packet captures or implementation recipes. They are assembled from primary specifications and vendor documentation, then trimmed so the protocol is legible; endpoints, cookie names, redirects, headers, and response bodies vary by provider configuration and product version. The review dates record documentation review, not live interoperability testing. Where a demo simplifies something notable, such as the Okta Classic Engine Authentication API used in the SAML login sequences, the demo header says so.
| 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 | The app redirects to Okta, assertion posted back |
| IdP-Initiated SAML with Okta | SAML 2.0 | User clicks Okta dashboard tile, unsolicited assertion pushed to the app |
| 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 app's SCIM API — live-mode pilot |
| Enterprise OIDC with Entra ID | OIDC, OAuth 2.0 | The app authenticates directly with Microsoft Entra ID via OpenID Connect |
| SAML Single Logout with Okta | SAML 2.0 | One logout click, three sessions, and no guarantee all of them die |
| Multi-IdP Home-Realm Discovery | SAML 2.0, OIDC | One email-first sign-in page routes each organization to its own IdP |
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