Sign-in: the token exchange

The sign-in sequence with the identity provider emphasized and the messages between the web backend and the provider drawn in the accent, labels in bold. The legend names the three kinds of message, call, reply and asynchronous, and the emphasis.

Sign-in: the token exchange

examples/sign-in-focus.json

{
  "schemaVersion": 1,
  "type": "sequence",
  "title": "Sign-in: the token exchange",
  "source": "Illustrative reference architecture",
  "width": 900,
  "height": 900,
  "sequence": {
    "participants": [
      {
        "id": "browser",
        "label": "Browser",
        "kind": "actor"
      },
      {
        "id": "bff",
        "label": "Web / BFF",
        "sublabel": "SvelteKit"
      },
      {
        "id": "idp",
        "label": "Keycloak",
        "sublabel": "OIDC"
      },
      {
        "id": "api",
        "label": "Domain API",
        "sublabel": "Rust"
      },
      {
        "id": "db",
        "label": "Postgres",
        "sublabel": "RLS",
        "kind": "database"
      }
    ],
    "messages": [
      {
        "from": "browser",
        "to": "bff",
        "label": "GET /grades"
      },
      {
        "from": "bff",
        "to": "browser",
        "label": "Redirect, PKCE",
        "kind": "reply"
      },
      {
        "from": "browser",
        "to": "idp",
        "label": "Sign in, 2FA"
      },
      {
        "from": "idp",
        "to": "browser",
        "label": "Code",
        "kind": "reply"
      },
      {
        "from": "browser",
        "to": "bff",
        "label": "Callback with code"
      },
      {
        "from": "bff",
        "to": "idp",
        "label": "Exchange code"
      },
      {
        "from": "idp",
        "to": "bff",
        "label": "Tokens",
        "kind": "reply"
      },
      {
        "from": "bff",
        "to": "bff",
        "label": "Create session"
      },
      {
        "from": "bff",
        "to": "api",
        "label": "Load grades"
      },
      {
        "from": "api",
        "to": "db",
        "label": "Set tenant, SELECT"
      },
      {
        "from": "db",
        "to": "api",
        "label": "own school only",
        "kind": "reply"
      },
      {
        "from": "api",
        "to": "bff",
        "label": "Grades",
        "kind": "reply"
      },
      {
        "from": "bff",
        "to": "browser",
        "label": "Page, session cookie",
        "kind": "reply"
      },
      {
        "from": "idp",
        "to": "bff",
        "label": "Backchannel logout",
        "kind": "async"
      },
      {
        "from": "bff",
        "to": "bff",
        "label": "End sessions"
      }
    ],
    "fragments": [
      {
        "kind": "opt",
        "label": "central sign-out",
        "from": 13,
        "to": 14
      }
    ],
    "numbered": true
  },
  "mobile": {
    "width": 400,
    "height": 920
  },
  "emphasis": {
    "nodes": [
      "idp"
    ],
    "path": [
      "bff",
      "idp"
    ]
  },
  "legend": "auto"
}

Focus

Show all Browser Web / BFF Keycloak Domain API Postgres

Sign-in: the token exchange

Source: Illustrative reference architecture

Show chart data

Data for Sign-in: the token exchange
No.	From	To	Message	Kind	Fragment	Emphasis
1	Browser	Web / BFF	GET /grades	call
2	Web / BFF	Browser	Redirect, PKCE	reply
3	Browser	Keycloak	Sign in, 2FA	call
4	Keycloak	Browser	Code	reply
5	Browser	Web / BFF	Callback with code	call
6	Web / BFF	Keycloak	Exchange code	call		on emphasized path
7	Keycloak	Web / BFF	Tokens	reply		on emphasized path
8	Web / BFF	Web / BFF	Create session	call
9	Web / BFF	Domain API	Load grades	call
10	Domain API	Postgres	Set tenant, SELECT	call
11	Postgres	Domain API	own school only	reply
12	Domain API	Web / BFF	Grades	reply
13	Web / BFF	Browser	Page, session cookie	reply
14	Keycloak	Web / BFF	Backchannel logout	asynchronous	opt [central sign-out]	on emphasized path
15	Web / BFF	Web / BFF	End sessions	call	opt [central sign-out]

Sequence diagram with emphasis and a legend
Point at one exchange between two systems