Skip to content

Restore Keycloak authentication flow diagrams and themed rendering - #1844

Merged
David Pine (IEvangelist) merged 3 commits into
mainfrom
ievangelist-restore-keycloak-auth-diagrams
Oct 16, 2026
Merged

David Pine (IEvangelist) merged 3 commits into
mainfrom
ievangelist-restore-keycloak-auth-diagrams

Conversation

@IEvangelist

Copy link
Copy Markdown
Member

Summary

  • Restore both Keycloak authentication-flow diagrams and their editable Excalidraw source.
  • Add matching light and dark PNG exports, using -light for the light variants and the existing ThemeImage component in the article.
  • Use consistent 2-unit strokes for boxes, lifelines, arrows, and dotted connectors in both diagrams and themes.
  • Fix development-only themed-image cache invalidation and add a regression test.

Background

The original diagrams lived in dotnet/docs-aspire/docs/authentication/media/ and were omitted when the Keycloak integration article migrated to aspire.dev in #49. Their source and images are recovered from dotnet/docs-aspire commit 1f1a76339b3f22c99ea2060f42ba72361d9728f9.

The diagram exports were updated together from the recovered source. Embedded browser and Keycloak logos retain their original colors.

Development cache fix

Astro's development image endpoint sends a one-year cache lifetime, while its local source URLs remain unchanged when image contents change. This allowed a cached dark export to show old thick borders next to a newly rendered light export.

ThemeImage now versions local /@fs/ source URLs with a SHA-256 content revision during development. Unchanged images retain stable URLs; editing either image changes its URL. Production image handling remains unchanged.

Verification

  • Targeted ThemeImage component tests pass, including stable URLs for unchanged image bytes and changed URLs for updated bytes.
  • ESLint passes for the updated test file; the Astro component matches Prettier formatting.
  • Confirmed the Excalidraw source differs from the recovered original only in the 40 relevant shape/connector stroke widths.
  • Checked both diagrams in Chromium, including light/dark switching, client-side navigation, and zoom dialogs.
  • Verified rendered image URLs match the latest source-file hashes and that image dimensions remain unchanged.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

The documented flows require cookie persistence and token-forwarding configuration absent from the accompanying example.

1 open finding
What changed in this PR

Restores themed Keycloak authentication diagrams and fixes development image-cache invalidation.

Changes:

  • Adds light/dark diagrams and editable Excalidraw source.
  • Embeds diagrams using ThemeImage.
  • Adds content-hash URL versioning and regression coverage.
File Description
src/​frontend/​src/​components/​ThemeImage.astro Versions development image URLs by content hash.
src/​frontend/​tests/​unit/​custom-components.vitest.test.ts Tests stable and updated image URLs.
src/​frontend/​src/​content/​docs/​integrations/​security/​keycloak.mdx Adds authentication-flow explanations and diagrams.
src/​frontend/​src/​assets/​integrations/​security/​keycloak/​auth-flow-diagram.excalidraw Provides editable diagram source.
src/​frontend/​src/​assets/​integrations/​security/​keycloak/​auth-flow-diagram.png Adds dark separate-API diagram.
src/​frontend/​src/​assets/​integrations/​security/​keycloak/​auth-flow-diagram-light.png Adds light separate-API diagram.
src/​frontend/​src/​assets/​integrations/​security/​keycloak/​simple-auth-flow-diagram.png Adds dark combined-backend diagram.
src/​frontend/​src/​assets/​integrations/​security/​keycloak/​simple-auth-flow-diagram-light.png Adds light combined-backend diagram.

🧠 Review effort: Balanced


Give feedback about Copilot approvals in this survey to enter a drawing for a $150 gift card.


### Authentication flows

When the backend also serves the API, the browser signs in through Keycloak and uses an authentication cookie for subsequent requests to the backend:
@aspire-repo-bot

Copy link
Copy Markdown
Contributor

Frontend HTML artifact ready

The latest frontend build uploaded the frontend-dist artifact for PR #1844. Use the VS Code button below to open this PR with GitHub Artifacts Explorer and browse the built HTML locally.

VS Code: Open PR #1844 artifacts

This comment updates automatically when a new frontend build artifact is uploaded.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@IEvangelist
David Pine (IEvangelist) enabled auto-merge (squash) October 16, 2026 12:29
@IEvangelist
David Pine (IEvangelist) merged commit 3120da6 into main Oct 16, 2026
19 checks passed
@IEvangelist
David Pine (IEvangelist) deleted the ievangelist-restore-keycloak-auth-diagrams branch October 16, 2026 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants