OIDC visualizer #251

nmoskaleva · 2025-11-26T08:52:10Z

The first iteration of OIDC Visualizer.
https://deploy-preview-251--criipto-docs.netlify.app/verify/guides/oidc-visualizer/

TO DO:

Make it possible to trigger code exchange more than once
Add FTN flow
Add CIBA

netlify · 2025-11-26T08:53:12Z

✅ Deploy Preview for criipto-docs ready!

Name	Link
🔨 Latest commit	`d4f1a25`
🔍 Latest deploy log	https://app.netlify.com/projects/criipto-docs/deploys/695fc58a397cb400083445f2
😎 Deploy Preview	https://deploy-preview-251--criipto-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

fkj · 2025-11-26T14:23:57Z

I just tried this and it's really cool!
I don't think we have a good way to check whether the configuration is correct other than just running an authentication. It would probably require some interaction with the dashboard.

nmoskaleva · 2025-11-26T14:26:40Z

@fkj thanks a lot for checking it out! I keep asking myself if we need the option to change client configs at all.

fkj · 2025-11-26T14:29:36Z

@fkj thanks a lot for checking it out! I keep asking myself if we need the option to change client configs at all.

I think once you're at the point where you need custom configuration, you should probably use the Authorize URL Builder anyway. Or your own implementation.
But I guess it depends on what the intended target audience and use case for this is?

nmoskaleva · 2025-11-26T14:39:54Z

But I guess it depends on what the intended target audience and use case for this is?

The intention is for developers to better understand OIDC. And as you said, they can always test their own application elsewhere.

mickhansen · 2025-11-27T06:59:51Z

Maybe there is a good way to validate input before saving? OR maybe there is no sense to allow custom client configurations at all.

I think we should allow custom configuration, but just let the user see the error messages.

mickhansen · 2025-11-27T07:00:42Z

src/components/OidcVisualizer/OidcVisualizer.tsx

+  scope: string;
+};
+
+const OidcVisualizer = () => {


Very large component, suggest maybe breaking seperate steps into seperate components?

mickhansen · 2025-11-27T07:01:20Z

src/components/OidcVisualizer/OidcVisualizer.tsx

+          ) : (
+            <button onClick={proceedToVerifyWT} className={baseBtnStyles}>
+              Next
+            </button>


Make it possible to exchange the code again, to trigger the error branch of code replay, this has been requested by @sgryt to show to auditors.

mickhansen · 2025-11-27T07:01:58Z

@nmoskaleva Looks really freaking awesome so far!
I think adding PAR and client authentication as well would be great. And option to repeat certain steps (which will of course break the flow)

mickhansen · 2025-11-27T07:02:47Z

src/components/OidcVisualizer/OidcVisualizer.tsx

+
+              <p className="mt-4 text-gray-600">
+                This token is cryptographically signed with the HS256 algorithm. We'll use the
+                client secret to confirm the signature is valid.


This section is incorrect. If it's a signature from Verify then it's not HS256 and it's assymetrically signed.

Updated in 4c4a2ca

mickhansen · 2025-11-27T07:03:47Z

src/components/OidcVisualizer/oidcConfig.tsx

+  redirectUri: `${typeof window !== 'undefined' ? window.location.origin : 'https://docs.idura.app'}/verify/guides/oidc-visualizer`,
+  scope: 'openid',
+  responseType: 'code',
+};


Wonder if we should also support private_key_jwt?
Let the user pick

Added in 84eb278

mickhansen

Some of the colors, like the primary buttons, seem different than the rest of the docs - Intentional?

Some code blocks are also double wrapped:

nmoskaleva · 2025-11-27T08:47:21Z

@mickhansen thanks for reviewing, I'll address the comments and add more features 👍

Some of the colors, like the primary buttons, seem different than the rest of the docs - Intentional?

I used blue intentionally, yes. We had a discussion about using colors other than our brand colors in some cases. But I'll run the design through Trine once it's done.

