public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(new tool): JWT Generator

Browse Source 
Fix #1309
This commit is contained in:
sharevb 2025-01-12 22:28:49 +01:00 committed by ShareVB
parent 08d977b8cd
commit c23a129941
17 changed files with 6871 additions and 8143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc-auto-import.json
View File

@ -286,6 +286,9 @@
"watchTriggerable": true,
"watchWithFilter": true,
"whenever": true,
"toValue": true
"toValue": true,
"injectLocal": true,
"provideLocal": true,
"useClipboardItems": true
}
}

9
auto-imports.d.ts vendored
View File

@ -36,6 +36,7 @@ declare global {
const h: typeof import('vue')['h']
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
const inject: typeof import('vue')['inject']
const injectLocal: typeof import('@vueuse/core')['injectLocal']
const isDefined: typeof import('@vueuse/core')['isDefined']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
@ -65,6 +66,7 @@ declare global {
const onUpdated: typeof import('vue')['onUpdated']
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
const provide: typeof import('vue')['provide']
const provideLocal: typeof import('@vueuse/core')['provideLocal']
const reactify: typeof import('@vueuse/core')['reactify']
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
const reactive: typeof import('vue')['reactive']
@ -128,6 +130,7 @@ declare global {
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
const useCached: typeof import('@vueuse/core')['useCached']
const useClipboard: typeof import('@vueuse/core')['useClipboard']
const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
const useCloned: typeof import('@vueuse/core')['useCloned']
const useColorMode: typeof import('@vueuse/core')['useColorMode']
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@ -326,6 +329,7 @@ declare module 'vue' {
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@ -355,6 +359,7 @@ declare module 'vue' {
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@ -418,6 +423,7 @@ declare module 'vue' {
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@ -610,6 +616,7 @@ declare module '@vue/runtime-core' {
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@ -639,6 +646,7 @@ declare module '@vue/runtime-core' {
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@ -702,6 +710,7 @@ declare module '@vue/runtime-core' {
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>

9
components.d.ts vendored
View File

@ -114,6 +114,7 @@ declare module '@vue/runtime-core' {
JsonToXml: typeof import('./src/tools/json-to-xml/json-to-xml.vue')['default']
JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
JwtGenerator: typeof import('./src/tools/jwt-generator/jwt-generator.vue')['default']
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
@ -129,19 +130,23 @@ declare module '@vue/runtime-core' {
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
NAlert: typeof import('naive-ui')['NAlert']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDivider: typeof import('naive-ui')['NDivider']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NH1: typeof import('naive-ui')['NH1']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NSpace: typeof import('naive-ui')['NSpace']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NTable: typeof import('naive-ui')['NTable']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

1
package.json
View File

@ -70,6 +70,7 @@
"highlight.js": "^11.7.0",
"iarna-toml-esm": "^3.0.5",
"ibantools": "^4.3.3",
"jose": "^5.9.6",
"js-base64": "^3.7.6",
"json5": "^2.2.3",
"jwt-decode": "^3.1.2",

14611
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

42
src/components/TextareaCopyable.vue
View File

@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
import xmlHljs from 'highlight.js/lib/languages/xml';
import yamlHljs from 'highlight.js/lib/languages/yaml';
import iniHljs from 'highlight.js/lib/languages/ini';
import bashHljs from 'highlight.js/lib/languages/bash';
import markdownHljs from 'highlight.js/lib/languages/markdown';
import jsHljs from 'highlight.js/lib/languages/javascript';
import cssHljs from 'highlight.js/lib/languages/css';
import goHljs from 'highlight.js/lib/languages/go';
import csharpHljs from 'highlight.js/lib/languages/csharp';
import { Base64 } from 'js-base64';
import { useCopy } from '@/composable/copy';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
const props = withDefaults(
defineProps<{
@ -17,12 +24,17 @@ const props = withDefaults(
language?: string
copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
copyMessage?: string
wordWrap?: boolean
downloadFileName?: string
downloadButtonText?: string
}>(),
{
followHeightOf: null,
language: 'txt',
copyPlacement: 'top-right',
copyMessage: 'Copy to clipboard',
downloadFileName: '',
downloadButtonText: 'Download',
},
);
hljs.registerLanguage('sql', sqlHljs);
@ -31,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
hljs.registerLanguage('xml', xmlHljs);
hljs.registerLanguage('yaml', yamlHljs);
hljs.registerLanguage('toml', iniHljs);
hljs.registerLanguage('bash', bashHljs);
hljs.registerLanguage('markdown', markdownHljs);
hljs.registerLanguage('css', cssHljs);
hljs.registerLanguage('javascript', jsHljs);
hljs.registerLanguage('go', goHljs);
hljs.registerLanguage('csharp', csharpHljs);
const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
const valueBase64 = computed(() => Base64.encode(value.value));
const { download } = useDownloadFileFromBase64(
{
source: valueBase64,
filename: downloadFileName,
});
</script>
<template>
@ -49,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
:style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
>
<n-config-provider :hljs="hljs">
<n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
<n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
</n-config-provider>
</n-scrollbar>
<div absolute right-10px top-10px>
<c-tooltip v-if="value" :tooltip="tooltipText" position="left">
<div
v-if="value && copyPlacement !== 'none'"
absolute right-10px
:top-10px="copyPlacement === 'top-right' ? '' : 'no'"
:bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
>
<c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
<c-button circle important:h-10 important:w-10 @click="copy()">
<n-icon size="22" :component="Copy" />
</c-button>
@ -65,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
{{ tooltipText }}
</c-button>
</div>
<div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
<c-button secondary @click="download">
{{ downloadButtonText }}
</c-button>
</div>
</div>
</template>

27
src/composable/downloadBase64.ts
View File

@ -1,6 +1,7 @@
import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
import type { Ref } from 'vue';
import type { MaybeRef, Ref } from 'vue';
import _ from 'lodash';
import { get } from '@vueuse/core';
export {
getMimeTypeFromBase64,
@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
}
function useDownloadFileFromBase64(
{ source, filename, extension, fileMimeType }:
{ source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
return {
download() {
downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
},
};
}
function useDownloadFileFromBase64Refs(
{ source, filename, extension }:
{ source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
{ source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
return {
download() {
downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
},
};
}
@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {
return img;
}
function useDownloadFileFromBase64Refs(
{ source, filename, extension }:
{ source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
return {
download() {
downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
},
};
}

2
src/modules/command-palette/command-palette.vue
View File

@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
<c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
<div v-for="(options, category) in filteredSearchResult" :key="category">
<div ml-3 mt-3 text-sm font-bold text-primary op-60>
<div ml-3 mt-3 text-sm text-primary font-bold op-60>
{{ category }}
</div>
<command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />

2
src/tools/index.ts
View File

@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
import { tool as base64StringConverter } from './base64-string-converter';
import { tool as basicAuthGenerator } from './basic-auth-generator';
import { tool as emailNormalizer } from './email-normalizer';
import { tool as jwtGenerator } from './jwt-generator';
import { tool as asciiTextDrawer } from './ascii-text-drawer';
@ -130,6 +131,7 @@ export const toolsByCategory: ToolCategory[] = [
otpCodeGeneratorAndValidator,
mimeTypes,
jwtParser,
jwtGenerator,
keycodeInfo,
slugifyString,
htmlWysiwygEditor,

29
src/tools/jwt-generator/index.ts Normal file
View File

@ -0,0 +1,29 @@
import { Key } from '@vicons/tabler';
import { defineTool } from '../tool';
export const tool = defineTool({
name: 'JWT Generator',
path: '/jwt-generator',
description: 'JWT Token generator and editor',
keywords: [
'jwt',
'generator',
'editor',
'encode',
'typ',
'alg',
'iss',
'sub',
'aud',
'exp',
'nbf',
'iat',
'jti',
'json',
'web',
'token',
],
component: () => import('./jwt-generator.vue'),
icon: Key,
createdAt: new Date('2024-08-15'),
});

15
src/tools/jwt-generator/jwt-generator.constants.ts Normal file
View File

@ -0,0 +1,15 @@
export const jwsAlgorithms = [
{ alg: 'HS256', keyDesc: '256 bit (32 byte) secret', key: 'secret', verify: 'HMAC-SHA256' },
{ alg: 'HS384', keyDesc: '384 bit (48 byte) secret', key: 'secret', verify: 'HMAC-SHA384' },
{ alg: 'HS512', keyDesc: '512 bit (64 byte) secret', key: 'secret', verify: 'HMAC-SHA512' },
{ alg: 'ES256', keyDesc: 'NIST P-256 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA256' },
{ alg: 'ES256K', keyDesc: 'secp256k1 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA256(secp256k1)' },
{ alg: 'ES384', keyDesc: 'NIST P-384 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA384' },
{ alg: 'ES512', keyDesc: 'NIST P-521 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA512' },
{ alg: 'PS256', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-PSS-SHA256' },
{ alg: 'PS384', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-PSS-SHA384' },
{ alg: 'PS512', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-PSS-SHA512' },
{ alg: 'RS256', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-SHA256' },
{ alg: 'RS384', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-SHA384' },
{ alg: 'RS512', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-SHA512' },
];

187
src/tools/jwt-generator/jwt-generator.vue Normal file
View File

@ -0,0 +1,187 @@
<script setup lang="ts">
import * as jose from 'jose';
import { type KeyLike } from 'jose';
import JSON5 from 'json5';
import { jwsAlgorithms } from './jwt-generator.constants';
import { useValidation } from '@/composable/validation';
import { useQueryParamOrStorage } from '@/composable/queryParams';
const payload = ref(`{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}`);
const alg = useQueryParamOrStorage({ name: 'alg', storageName: 'jwt-gen:alg', defaultValue: 'HS512' });
const algInfo = computed(() => jwsAlgorithms.find(a => a.alg === alg.value) || { alg: 'UNK', keyDesc: '', key: 'secret', verify: '' });
const isSecret = computed(() => algInfo.value.key === 'secret');
const secret = ref('');
const publicKeyPEM = ref('');
const publicKeyJWK = ref('');
const privateKeyJWK = ref('');
const privateKeyPEM = ref('');
watch(publicKeyPEM, async (newValue) => {
try {
publicKeyJWK.value = JSON.stringify(await jose.exportJWK(await jose.importSPKI(newValue, alg.value, { extractable: true })), null, 2);
}
catch {
}
}, { immediate: true });
watch(privateKeyPEM, async (newValue) => {
try {
privateKeyJWK.value = JSON.stringify(await jose.exportJWK(await jose.importPKCS8(newValue, alg.value, { extractable: true })), null, 2);
}
catch {
}
}, { immediate: true });
watch(publicKeyJWK, async (newValue) => {
try {
publicKeyPEM.value = await jose.exportSPKI(await jose.importJWK({ ...JSON.parse(newValue), ...{ ext: true } }, alg.value) as KeyLike);
}
catch {
}
}, { immediate: true });
watch(privateKeyJWK, async (newValue) => {
try {
privateKeyPEM.value = await jose.exportPKCS8(await jose.importJWK({ ...JSON.parse(newValue), ...{ ext: true } }, alg.value) as KeyLike);
}
catch {
}
}, { immediate: true });
watchEffect(async () => {
if (isSecret.value) {
secret.value = 'your-secret';
privateKeyJWK.value = '';
publicKeyJWK.value = '';
privateKeyPEM.value = '';
publicKeyPEM.value = '';
}
else {
const { publicKey, privateKey } = await jose.generateKeyPair(alg.value, { extractable: true });
privateKeyJWK.value = JSON.stringify(await jose.exportJWK(privateKey), null, 2);
publicKeyJWK.value = JSON.stringify(await jose.exportJWK(publicKey), null, 2);
privateKeyPEM.value = await jose.exportPKCS8(privateKey);
publicKeyPEM.value = await jose.exportSPKI(publicKey);
}
});
const header = computed(() => JSON.stringify({ alg: alg.value, typ: 'JWT' }, null, 2));
const encodedJWT = computedAsync(async () => {
const isSecretValue = isSecret.value;
const secretValue = secret.value;
const privateKeyValue = privateKeyJWK.value;
const algValue = alg.value;
const payloadValue = payload.value;
try {
let privateKeyOrSecret;
if (isSecretValue) {
privateKeyOrSecret = new TextEncoder().encode(secretValue);
}
else {
privateKeyOrSecret = await jose.importJWK(JSON.parse(privateKeyValue), algValue);
}
return {
token: await (new jose.SignJWT(JSON5.parse(payloadValue))
.setProtectedHeader({ alg: algValue })
.sign(privateKeyOrSecret)),
error: '',
};
}
catch (e: any) {
return { error: e.toString(), token: '' };
}
});
const jsonInputValidation = useValidation({
source: payload,
rules: [
{
message: 'Invalid JSON string',
validator: value => JSON5.parse(value),
},
],
});
</script>
<template>
<div>
<c-select
v-model:value="alg"
:options="jwsAlgorithms.map(a => ({ value: a.alg, label: `${a.alg}: ${a.verify}` }))"
placeholder="Algorithms"
mb-2
/>
<n-form-item label="Description:" label-placement="left" mb-2>
{{ algInfo.alg }}: {{ algInfo.keyDesc }} (verify with {{ algInfo.verify }})
</n-form-item>
<c-card title="Token Content" mb-2>
<n-form-item label="Header:">
<textarea-copyable :value="header" language="json" />
</n-form-item>
<c-input-text
v-model:value="payload"
label="Payload:"
multiline
rows="5"
autosize
placeholder="JSON payload"
:validation="jsonInputValidation"
/>
</c-card>
<c-card :title="isSecret ? 'Token Secret' : 'Token Keys'" mb-2>
<c-input-text v-if="isSecret" v-model:value="secret" />
<div v-if="!isSecret">
<n-form-item label="Public Key (PEM):">
<c-input-text
v-model:value="publicKeyPEM"
multiline
rows="5"
autosize
/>
</n-form-item>
<n-form-item label="Private Key (PEM):">
<c-input-text
v-model:value="privateKeyPEM"
multiline
rows="5"
autosize
/>
</n-form-item>
<n-divider />
<n-form-item label="Public Key (JWK):">
<c-input-text
v-model:value="publicKeyJWK"
multiline
rows="5"
autosize
/>
</n-form-item>
<n-form-item label="Private Key (JWK):">
<c-input-text
v-model:value="privateKeyJWK"
multiline
rows="5"
autosize
/>
</n-form-item>
</div>
</c-card>
<c-card v-if="encodedJWT" title="Generated JWT Token:" mb-2>
<textarea-copyable v-if="encodedJWT.token" :value="encodedJWT.token" word-wrap />
<c-alert v-if="encodedJWT.error">
{{ encodedJWT.error }}
</c-alert>
</c-card>
</div>
</template>

5
src/tools/jwt-parser/index.ts
View File

@ -1,11 +1,10 @@
import { Key } from '@vicons/tabler';
import { defineTool } from '../tool';
import { translate } from '@/plugins/i18n.plugin';
export const tool = defineTool({
name: translate('tools.jwt-parser.title'),
name: 'JWT parser',
path: '/jwt-parser',
description: translate('tools.jwt-parser.description'),
description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
keywords: [
'jwt',
'parser',

8
src/tools/jwt-parser/jwt-parser.service.ts
View File

@ -2,7 +2,11 @@ import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
import _ from 'lodash';
import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';
export { decodeJwt };
export { decodeJwt, getJwtAlgorithm };
function getJwtAlgorithm({ jwt }: { jwt: string }) {
return jwtDecode<JwtHeader>(jwt, { header: true }).alg;
}
function decodeJwt({ jwt }: { jwt: string }) {
const rawHeader = jwtDecode<JwtHeader>(jwt, { header: true });
@ -19,7 +23,7 @@ function decodeJwt({ jwt }: { jwt: string }) {
function parseClaims({ claim, value }: { claim: string; value: unknown }) {
const claimDescription = CLAIM_DESCRIPTIONS[claim];
const formattedValue = _.isPlainObject(value) || _.isArray(value) ? JSON.stringify(value, null, 3) : _.toString(value);
const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
const friendlyValue = getFriendlyValue({ claim, value });
return {

58
src/tools/jwt-parser/jwt-parser.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts">
import { decodeJwt } from './jwt-parser.service';
import * as jose from 'jose';
import JSON5 from 'json5';
import { decodeJwt, getJwtAlgorithm } from './jwt-parser.service';
import { useValidation } from '@/composable/validation';
import { isNotThrowing } from '@/utils/boolean';
import { withDefaultOnError } from '@/utils/defaults';
@ -26,6 +28,41 @@ const validation = useValidation({
},
],
});
const secretOrPublicKey = ref('');
const signatureVerification = computedAsync(async () => {
const secretOrPublicKeyValue = secretOrPublicKey.value?.trim();
if (!secretOrPublicKeyValue) {
return { error: 'No secret or key provided' };
}
const jwt = rawJwt.value?.trim();
if (!jwt) {
return { error: 'No JWT token provided' };
}
try {
const alg = getJwtAlgorithm({ jwt }) || 'unk';
if (secretOrPublicKeyValue.startsWith('{')) {
const jwk = JSON5.parse(secretOrPublicKeyValue);
const publicKey = await jose.importJWK(jwk, alg);
await jose.jwtVerify(jwt, publicKey);
}
else if (secretOrPublicKeyValue.includes('-----BEGIN PUBLIC KEY-----')) {
const publicKey = await jose.importSPKI(secretOrPublicKeyValue, alg);
await jose.jwtVerify(jwt, publicKey);
}
else {
const secret = new TextEncoder().encode(secretOrPublicKeyValue);
await jose.jwtVerify(jwt, secret);
}
return { error: '' };
}
catch (e: any) {
return { error: `Key or secret or verification error: ${e.toString()}` };
}
});
</script>
<template>
@ -39,7 +76,7 @@ const validation = useValidation({
{{ section.title }}
</th>
<tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
<td class="claims" style="vertical-align: top;">
<td class="claims">
<span font-bold>
{{ claim }}
</span>
@ -47,7 +84,7 @@ const validation = useValidation({
({{ claimDescription }})
</span>
</td>
<td style="word-wrap: break-word;word-break: break-all;">
<td>
<span>{{ value }}</span>
<span v-if="friendlyValue" ml-2 op-70>
({{ friendlyValue }})
@ -57,6 +94,21 @@ const validation = useValidation({
</template>
</tbody>
</n-table>
<c-card title="Signature Validation">
<c-input-text
v-model:value="secretOrPublicKey" label="Secret or Public Key (SPKI or JWK)"
placeholder="Put your secret or Public key here..." rows="5" multiline raw-text autofocus mb-3
/>
<c-alert v-if="signatureVerification?.error">
{{ signatureVerification.error }}
</c-alert>
<n-alert v-if="!signatureVerification?.error" type="success">
Signature verified
</n-alert>
</c-card>
</c-card>
</template>

2
src/ui/c-select/c-select.vue
View File

@ -151,7 +151,7 @@ function onSearchInput() {
>
<div flex-1 truncate>
<slot name="displayed-value">
<input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
<input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
<span v-else-if="selectedOption" lh-normal>
{{ selectedOption.label }}
</span>

2
src/ui/c-table/c-table.vue
View File

@ -39,7 +39,7 @@ const headers = computed(() => {
<template>
<div class="relative overflow-x-auto rounded">
<table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
<thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
<thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
<tr>
<th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
{{ header.label }}