{"id":77,"date":"2026-05-28T10:18:33","date_gmt":"2026-05-28T10:18:33","guid":{"rendered":"https:\/\/netguide.io\/tools\/?p=77"},"modified":"2026-05-28T10:18:34","modified_gmt":"2026-05-28T10:18:34","slug":"jwt-debugger-generator-2","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/en\/jwt-debugger-generator-2\/","title":{"rendered":"JWT Debugger &amp; Generator"},"content":{"rendered":"<div id=\"netgu-1053057503\" class=\"netgu-before-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"3494115342\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n<div class=\"wp-jwt-container\">\n    <h3 class=\"wp-jwt-title\">JWT Debugger &#038; Generator<\/h3>\n\n    <div class=\"wp-jwt-main-grid\">\n        <div class=\"wp-jwt-column\">\n            <div class=\"wp-jwt-group\">\n                <label>Encoded JWT Token<\/label>\n                <textarea id=\"jwt-encoded\" class=\"jwt-code-font\" placeholder=\"Paste or edit token here...\" oninput=\"decodeJWT()\"><\/textarea>\n            <\/div>\n            <div class=\"wp-jwt-footer-actions\">\n                <button onclick=\"copyJWT()\" id=\"btn-copy-jwt\">Copy Token<\/button>\n                <button onclick=\"clearJWT()\" class=\"btn-danger\">Clear<\/button>\n            <\/div>\n            <div id=\"wp-jwt-error\" class=\"wp-jwt-warning-box\" style=\"display:none;\">Invalid JWT format!<\/div>\n        <\/div>\n\n        <div class=\"wp-jwt-column\">\n            <div class=\"wp-jwt-group\">\n                <label style=\"color: #d63638;\">Header (Algorithm &#038; Token Type)<\/label>\n                <textarea id=\"jwt-header\" class=\"jwt-code-font jwt-border-header\" placeholder=\"{}\" oninput=\"encodeJWT()\"><\/textarea>\n            <\/div>\n            \n            <div class=\"wp-jwt-group\">\n                <label style=\"color: #9b51e0;\">Payload (Data \/ Claims)<\/label>\n                <textarea id=\"jwt-payload\" class=\"jwt-code-font jwt-border-payload\" placeholder=\"{}\" oninput=\"encodeJWT()\"><\/textarea>\n            <\/div>\n\n            <div id=\"jwt-meta-box\" class=\"wp-jwt-meta-info\" style=\"display:none;\">\n                <strong>Token Timestamps:<\/strong>\n                <div id=\"jwt-meta-content\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .wp-jwt-container { max-width: 100%; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 10px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; }\n        .wp-jwt-title { margin: 0 0 15px 0; color: #2271b1; font-size: 1.4rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }\n        \n        .wp-jwt-main-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }\n        @media (max-width: 768px) { .wp-jwt-main-grid { grid-template-columns: 1fr; } }\n        \n        .wp-jwt-group { margin-bottom: 15px; }\n        .wp-jwt-group label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; color: #666; }\n        \n        .jwt-code-font { width: 100%; font-family: 'Courier New', Courier, monospace; font-size: 13px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; resize: vertical; }\n        #jwt-encoded { height: 355px; background: #fafafa; color: #333; line-break: anywhere; }\n        #jwt-header { height: 90px; }\n        #jwt-payload { height: 180px; }\n        \n        \/* Colored Borders mimicking official JWT styling *\/\n        .jwt-border-header { border-left: 4px solid #d63638 !important; }\n        .jwt-border-payload { border-left: 4px solid #9b51e0 !important; }\n\n        .wp-jwt-warning-box { background: #fff5f5; color: #d63638; padding: 10px; border-radius: 5px; border: 1px solid #f8d7da; font-size: 12px; margin-top: 10px; font-weight: bold; }\n        .wp-jwt-meta-info { background: #f0f6fb; border: 1px solid #2271b1; padding: 10px; border-radius: 5px; font-size: 12px; color: #333; line-height: 1.4; }\n        .wp-jwt-meta-info strong { display: block; margin-bottom: 3px; color: #2271b1; text-transform: uppercase; font-size: 10px; }\n\n        .wp-jwt-footer-actions { display: flex; gap: 10px; margin-top: 10px; }\n        .wp-jwt-footer-actions button { padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.2s; }\n        #btn-copy-jwt { background: #46b450; color: #fff; flex-grow: 2; }\n        .btn-danger { background: #fff; color: #d63638; border: 1px solid #d63638 !important; }\n    <\/style>\n\n    <script>\n        \/\/ Base64Url Helper Functions\n        function base64UrlDecode(str) {\n            str = str.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n            while (str.length % 4) str += '=';\n            return decodeURIComponent(atob(str).split('').map(function(c) {\n                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n            }).join(''));\n        }\n\n        function base64UrlEncode(str) {\n            var base64 = btoa(encodeURIComponent(str).replace(\/%([0-9A-F]{2})\/g, function(match, p1) {\n                return String.fromCharCode(parseInt(p1, 16));\n            }));\n            return base64.replace(\/=\/g, '').replace(\/\\+\/g, '-').replace(\/\\\/\/g, '_');\n        }\n\n        function decodeJWT() {\n            var token = document.getElementById('jwt-encoded').value.trim();\n            var errorBox = document.getElementById('wp-jwt-error');\n            var metaBox = document.getElementById('jwt-meta-box');\n            \n            errorBox.style.display = \"none\";\n            if (!token) return;\n\n            var parts = token.split('.');\n            if (parts.length < 2 || parts.length > 3) {\n                errorBox.style.display = \"block\";\n                return;\n            }\n\n            try {\n                var headerDecoded = base64UrlDecode(parts[0]);\n                var payloadDecoded = base64UrlDecode(parts[1]);\n\n                \/\/ Format JSON strings nicely\n                document.getElementById('jwt-header').value = JSON.stringify(JSON.parse(headerDecoded), null, 2);\n                document.getElementById('jwt-payload').value = JSON.stringify(JSON.parse(payloadDecoded), null, 2);\n                \n                \/\/ Extract Timestamps info\n                parseJwtMeta(JSON.parse(payloadDecoded));\n            } catch (e) {\n                errorBox.style.display = \"block\";\n            }\n        }\n\n        function encodeJWT() {\n            var headerVal = document.getElementById('jwt-header').value.trim();\n            var payloadVal = document.getElementById('jwt-payload').value.trim();\n            var errorBox = document.getElementById('wp-jwt-error');\n            errorBox.style.display = \"none\";\n\n            try {\n                \/\/ Validate JSON syntax before encoding\n                var headerObj = JSON.parse(headerVal);\n                var payloadObj = JSON.parse(payloadVal);\n\n                var eHeader = base64UrlEncode(JSON.stringify(headerObj));\n                var ePayload = base64UrlEncode(JSON.stringify(payloadObj));\n                \n                \/\/ Append a dummy signature for structural presentation (since signature requires server keys)\n                var dummySignature = \"SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c\"; \n                \n                document.getElementById('jwt-encoded').value = eHeader + \".\" + ePayload + \".\" + dummySignature;\n                parseJwtMeta(payloadObj);\n            } catch (e) {\n                \/\/ Don't throw giant errors while typing unfinished JSON\n            }\n        }\n\n        function parseJwtMeta(payload) {\n            var metaBox = document.getElementById('jwt-meta-box');\n            var metaContent = document.getElementById('jwt-meta-content');\n            var html = \"\";\n\n            if (payload.iat) {\n                html += \"\u2022 <strong>Issued At (iat):<\/strong> \" + new Date(payload.iat * 1000).toLocaleString() + \"<br>\";\n            }\n            if (payload.exp) {\n                var expDate = new Date(payload.exp * 1000);\n                var isExpired = expDate < new Date();\n                var colorStyle = isExpired ? \"color: #d63638; font-weight: bold;\" : \"\";\n                html += \"\u2022 <strong>Expires At (exp):<\/strong> <span style='\" + colorStyle + \"'>\" + expDate.toLocaleString() + (isExpired ? \" (EXPIRED)\" : \"\") + \"<\/span><br>\";\n            }\n\n            if (html) {\n                metaContent.innerHTML = html;\n                metaBox.style.display = \"block\";\n            } else {\n                metaBox.style.display = \"none\";\n            }\n        }\n\n        function copyJWT() {\n            var out = document.getElementById('jwt-encoded');\n            if (!out.value) return;\n            navigator.clipboard.writeText(out.value).then(function() {\n                var btn = document.getElementById('btn-copy-jwt');\n                var old = btn.innerText;\n                btn.innerText = 'Copied!';\n                setTimeout(function() { btn.innerText = old; }, 2000);\n            });\n        }\n\n        function clearJWT() {\n            document.getElementById('jwt-encoded').value = \"\";\n            document.getElementById('jwt-header').value = \"\";\n            document.getElementById('jwt-payload').value = \"\";\n            document.getElementById('jwt-meta-box').style.display = \"none\";\n            document.getElementById('wp-jwt-error').style.display = \"none\";\n        }\n\n        \/\/ Setup default demo values on load\n        window.addEventListener('load', function() {\n            var demoToken = \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjI1Mjc0NTAwMDB9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c\";\n            document.getElementById('jwt-encoded').value = demoToken;\n            decodeJWT();\n        });\n    <\/script>\n<\/div>\n\n\n<div id=\"netgu-4143057833\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<!-- NetGuide.io-After-Widget-Tools -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-6258556257245998\"\r\n     data-ad-slot=\"5175852350\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Specs &amp; Best Practices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Standard Reserved Claims<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When building APIs (with Node.js, Python, PHP, etc.), developers utilize standard keys inside the <strong>Payload<\/strong> to regulate access control:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>sub<\/code> (Subject): The unique identifier for the user (e.g., User ID).<\/li>\n\n\n\n<li><code>iat<\/code> (Issued At): The exact Unix timestamp when the token was generated.<\/li>\n\n\n\n<li><code>exp<\/code> (Expiration Time): The Unix timestamp defining when the token becomes invalid.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Note on Signing:<\/strong> This frontend debugger allows you to edit and structurally construct tokens. However, the resulting third component (the Signature) is generated using a client-side dummy value. In a production backend ecosystem, always use proven cryptographic libraries (like <code>jsonwebtoken<\/code> for Node or <code>PyJWT<\/code> for Python) along with a robust environmental secret key (<code>JWT_SECRET<\/code>) to securely sign tokens.<\/p>\n<\/blockquote>\n<div id=\"netgu-2482859261\" class=\"netgu-after-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"4559785002\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>JWT Debugger &#038; Generator Encoded JWT Token Copy Token Clear Invalid JWT format! Header (Algorithm &#038; Token Type) Payload (Data [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[101,131],"tags":[128,134],"class_list":["post-77","post","type-post","status-publish","format-standard","hentry","category-generator","category-validator-en","tag-debugger","tag-generator-en"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":1,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/77\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}