logo

I code dreams

Tools

Input

Paste your JWT here. Everything is client-side, so nothing to worry about.

This page can be added to your favorites anytime (see up-to-date URL).

Output

JWTs have three parts.

The Code


const descriptions = {
    alg: 'Message authentication code (MAC) algorithm',
    auth_time: 'Time of Authentication',
    amr: 'Authentication Methods References',
    aud: 'Audience',
    client_id: 'Client Identifier',
    cty: 'Content Type',
    exp: 'Expiration Time',
    iat: 'Issued At',
    idp: 'Identity Provider',
    iss: 'Issuer',
    jwt: 'JWT ID',
    kid: 'Key Identifier',
    kty: 'Key Type ()',
    name: 'Full Name',
    nbf: 'Not Before',
    scope: 'Scope Values',
    sub: 'Subject',
    typ: 'Token type',
    use: 'sig(nature) / enc(ryption)',
    x5c: 'X.509 Certificate Chain',
    x5t: 'X.509 Certificate Thumbprint',

    e: 'Public key component RSA',
    n: 'Public key component RSA',
    x: 'Public key component Elliptic Curve',
    y: 'Public key component Elliptic Curve',
}


const render = (data, part) => {
    const table = document.createElement('table')
    table.innerHTML = `<caption>${part}</caption><tr><th>Property</th><th>Value</th></tr>`
    table.classList.add('jwt-decoder')

    for (let [property, value] of Object.entries(data)) {
        // detect dates (educated guess)
        if (Number.isInteger(value)
            && value * 1000 > new Date(1974, 10 - 1, 11)
            && value * 1000 < new Date(2050, 0, 1)) {
            value = new Date(value * 1000).toLocaleString()
        }

        // render row
        const row = table.insertRow()
        row.insertCell().innerHTML = `<strong></strong><br><small></small>`
        row.insertCell().innerText = typeof value == 'object' ? JSON.stringify(value) : value
        row.childNodes[0].querySelector('strong').innerText = property
        row.childNodes[0].querySelector('small').innerText = descriptions[property] || ''
    }

    const output = document.querySelector('.output')
    output.appendChild(table)
}

const renderJSON = data => {
    const pre = document.createElement('pre')
    const lines = data.split('\n')
    for(const line of lines) {
        const code = document.createElement('code')
        code.textContent = line + '\n'
        pre.appendChild(code)
    }

    const output = document.querySelector('.output')
    output.appendChild(pre)
}

const update = async jwt => {
    // push history
    history.replaceState(null, document.title, '?token=' + jwt)

    // clear all previous tables
    const output = document.querySelector('.output')
    output.innerHTML = '<p class="text-danger">invalid JWT</p>'

    // split JWT
    const parts = jwt.split('.')

    // extract the header, payload and signature
    const [header, payload, signature] = [
        JSON.parse(atob(parts[0])),
        JSON.parse(atob(parts[1])),
        parts[2]            // FIXME *can* be base64 encoded
    ]

    const secret = document.querySelector('input[name="secret"]').value

    // render JWT
    output.textContent = ''
    render(header, '1. header')
    render(payload, '2. payload')
    render({ signature }, '3. signature')
    renderJSON(JSON.stringify(header, null, 4))
    renderJSON(JSON.stringify(payload, null, 4))
    // TODO raw JSON (tab?)
    // renderJSON(atob(parts[0]))
    // renderJSON(atob(parts[1]))

    // verify header + payload
    const data = new TextEncoder().encode(`${parts[0]}.${parts[1]}`)
    const key = await crypto.subtle.importKey('jwk', secret, {
        name: 'RSASSA-PKCS1-v1_5',      // or HMAC?
        hash: { name: header.alg }
    }, false, ['verify'])

    const isValid = await crypto.subtle.verify({ name: 'prRSASSA-PKCS1-v1_5' }, key, signature, data)
    document.querySelector('.signature td-something').textContent =
        valid ? '<span class="text-success">✔</span>' : '<span class="text-danger">✖</span>'
}


// init
const params = new URLSearchParams(document.location.search)
const jwt = params.get('jwt') || params.get('token')
if (jwt) {
    document.querySelector('textarea').value = jwt
}

update(document.querySelector('textarea').value)
jwt-decoder.js