From a7d0dd55173eb3e2c48ba3474e87c1832759ed7d Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Tue, 25 Nov 2025 10:04:13 +0100
Subject: [PATCH 1/7] Add OIDC Visualizer

---
 package-lock.json                             | 164 +++++----
 package.json                                  |   1 +
 .../OidcVisualizer/OidcVisualizer.tsx         | 311 ++++++++++++++++++
 .../OidcVisualizer/components/StepCard.tsx    |  93 ++++++
 src/components/OidcVisualizer/helpers.tsx     |  11 +
 src/components/OidcVisualizer/oidcConfig.tsx  |  10 +
 src/pages/verify/guides/oidc-visualizer.mdx   |  14 +
 7 files changed, 540 insertions(+), 64 deletions(-)
 create mode 100644 src/components/OidcVisualizer/OidcVisualizer.tsx
 create mode 100644 src/components/OidcVisualizer/components/StepCard.tsx
 create mode 100644 src/components/OidcVisualizer/helpers.tsx
 create mode 100644 src/components/OidcVisualizer/oidcConfig.tsx
 create mode 100644 src/pages/verify/guides/oidc-visualizer.mdx

diff --git a/package-lock.json b/package-lock.json
index 4e1fb7b..52cb4c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "gatsby-plugin-sitemap": "^6.14.0",
         "graphiql": "^3.8.3",
         "graphql-tag": "^2.12.6",
+        "jose": "^6.1.0",
         "lodash": "^4.17.21",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
@@ -2515,6 +2516,33 @@
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/@graphiql/react/node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/@graphiql/toolkit": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@graphiql/toolkit/-/toolkit-0.11.1.tgz",
@@ -4303,6 +4331,16 @@
         "ws": "*"
       }
     },
+    "node_modules/@graphql-tools/prisma-loader/node_modules/jose": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+      "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/@graphql-tools/prisma-loader/node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -4915,6 +4953,7 @@
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
       "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/easing": "^10.18.0",
         "@motionone/types": "^10.17.1",
@@ -4925,12 +4964,14 @@
     "node_modules/@motionone/animation/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/dom": {
       "version": "10.12.0",
       "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
       "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/animation": "^10.12.0",
         "@motionone/generators": "^10.12.0",
@@ -4943,12 +4984,14 @@
     "node_modules/@motionone/dom/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/easing": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
       "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/utils": "^10.18.0",
         "tslib": "^2.3.1"
@@ -4957,12 +5000,14 @@
     "node_modules/@motionone/easing/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/generators": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
       "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/types": "^10.17.1",
         "@motionone/utils": "^10.18.0",
@@ -4972,17 +5017,20 @@
     "node_modules/@motionone/generators/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/types": {
       "version": "10.17.1",
       "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
-      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==",
+      "license": "MIT"
     },
     "node_modules/@motionone/utils": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
       "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/types": "^10.17.1",
         "hey-listen": "^1.0.8",
@@ -4992,7 +5040,8 @@
     "node_modules/@motionone/utils/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@n1ru4l/push-pull-async-iterable-iterator": {
       "version": "3.2.0",
@@ -15116,35 +15165,11 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
-      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
-      "dependencies": {
-        "@motionone/dom": "10.12.0",
-        "framesync": "6.0.1",
-        "hey-listen": "^1.0.8",
-        "popmotion": "11.0.3",
-        "style-value-types": "5.0.0",
-        "tslib": "^2.1.0"
-      },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
-        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/framer-motion/node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-    },
     "node_modules/framesync": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
       "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15152,7 +15177,8 @@
     "node_modules/framesync/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/fresh": {
       "version": "0.5.2",
@@ -19203,7 +19229,8 @@
     "node_modules/hey-listen": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
     },
     "node_modules/highlight.js": {
       "version": "10.7.3",
@@ -20645,10 +20672,10 @@
       }
     },
     "node_modules/jose": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-5.8.0.tgz",
-      "integrity": "sha512-E7CqYpL/t7MMnfGnK/eg416OsFCVUrU/Y3Vwe7QjKhu/BkS1Ms455+2xsqZQVN57/U2MHMBvEb5SrmAZWAIntA==",
-      "dev": true,
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.0.tgz",
+      "integrity": "sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -24927,6 +24954,7 @@
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
       "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "license": "MIT",
       "dependencies": {
         "framesync": "6.0.1",
         "hey-listen": "^1.0.8",
@@ -24937,7 +24965,8 @@
     "node_modules/popmotion/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
@@ -28614,6 +28643,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
       "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "license": "MIT",
       "dependencies": {
         "hey-listen": "^1.0.8",
         "tslib": "^2.1.0"
@@ -28622,7 +28652,8 @@
     "node_modules/style-value-types/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/stylehacks": {
       "version": "5.1.0",
@@ -32937,6 +32968,27 @@
         "markdown-it": "^14.1.0",
         "react-compiler-runtime": "19.0.0-beta-37ed2a7-20241206",
         "set-value": "^4.1.0"
+      },
+      "dependencies": {
+        "framer-motion": {
+          "version": "6.5.1",
+          "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+          "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+          "requires": {
+            "@emotion/is-prop-valid": "^0.8.2",
+            "@motionone/dom": "10.12.0",
+            "framesync": "6.0.1",
+            "hey-listen": "^1.0.8",
+            "popmotion": "11.0.3",
+            "style-value-types": "5.0.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "tslib": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+          "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+        }
       }
     },
     "@graphiql/toolkit": {
@@ -34292,6 +34344,12 @@
           "dev": true,
           "requires": {}
         },
+        "jose": {
+          "version": "5.10.0",
+          "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+          "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+          "dev": true
+        },
         "js-yaml": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -41718,27 +41776,6 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
-    "framer-motion": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
-      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
-      "requires": {
-        "@emotion/is-prop-valid": "^0.8.2",
-        "@motionone/dom": "10.12.0",
-        "framesync": "6.0.1",
-        "hey-listen": "^1.0.8",
-        "popmotion": "11.0.3",
-        "style-value-types": "5.0.0",
-        "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.8.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-          "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-        }
-      }
-    },
     "framesync": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
@@ -45510,10 +45547,9 @@
       }
     },
     "jose": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-5.8.0.tgz",
-      "integrity": "sha512-E7CqYpL/t7MMnfGnK/eg416OsFCVUrU/Y3Vwe7QjKhu/BkS1Ms455+2xsqZQVN57/U2MHMBvEb5SrmAZWAIntA==",
-      "dev": true
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.0.tgz",
+      "integrity": "sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA=="
     },
     "js-tokens": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 754e7ad..d2794dd 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "gatsby-plugin-sitemap": "^6.14.0",
     "graphiql": "^3.8.3",
     "graphql-tag": "^2.12.6",
+    "jose": "^6.1.0",
     "lodash": "^4.17.21",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
