Chrome DevTools extension for Ping Identity auth flow debugging#628
Chrome DevTools extension for Ping Identity auth flow debugging#628
Conversation
🦋 Changeset detectedLatest commit: 51353e7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 51353e7
☁️ Nx Cloud last updated this comment at |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| @@ -0,0 +1,119 @@ | |||
| import { describe, it, expect } from 'vitest'; | |||
| import { Effect } from 'effect'; | |||
| import { EventStoreService, EventStoreLive, makeEmptyFlowState } from './event-store.service.js'; | |||
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
ryanbas21
force-pushed
the
chrome-extension
branch
from
352aa56 to
2ce9399
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
ryanbas21
force-pushed
the
chrome-extension
branch
2 times, most recently
from
5f6aaf9 to
4f2c6ae
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
ryanbas21
force-pushed
the
chrome-extension
branch
from
4f2c6ae to
6a0a211
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
ryanbas21
force-pushed
the
chrome-extension
branch
from
6a0a211 to
a9d5da8
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
ryanbas21
force-pushed
the
chrome-extension
branch
from
a9d5da8 to
db36134
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
ryanbas21
force-pushed
the
chrome-extension
branch
from
b1e07ce to
8db53de
Compare
There was a problem hiding this comment.
Nx Cloud has identified a flaky task in your failed CI:
🔂 Since the failure was identified as flaky, we triggered a CI rerun by adding an empty commit to this branch.
🎓 Learn more about Self-Healing CI on nx.dev
ryanbas21
force-pushed
the
chrome-extension
branch
3 times, most recently
from
5ba8b04 to
ba5a03f
Compare
Codecov Report❌ Patch coverage is
❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #628 +/- ##
===========================================
- Coverage 70.90% 17.62% -53.28%
===========================================
Files 53 154 +101
Lines 2021 24252 +22231
Branches 377 1159 +782
===========================================
+ Hits 1433 4275 +2842
- Misses 588 19977 +19389
🚀 New features to boost your workflow:
|
@forgerock/davinci-client
@forgerock/device-client
@forgerock/journey-client
@forgerock/oidc-client
@forgerock/protect
@forgerock/sdk-types
@forgerock/sdk-utilities
@forgerock/iframe-manager
@forgerock/sdk-logger
@forgerock/sdk-oidc
@forgerock/sdk-request-middleware
@forgerock/storage
commit: |
Chrome extension for clients within the SDK ecosystem (javascript). Contains a bridge, extension, and types package. README.md documents feature set. chore: readme
ryanbas21
force-pushed
the
chrome-extension
branch
from
ba5a03f to
1491671
Compare
- Narrow union type in message-handler tests before accessing event fields - Add `as const` to category literal in serialize-diagnosis test - Remove unknown property from oidc-bridge test config fixture - Add CardId, Vec2, CanvasState types and LearnMode to ViewMode in Elm - Add stub LearnMode case in View.elm for build compatibility
…ecycle view Add LearnView module with interactive canvas showing 4-card request lifecycle (Browser -> Server -> SDK -> Form) for each SDK node. Includes pan/zoom/drag canvas interactions, SVG icon cards with error visualization, and rail node selector. Wire into View toolbar as new Learn mode button alongside Timeline and Flow.
- Replace hardcoded (0,0) pan start with clientX/clientY JSON decoders - Add mousemove, mouseleave, and wheel event handlers to canvas SVG - Add card-level mousedown decoder for drag with clientX/clientY
Add expanded foreignObject panels to each canvas card showing contextual detail (request method/URL, response status/duration, SDK status transition, collector count). Add CSS classes for the Learn tab layout.
When no network events have a direct causedBy link to the selected SDK node, fall back to a time-window heuristic: find network events whose timestamp falls between this node and the next SDK node. This catches events for Journey/OIDC nodes and early flow steps where causedBy linkage may be missing.
- Pulse ring now targets the actual error source (SERVER for HTTP 4xx/5xx, BROWSER for CORS, SDK for SDK-only errors) - Arrow colors show error propagation direction (red only after error source) - SDK card distinguishes "received server error" vs "SDK error" - Richer expanded panels: color-coded status, error messages, URL in server detail - Browser card does not turn red on server errors (request was fine)
ryanbas21
changed the title
…ADME Replace TODO screenshot placeholders with actual screenshots of the Flow, Timeline, and Learn views. Add Learn section documenting the canvas-based request lifecycle visualization.
Decouple the extension from SDK-specific bridges into a network-first OIDC/OAuth2 debugger that works standalone with any OIDC provider. Network intelligence: - Well-known discovery (parses .well-known/openid-configuration) - OIDC semantic annotation (authorize, token, userinfo, etc.) - DPoP proof detection (RFC 9449) - PAR flow detection (RFC 9126) - OIDC flow tracker (cross-event correlation) - Shared JWT utils extracted from diagnosis engine Diagnosis engine: - 15 new rules across oidc-flow, dpop, and par categories - Flow-level PKCE check (warns once per flow, not per event) - Static asset filter prevents false positives on JS module loads - URL patterns anchored to avoid matching filenames Learn tab: - Flow-aware layout detection (DaVinci, Journey, OIDC Code/DPoP/PAR) - Journey-specific cards (Client -> AM Server -> Callbacks -> Result) - OIDC cards populated from phase-specific network events - Rail deduplicates network OIDC events by phase Panel fixes: - JWT decoding moved to pure Elm (base64url decoder + JSON parser) - Response bodies captured via entry.getContent() (was missing) - /access_token endpoint pattern added for PingAM - Inspector OIDC tab shows phase, PKCE, DPoP, tokens, errors - Timeline shows OIDC phase badges on network rows - Toolbar shows connection status (SDK connected / OIDC detected) Infra: - Fix typedoc failing on devtools-extension (no public API entry points) - OidcSemanticsSchema added to devtools-types - ExtendedFlowState with oidcConfig and lastOidcEventId
| document.body.removeChild(ta); | ||
| } | ||
|
|
||
| const appRoot = document.getElementById('app'); |
|
Deployed 9bb475f to https://ForgeRock.github.io/ping-javascript-sdk/pr-628/9bb475fc0127df1806cac3724e0fdf575c1caca2 branch gh-pages in ForgeRock/ping-javascript-sdk |
📦 Bundle Size Analysis📦 Bundle Size Analysis🚨 Significant Changes🔻 @forgerock/device-client - 0.0 KB (-10.0 KB, -100.0%) 🆕 New Packages🆕 @forgerock/devtools-extension - 270.6 KB (new) 📊 Minor Changes📈 @forgerock/davinci-client - 49.1 KB (+0.3 KB) ➖ No Changes➖ @forgerock/device-client - 10.0 KB 17 packages analyzed • Baseline from latest Legend🆕 New package ℹ️ How bundle sizes are calculated
🔄 Updated automatically on each push to this PR |
Add --minify flag to all esbuild commands, reducing total dist size from 2.1 MB to 1.2 MB (~43%).
2 participants
Summary
A Chrome DevTools extension that captures, correlates, and diagnoses Ping Identity / ForgeRock authentication flows in real time. Replaces the manual workflow of copying tokens into jwt.io and cross-referencing network requests with a single panel that merges SDK events and network traffic into unified views.
Packages
@forgerock/devtools-extension@forgerock/devtools-bridge@forgerock/devtools-typesArchitecture
TypeScript with Effect-TS on the data plane, Elm 0.19 on the view layer, Schema-validated at every boundary. Two-world content script architecture for security (MAIN world for page access, isolated world for chrome.runtime).
Screenshots
Flow View
Learn View
Timeline Tab
Test plan
nx run devtools-extension:build