Some code blocks are also double wrapped:

We have this double wrapping scattered in the docs, e.g. https://docs.idura.app/verify/getting-started/oidc-intro/#example-authorization-url
Moving away from it actually makes sense, thanks for noticing.

mickhansen · 2025-11-27T09:03:32Z

We have this double wrapping scattered in the docs, e.g. https://docs.idura.app/verify/getting-started/oidc-intro/#example-authorization-url
Moving away from it actually makes sense, thanks for noticing.

@nmoskaleva Oh, that's also a bug :D

mickhansen · 2025-12-22T10:58:20Z

Suggest perhaps allowing people to pick acr_values? Having the mock one would be beneficial in a few use cases.

mickhansen · 2025-12-22T10:59:56Z

src/components/OidcVisualizer/components/steps/StepTwo.tsx

+              Now, the authorization code can be exchanged for an access token and an ID token. To
+              do this, the authorization server sends a POST request to your token endpoint,
+              including the authorization code and the client credentials. Note that the
+              authorization code is valid for a single use.


This description is a bit awkward?
"The authorization server", I assume you mean "Your application server sends a POST request to the token endpoint".

Absolutely, fixed in 9ffc46a

mickhansen · 2025-12-22T11:00:49Z

Be cool if this also showed headers (so one can see the client credentials are used), perhaps visualized more in the standard HTTP visualization format.

mickhansen · 2025-12-22T11:01:22Z

src/components/OidcVisualizer/components/steps/StepThree.tsx

+            </div>
+
+            <p className="mt-4 text-gray-600">
+              The token is cryptographically signed by Idura Verify using the RSA algorithm. To


The use of RSA could change, perhaps either detect from the token header or just say "signed".

Updated (to simply "signed") in 9ffc46a

nmoskaleva · 2025-12-23T07:37:34Z

acr_values added in 5b27c01

sgryt · 2025-12-23T09:04:27Z

@nmoskaleva This is absolutely great! I'm very much looking forward to showing it to our auditors next time around :)

Some ideas for future (post-holiday) unhappy-path options below.
I am not sure if all are possible from JS, though, and I'm sorry if I am re-iterating things that are already on the agenda, please consider this to be a just-before-Christmas braindump.

Being able to modify the id_token in-place, and an option to re-run the signature validation (to see it break)
Offer the option to validate against a "wrong" JWKSet, and also the option to re-run the signature validation (to see it break)
Ability to use http instead of https - and then somehow visualize that automatic redirection from HTTP to HTTPS kicks in
Showing (select) HTTP response headers (cache-control, CSP, ...maybe others...)
For MitID: Tampering with the nonce-cookie to see the flow break (perhaps by replacing it with a correctly encrypted nonce cookie from another flow)
SSO: Show that it is supported, and rate-limited, but also that it can be broken by tampering with the cookies.
Showing the negotiated TLS version (and being able to downgrade to below TLS 1.2 and see it break)

I don't suppose that browsers will let us tamper with the HTTP version for a request (@mickhansen ?) - but would be great to allow for modification to, say, HTTP/1.0 and then see it break.

nmoskaleva · 2025-12-23T09:45:28Z

Awesome suggestions @sgryt, I don't think any of them were on the agenda 👍
Will look into it first thing after the holidays.

fkj · 2025-12-23T10:30:54Z

I don't suppose that browsers will let us tamper with the HTTP version for a request (@mickhansen ?) - but would be great to allow for modification to, say, HTTP/1.0 and then see it break.

@sgryt I'm 99% sure you can't do this in the browser.

mickhansen · 2026-01-06T09:03:48Z

Note: Including client credentials (client_id and client_secret) in the payload is discouraged by the OAuth2 specification. Server-side applications should instead send the credentials in the Authorization: Basic HTTP header.

Why do we do it in the visualizer then? : )

mickhansen · 2026-01-06T09:04:17Z

Supporting mock auth would be ideal as well, for quicker run throughs

mickhansen · 2026-01-06T09:04:49Z

