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	`5b27c01`
🔍 Latest deploy log	https://app.netlify.com/projects/criipto-docs/deploys/694a450927f4cb00080c0467
😎 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

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

Build was failing on this branch with ENOENT when reading `public/_redirects`. Fixed by initializing `input` to empty string if `_redirects` doesn't exist.

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.

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 from ef1ba51 to d0baf8d Compare December 20, 2025 12:15

nmoskaleva added 2 commits December 20, 2025 13:21

Add OIDC Visualizer

a7d0dd5

fixup! Add OIDC Visualizer

4c4a2ca

nmoskaleva force-pushed the oidc-visualizer branch from d0baf8d to f6cd03e Compare December 20, 2025 12:21

nmoskaleva added 2 commits December 20, 2025 13:36

OIDC Visualizer: add settings modal

ac1380e

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

OIDC Visualizer: add Private Key JWT authentication option

84eb278

nmoskaleva force-pushed the oidc-visualizer branch 2 times, most recently from 195f4ca to 4b85dcd Compare December 20, 2025 13:17

Fix missing _redirects file during build

cf34207

Build was failing on this branch with ENOENT when reading `public/_redirects`. Fixed by initializing `input` to empty string if `_redirects` doesn't exist.

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

mickhansen reviewed Dec 22, 2025

View reviewed changes

fixup! fixup! Add OIDC Visualizer

9ffc46a

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

fixup! OIDC Visualizer: add settings modal

5b27c01

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

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

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