new file mode 100644
index 0000000..cea3776
--- /dev/null
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -0,0 +1,311 @@
+import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
+import { jwtVerify, createRemoteJWKSet, JWTPayload } from 'jose';
+import { formatUrl } from './helpers';
+import StepCard from './components/StepCard';
+import oidcConfig from './oidcConfig';
+import cx from 'classnames';
+
+type OidcTokenResponse = {
+  token_type: 'Bearer';
+  expires_in: number;
+  id_token: string;
+  access_token: string;
+  error?: string;
+  error_description?: string;
+};
+
+type OidcSettings = {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  scope: string;
+};
+
+const OidcVisualizer = () => {
+  const [authCode, setAuthCode] = useState<string | null>(null);
+  const [tokenResponse, setTokenResponse] = useState<OidcTokenResponse | null>(null);
+  const [decodedPayload, setDecodedPayload] = useState<JWTPayload | null>(null);
+  const [codeExchangeCompleted, setCodeExchangeCompleted] = useState<boolean>(false);
+  const [step2Error, setStep2Error] = useState<string | null>(null);
+  const [step3Error, setStep3Error] = useState<string | null>(null);
+
+  const authorizeUrl = `https://${oidcConfig.domain}/oauth2/authorize?response_type=code&client_id=${oidcConfig.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcConfig.scope)}`;
+
+  const baseBtnStyles =
+    'px-6 py-4 bg-sky-900 text-white uppercase text-xs font-medium transition hover:bg-sky-700 hover:delay-100';
+
+  const STEP = {
+    STEP_1: 1,
+    STEP_2: 2,
+    STEP_3: 3,
+    STEP_4: 4,
+  } as const;
+
+  const step1Ref = useRef<HTMLDivElement>(null);
+  const step2Ref = useRef<HTMLDivElement>(null);
+  const step3Ref = useRef<HTMLDivElement>(null);
+  const step4Ref = useRef<HTMLDivElement>(null);
+
+  /* Define the current step for scrolling */
+  const currentStep = (() => {
+    if (decodedPayload) return STEP.STEP_4;
+    if (tokenResponse && codeExchangeCompleted) return STEP.STEP_3;
+    if (authCode) return STEP.STEP_2;
+    return STEP.STEP_1;
+  })();
+
+  const stepRefs = {
+    [STEP.STEP_1]: step1Ref,
+    [STEP.STEP_2]: step2Ref,
+    [STEP.STEP_3]: step3Ref,
+    [STEP.STEP_4]: step4Ref,
+  };
+
+  /* Scroll to current step on step change */
+  useLayoutEffect(() => {
+    const el = stepRefs[currentStep].current;
+    if (!el) return;
+
+    const headerHeight = 56;
+    const elementTop = el.getBoundingClientRect().top;
+    const targetY = elementTop + window.scrollY - headerHeight;
+
+    if (tokenResponse && !decodedPayload && currentStep !== 3) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      // When token is received, scroll to the bottom of step #2 to show "Next" button
+    } else {
+      // Otherwise, scroll to center
+      window.scrollTo({
+        top: targetY,
+        behavior: 'smooth',
+      });
+    }
+  }, [currentStep, tokenResponse]);
+
+  /* Extract authorization code from URL on mount */
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+
+    if (code) {
+      setAuthCode(code);
+      window.history.replaceState({}, document.title, window.location.pathname); // Remove authorization code from URL
+    }
+  }, []);
+
+  /* Handle code for token exchange */
+  const handleExchange = async () => {
+    if (!authCode) return;
+
+    try {
+      const getToken = await fetch(`https://${oidcConfig.domain}/oauth2/token`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({
+          grant_type: 'authorization_code',
+          client_id: oidcConfig.clientId,
+          client_secret: oidcConfig.clientSecret,
+          code: authCode,
+          redirect_uri: oidcConfig.redirectUri,
+        }),
+      });
+
+      const data: OidcTokenResponse = await getToken.json();
+
+      if (data.error) throw new Error(data.error_description || data.error);
+      setTokenResponse(data);
+    } catch (err: any) {
+      setStep2Error(err.message);
+    }
+  };
+
+  /* Proceed to token verification step */
+  const proceedToVerifyWT = () => {
+    setCodeExchangeCompleted(true);
+  };
+
+  /* Handle JWT validation */
+  const handleVerify = async () => {
+    if (!tokenResponse?.id_token) return;
+
+    try {
+      const JWKS = createRemoteJWKSet(
+        new URL(`https://${oidcConfig.domain}/.well-known/jwks.json`),
+      );
+      const { payload } = await jwtVerify(tokenResponse.id_token, JWKS);
+      setDecodedPayload(payload);
+    } catch (err: any) {
+      setStep3Error('Token Verification Failed: ' + err.message);
+    }
+  };
+
+  const handleLogin = () => {
+    window.location.href = authorizeUrl;
+  };
+
+  const handleReset = () => {
+    setAuthCode(null);
+    setTokenResponse(null);
+    setDecodedPayload(null);
+    setCodeExchangeCompleted(false);
+    setStep2Error(null);
+    setStep3Error(null);
+    window.history.replaceState({}, document.title, window.location.pathname);
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto p-6">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold text-slate-900 mb-0">OpenID Connect Visualizer</h1>
+      </div>
+
+      {/* STEP 1: Authorization */}
+      <StepCard
+        number={1}
+        cardRef={step1Ref}
+        title="Redirect to OpenID Connect Server"
+        description="User is redirected to the Authorization Server to log in."
+        req={formatUrl(authorizeUrl)}
+        res={authCode ? { code: authCode } : null}
+        isActive={!authCode}
+        isCompleted={!!authCode}
+        action={
+          <button onClick={handleLogin} className={baseBtnStyles}>
+            Start
+          </button>
+        }
+      />
+
+      {/* STEP 2: Code for Token Exchange */}
+      <StepCard
+        number={2}
+        cardRef={step2Ref}
+        title="Exchange Code for Token"
+        description={
+          authCode && (
+            <>
+              Your Authorization Code is:{' '}
+              <span className="bg-gray-200 text-gray-700 font-mono text-sm px-2 py-1 rounded-sm shadow-inner break-all">
+                {authCode}
+              </span>
+              <p className="mt-2 ">
+                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.
+              </p>
+            </>
+          )
+        }
+        req={
+          authCode
+            ? {
+                method: 'POST',
+                url: `/oauth2/token`,
+                body: {
+                  grant_type: 'authorization_code',
+                  code: authCode,
+                  client_id: oidcConfig.clientId,
+                },
+              }
+            : null
+        }
+        responseId="codeExchangeResponse"
+        res={tokenResponse}
+        isActive={!!authCode && !codeExchangeCompleted}
+        isCompleted={!!tokenResponse && codeExchangeCompleted}
+        action={
+          !tokenResponse ? (
+            <button
+              onClick={handleExchange}
+              disabled={!!step2Error}
+              className={cx(
+                baseBtnStyles,
+                step2Error && 'bg-gray-400 cursor-not-allowed hover:bg-gray-400',
+              )}
+            >
+              Exchange Code
+            </button>
+          ) : (
+            <button onClick={proceedToVerifyWT} className={baseBtnStyles}>
+              Next
+            </button>
+          )
+        }
+        error={step2Error}
+      />
+
+      {/* STEP 3: Token Verification */}
+      <StepCard
+        number={3}
+        cardRef={step3Ref}
+        title="Verify ID Token"
+        description={
+          tokenResponse && (
+            <>
+              <p className="text-gray-600 mb-3">
+                The final step is validating the <span className="font-semibold">ID Token</span>. We
+                must confirm the token came from the correct sender and hasn't been tampered with by
+                verifying its <span className="font-semibold">JWT signature</span>.
+              </p>
+
+              <p className="font-semibold mt-4">Your id_token is:</p>
+
+              <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
+                <pre>{tokenResponse.id_token}</pre>
+              </div>
+
+              <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.
+              </p>
+            </>
+          )
+        }
+        isActive={!!tokenResponse && !decodedPayload && codeExchangeCompleted}
+        isCompleted={!!decodedPayload}
+        action={
+          <button onClick={handleVerify} className={baseBtnStyles}>
+            Validate Signature
+          </button>
+        }
+        error={step3Error}
+      />
+
+      {/* STEP 4: Result */}
+      {decodedPayload && (
+        <StepCard
+          number={4}
+          cardRef={step4Ref}
+          title="🎉 ID Token is valid!"
+          description={
+            <>
+              <p className="text-xs font-bold text-gray-500 uppercase tracking-wider">
+                Decoded payload:
+              </p>
+              <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
+                <pre>{JSON.stringify(decodedPayload, null, 2)}</pre>
+              </div>
+            </>
+          }
+          isActive={!!decodedPayload}
+          isCompleted={!!decodedPayload}
+        />
+      )}
+
+      {/* Reset Button */}
+      {(decodedPayload || step2Error || step3Error) && (
+        <div className="flex justify-center mt-4">
+          <button
+            onClick={handleReset}
+            className="px-6 py-4 bg-white border-2 border-sky-900 text-sky-900 uppercase text-xs font-medium transition hover:bg-sky-900 hover:text-white hover:delay-100"
+          >
+            Start over
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OidcVisualizer;
diff --git a/src/components/OidcVisualizer/components/StepCard.tsx b/src/components/OidcVisualizer/components/StepCard.tsx
new file mode 100644
index 0000000..4c6757e
--- /dev/null
+++ b/src/components/OidcVisualizer/components/StepCard.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import cx from 'classnames';
+
+type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+type JsonData = { [key: string]: JsonValue };
+
+type StepCardProps = {
+  number?: number;
+  title?: string;
+  description?: string | React.ReactNode;
+  req?: string | JsonData | null;
+  res?: string | JsonData | null;
+  action?: React.ReactNode;
+  isActive?: boolean;
+  isCompleted?: boolean;
+  error?: string | null;
+  responseId?: string;
+  cardRef?: React.RefObject<HTMLDivElement | null>;
+};
+
+const StepCard = ({
+  number,
+  title,
+  description,
+  req,
+  res,
+  action,
+  isActive,
+  isCompleted,
+  error,
+  responseId,
+  cardRef,
+}: StepCardProps) => {
+  const opacityClass = isActive || isCompleted ? 'opacity-100' : 'opacity-40 pointer-events-none';
+
+  return (
+    <div
+      ref={cardRef}
+      className={cx('relative border p-6 mb-6 bg-white shadow-sm transition-all', opacityClass)}
+    >
+      <div className="absolute left-0 top-0 h-full w-1 bg-sky-700" />
+      <div className="flex items-center gap-3 mb-4">
+        <div
+          className={cx('w-8 h-8 rounded-full flex items-center justify-center font-bold', {
+            'bg-green-600 text-white': isCompleted,
+            'bg-sky-600 text-white': !isCompleted,
+          })}
+        >
+          {isCompleted ? <FontAwesomeIcon icon={faCheck} /> : number}
+        </div>
+        <h3 className="text-xl font-bold text-gray-800 my-4">{title}</h3>
+      </div>
+
+      <p className="text-gray-600 mb-4">{description}</p>
+
+      {/* Request Section */}
+      {req && (
+        <div className="mb-4">
+          <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">Request</span>
+          <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
+            <pre>{typeof req === 'string' ? req : JSON.stringify(req, null, 2)}</pre>
+          </div>
+        </div>
+      )}
+
+      {/* Response Section */}
+      {res && (
+        <div
+          className="mb-4"
+          id={responseId} // This id will be used for scrolling to the response section on Step 2, once the code exchange is completed
+        >
+          <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">Response</span>
+          <div className="bg-slate-50 border border-slate-200 text-slate-800 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
+            <pre>{typeof res === 'string' ? res : JSON.stringify(res, null, 2)}</pre>
+          </div>
+        </div>
+      )}
+
+      {action && <div className="mt-4 pt-4 flex justify-center">{action}</div>}
+
+      {error && (
+        <div className="bg-red-100 text-red-700 p-4 mt-6">
+          <p className="font-bold">An error occurred</p>
+          <p>{error}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StepCard;
diff --git a/src/components/OidcVisualizer/helpers.tsx b/src/components/OidcVisualizer/helpers.tsx
new file mode 100644
index 0000000..aa5bbe2
--- /dev/null
+++ b/src/components/OidcVisualizer/helpers.tsx
@@ -0,0 +1,11 @@
+export function formatUrl(url: string): string {
+  const [base, query] = url.split('?');
+  if (!query) return base;
+
+  const formattedParams = query
+    .split('&')
+    .map(param => '  ' + decodeURIComponent(param))
+    .join('\n');
+
+  return `${base}?\n${formattedParams}`;
+}
diff --git a/src/components/OidcVisualizer/oidcConfig.tsx b/src/components/OidcVisualizer/oidcConfig.tsx
new file mode 100644
index 0000000..370e73a
--- /dev/null
+++ b/src/components/OidcVisualizer/oidcConfig.tsx
@@ -0,0 +1,10 @@
+const oidcConfig = {
+  clientId: 'urn:oidc:visualizer',
+  clientSecret: '4AGzg0LRnJpoVzHV01/N9YfBDZkwcoePYca5QB93c88=',
+  domain: 'docs-samples-test.criipto.id',
+  redirectUri: `${typeof window !== 'undefined' ? window.location.origin : 'https://docs.idura.app'}/verify/guides/oidc-visualizer`,
+  scope: 'openid',
+  responseType: 'code',
+};
+
+export default oidcConfig;
diff --git a/src/pages/verify/guides/oidc-visualizer.mdx b/src/pages/verify/guides/oidc-visualizer.mdx
new file mode 100644
index 0000000..1e40f15
--- /dev/null
+++ b/src/pages/verify/guides/oidc-visualizer.mdx
@@ -0,0 +1,14 @@
+---
+product: verify
+category: Guides & Tools
+sort: 0
+title: OIDC Visualizer
+subtitle: An interactive OpenID Connect sequence visualizer
+---
+
+import OidcVisualizer from '../../../components/OidcVisualizer/OidcVisualizer';
+
+This interactive tool is built to help developers understand [OpenID Connect](/verify/getting-started/glossary/#openid-connect-oidc).
+Run the protocol's calls in sequence to see exactly what happens at every step.
+
+<OidcVisualizer />

From 4c4a2ca01e18ca4bd55acf00b3023e6c38a4c340 Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Fri, 19 Dec 2025 10:56:00 +0100
Subject: [PATCH 2/7] fixup! Add OIDC Visualizer

---
 .../OidcVisualizer/OidcVisualizer.tsx         | 180 +++---------------
 .../OidcVisualizer/components/StepCard.tsx    |  12 +-
 .../components/steps/StepFour.tsx             |  30 +++
 .../components/steps/StepOne.tsx              |  42 ++++
 .../components/steps/StepThree.tsx            |  75 ++++++++
 .../components/steps/StepTwo.tsx              |  86 +++++++++
 src/components/OidcVisualizer/helpers.tsx     |  11 --
 src/components/OidcVisualizer/styles.tsx      |   2 +
 src/components/OidcVisualizer/types.tsx       |   8 +
 src/pages/verify/guides/oidc-visualizer.mdx   |   2 +-
 10 files changed, 279 insertions(+), 169 deletions(-)
 create mode 100644 src/components/OidcVisualizer/components/steps/StepFour.tsx
 create mode 100644 src/components/OidcVisualizer/components/steps/StepOne.tsx
 create mode 100644 src/components/OidcVisualizer/components/steps/StepThree.tsx
 create mode 100644 src/components/OidcVisualizer/components/steps/StepTwo.tsx
 delete mode 100644 src/components/OidcVisualizer/helpers.tsx
 create mode 100644 src/components/OidcVisualizer/styles.tsx
 create mode 100644 src/components/OidcVisualizer/types.tsx

diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
index cea3776..66cd409 100644
--- a/src/components/OidcVisualizer/OidcVisualizer.tsx
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -1,25 +1,11 @@
 import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
 import { jwtVerify, createRemoteJWKSet, JWTPayload } from 'jose';
-import { formatUrl } from './helpers';
-import StepCard from './components/StepCard';
 import oidcConfig from './oidcConfig';
-import cx from 'classnames';
-
-type OidcTokenResponse = {
-  token_type: 'Bearer';
-  expires_in: number;
-  id_token: string;
-  access_token: string;
-  error?: string;
-  error_description?: string;
-};
-
-type OidcSettings = {
-  domain: string;
-  clientId: string;
-  clientSecret: string;
-  scope: string;
-};
+import StepOne from './components/steps/StepOne';
+import StepTwo from './components/steps/StepTwo';
+import StepThree from './components/steps/StepThree';
+import StepFour from './components/steps/StepFour';
+import type { OidcTokenResponse } from './types';
 
 const OidcVisualizer = () => {
   const [authCode, setAuthCode] = useState<string | null>(null);
@@ -31,9 +17,7 @@ const OidcVisualizer = () => {
 
   const authorizeUrl = `https://${oidcConfig.domain}/oauth2/authorize?response_type=code&client_id=${oidcConfig.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcConfig.scope)}`;
 
-  const baseBtnStyles =
-    'px-6 py-4 bg-sky-900 text-white uppercase text-xs font-medium transition hover:bg-sky-700 hover:delay-100';
-
+  /* Define the current step for scrolling */
   const STEP = {
     STEP_1: 1,
     STEP_2: 2,
@@ -46,7 +30,6 @@ const OidcVisualizer = () => {
   const step3Ref = useRef<HTMLDivElement>(null);
   const step4Ref = useRef<HTMLDivElement>(null);
 
-  /* Define the current step for scrolling */
   const currentStep = (() => {
     if (decodedPayload) return STEP.STEP_4;
     if (tokenResponse && codeExchangeCompleted) return STEP.STEP_3;
@@ -74,7 +57,7 @@ const OidcVisualizer = () => {
       el.scrollIntoView({ behavior: 'smooth', block: 'end' });
       // When token is received, scroll to the bottom of step #2 to show "Next" button
     } else {
-      // Otherwise, scroll to center
+      // Otherwise, scroll to top
       window.scrollTo({
         top: targetY,
         behavior: 'smooth',
@@ -139,10 +122,6 @@ const OidcVisualizer = () => {
     }
   };
 
-  const handleLogin = () => {
-    window.location.href = authorizeUrl;
-  };
-
   const handleReset = () => {
     setAuthCode(null);
     setTokenResponse(null);
@@ -160,138 +139,37 @@ const OidcVisualizer = () => {
       </div>
 
       {/* STEP 1: Authorization */}
-      <StepCard
-        number={1}
-        cardRef={step1Ref}
-        title="Redirect to OpenID Connect Server"
-        description="User is redirected to the Authorization Server to log in."
-        req={formatUrl(authorizeUrl)}
-        res={authCode ? { code: authCode } : null}
-        isActive={!authCode}
-        isCompleted={!!authCode}
-        action={
-          <button onClick={handleLogin} className={baseBtnStyles}>
-            Start
-          </button>
-        }
+      <StepOne
+        stepRef={step1Ref}
+        authCode={authCode}
+        authorizeUrl={authorizeUrl}
+        onLogin={() => {
+          window.location.href = authorizeUrl;
+        }}
       />
 
       {/* STEP 2: Code for Token Exchange */}
-      <StepCard
-        number={2}
-        cardRef={step2Ref}
-        title="Exchange Code for Token"
-        description={
-          authCode && (
-            <>
-              Your Authorization Code is:{' '}
-              <span className="bg-gray-200 text-gray-700 font-mono text-sm px-2 py-1 rounded-sm shadow-inner break-all">
-                {authCode}
-              </span>
-              <p className="mt-2 ">
-                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.
-              </p>
-            </>
-          )
-        }
-        req={
-          authCode
-            ? {
-                method: 'POST',
-                url: `/oauth2/token`,
-                body: {
-                  grant_type: 'authorization_code',
-                  code: authCode,
-                  client_id: oidcConfig.clientId,
-                },
-              }
-            : null
-        }
-        responseId="codeExchangeResponse"
-        res={tokenResponse}
-        isActive={!!authCode && !codeExchangeCompleted}
-        isCompleted={!!tokenResponse && codeExchangeCompleted}
-        action={
-          !tokenResponse ? (
-            <button
-              onClick={handleExchange}
-              disabled={!!step2Error}
-              className={cx(
-                baseBtnStyles,
-                step2Error && 'bg-gray-400 cursor-not-allowed hover:bg-gray-400',
-              )}
-            >
-              Exchange Code
-            </button>
-          ) : (
-            <button onClick={proceedToVerifyWT} className={baseBtnStyles}>
-              Next
-            </button>
-          )
-        }
-        error={step2Error}
+      <StepTwo
+        stepRef={step2Ref}
+        authCode={authCode}
+        tokenResponse={tokenResponse}
+        codeExchangeCompleted={codeExchangeCompleted}
+        onCodeExchange={handleExchange}
+        proceedToVerifyWT={proceedToVerifyWT}
+        step2Error={step2Error}
       />
 
       {/* STEP 3: Token Verification */}
-      <StepCard
-        number={3}
-        cardRef={step3Ref}
-        title="Verify ID Token"
-        description={
-          tokenResponse && (
-            <>
-              <p className="text-gray-600 mb-3">
-                The final step is validating the <span className="font-semibold">ID Token</span>. We
-                must confirm the token came from the correct sender and hasn't been tampered with by
-                verifying its <span className="font-semibold">JWT signature</span>.
-              </p>
-
-              <p className="font-semibold mt-4">Your id_token is:</p>
-
-              <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
-                <pre>{tokenResponse.id_token}</pre>
-              </div>
-
-              <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.
-              </p>
-            </>
-          )
-        }
-        isActive={!!tokenResponse && !decodedPayload && codeExchangeCompleted}
-        isCompleted={!!decodedPayload}
-        action={
-          <button onClick={handleVerify} className={baseBtnStyles}>
-            Validate Signature
-          </button>
-        }
-        error={step3Error}
+      <StepThree
+        stepRef={step3Ref}
+        tokenResponse={tokenResponse}
+        codeExchangeCompleted={codeExchangeCompleted}
+        decodedPayload={decodedPayload}
+        onVerify={handleVerify}
       />
 
       {/* STEP 4: Result */}
-      {decodedPayload && (
-        <StepCard
-          number={4}
-          cardRef={step4Ref}
-          title="🎉 ID Token is valid!"
-          description={
-            <>
-              <p className="text-xs font-bold text-gray-500 uppercase tracking-wider">
-                Decoded payload:
-              </p>
-              <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
-                <pre>{JSON.stringify(decodedPayload, null, 2)}</pre>
-              </div>
-            </>
-          }
-          isActive={!!decodedPayload}
-          isCompleted={!!decodedPayload}
-        />
-      )}
+      {decodedPayload && <StepFour stepRef={step4Ref} decodedPayload={decodedPayload} />}
 
       {/* Reset Button */}
       {(decodedPayload || step2Error || step3Error) && (
diff --git a/src/components/OidcVisualizer/components/StepCard.tsx b/src/components/OidcVisualizer/components/StepCard.tsx
index 4c6757e..6ccfb5a 100644
--- a/src/components/OidcVisualizer/components/StepCard.tsx
+++ b/src/components/OidcVisualizer/components/StepCard.tsx
@@ -59,9 +59,9 @@ const StepCard = ({
       {req && (
         <div className="mb-4">
           <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">Request</span>
-          <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
-            <pre>{typeof req === 'string' ? req : JSON.stringify(req, null, 2)}</pre>
-          </div>
+          <pre className="p-4 mt-1 overflow-x-auto text-sm">
+            {typeof req === 'string' ? req : JSON.stringify(req, null, 2)}
+          </pre>
         </div>
       )}
 
@@ -72,9 +72,9 @@ const StepCard = ({
           id={responseId} // This id will be used for scrolling to the response section on Step 2, once the code exchange is completed
         >
           <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">Response</span>
-          <div className="bg-slate-50 border border-slate-200 text-slate-800 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
-            <pre>{typeof res === 'string' ? res : JSON.stringify(res, null, 2)}</pre>
-          </div>
+          <pre className="p-4 mt-1 overflow-x-auto text-sm">
+            {typeof res === 'string' ? res : JSON.stringify(res, null, 2)}
+          </pre>
         </div>
       )}
 
diff --git a/src/components/OidcVisualizer/components/steps/StepFour.tsx b/src/components/OidcVisualizer/components/steps/StepFour.tsx
new file mode 100644
index 0000000..b186c2c
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepFour.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import StepCard from '../StepCard';
+import { JWTPayload } from 'jose';
+
+type StepOneProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  decodedPayload: JWTPayload | null;
+};
+
+export default function StepFour({ stepRef, decodedPayload }: StepOneProps) {
+  return (
+    <StepCard
+      number={4}
+      cardRef={stepRef}
+      title="🎉 ID Token is valid!"
+      description={
+        <>
+          <p className="text-xs font-bold text-gray-500 uppercase tracking-wider">
+            Decoded payload:
+          </p>
+          <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
+            <pre>{JSON.stringify(decodedPayload, null, 2)}</pre>
+          </div>
+        </>
+      }
+      isActive={!!decodedPayload}
+      isCompleted={!!decodedPayload}
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/components/steps/StepOne.tsx b/src/components/OidcVisualizer/components/steps/StepOne.tsx
new file mode 100644
index 0000000..e7e46e1
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepOne.tsx
@@ -0,0 +1,42 @@
+import React, { MouseEvent } from 'react';
+import StepCard from '../StepCard';
+import { primaryBtn } from '../../styles';
+
+type StepOneProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  authorizeUrl: string;
+  authCode?: string | null;
+  onLogin: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export function formatUrl(url: string): string {
+  const [base, query] = url.split('?');
+  if (!query) return base;
+
+  const formattedParams = query
+    .split('&')
+    .map(param => '  ' + decodeURIComponent(param))
+    .join('\n');
+
+  return `${base}?\n${formattedParams}`;
+}
+
+export default function StepOne({ stepRef, authorizeUrl, authCode, onLogin }: StepOneProps) {
+  return (
+    <StepCard
+      number={1}
+      cardRef={stepRef}
+      title="Redirect to OpenID Connect Server"
+      description="User is redirected to the Authorization Server to log in."
+      req={formatUrl(authorizeUrl)}
+      res={authCode ? { code: authCode } : null}
+      isActive={!authCode}
+      isCompleted={!!authCode}
+      action={
+        <button onClick={onLogin} className={primaryBtn}>
+          Start
+        </button>
+      }
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/components/steps/StepThree.tsx b/src/components/OidcVisualizer/components/steps/StepThree.tsx
new file mode 100644
index 0000000..771dabb
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepThree.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { JWTPayload } from 'jose';
+import StepCard from '../StepCard';
+import { primaryBtn } from '../../styles';
+import type { OidcTokenResponse } from '../../types';
+import oidcConfig from '../../oidcConfig';
+
+type StepThreeProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  tokenResponse: OidcTokenResponse | null;
+  codeExchangeCompleted: boolean;
+  decodedPayload: JWTPayload | null;
+  onVerify: () => void;
+  step3Error?: string | null;
+};
+
+export default function StepThree({
+  stepRef,
+  tokenResponse,
+  decodedPayload,
+  codeExchangeCompleted,
+  onVerify,
+  step3Error,
+}: StepThreeProps) {
+  const jwksUrl = `https://${oidcConfig.domain}/.well-known/jwks`;
+  return (
+    <StepCard
+      number={3}
+      cardRef={stepRef}
+      title="Verify ID Token"
+      description={
+        tokenResponse && (
+          <>
+            <p className="text-gray-600 mb-3">
+              The final step is validating the{' '}
+              <a href="/verify/reference/glossary/#id-token" target="_blank">
+                ID Token
+              </a>
+              . To confirm that the token originates from the expected issuer and has not been
+              tampered with, we must check its{' '}
+              <a href="/verify/reference/glossary/#json-web-signature-jws" target="_blank">
+                signature
+              </a>
+              .
+            </p>
+
+            <p className="font-semibold mt-4">Your id_token is:</p>
+
+            <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
+              <pre>{tokenResponse.id_token}</pre>
+            </div>
+
+            <p className="mt-4 text-gray-600">
+              The token is cryptographically signed by Idura Verify using the RSA algorithm. To
+              validate the signature, we use the public key from one of the asymmetric key pairs
+              published at{' '}
+              <a href={jwksUrl} target="_blank">
+                {jwksUrl}
+              </a>
+              . The correct key is selected based on the token’s Key ID (<code>kid</code>).
+            </p>
+          </>
+        )
+      }
+      isActive={!!tokenResponse && !decodedPayload && codeExchangeCompleted}
+      isCompleted={!!decodedPayload}
+      action={
+        <button onClick={onVerify} className={primaryBtn}>
+          Validate Signature
+        </button>
+      }
+      error={step3Error}
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/components/steps/StepTwo.tsx b/src/components/OidcVisualizer/components/steps/StepTwo.tsx
new file mode 100644
index 0000000..ff7b934
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepTwo.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import StepCard from '../StepCard';
+import { primaryBtn } from '../../styles';
+import oidcConfig from '../../oidcConfig';
+import type { OidcTokenResponse } from '../../types';
+import cx from 'classnames';
+
+type StepTwoProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  authCode: string | null;
+  tokenResponse: OidcTokenResponse | null;
+  codeExchangeCompleted: boolean;
+  onCodeExchange: () => void;
+  proceedToVerifyWT: () => void;
+  step2Error?: string | null;
+};
+
+export default function StepTwo({
+  stepRef,
+  authCode,
+  tokenResponse,
+  codeExchangeCompleted,
+  onCodeExchange,
+  proceedToVerifyWT,
+  step2Error,
+}: StepTwoProps) {
+  return (
+    <StepCard
+      number={2}
+      cardRef={stepRef}
+      title="Exchange Code for Token"
+      description={
+        authCode && (
+          <>
+            Your Authorization Code is:{' '}
+            <span className="bg-gray-200 text-gray-700 font-mono text-sm px-2 py-1 rounded-sm shadow-inner break-all">
+              {authCode}
+            </span>
+            <p className="mt-2 ">
+              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.
+            </p>
+          </>
+        )
+      }
+      req={
+        authCode
+          ? {
+              method: 'POST',
+              url: `/oauth2/token`,
+              body: {
+                grant_type: 'authorization_code',
+                code: authCode,
+                client_id: oidcConfig.clientId,
+              },
+            }
+          : null
+      }
+      responseId="codeExchangeResponse"
+      res={tokenResponse}
+      isActive={!!authCode && !codeExchangeCompleted}
+      isCompleted={!!tokenResponse && codeExchangeCompleted}
+      action={
+        !tokenResponse ? (
+          <button
+            onClick={onCodeExchange}
+            disabled={!!step2Error}
+            className={cx(
+              primaryBtn,
+              step2Error && 'bg-gray-400 cursor-not-allowed hover:bg-gray-400',
+            )}
+          >
+            Exchange Code
+          </button>
+        ) : (
+          <button onClick={proceedToVerifyWT} className={primaryBtn}>
+            Next
+          </button>
+        )
+      }
+      error={step2Error}
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/helpers.tsx b/src/components/OidcVisualizer/helpers.tsx
deleted file mode 100644
index aa5bbe2..0000000
--- a/src/components/OidcVisualizer/helpers.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export function formatUrl(url: string): string {
-  const [base, query] = url.split('?');
-  if (!query) return base;
-
-  const formattedParams = query
-    .split('&')
-    .map(param => '  ' + decodeURIComponent(param))
-    .join('\n');
-
-  return `${base}?\n${formattedParams}`;
-}
diff --git a/src/components/OidcVisualizer/styles.tsx b/src/components/OidcVisualizer/styles.tsx
new file mode 100644
index 0000000..ae05719
--- /dev/null
+++ b/src/components/OidcVisualizer/styles.tsx
@@ -0,0 +1,2 @@
+export const primaryBtn =
+  'px-6 py-4 bg-sky-900 text-white uppercase text-xs font-medium transition hover:bg-sky-700 hover:delay-100';
diff --git a/src/components/OidcVisualizer/types.tsx b/src/components/OidcVisualizer/types.tsx
new file mode 100644
index 0000000..ff8489e
--- /dev/null
+++ b/src/components/OidcVisualizer/types.tsx
@@ -0,0 +1,8 @@
+export type OidcTokenResponse = {
+  token_type: 'Bearer';
+  expires_in: number;
+  id_token: string;
+  access_token: string;
+  error?: string;
+  error_description?: string;
+};
diff --git a/src/pages/verify/guides/oidc-visualizer.mdx b/src/pages/verify/guides/oidc-visualizer.mdx
index 1e40f15..ae7c989 100644
--- a/src/pages/verify/guides/oidc-visualizer.mdx
+++ b/src/pages/verify/guides/oidc-visualizer.mdx
@@ -9,6 +9,6 @@ subtitle: An interactive OpenID Connect sequence visualizer
 import OidcVisualizer from '../../../components/OidcVisualizer/OidcVisualizer';
 
 This interactive tool is built to help developers understand [OpenID Connect](/verify/getting-started/glossary/#openid-connect-oidc).
-Run the protocol's calls in sequence to see exactly what happens at every step.
+Run the protocol's calls in sequence to see what happens at every step.
 
 <OidcVisualizer />

From ac1380e867908eeaec48b09edc31d2b747da527d Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Fri, 19 Dec 2025 11:44:37 +0100
Subject: [PATCH 3/7] OIDC Visualizer: add settings modal

This allows developers run the OIDC  flow using their own application credentials.
---
 package-lock.json                             |  47 ++++--
 package.json                                  |   1 +
 .../OidcVisualizer/OidcVisualizer.tsx         |  67 +++++++-
 .../components/OidcSettingsModal.tsx          | 148 ++++++++++++++++++
 .../OidcVisualizer/hooks/useLocalStorage.tsx  |  16 ++
 src/components/OidcVisualizer/types.tsx       |   7 +
 6 files changed, 264 insertions(+), 22 deletions(-)
 create mode 100644 src/components/OidcVisualizer/components/OidcSettingsModal.tsx
 create mode 100644 src/components/OidcVisualizer/hooks/useLocalStorage.tsx

diff --git a/package-lock.json b/package-lock.json
index 52cb4c5..2c821d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "@graphql-codegen/typescript-operations": "^4.0.0",
         "@tailwindcss/typography": "^0.5.0",
         "@types/node": "^24.7.1",
+        "@types/react-dom": "^19.2.3",
         "@types/react-syntax-highlighter": "^15.5.3",
         "autoprefixer": "^10.4.0",
         "gatsby-adapter-netlify": "^1.2.0",
@@ -8173,12 +8174,22 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.0.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
-      "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
       "dependencies": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-syntax-highlighter": {
@@ -12364,9 +12375,10 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
     },
     "node_modules/currently-unhandled": {
       "version": "0.4.1",
@@ -36823,13 +36835,20 @@
       }
     },
     "@types/react": {
-      "version": "19.0.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
-      "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "requires": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
+    "@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "requires": {}
+    },
     "@types/react-syntax-highlighter": {
       "version": "15.5.3",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.3.tgz",
@@ -39823,9 +39842,9 @@
       }
     },
     "csstype": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
diff --git a/package.json b/package.json
index d2794dd..367a621 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@graphql-codegen/typescript-operations": "^4.0.0",
     "@tailwindcss/typography": "^0.5.0",
     "@types/node": "^24.7.1",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.3",
     "autoprefixer": "^10.4.0",
     "gatsby-adapter-netlify": "^1.2.0",
diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
index 66cd409..f5e2b73 100644
--- a/src/components/OidcVisualizer/OidcVisualizer.tsx
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -1,11 +1,14 @@
 import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
 import { jwtVerify, createRemoteJWKSet, JWTPayload } from 'jose';
+import useLocalStorage from './hooks/useLocalStorage';
+import OidcSettingsModal from './components/OidcSettingsModal';
 import oidcConfig from './oidcConfig';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import StepOne from './components/steps/StepOne';
 import StepTwo from './components/steps/StepTwo';
 import StepThree from './components/steps/StepThree';
 import StepFour from './components/steps/StepFour';
-import type { OidcTokenResponse } from './types';
+import type { OidcTokenResponse, OidcSettings } from './types';
 
 const OidcVisualizer = () => {
   const [authCode, setAuthCode] = useState<string | null>(null);
@@ -14,8 +17,23 @@ const OidcVisualizer = () => {
   const [codeExchangeCompleted, setCodeExchangeCompleted] = useState<boolean>(false);
   const [step2Error, setStep2Error] = useState<string | null>(null);
   const [step3Error, setStep3Error] = useState<string | null>(null);
+  const [showSettings, setShowSettings] = useState<boolean>(false);
+  const [oidcSettings, setOidcSettings] = useLocalStorage<OidcSettings>(
+    'oidc-settings',
+    oidcConfig,
+  );
+
+  const authorizeUrl = `https://${oidcSettings.domain}/oauth2/authorize?response_type=code&client_id=${oidcSettings.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcSettings.scope)}`;
 
-  const authorizeUrl = `https://${oidcConfig.domain}/oauth2/authorize?response_type=code&client_id=${oidcConfig.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcConfig.scope)}`;
+  /* Close settings modal with Escape key */
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setShowSettings(false);
+    };
+
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
 
   /* Define the current step for scrolling */
   const STEP = {
@@ -81,13 +99,13 @@ const OidcVisualizer = () => {
     if (!authCode) return;
 
     try {
-      const getToken = await fetch(`https://${oidcConfig.domain}/oauth2/token`, {
+      const getToken = await fetch(`https://${oidcSettings.domain}/oauth2/token`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
         body: new URLSearchParams({
           grant_type: 'authorization_code',
-          client_id: oidcConfig.clientId,
-          client_secret: oidcConfig.clientSecret,
+          client_id: oidcSettings.clientId,
+          client_secret: oidcSettings.clientSecret,
           code: authCode,
           redirect_uri: oidcConfig.redirectUri,
         }),
@@ -113,7 +131,7 @@ const OidcVisualizer = () => {
 
     try {
       const JWKS = createRemoteJWKSet(
-        new URL(`https://${oidcConfig.domain}/.well-known/jwks.json`),
+        new URL(`https://${oidcSettings.domain}/.well-known/jwks.json`),
       );
       const { payload } = await jwtVerify(tokenResponse.id_token, JWKS);
       setDecodedPayload(payload);
@@ -132,10 +150,29 @@ const OidcVisualizer = () => {
     window.history.replaceState({}, document.title, window.location.pathname);
   };
 
+  /* Updating OIDC settings */
+  const handleUpdateSettings = (newSettings: OidcSettings) => {
+    setOidcSettings(prev => ({
+      ...prev,
+      ...newSettings,
+    }));
+    handleReset();
+    setShowSettings(false);
+  };
+
   return (
-    <div className="max-w-3xl mx-auto p-6">
-      <div className="flex justify-between items-center mb-8">
+    <div className="max-w-3xl pl-0 p-2">
+      <div className="flex justify-between items-center mb-2">
         <h1 className="text-3xl font-bold text-slate-900 mb-0">OpenID Connect Visualizer</h1>
+        <button
+          onClick={() => setShowSettings(true)}
+          className="bg-white text-sky-700 uppercase text-xs font-medium transition hover:text-sky-900 hover:delay-100 focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-none"
+        >
+          <div className="flex flex-row items-center gap-1">
+            <FontAwesomeIcon icon="gear" className="text-md" />
+            <p>Configure</p>
+          </div>
+        </button>
       </div>
 
       {/* STEP 1: Authorization */}
@@ -182,6 +219,20 @@ const OidcVisualizer = () => {
           </button>
         </div>
       )}
+
+      {/* OIDC Settings Modal */}
+      {showSettings && (
+        <OidcSettingsModal
+          open={showSettings}
+          onClose={() => setShowSettings(false)}
+          domain={oidcSettings.domain}
+          clientId={oidcSettings.clientId}
+          clientSecret={oidcSettings.clientSecret}
+          scope={oidcSettings.scope}
+          redirectUri={oidcConfig.redirectUri}
+          onSave={handleUpdateSettings}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/OidcVisualizer/components/OidcSettingsModal.tsx b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
new file mode 100644
index 0000000..552a77f
--- /dev/null
+++ b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import oidcConfig from '../oidcConfig';
+
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSave: (newConfig: {
+    domain: string;
+    clientId: string;
+    clientSecret: string;
+    scope: string;
+  }) => void;
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  scope: string;
+  redirectUri: string;
+};
+
+export default function Modal({
+  open,
+  onClose,
+  onSave,
+  domain,
+  clientId,
+  clientSecret,
+  scope,
+}: ModalProps) {
+  const [settings, setSettings] = useState({
+    domain,
+    clientId,
+    clientSecret,
+    scope,
+  });
+
+  return createPortal(
+    <div
+      className={`backdrop-blur-sm bg-black/30 fixed h-screen w-screen inset-0 z-50 p-4 items-center justify-center ${open ? 'flex' : 'hidden'}`}
+      onClick={onClose} // clicking outside closes modal
+    >
+      <div
+        className="bg-white shadow-xl p-10 w-full max-w-2xl relative"
+        onClick={e => e.stopPropagation()}
+      >
+        <button
+          className="absolute right-4 top-4 text-gray-600 hover:text-black text-lg"
+          onClick={onClose}
+        >
+          <FontAwesomeIcon icon="xmark" />
+        </button>
+
+        <h2 className="text-2xl font-semibold text-gray-900 my-4">Client Configuration</h2>
+
+        <p className="text-gray-700 mb-6 text-sm leading-relaxed">
+          This visualizer is configured to use Idura’s default application settings. You can update
+          them to test the OpenID Connect flow with your own Idura application instead. If you do,
+          make sure to add{' '}
+          <span className="font-mono text-xs">
+            https://docs.idura.app/verify/guides/oidc-visualizer
+          </span>{' '}
+          as a <span className="font-medium">redirect URI</span> in your application settings in the{' '}
+          <a
+            href="https://dashboard.idura.app/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sky-700 underline hover:text-sky-900"
+          >
+            Idura dashboard
+          </a>
+          .
+        </p>
+
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <label className="w-32 text-gray-800 font-medium">Domain</label>
+            <input
+              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              value={settings.domain}
+              onChange={e => setSettings({ ...settings, domain: e.target.value })}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="w-32 text-gray-800 font-medium">Client ID</label>
+            <input
+              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              value={settings.clientId}
+              onChange={e => setSettings({ ...settings, clientId: e.target.value })}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="w-32 text-gray-800 font-medium">Client Secret</label>
+            <input
+              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              value={settings.clientSecret}
+              onChange={e => setSettings({ ...settings, clientSecret: e.target.value })}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="w-32 text-gray-800 font-medium">Scope</label>
+            <input
+              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              value={settings.scope}
+              onChange={e => setSettings({ ...settings, scope: e.target.value })}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="w-32 text-gray-800 font-medium">Redirect URI</label>
+            <input
+              disabled
+              className="flex-1 border border-gray-300 border-dashed bg-gray-100 text-gray-700 px-3 py-2"
+              value="https://docs.idura.app/verify/guides/oidc-visualizer"
+            />
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end">
+          <button
+            onClick={() => {
+              setSettings({
+                domain: oidcConfig.domain,
+                clientId: oidcConfig.clientId,
+                clientSecret: oidcConfig.clientSecret,
+                scope: oidcConfig.scope,
+              });
+            }}
+            className="px-5 py-2 bg-sky-900 mr-2 text-white font-medium hover:bg-gray-900 transition"
+          >
+            Reset to Default
+          </button>
+
+          <button
+            onClick={() => onSave(settings)}
+            className="px-5 py-2 bg-black text-white font-medium hover:bg-gray-900 transition"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/OidcVisualizer/hooks/useLocalStorage.tsx b/src/components/OidcVisualizer/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000..911b1e0
--- /dev/null
+++ b/src/components/OidcVisualizer/hooks/useLocalStorage.tsx
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+export default function useLocalStorage<T>(key: string, defaultValue: T) {
+  const [value, setValue] = useState<T>(() => {
+    if (typeof window === 'undefined') return defaultValue;
+    const saved = localStorage.getItem(key);
+    return saved ? JSON.parse(saved) : defaultValue;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}
diff --git a/src/components/OidcVisualizer/types.tsx b/src/components/OidcVisualizer/types.tsx
index ff8489e..cf160e8 100644
--- a/src/components/OidcVisualizer/types.tsx
+++ b/src/components/OidcVisualizer/types.tsx
@@ -6,3 +6,10 @@ export type OidcTokenResponse = {
   error?: string;
   error_description?: string;
 };
+
+export type OidcSettings = {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  scope: string;
+};

From 84eb2780b1cbcd1fb3b4a9effcc9327900b9aed6 Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Sat, 20 Dec 2025 13:34:53 +0100
Subject: [PATCH 4/7] OIDC Visualizer: add Private Key JWT authentication
 option

---
 .../OidcVisualizer/OidcVisualizer.tsx         |  26 +++-
 .../components/OidcSettingsModal.tsx          | 123 +++++++++++++++---
 src/components/OidcVisualizer/generateJwt.tsx |  28 ++++
 .../keys/signing_jwks_public.json             |  11 ++
 .../keys/signing_jwks_public_and_private.json |  17 +++
 src/components/OidcVisualizer/oidcConfig.tsx  |   1 +
 src/components/OidcVisualizer/styles.tsx      |   8 ++
 src/components/OidcVisualizer/types.tsx       |   1 +
 8 files changed, 187 insertions(+), 28 deletions(-)
 create mode 100644 src/components/OidcVisualizer/generateJwt.tsx
 create mode 100644 src/components/OidcVisualizer/keys/signing_jwks_public.json
 create mode 100644 src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json

diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
index f5e2b73..093a7cf 100644
--- a/src/components/OidcVisualizer/OidcVisualizer.tsx
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -8,6 +8,7 @@ import StepOne from './components/steps/StepOne';
 import StepTwo from './components/steps/StepTwo';
 import StepThree from './components/steps/StepThree';
 import StepFour from './components/steps/StepFour';
+import { generateJWT } from './generateJwt';
 import type { OidcTokenResponse, OidcSettings } from './types';
 
 const OidcVisualizer = () => {
@@ -99,16 +100,26 @@ const OidcVisualizer = () => {
     if (!authCode) return;
 
     try {
+      const params: Record<string, string> = {
+        grant_type: 'authorization_code',
+        code: authCode,
+        redirect_uri: oidcConfig.redirectUri,
+      };
+
+      const clientAssertion = await generateJWT(oidcSettings);
+
+      if (oidcSettings.pkJwtAuth) {
+        params['client_assertion_type'] = 'urn:ietf:params:oauth:client-assertion-type:jwt-bearer';
+        params['client_assertion'] = clientAssertion;
+      } else {
+        params['client_id'] = oidcSettings.clientId;
+        params['client_secret'] = oidcSettings.clientSecret;
+      }
+
       const getToken = await fetch(`https://${oidcSettings.domain}/oauth2/token`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: new URLSearchParams({
-          grant_type: 'authorization_code',
-          client_id: oidcSettings.clientId,
-          client_secret: oidcSettings.clientSecret,
-          code: authCode,
-          redirect_uri: oidcConfig.redirectUri,
-        }),
+        body: new URLSearchParams(params),
       });
 
       const data: OidcTokenResponse = await getToken.json();
@@ -231,6 +242,7 @@ const OidcVisualizer = () => {
           scope={oidcSettings.scope}
           redirectUri={oidcConfig.redirectUri}
           onSave={handleUpdateSettings}
+          pkJwtAuth={oidcSettings.pkJwtAuth}
         />
       )}
     </div>
diff --git a/src/components/OidcVisualizer/components/OidcSettingsModal.tsx b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
index 552a77f..6c91338 100644
--- a/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
+++ b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { linkStyles, inputStyles, disabledInputStyles } from '../styles';
+import publicSigningKey from '../keys/signing_jwks_public.json';
 import oidcConfig from '../oidcConfig';
 
 type ModalProps = {
@@ -11,12 +13,14 @@ type ModalProps = {
     clientId: string;
     clientSecret: string;
     scope: string;
+    pkJwtAuth: boolean;
   }) => void;
   domain: string;
   clientId: string;
   clientSecret: string;
   scope: string;
   redirectUri: string;
+  pkJwtAuth: boolean;
 };
 
 export default function Modal({
@@ -27,14 +31,37 @@ export default function Modal({
   clientId,
   clientSecret,
   scope,
+  pkJwtAuth,
 }: ModalProps) {
   const [settings, setSettings] = useState({
     domain,
     clientId,
     clientSecret,
     scope,
+    pkJwtAuth,
   });
 
+  const authDescriptions = {
+    client_secret: (
+      <>
+        Standard client authentication using a shared{' '}
+        <a className={linkStyles} href="/verify/reference/glossary/#client-secret" target="_blank">
+          client secret
+        </a>
+        .
+      </>
+    ),
+    private_jwt: (
+      <>
+        A more secure authentication option based on asymmetric cryptography. For more details, see{' '}
+        <a href="/verify/guides/privatekey-jwt/" target="_blank" className={linkStyles}>
+          Private key JWT authentication
+        </a>
+        .
+      </>
+    ),
+  };
+
   return createPortal(
     <div
       className={`backdrop-blur-sm bg-black/30 fixed h-screen w-screen inset-0 z-50 p-4 items-center justify-center ${open ? 'flex' : 'hidden'}`}
@@ -51,9 +78,9 @@ export default function Modal({
           <FontAwesomeIcon icon="xmark" />
         </button>
 
-        <h2 className="text-2xl font-semibold text-gray-900 my-4">Client Configuration</h2>
+        <h2 className="text-xl font-semibold text-gray-900 my-2">Client Configuration</h2>
 
-        <p className="text-gray-700 mb-6 text-sm leading-relaxed">
+        <p className="text-gray-700 mb-2 text-sm">
           This visualizer is configured to use Idura’s default application settings. You can update
           them to test the OpenID Connect flow with your own Idura application instead. If you do,
           make sure to add{' '}
@@ -65,61 +92,114 @@ export default function Modal({
             href="https://dashboard.idura.app/"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-sky-700 underline hover:text-sky-900"
+            className={linkStyles}
           >
             Idura dashboard
           </a>
           .
         </p>
 
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-4">
+        <div className="flex flex-col gap-2 text-sm">
+          <div className="flex items-start gap-2">
+            <label className="w-32 text-gray-800 font-medium">Client Authentication</label>
+            <div className="flex flex-col flex-1">
+              <select
+                className="flex-1 border border-gray-300 px-1 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-1 focus:ring-sky-600 focus:outline-none"
+                value={settings.pkJwtAuth ? 'private_jwt' : 'client_secret'}
+                onChange={e => {
+                  setSettings({ ...settings, pkJwtAuth: e.target.value === 'private_jwt' });
+                }}
+              >
+                <option value="client_secret">Client Secret</option>
+                <option value="private_jwt">Private Key JWT</option>
+              </select>
+              <p className="leading-tight text-xs px-2 py-1 mt-1 bg-slate-50 text-slate-600">
+                {settings.pkJwtAuth ? authDescriptions.private_jwt : authDescriptions.client_secret}
+              </p>
+            </div>
+          </div>
+          {settings.pkJwtAuth && (
+            <div className="flex items-start gap-2">
+              <label className="w-32 text-gray-800 font-medium">Public key</label>
+              <div className="flex-1 relative">
+                <textarea
+                  readOnly
+                  className={`${inputStyles} w-full h-24 font-mono text-xs resize-none bg-gray-50 cursor-text`}
+                  value={JSON.stringify(publicSigningKey, null, 2)}
+                  onClick={e => (e.target as HTMLTextAreaElement).select()}
+                />
+                <div className="px-1 py-1 bg-slate-50 leading-tight text-xs text-slate-600">
+                  <p>
+                    To test Private Key JWT authentication with your own application, you must
+                    register the provided public signing key in the Idura Dashboard. Open your
+                    application settings and navigate to the{' '}
+                    <span className="font-medium text-gray-700">OpenID Connect</span> tab. Under{' '}
+                    <span className="font-medium text-slate-900">Client JWKs</span>, set the type to
+                    <span className="font-medium text-slate-900"> Static</span> and paste the JWK
+                    set shown above.
+                  </p>
+
+                  <div className="mt-3 bg-yellow-100 p-2">
+                    <p>
+                      <strong>Security Note:</strong> These keys are for demonstration only. When
+                      building your own applications, generate a unique key pair and never share the
+                      private key.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
             <label className="w-32 text-gray-800 font-medium">Domain</label>
             <input
-              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              className={inputStyles}
               value={settings.domain}
               onChange={e => setSettings({ ...settings, domain: e.target.value })}
             />
           </div>
 
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
             <label className="w-32 text-gray-800 font-medium">Client ID</label>
             <input
-              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              className={inputStyles}
               value={settings.clientId}
               onChange={e => setSettings({ ...settings, clientId: e.target.value })}
             />
           </div>
 
-          <div className="flex items-center gap-4">
-            <label className="w-32 text-gray-800 font-medium">Client Secret</label>
-            <input
-              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
-              value={settings.clientSecret}
-              onChange={e => setSettings({ ...settings, clientSecret: e.target.value })}
-            />
-          </div>
+          {!settings.pkJwtAuth && (
+            <div className="flex items-center gap-2">
+              <label className="w-32 text-gray-800 font-medium">Client Secret</label>
+              <input
+                className={inputStyles}
+                value={settings.clientSecret}
+                onChange={e => setSettings({ ...settings, clientSecret: e.target.value })}
+                disabled={settings.pkJwtAuth}
+              />
+            </div>
+          )}
 
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
             <label className="w-32 text-gray-800 font-medium">Scope</label>
             <input
-              className="flex-1 border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:ring-1 focus:ring-sky-600"
+              className={inputStyles}
               value={settings.scope}
               onChange={e => setSettings({ ...settings, scope: e.target.value })}
             />
           </div>
 
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
             <label className="w-32 text-gray-800 font-medium">Redirect URI</label>
             <input
               disabled
-              className="flex-1 border border-gray-300 border-dashed bg-gray-100 text-gray-700 px-3 py-2"
+              className={disabledInputStyles}
               value="https://docs.idura.app/verify/guides/oidc-visualizer"
             />
           </div>
         </div>
 
-        <div className="mt-6 flex justify-end">
+        <div className="mt-4 flex justify-end text-sm">
           <button
             onClick={() => {
               setSettings({
@@ -127,6 +207,7 @@ export default function Modal({
                 clientId: oidcConfig.clientId,
                 clientSecret: oidcConfig.clientSecret,
                 scope: oidcConfig.scope,
+                pkJwtAuth: oidcConfig.pkJwtAuth,
               });
             }}
             className="px-5 py-2 bg-sky-900 mr-2 text-white font-medium hover:bg-gray-900 transition"
diff --git a/src/components/OidcVisualizer/generateJwt.tsx b/src/components/OidcVisualizer/generateJwt.tsx
new file mode 100644
index 0000000..0ef107c
--- /dev/null
+++ b/src/components/OidcVisualizer/generateJwt.tsx
@@ -0,0 +1,28 @@
+import * as jose from 'jose';
+import signingJwks from './keys/signing_jwks_public_and_private.json';
+
+type generateJwtProps = {
+  domain: string;
+  clientId: string;
+};
+
+export async function generateJWT({ domain, clientId }: generateJwtProps): Promise<string> {
+  const jwkObject = signingJwks.keys[0];
+  const privateKey = await jose.importJWK(jwkObject, 'RS256');
+
+  try {
+    const jti = crypto.randomUUID();
+    const jwt = await new jose.SignJWT({ jti })
+      .setProtectedHeader({ alg: 'RS256', kid: jwkObject.kid })
+      .setIssuedAt()
+      .setIssuer(clientId)
+      .setSubject(clientId)
+      .setAudience(`https://${domain}`)
+      .setExpirationTime('5m')
+      .sign(privateKey);
+    return jwt;
+  } catch (error) {
+    console.error('Error generating JWT:', error instanceof Error ? error.message : String(error));
+    throw error;
+  }
+}
diff --git a/src/components/OidcVisualizer/keys/signing_jwks_public.json b/src/components/OidcVisualizer/keys/signing_jwks_public.json
new file mode 100644
index 0000000..2c52929
--- /dev/null
+++ b/src/components/OidcVisualizer/keys/signing_jwks_public.json
@@ -0,0 +1,11 @@
+{
+  "keys": [
+    {
+      "kty": "RSA",
+      "use": "sig",
+      "kid": "iq6S-xzUIUMVxWxRPlJWG0yZjdVa4xQ4OF8JJ_BYbOk",
+      "e": "AQAB",
+      "n": "uOJ50wKTobDzHLWBMjky8OHTUxD4drnKdulPFLBJClPi0tcjsrYoLaa6bXPjwnh_OuloPiBVPY_Wl3UL7qWMzx6ouNTPbEmJJYE-kgF-G2pB0wz_gxdTyPzy6GcdRIAhuZvfdrD4VZ5IiOXdsoeQOgMmGafcnHoivXiQXN9w7CXzWcWkWqmdP0_bcFlJHtj8epHn0ZgfB-qyFfQJ03eHSCtAKqiHnLvLuSn8dAVBdsv-OBnP_hKD3PemCO70tzHNd5wX9KGXke7rzwOeeYa8nsMdJdh2Uncz_-lvRK4TiO7QzUs-ZFDujIufLrrlbZgGhkiDUvJmBmnYboTfWtv1iQ"
+    }
+  ]
+}
diff --git a/src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json b/src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json
new file mode 100644
index 0000000..df4d031
--- /dev/null
+++ b/src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json
@@ -0,0 +1,17 @@
+{
+  "keys": [
+    {
+      "kty": "RSA",
+      "n": "uOJ50wKTobDzHLWBMjky8OHTUxD4drnKdulPFLBJClPi0tcjsrYoLaa6bXPjwnh_OuloPiBVPY_Wl3UL7qWMzx6ouNTPbEmJJYE-kgF-G2pB0wz_gxdTyPzy6GcdRIAhuZvfdrD4VZ5IiOXdsoeQOgMmGafcnHoivXiQXN9w7CXzWcWkWqmdP0_bcFlJHtj8epHn0ZgfB-qyFfQJ03eHSCtAKqiHnLvLuSn8dAVBdsv-OBnP_hKD3PemCO70tzHNd5wX9KGXke7rzwOeeYa8nsMdJdh2Uncz_-lvRK4TiO7QzUs-ZFDujIufLrrlbZgGhkiDUvJmBmnYboTfWtv1iQ",
+      "e": "AQAB",
+      "d": "LhgoT3N9pExEwj0AZrXkKiIbJByhMyEnLIaEmn9Iupu1i888H1ZG1sF5uVY7n1DM-f-IlCVrQ7ke58h7lq7MDu_S18guyhnUfS_wttewjPR3CydbFvZkk9QC1A7hQTLRXlSvFMPduHbWaeWQDxc7Q60r5uhQZX39nRbPaTvJ86gpRMUkSRcbbdS_KIW9_M8JZVJ6aJQlLYrkAOACb4EVNjfxuXL3BEFePvVdtIppRX74a23gRdRp1NWQD_VCxV9u8f4GKLdOlB2_rIPbTWjt0FU7FQsfs_lYPDkAkp5MLgNbO4O05f73BhEaBKZ6gyX3_pVvJv9qz9TxptPir54t",
+      "p": "-y41wPdrAa1qt9nkOMJqPIMUImxQdn8efpukjO-MDvT_Y8hpYUU-wZY1OY9ps_wBTx54Y8qK0Cu4k9c3UIvrTMfhCavBL_EH-PTObxKEd59fhInQ-TqbehDrmd3qH_DJ2QOSe7NuxGS9CfhLE1cgyrt6zN_TGUJSsVLjJ42RaXM",
+      "q": "vG6ffuQg5Hw98rw2wKS2RtFxq7x3CG-xQA70dSaN93VcUkRWfOfTnBXN49HyHdz0XrXa77hvPVwmkhFjIkufc6HtSKHXZ7haVc2gTsIAIcjcAA57jXQZe1an4yVwLaPCPJSiFcYhjQNj4rwswwwOjDPNAxRfzP0XTfp8jBqp1hM",
+      "dp": "sWH-4BlaXkLjnJapz1OsxrMi4vRvFl_LX0n3OPhqhp2KRiNgGCtYmEnFqLKYyVxsaD1yc7aztTNLFEzmaWGGeCCn0baTpZGoOa5YoqQHHJtWTzksdPVomxmb6HuJPalEQpd9ORKMZPFndsT779qV89XWcRyX7byivUt105bsW_U",
+      "dq": "TWxmvIyft0IVchdDqAQFoTONsTLO9fhurBN4_mnJC1R9io_puYjHuep7npA1G3AeOIwgWT8-9cdXUc0zHnRUH_74sE9PYp6s_3Rt2e58f2U4gA1zVrvNfJAui3ZmkVooBRxNPQUb5ATwlckb20io8ZKXOhy1AFU9rhyt8CNEhWE",
+      "qi": "QdX8GEE59ulLdr38SXvFyHFANozzNKC9MXE4TREVE9MTVtFHFib7Kssm6UyfRynYu_TH0g8-QJpTREAZ0n-ag6hwCNYeVOP32W7vMINZfKeZJUdenFGW2-0dXN8N0AopgnePtbCBnyRfD4T1bDJ9nNfO_y-Qapnp2RNgr6f8tGQ",
+      "use": "sig",
+      "kid": "iq6S-xzUIUMVxWxRPlJWG0yZjdVa4xQ4OF8JJ_BYbOk"
+    }
+  ]
+}
diff --git a/src/components/OidcVisualizer/oidcConfig.tsx b/src/components/OidcVisualizer/oidcConfig.tsx
index 370e73a..07c13b4 100644
--- a/src/components/OidcVisualizer/oidcConfig.tsx
+++ b/src/components/OidcVisualizer/oidcConfig.tsx
@@ -5,6 +5,7 @@ const oidcConfig = {
   redirectUri: `${typeof window !== 'undefined' ? window.location.origin : 'https://docs.idura.app'}/verify/guides/oidc-visualizer`,
   scope: 'openid',
   responseType: 'code',
+  pkJwtAuth: false,
 };
 
 export default oidcConfig;
diff --git a/src/components/OidcVisualizer/styles.tsx b/src/components/OidcVisualizer/styles.tsx
index ae05719..3d9ab0a 100644
--- a/src/components/OidcVisualizer/styles.tsx
+++ b/src/components/OidcVisualizer/styles.tsx
@@ -1,2 +1,10 @@
 export const primaryBtn =
   'px-6 py-4 bg-sky-900 text-white uppercase text-xs font-medium transition hover:bg-sky-700 hover:delay-100';
+
+export const linkStyles = 'text-sky-700 underline hover:text-sky-900';
+
+export const inputStyles =
+  'flex-1 border border-gray-300 px-2 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-1 focus:ring-sky-600 focus:outline-none';
+
+export const disabledInputStyles =
+  'flex-1 border border-gray-300 bg-gray-100 text-gray-700 px-2 py-1';
diff --git a/src/components/OidcVisualizer/types.tsx b/src/components/OidcVisualizer/types.tsx
index cf160e8..c42284c 100644
--- a/src/components/OidcVisualizer/types.tsx
+++ b/src/components/OidcVisualizer/types.tsx
@@ -12,4 +12,5 @@ export type OidcSettings = {
   clientId: string;
   clientSecret: string;
   scope: string;
+  pkJwtAuth: boolean;
 };

From cf3420731993fd837ce86665ff44308b6d86892c Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Sat, 20 Dec 2025 14:38:59 +0100
Subject: [PATCH 5/7] Fix missing _redirects file during build

Build was failing on this branch with ENOENT when reading `public/_redirects`. Fixed by initializing `input` to empty string if `_redirects` doesn't exist.
---
 plugins/static-redirects/gatsby-node.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/plugins/static-redirects/gatsby-node.js b/plugins/static-redirects/gatsby-node.js
index 81f09fc..5b72468 100644
--- a/plugins/static-redirects/gatsby-node.js
+++ b/plugins/static-redirects/gatsby-node.js
@@ -6,7 +6,10 @@ const redirects = [
 
 exports.onPostBuild = ({ reporter, basePath, pathPrefix }) => {
   const redirectsPath = path.resolve(`${__dirname}/../../public/_redirects`);
-  const input = fs.readFileSync(redirectsPath, 'utf-8');
+  let input = "";
+  if (fs.existsSync(redirectsPath)) {
+    input = fs.readFileSync(redirectsPath, "utf-8");
+  }
   const output = `${input}\n${redirects.join('\n')}`;
   console.log(output);
   fs.writeFileSync(redirectsPath, output);

From 9ffc46a9a78e088aa7f9506608e191c66000f74c Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Tue, 23 Dec 2025 01:36:18 +0100
Subject: [PATCH 6/7] fixup! fixup! Add OIDC Visualizer

---
 .../OidcVisualizer/OidcVisualizer.tsx         | 13 ++++
 .../OidcVisualizer/components/StepCard.tsx    | 10 ++-
 .../components/steps/StepFour.tsx             |  4 +-
 .../components/steps/StepThree.tsx            |  9 +--
 .../components/steps/StepTwo.tsx              | 77 ++++++++++++-------
 5 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
index 093a7cf..e1e05a1 100644
--- a/src/components/OidcVisualizer/OidcVisualizer.tsx
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -15,6 +15,7 @@ const OidcVisualizer = () => {
   const [authCode, setAuthCode] = useState<string | null>(null);
   const [tokenResponse, setTokenResponse] = useState<OidcTokenResponse | null>(null);
   const [decodedPayload, setDecodedPayload] = useState<JWTPayload | null>(null);
+  const [tokenRequest, setTokenRequest] = useState<string | null>(null);
   const [codeExchangeCompleted, setCodeExchangeCompleted] = useState<boolean>(false);
   const [step2Error, setStep2Error] = useState<string | null>(null);
   const [step3Error, setStep3Error] = useState<string | null>(null);
@@ -122,6 +123,16 @@ const OidcVisualizer = () => {
         body: new URLSearchParams(params),
       });
 
+      const formattedRequest = [
+        `POST /oauth2/token HTTP/1.1`,
+        `Host: ${oidcSettings.domain}`,
+        `Content-Type: application/x-www-form-urlencoded`,
+        ``,
+        new URLSearchParams(params).toString().replaceAll('&', '\n'),
+      ].join('\n');
+
+      setTokenRequest(formattedRequest);
+
       const data: OidcTokenResponse = await getToken.json();
 
       if (data.error) throw new Error(data.error_description || data.error);
@@ -198,6 +209,7 @@ const OidcVisualizer = () => {
 
       {/* STEP 2: Code for Token Exchange */}
       <StepTwo
+        req={tokenRequest}
         stepRef={step2Ref}
         authCode={authCode}
         tokenResponse={tokenResponse}
@@ -205,6 +217,7 @@ const OidcVisualizer = () => {
         onCodeExchange={handleExchange}
         proceedToVerifyWT={proceedToVerifyWT}
         step2Error={step2Error}
+        pkJwtAuth={oidcSettings.pkJwtAuth}
       />
 
       {/* STEP 3: Token Verification */}
diff --git a/src/components/OidcVisualizer/components/StepCard.tsx b/src/components/OidcVisualizer/components/StepCard.tsx
index 6ccfb5a..d7c88d3 100644
--- a/src/components/OidcVisualizer/components/StepCard.tsx
+++ b/src/components/OidcVisualizer/components/StepCard.tsx
@@ -12,6 +12,7 @@ type StepCardProps = {
   description?: string | React.ReactNode;
   req?: string | JsonData | null;
   res?: string | JsonData | null;
+  reqNote?: React.ReactNode;
   action?: React.ReactNode;
   isActive?: boolean;
   isCompleted?: boolean;
@@ -25,6 +26,7 @@ const StepCard = ({
   title,
   description,
   req,
+  reqNote,
   res,
   action,
   isActive,
@@ -33,12 +35,12 @@ const StepCard = ({
   responseId,
   cardRef,
 }: StepCardProps) => {
-  const opacityClass = isActive || isCompleted ? 'opacity-100' : 'opacity-40 pointer-events-none';
+  const showStep = isActive || isCompleted ? 'block' : 'hidden';
 
   return (
     <div
       ref={cardRef}
-      className={cx('relative border p-6 mb-6 bg-white shadow-sm transition-all', opacityClass)}
+      className={cx('relative border p-6 mb-6 bg-white shadow-sm transition-all', showStep)}
     >
       <div className="absolute left-0 top-0 h-full w-1 bg-sky-700" />
       <div className="flex items-center gap-3 mb-4">
@@ -62,6 +64,10 @@ const StepCard = ({
           <pre className="p-4 mt-1 overflow-x-auto text-sm">
             {typeof req === 'string' ? req : JSON.stringify(req, null, 2)}
           </pre>
+
+          {reqNote && (
+            <div className="-mt-4 p-2 bg-gray-50 border-l-4 border-gray-200 text-xs">{reqNote}</div>
+          )}
         </div>
       )}
 
diff --git a/src/components/OidcVisualizer/components/steps/StepFour.tsx b/src/components/OidcVisualizer/components/steps/StepFour.tsx
index b186c2c..21030bb 100644
--- a/src/components/OidcVisualizer/components/steps/StepFour.tsx
+++ b/src/components/OidcVisualizer/components/steps/StepFour.tsx
@@ -18,9 +18,7 @@ export default function StepFour({ stepRef, decodedPayload }: StepOneProps) {
           <p className="text-xs font-bold text-gray-500 uppercase tracking-wider">
             Decoded payload:
           </p>
-          <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
-            <pre>{JSON.stringify(decodedPayload, null, 2)}</pre>
-          </div>
+          <pre>{JSON.stringify(decodedPayload, null, 2)}</pre>
         </>
       }
       isActive={!!decodedPayload}
diff --git a/src/components/OidcVisualizer/components/steps/StepThree.tsx b/src/components/OidcVisualizer/components/steps/StepThree.tsx
index 771dabb..294d817 100644
--- a/src/components/OidcVisualizer/components/steps/StepThree.tsx
+++ b/src/components/OidcVisualizer/components/steps/StepThree.tsx
@@ -46,14 +46,11 @@ export default function StepThree({
 
             <p className="font-semibold mt-4">Your id_token is:</p>
 
-            <div className="bg-slate-900 text-slate-50 p-4 rounded mt-1 overflow-x-auto font-mono text-sm">
-              <pre>{tokenResponse.id_token}</pre>
-            </div>
+            <pre>{tokenResponse.id_token}</pre>
 
             <p className="mt-4 text-gray-600">
-              The token is cryptographically signed by Idura Verify using the RSA algorithm. To
-              validate the signature, we use the public key from one of the asymmetric key pairs
-              published at{' '}
+              The token is cryptographically signed by Idura Verify. To validate the signature, we
+              use the public key from one of the asymmetric key pairs published at{' '}
               <a href={jwksUrl} target="_blank">
                 {jwksUrl}
               </a>
diff --git a/src/components/OidcVisualizer/components/steps/StepTwo.tsx b/src/components/OidcVisualizer/components/steps/StepTwo.tsx
index ff7b934..d441c2b 100644
--- a/src/components/OidcVisualizer/components/steps/StepTwo.tsx
+++ b/src/components/OidcVisualizer/components/steps/StepTwo.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import StepCard from '../StepCard';
 import { primaryBtn } from '../../styles';
-import oidcConfig from '../../oidcConfig';
 import type { OidcTokenResponse } from '../../types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cx from 'classnames';
 
 type StepTwoProps = {
@@ -13,6 +13,8 @@ type StepTwoProps = {
   onCodeExchange: () => void;
   proceedToVerifyWT: () => void;
   step2Error?: string | null;
+  req: string | null;
+  pkJwtAuth: boolean;
 };
 
 export default function StepTwo({
@@ -23,6 +25,8 @@ export default function StepTwo({
   onCodeExchange,
   proceedToVerifyWT,
   step2Error,
+  req,
+  pkJwtAuth,
 }: StepTwoProps) {
   return (
     <StepCard
@@ -36,27 +40,33 @@ export default function StepTwo({
             <span className="bg-gray-200 text-gray-700 font-mono text-sm px-2 py-1 rounded-sm shadow-inner break-all">
               {authCode}
             </span>
-            <p className="mt-2 ">
-              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.
+            <p>
+              The code can now be exchanged for an access token and an ID token. Your application
+              initiates the exchange by sending a POST request with the code and the client
+              credentials to the{' '}
+              <a href="/verify/reference/glossary/#token-endpoint">token endpoint</a>.
+            </p>
+            <p>
+              The authorization code is only valid for a single use. Another token request with the
+              same code will trigger an{' '}
+              <a href="/verify/reference/errors/unknown-access-code-error/" target="_blank">
+                <code>Unknown Access Code</code>
+              </a>{' '}
+              error.
             </p>
           </>
         )
       }
-      req={
-        authCode
-          ? {
-              method: 'POST',
-              url: `/oauth2/token`,
-              body: {
-                grant_type: 'authorization_code',
-                code: authCode,
-                client_id: oidcConfig.clientId,
-              },
-            }
-          : null
+      req={authCode ? req : null}
+      reqNote={
+        !pkJwtAuth ? (
+          <>
+            <strong>Note:</strong> Including client credentials (<code>client_id</code> and{' '}
+            <code>client_secret</code>) in the payload is discouraged by the OAuth2 specification.
+            Server-side applications should instead send the credentials in the{' '}
+            <code>Authorization: Basic</code> HTTP header.
+          </>
+        ) : null
       }
       responseId="codeExchangeResponse"
       res={tokenResponse}
@@ -64,20 +74,29 @@ export default function StepTwo({
       isCompleted={!!tokenResponse && codeExchangeCompleted}
       action={
         !tokenResponse ? (
-          <button
-            onClick={onCodeExchange}
-            disabled={!!step2Error}
-            className={cx(
-              primaryBtn,
-              step2Error && 'bg-gray-400 cursor-not-allowed hover:bg-gray-400',
-            )}
-          >
+          <button onClick={onCodeExchange} className={cx(primaryBtn)}>
             Exchange Code
           </button>
         ) : (
-          <button onClick={proceedToVerifyWT} className={primaryBtn}>
-            Next
-          </button>
+          <div className="flex flex-row gap-2">
+            <button onClick={onCodeExchange} className={cx(primaryBtn)}>
+              <div className="flex flex-row items-center gap-1">
+                <FontAwesomeIcon icon="arrows-rotate" className="text-md" />
+                Retry Exchange
+              </div>
+            </button>
+
+            <button
+              onClick={proceedToVerifyWT}
+              className={cx(
+                primaryBtn,
+                step2Error && 'bg-gray-400 cursor-not-allowed hover:bg-gray-400',
+              )}
+              disabled={!!step2Error}
+            >
+              Next
+            </button>
+          </div>
         )
       }
       error={step2Error}

From 5b27c015afffd82233b913c7a90cd0ef4eb51179 Mon Sep 17 00:00:00 2001
From: nmoskaleva <natalia.moskaleva@criipto.com>
Date: Tue, 23 Dec 2025 08:30:03 +0100
Subject: [PATCH 7/7] fixup! OIDC Visualizer: add settings modal

---
 .../OidcVisualizer/OidcVisualizer.tsx         |  7 +-
 .../components/OidcSettingsModal.tsx          | 64 ++++++++++++++++---
 src/components/OidcVisualizer/oidcConfig.tsx  |  1 +
 src/components/OidcVisualizer/styles.tsx      |  2 +-
 src/components/OidcVisualizer/types.tsx       |  1 +
 5 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
index e1e05a1..882a25c 100644
--- a/src/components/OidcVisualizer/OidcVisualizer.tsx
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -25,7 +25,11 @@ const OidcVisualizer = () => {
     oidcConfig,
   );
 
-  const authorizeUrl = `https://${oidcSettings.domain}/oauth2/authorize?response_type=code&client_id=${oidcSettings.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcSettings.scope)}`;
+  const authorizeUrl = `https://${oidcSettings.domain}/oauth2/authorize?response_type=code&client_id=${oidcSettings.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcSettings.scope)}${
+    oidcSettings.acrValues?.length
+      ? `&acr_values=${encodeURIComponent(oidcSettings.acrValues.join(' '))}`
+      : ''
+  }`;
 
   /* Close settings modal with Escape key */
   useEffect(() => {
@@ -256,6 +260,7 @@ const OidcVisualizer = () => {
           redirectUri={oidcConfig.redirectUri}
           onSave={handleUpdateSettings}
           pkJwtAuth={oidcSettings.pkJwtAuth}
+          acrValues={oidcSettings.acrValues}
         />
       )}
     </div>
diff --git a/src/components/OidcVisualizer/components/OidcSettingsModal.tsx b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
index 6c91338..c8ad43b 100644
--- a/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
+++ b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { linkStyles, inputStyles, disabledInputStyles } from '../styles';
+import { PROVIDERS } from '../../../utils/auth-methods';
 import publicSigningKey from '../keys/signing_jwks_public.json';
 import oidcConfig from '../oidcConfig';
 
@@ -14,6 +15,7 @@ type ModalProps = {
     clientSecret: string;
     scope: string;
     pkJwtAuth: boolean;
+    acrValues?: string[];
   }) => void;
   domain: string;
   clientId: string;
@@ -21,6 +23,7 @@ type ModalProps = {
   scope: string;
   redirectUri: string;
   pkJwtAuth: boolean;
+  acrValues?: string[];
 };
 
 export default function Modal({
@@ -32,6 +35,7 @@ export default function Modal({
   clientSecret,
   scope,
   pkJwtAuth,
+  acrValues,
 }: ModalProps) {
   const [settings, setSettings] = useState({
     domain,
@@ -39,8 +43,17 @@ export default function Modal({
     clientSecret,
     scope,
     pkJwtAuth,
+    acrValues: acrValues || [],
   });
 
+  const toggleAcrValue = (value: string) => {
+    setSettings(prev => {
+      const current = prev.acrValues;
+      const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];
+      return { ...prev, acrValues: next };
+    });
+  };
+
   const authDescriptions = {
     client_secret: (
       <>
@@ -68,7 +81,7 @@ export default function Modal({
       onClick={onClose} // clicking outside closes modal
     >
       <div
-        className="bg-white shadow-xl p-10 w-full max-w-2xl relative"
+        className="bg-white shadow-xl p-6 w-full max-w-4xl relative"
         onClick={e => e.stopPropagation()}
       >
         <button
@@ -78,9 +91,9 @@ export default function Modal({
           <FontAwesomeIcon icon="xmark" />
         </button>
 
-        <h2 className="text-xl font-semibold text-gray-900 my-2">Client Configuration</h2>
+        <h2 className="text-xl font-semibold text-gray-900 my-1">Client Configuration</h2>
 
-        <p className="text-gray-700 mb-2 text-sm">
+        <p className="text-gray-700 mb-4 text-xs leading-tight">
           This visualizer is configured to use Idura’s default application settings. You can update
           them to test the OpenID Connect flow with your own Idura application instead. If you do,
           make sure to add{' '}
@@ -99,12 +112,12 @@ export default function Modal({
           .
         </p>
 
-        <div className="flex flex-col gap-2 text-sm">
+        <div className="flex flex-col gap-2 text-xs">
           <div className="flex items-start gap-2">
             <label className="w-32 text-gray-800 font-medium">Client Authentication</label>
             <div className="flex flex-col flex-1">
               <select
-                className="flex-1 border border-gray-300 px-1 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-1 focus:ring-sky-600 focus:outline-none"
+                className="flex-1 border border-gray-300 px-1 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-0 focus:ring-sky-600 focus:outline-none"
                 value={settings.pkJwtAuth ? 'private_jwt' : 'client_secret'}
                 onChange={e => {
                   setSettings({ ...settings, pkJwtAuth: e.target.value === 'private_jwt' });
@@ -113,7 +126,7 @@ export default function Modal({
                 <option value="client_secret">Client Secret</option>
                 <option value="private_jwt">Private Key JWT</option>
               </select>
-              <p className="leading-tight text-xs px-2 py-1 mt-1 bg-slate-50 text-slate-600">
+              <p className="leading-tight text-[10px] px-2 py-1 mt-0 bg-slate-50 text-slate-600">
                 {settings.pkJwtAuth ? authDescriptions.private_jwt : authDescriptions.client_secret}
               </p>
             </div>
@@ -124,12 +137,12 @@ export default function Modal({
               <div className="flex-1 relative">
                 <textarea
                   readOnly
-                  className={`${inputStyles} w-full h-24 font-mono text-xs resize-none bg-gray-50 cursor-text`}
+                  className={`${inputStyles} w-full h-24 font-mono text-[9px] leading-tight resize-none bg-gray-50 cursor-text`}
                   value={JSON.stringify(publicSigningKey, null, 2)}
                   onClick={e => (e.target as HTMLTextAreaElement).select()}
                 />
-                <div className="px-1 py-1 bg-slate-50 leading-tight text-xs text-slate-600">
-                  <p>
+                <div className="px-2 py-1 -mt-1 bg-slate-50 leading-tight text-[10px] text-slate-600">
+                  <p className="mb-1">
                     To test Private Key JWT authentication with your own application, you must
                     register the provided public signing key in the Idura Dashboard. Open your
                     application settings and navigate to the{' '}
@@ -139,7 +152,7 @@ export default function Modal({
                     set shown above.
                   </p>
 
-                  <div className="mt-3 bg-yellow-100 p-2">
+                  <div className="mt-1 bg-yellow-100 p-2">
                     <p>
                       <strong>Security Note:</strong> These keys are for demonstration only. When
                       building your own applications, generate a unique key pair and never share the
@@ -197,6 +210,36 @@ export default function Modal({
               value="https://docs.idura.app/verify/guides/oidc-visualizer"
             />
           </div>
+
+          <div className="flex items-start gap-2">
+            <label className="w-32 text-gray-800 font-medium">Acr values</label>
+
+            <div className="flex-1 grid grid-cols-5 gap-x-4 gap-y-3 text-[10px]">
+              {PROVIDERS.map(provider => (
+                <div key={provider.title} className="flex flex-col">
+                  <p className="font-medium text-gray-800 mb-1">{provider.title}</p>
+
+                  <div className="flex flex-col space-y-0.5">
+                    {provider.authMethods.map(authMethod => (
+                      <label
+                        key={authMethod.acrValue}
+                        className="flex items-center text-gray-600 hover:text-gray-900 cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          id={authMethod.acrValue}
+                          className="mr-2 h-3 w-3 mt-0.5 accent-sky-600"
+                          checked={settings.acrValues.includes(authMethod.acrValue)}
+                          onChange={() => toggleAcrValue(authMethod.acrValue)}
+                        />
+                        <span className="leading-normal">{authMethod.title}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
 
         <div className="mt-4 flex justify-end text-sm">
@@ -208,6 +251,7 @@ export default function Modal({
                 clientSecret: oidcConfig.clientSecret,
                 scope: oidcConfig.scope,
                 pkJwtAuth: oidcConfig.pkJwtAuth,
+                acrValues: oidcConfig.acrValues || [],
               });
             }}
             className="px-5 py-2 bg-sky-900 mr-2 text-white font-medium hover:bg-gray-900 transition"
diff --git a/src/components/OidcVisualizer/oidcConfig.tsx b/src/components/OidcVisualizer/oidcConfig.tsx
index 07c13b4..85b6b3a 100644
--- a/src/components/OidcVisualizer/oidcConfig.tsx
+++ b/src/components/OidcVisualizer/oidcConfig.tsx
@@ -6,6 +6,7 @@ const oidcConfig = {
   scope: 'openid',
   responseType: 'code',
   pkJwtAuth: false,
+  acrValues: [],
 };
 
 export default oidcConfig;
diff --git a/src/components/OidcVisualizer/styles.tsx b/src/components/OidcVisualizer/styles.tsx
index 3d9ab0a..dc0a308 100644
--- a/src/components/OidcVisualizer/styles.tsx
+++ b/src/components/OidcVisualizer/styles.tsx
@@ -4,7 +4,7 @@ export const primaryBtn =
 export const linkStyles = 'text-sky-700 underline hover:text-sky-900';
 
 export const inputStyles =
-  'flex-1 border border-gray-300 px-2 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-1 focus:ring-sky-600 focus:outline-none';
+  'flex-1 border border-gray-300 px-2 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-0 focus:ring-sky-600 focus:outline-none';
 
 export const disabledInputStyles =
   'flex-1 border border-gray-300 bg-gray-100 text-gray-700 px-2 py-1';
diff --git a/src/components/OidcVisualizer/types.tsx b/src/components/OidcVisualizer/types.tsx
index c42284c..97bfbe5 100644
--- a/src/components/OidcVisualizer/types.tsx
+++ b/src/components/OidcVisualizer/types.tsx
@@ -13,4 +13,5 @@ export type OidcSettings = {
   clientSecret: string;
   scope: string;
   pkJwtAuth: boolean;
+  acrValues?: string[];
 };