Visually this looks different than the rest of the docs still, also regarding font sizes etc, have you touched bases with Trine on this?

nmoskaleva · 2026-01-06T09:05:36Z

Visually this looks different than the rest of the docs still, also regarding font sizes etc, have you touched bases with Trine on this?

About to chat with Trine in about an hour! :)

nmoskaleva · 2026-01-06T12:08:07Z

Why do we do it in the visualizer then? : )

@mickhansen I was getting CORS errors trying to use Basic auth header, and came to a conclusion this won't work in a browser. Is there a way around it?

mickhansen · 2026-01-06T12:40:08Z

@mickhansen I was getting CORS errors trying to use Basic auth header, and came to a conclusion this won't work in a browser. Is there a way around it?

@nmoskaleva Hmm, should work, but we did recently apply some CORS fixes to PAR.

This allows developers run the OIDC flow using their own application credentials.

nmoskaleva requested a review from mickhansen November 26, 2025 08:52

nmoskaleva force-pushed the oidc-visualizer branch 6 times, most recently from e582d06 to ef1ba51 Compare November 26, 2025 12:57

mickhansen reviewed Nov 27, 2025

View reviewed changes

nmoskaleva force-pushed the oidc-visualizer branch 5 times, most recently from 4b85dcd to cf34207 Compare December 20, 2025 13:39

mickhansen reviewed Dec 22, 2025

View reviewed changes

nmoskaleva force-pushed the oidc-visualizer branch from a4e3f34 to 9ffc46a Compare December 23, 2025 02:37

nmoskaleva marked this pull request as ready for review December 23, 2025 07:37

nmoskaleva requested a review from mickhansen January 6, 2026 08:51

nmoskaleva force-pushed the oidc-visualizer branch from 5b27c01 to 68a5cee Compare January 8, 2026 14:51

nmoskaleva added 4 commits January 8, 2026 15:56

Add OIDC Visualizer

1e60f3b

OIDC Visualizer: add settings modal

a856b2b

This allows developers run the OIDC flow using their own application credentials.

OIDC Visualizer: add Private Key JWT authentication option

cdd8c8f

Fix missing _redirects file during build

d4f1a25

nmoskaleva force-pushed the oidc-visualizer branch from 68a5cee to d4f1a25 Compare January 8, 2026 14:56

OIDC visualizer #251

Are you sure you want to change the base?

OIDC visualizer #251

Uh oh!

Conversation

nmoskaleva commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for criipto-docs ready!

Uh oh!

fkj commented Nov 26, 2025

Uh oh!

nmoskaleva commented Nov 26, 2025

Uh oh!

fkj commented Nov 26, 2025

Uh oh!

nmoskaleva commented Nov 26, 2025

Uh oh!

mickhansen commented Nov 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mickhansen commented Nov 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mickhansen left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nmoskaleva commented Nov 27, 2025

Uh oh!

mickhansen commented Nov 27, 2025

Uh oh!

mickhansen commented Dec 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nmoskaleva Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mickhansen commented Dec 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nmoskaleva Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nmoskaleva commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sgryt commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nmoskaleva commented Dec 23, 2025

Uh oh!

fkj commented Dec 23, 2025

Uh oh!

mickhansen commented Jan 6, 2026

Uh oh!

mickhansen commented Jan 6, 2026

Uh oh!

mickhansen commented Jan 6, 2026

Uh oh!

nmoskaleva commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

nmoskaleva commented Nov 26, 2025 •

edited

Loading

netlify bot commented Nov 26, 2025 •

edited

Loading

mickhansen left a comment •

edited

Loading

nmoskaleva Dec 22, 2025 •

edited

Loading

nmoskaleva Dec 22, 2025 •

edited

Loading

nmoskaleva commented Dec 23, 2025 •

edited

Loading

sgryt commented Dec 23, 2025 •

edited

Loading

nmoskaleva commented Jan 6, 2026 •

edited

Loading