Sign-in with OIDC and a backend for frontend

A browser, a backend for frontend, an identity provider, an API and a database: fifteen numbered messages through an OIDC sign-in, a self-call that creates the session, and an opt fragment around the asynchronous back-channel logout. The description lists the messages in order and names the fragment with the messages it spans. Illustrative reference architecture, with a phone variant.

Sign-in with OIDC and a backend for frontend

examples/sign-in-sequence.json

{
  "schemaVersion": 1,
  "type": "sequence",
  "title": "Sign-in with OIDC and a backend for frontend",
  "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
  }
}

Focus

Show all Browser Web / BFF Keycloak Domain API Postgres

Sign-in with OIDC and a backend for frontend

Source: Illustrative reference architecture

Show chart data

Data for Sign-in with OIDC and a backend for frontend
No.	From	To	Message	Kind	Fragment
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
7	Keycloak	Web / BFF	Tokens	reply
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]
15	Web / BFF	Web / BFF	End sessions	call	opt [central sign-out]

Sequence diagram with a fragment and a phone variant
Explain a sign-in across services