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: Back-End for SPA Front-End (BFF) User -> User Agent (Browser): Visits RP Website User Agent (Browser) -> SPA: Load SPA bundle _: **1. User Authorization** SPA -> RP Server: GET /auth/login* note RP Server, RP 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 SPA session. RP Server -> User Agent (Browser): `HTTP 302` note: RP Server responds with `HTTP 302` to `authorization_url` User Agent (Browser) -> sgID Server: Redirect user to `/oauth/authorize` endpoint sgID Server -> sgID Server: Renders sgID QR Code User --> sgID Server: Scans QR Code 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) -> RP Server: GET /auth/callback?code=xx&state=xx* note RP Server,RP Server: Obtains corresponding `code_verifier` through SPA session RP Server -> sgID Server: POST /oauth/token sgID Server -> RP 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` RP Server -> sgID Server: GET /oauth/userinfo sgID Server -> RP Server: `HTTP 200` note: Response body contains encrypted data which can be decrypted using RP's private key. _: **2. SPA Authentication** note User, sgID Server: Once user has authorized RP Server to obtain their user information, RP Server will then need to authenticate the SPA and associate the session with a particular user. There are two industries standards for client authentication, either through session-based authentication or token-based authentication.