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 |
| OAuth2 Social Login with Google | OAuth 2.0, OIDC | Authorization Code Flow with PKCE via Google |
Planned: SCIM provisioning flows, multi-IdP federation patterns.
pnpm install
pnpm devOpen localhost:5184.
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