Create sequence diagrams with simple online tool

Swimlanes.io is a free webapp for making sequence diagrams. You simply edit the text on the left and the diagram is updated in real time. You can download your sequence diagrams as images or distribute with a link.

Title: Web Server and SSR Front-End User -> User Agent (Browser): Visits RP Website User Agent (Browser) -> Web Server: Download HTML from RP Web Server _: **1. User Authorization** Web Server -> Web Server: Generate auth url note Web Server, Web Server: RP Server to generate `authorization_url` containing all the necessary query parameters including PKCE's `code_challenge`. --- RP Server to save PKCE `code_verifier` associated to a particular web server state. Web Server -> sgID Server: Redirect user to `/oauth/authorize` endpoint sgID Server -> sgID Server: Renders sgID QR Code User --> sgID Server: Clicks on QR Code and approve with Singpass Mobile Application sgID Server -> User Agent (Browser): `HTTP 302` note: sgID Server responds with `HTTP 302` to the supplied `redirect_uri` User Agent (Browser) -> Web Server: GET /auth/callback?code=xx&state=xx* note Web Server,Web Server: Obtains corresponding `code_verifier` through web server state Web Server -> sgID Server: POST /oauth/token sgID Server -> Web Server: `HTTP 200` note: Response body contains `id_token` and `access_token`. Verification of `id_token` can be done through JWT Signature verification against sgID Server's `/.well-known/jwks.json` Web Server -> sgID Server: GET /oauth/userinfo sgID Server -> Web Server: `HTTP 200` note: Response body contains encrypted data which can be decrypted using RP's private key. Web Server -> User Agent (Browser): Renders customised HTML pages