@rashidv/jwt-decoder 1.0.0

package/.github/workflows/publish-jwt-decoder.yml

@@ -0,0 +1,40 @@
+name: Publish JWT Decoder to npm
+
+on:
+  push:
+    tags:
+      - "jwt-decoder-v1.0.0"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: packages/jwt-decoder
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm build
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/publish.yml

@@ -0,0 +1,36 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'  # Triggers on tags like v1.0.0, v1.0.1, etc.
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm build
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Muhammed Rashid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# JWT Decoder & Expiry Checker
+
+> Free, open-source JWT decoder with live expiry countdown. Better UX than jwt.io.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## 🎯 Features
+
+- **Decode JWT Tokens** - Instantly decode header and payload
+- **Live Countdown** - Real-time expiry countdown timer
+- **Timezone Support** - Shows expiry in your local timezone
+- **Visual Indicators** - Color-coded status (valid/expired/expiring soon)
+- **Privacy First** - All decoding happens in your browser
+- **Copy to Clipboard** - Quick copy for header/payload
+- **Zero Dependencies** - Lightweight and fast
+
+## 🚀 Demo
+
+Try it live: [https://rashidv.dev/tools/jwt-decoder](https://rashidv.dev/tools/jwt-decoder)
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @rashidv/jwt-decoder
+
+# pnpm
+pnpm add @rashidv/jwt-decoder
+
+# yarn
+yarn add @rashidv/jwt-decoder
+```
+
+## 🔧 Usage
+
+### As a React Component
+
+```tsx
+import { JWTDecoder } from '@rashidv/jwt-decoder';
+
+export default function MyPage() {
+  return (
+    <div>
+      <h1>JWT Decoder</h1>
+      <JWTDecoder />
+    </div>
+  );
+}
+```
+
+### Using Individual Components
+
+```tsx
+import { TokenInput, DecodedView, ExpiryTimer } from '@rashidv/jwt-decoder';
+import { decodeToken, validateToken } from '@rashidv/jwt-decoder';
+
+// Your custom implementation
+```
+
+## 🎨 Styling
+
+The components use Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project.
+
+## 📖 API
+
+### `JWTDecoder`
+
+Main component that includes all functionality.
+
+### `TokenInput`
+
+Input component for pasting JWT tokens.
+
+**Props:**
+- `onTokenChange: (token: string) => void` - Callback when token changes
+- `error?: string` - Error message to display
+
+### `DecodedView`
+
+Displays decoded header and payload.
+
+**Props:**
+- `decoded: DecodedJWT` - Decoded JWT object
+
+### `ExpiryTimer`
+
+Shows expiry status and countdown.
+
+**Props:**
+- `validation: JWTValidation` - Validation result
+
+### Utility Functions
+
+```typescript
+// Decode a JWT token
+const decoded = decodeToken(token);
+
+// Validate and check expiration
+const validation = validateToken(decoded);
+
+// Get time remaining
+const timeRemaining = getTimeRemaining(validation.expiresAt);
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📝 License
+
+MIT © [Muhammed Rashid](https://rashidv.dev)
+
+## 🔗 Links
+
+- **Live Demo:** [rashidv.dev/tools/jwt-decoder](https://rashidv.dev/tools/jwt-decoder)
+- **GitHub:** [github.com/rashidrashiii/jwt-decoder](https://github.com/rashidrashiii/jwt-decoder)
+- **npm:** [@rashidv/jwt-decoder](https://www.npmjs.com/package/@rashidv/jwt-decoder)
+
+## 👨‍💻 Author
+
+**Muhammed Rashid**
+- Website: [rashidv.dev](https://rashidv.dev)
+- GitHub: [@rashidrashiii](https://github.com/rashidrashiii)
+- LinkedIn: [muhammed-rashid-v](https://linkedin.com/in/muhammed-rashid-v)
+
+---
+
+Made with ❤️ by [Rashid](https://rashidv.dev)

package/dist/components/DecodedView.d.ts

@@ -0,0 +1,7 @@
+import type { DecodedJWT } from '../lib/jwt';
+interface DecodedViewProps {
+    decoded: DecodedJWT;
+}
+export declare function DecodedView({ decoded }: DecodedViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DecodedView.d.ts.map

package/dist/components/DecodedView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecodedView.d.ts","sourceRoot":"","sources":["../../src/components/DecodedView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,UAAU,gBAAgB;IACxB,OAAO,EAAE,UAAU,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAgDxD"}

package/dist/components/DecodedView.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatJSON, copyToClipboard } from '../lib/utils';
+export function DecodedView({ decoded }) {
+    const [copiedSection, setCopiedSection] = useState(null);
+    const handleCopy = async (section) => {
+        const data = section === 'header' ? decoded.header : decoded.payload;
+        const success = await copyToClipboard(formatJSON(data));
+        if (success) {
+            setCopiedSection(section);
+            setTimeout(() => setCopiedSection(null), 2000);
+        }
+    };
+    return (_jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "rounded-lg bg-white/5 border border-white/10 p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Header" }), _jsx("button", { onClick: () => handleCopy('header'), className: "text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors", children: copiedSection === 'header' ? '✓ Copied' : 'Copy' })] }), _jsx("pre", { className: "text-xs text-gray-300 overflow-x-auto", children: _jsx("code", { children: formatJSON(decoded.header) }) })] }), _jsxs("div", { className: "rounded-lg bg-white/5 border border-white/10 p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Payload" }), _jsx("button", { onClick: () => handleCopy('payload'), className: "text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors", children: copiedSection === 'payload' ? '✓ Copied' : 'Copy' })] }), _jsx("pre", { className: "text-xs text-gray-300 overflow-x-auto", children: _jsx("code", { children: formatJSON(decoded.payload) }) })] })] }));
+}
+//# sourceMappingURL=DecodedView.js.map

package/dist/components/DecodedView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecodedView.js","sourceRoot":"","sources":["../../src/components/DecodedView.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM3D,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAoB;IACvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA8B,IAAI,CAAC,CAAC;IAEtF,MAAM,UAAU,GAAG,KAAK,EAAE,OAA6B,EAAE,EAAE;QACzD,MAAM,IAAI,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC;QACrE,MAAM,OAAO,GAAG,MAAM,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QAExD,IAAI,OAAO,EAAE,CAAC;YACZ,gBAAgB,CAAC,OAAO,CAAC,CAAC;YAC1B,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aAExC,eAAK,SAAS,EAAC,kDAAkD,aAC/D,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,qCAAqC,uBAAY,EAC/D,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EACnC,SAAS,EAAC,wFAAwF,YAEjG,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GAC1C,IACL,EACN,cAAK,SAAS,EAAC,uCAAuC,YACpD,yBAAO,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,GAAQ,GACrC,IACF,EAGN,eAAK,SAAS,EAAC,kDAAkD,aAC/D,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,qCAAqC,wBAAa,EAChE,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EACpC,SAAS,EAAC,wFAAwF,YAEjG,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GAC3C,IACL,EACN,cAAK,SAAS,EAAC,uCAAuC,YACpD,yBAAO,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,GAAQ,GACtC,IACF,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/ExpiryTimer.d.ts

@@ -0,0 +1,7 @@
+import type { JWTValidation } from '../lib/jwt';
+interface ExpiryTimerProps {
+    validation: JWTValidation;
+}
+export declare function ExpiryTimer({ validation }: ExpiryTimerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExpiryTimer.d.ts.map

package/dist/components/ExpiryTimer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpiryTimer.d.ts","sourceRoot":"","sources":["../../src/components/ExpiryTimer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,UAAU,gBAAgB;IACxB,UAAU,EAAE,aAAa,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CAkG3D"}

package/dist/components/ExpiryTimer.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { getTimeRemaining, formatTimeRemaining } from '../lib/jwt';
+import { formatDate, formatRelativeTime } from '../lib/utils';
+export function ExpiryTimer({ validation }) {
+    const [timeRemaining, setTimeRemaining] = useState(null);
+    useEffect(() => {
+        if (!validation.expiresAt)
+            return;
+        const updateTimer = () => {
+            setTimeRemaining(getTimeRemaining(validation.expiresAt));
+        };
+        updateTimer();
+        const interval = setInterval(updateTimer, 1000);
+        return () => clearInterval(interval);
+    }, [validation.expiresAt]);
+    if (!validation.expiresAt) {
+        return (_jsx("div", { className: "rounded-lg bg-yellow-500/10 border border-yellow-500/20 p-4", children: _jsx("p", { className: "text-sm text-yellow-400", children: "\u26A0\uFE0F No expiration claim (exp) found in token" }) }));
+    }
+    const isExpired = validation.isExpired;
+    const isExpiringSoon = timeRemaining && timeRemaining.total > 0 && timeRemaining.total < 5 * 60 * 1000; // 5 minutes
+    return (_jsx("div", { className: `rounded-lg border p-4 ${isExpired
+            ? 'bg-red-500/10 border-red-500/20'
+            : isExpiringSoon
+                ? 'bg-yellow-500/10 border-yellow-500/20'
+                : 'bg-green-500/10 border-green-500/20'}`, children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-2xl", children: isExpired ? '🔴' : isExpiringSoon ? '🟡' : '🟢' }), _jsxs("div", { children: [_jsx("p", { className: `text-sm font-semibold ${isExpired ? 'text-red-400' : isExpiringSoon ? 'text-yellow-400' : 'text-green-400'}`, children: isExpired ? 'Expired' : isExpiringSoon ? 'Expiring Soon' : 'Valid' }), _jsx("p", { className: "text-xs text-gray-400", children: isExpired ? 'This token is no longer valid' : 'Token is currently valid' })] })] }), !isExpired && timeRemaining && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-lg", children: "\u23F1\uFE0F" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-white", children: formatTimeRemaining(timeRemaining) }), _jsx("p", { className: "text-xs text-gray-400", children: "Time remaining" })] })] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-lg", children: "\uD83D\uDCC5" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-white", children: formatDate(validation.expiresAt) }), _jsxs("p", { className: "text-xs text-gray-400", children: [isExpired ? 'Expired' : 'Expires', " ", formatRelativeTime(validation.expiresAt)] })] })] }), validation.issuedAt && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-lg", children: "\uD83D\uDD50" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-white", children: formatDate(validation.issuedAt) }), _jsxs("p", { className: "text-xs text-gray-400", children: ["Issued ", formatRelativeTime(validation.issuedAt)] })] })] }))] }) }));
+}
+//# sourceMappingURL=ExpiryTimer.js.map

package/dist/components/ExpiryTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpiryTimer.js","sourceRoot":"","sources":["../../src/components/ExpiryTimer.tsx"],"names":[],"mappings":"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"}

package/dist/components/JWTDecoder.d.ts

@@ -0,0 +1,2 @@
+export declare function JWTDecoder(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JWTDecoder.d.ts.map

package/dist/components/JWTDecoder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JWTDecoder.d.ts","sourceRoot":"","sources":["../../src/components/JWTDecoder.tsx"],"names":[],"mappings":"AAQA,wBAAgB,UAAU,4CAoDzB"}

package/dist/components/JWTDecoder.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TokenInput } from './TokenInput';
+import { DecodedView } from './DecodedView';
+import { ExpiryTimer } from './ExpiryTimer';
+import { decodeToken, validateToken } from '../lib/jwt';
+export function JWTDecoder() {
+    const [decoded, setDecoded] = useState(null);
+    const [validation, setValidation] = useState(null);
+    const [error, setError] = useState('');
+    const handleTokenChange = (token) => {
+        if (!token.trim()) {
+            setDecoded(null);
+            setValidation(null);
+            setError('');
+            return;
+        }
+        const decodedToken = decodeToken(token);
+        if (!decodedToken) {
+            setError('Invalid JWT token. Please check the format.');
+            setDecoded(null);
+            setValidation(null);
+            return;
+        }
+        setError('');
+        setDecoded(decodedToken);
+        setValidation(validateToken(decodedToken));
+    };
+    return (_jsxs("div", { className: "w-full max-w-6xl mx-auto space-y-6", children: [_jsx(TokenInput, { onTokenChange: handleTokenChange, error: error }), decoded && validation && (_jsxs("div", { className: "space-y-6 animate-fade-in", children: [_jsx(ExpiryTimer, { validation: validation }), _jsx(DecodedView, { decoded: decoded })] })), !decoded && !error && (_jsxs("div", { className: "text-center py-12 text-gray-500", children: [_jsx("p", { className: "text-lg mb-2", children: "\uD83D\uDC46 Paste a JWT token above to decode it" }), _jsx("p", { className: "text-sm", children: "We'll show you the header, payload, and expiration status" })] }))] }));
+}
+//# sourceMappingURL=JWTDecoder.js.map

package/dist/components/JWTDecoder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JWTDecoder.js","sourceRoot":"","sources":["../../src/components/JWTDecoder.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,aAAa,EAAuC,MAAM,YAAY,CAAC;AAE7F,MAAM,UAAU,UAAU;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAuB,IAAI,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,QAAQ,CAAC,EAAE,CAAC,CAAC;YACb,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAExC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,QAAQ,CAAC,6CAA6C,CAAC,CAAC;YACxD,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,UAAU,CAAC,YAAY,CAAC,CAAC;QACzB,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,oCAAoC,aAEjD,KAAC,UAAU,IAAC,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,GAAI,EAG7D,OAAO,IAAI,UAAU,IAAI,CACxB,eAAK,SAAS,EAAC,2BAA2B,aAExC,KAAC,WAAW,IAAC,UAAU,EAAE,UAAU,GAAI,EAGvC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,GAAI,IAC7B,CACP,EAGA,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,CACrB,eAAK,SAAS,EAAC,iCAAiC,aAC9C,YAAG,SAAS,EAAC,cAAc,kEAA4C,EACvE,YAAG,SAAS,EAAC,SAAS,0EAA8D,IAChF,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/TokenInput.d.ts

@@ -0,0 +1,7 @@
+interface TokenInputProps {
+    onTokenChange: (token: string) => void;
+    error?: string;
+}
+export declare function TokenInput({ onTokenChange, error }: TokenInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TokenInput.d.ts.map

package/dist/components/TokenInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenInput.d.ts","sourceRoot":"","sources":["../../src/components/TokenInput.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,eAAe,2CAiEnE"}

package/dist/components/TokenInput.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export function TokenInput({ onTokenChange, error }) {
+    const [value, setValue] = useState('');
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        onTokenChange(newValue);
+    };
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            setValue(text);
+            onTokenChange(text);
+        }
+        catch (err) {
+            console.error('Failed to read clipboard:', err);
+        }
+    };
+    const handleClear = () => {
+        setValue('');
+        onTokenChange('');
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { htmlFor: "jwt-input", className: "text-sm font-medium text-gray-300", children: "JWT Token" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handlePaste, className: "text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors", children: "Paste" }), value && (_jsx("button", { onClick: handleClear, className: "text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors", children: "Clear" }))] })] }), _jsx("textarea", { id: "jwt-input", value: value, onChange: handleChange, placeholder: "Paste your JWT token here...", className: `w-full h-32 px-4 py-3 rounded-lg bg-white/5 border ${error ? 'border-red-500/50' : 'border-white/10'} text-white placeholder-gray-500 focus:outline-none focus:border-primary/50 transition-colors resize-none font-mono text-sm` }), error && (_jsx("p", { className: "mt-2 text-sm text-red-400", children: error }))] }));
+}
+//# sourceMappingURL=TokenInput.js.map

package/dist/components/TokenInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenInput.js","sourceRoot":"","sources":["../../src/components/TokenInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOjC,MAAM,UAAU,UAAU,CAAC,EAAE,aAAa,EAAE,KAAK,EAAmB;IAClE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAG,CAAC,CAAyC,EAAE,EAAE;QACjE,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;QAC7B,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAClD,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAG,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,eAAK,SAAS,EAAC,wCAAwC,aACrD,gBAAO,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,mCAAmC,0BAEhE,EACR,eAAK,SAAS,EAAC,YAAY,aACzB,iBACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,wFAAwF,sBAG3F,EACR,KAAK,IAAI,CACR,iBACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,wFAAwF,sBAG3F,CACV,IACG,IACF,EAEN,mBACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,8BAA8B,EAC1C,SAAS,EAAE,sDACT,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAChC,6HAA6H,GAC7H,EAED,KAAK,IAAI,CACR,YAAG,SAAS,EAAC,2BAA2B,YACrC,KAAK,GACJ,CACL,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { JWTDecoder } from './components/JWTDecoder';
+export { TokenInput } from './components/TokenInput';
+export { DecodedView } from './components/DecodedView';
+export { ExpiryTimer } from './components/ExpiryTimer';
+export * from './lib/jwt';
+export * from './lib/utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export { JWTDecoder } from './components/JWTDecoder';
+export { TokenInput } from './components/TokenInput';
+export { DecodedView } from './components/DecodedView';
+export { ExpiryTimer } from './components/ExpiryTimer';
+export * from './lib/jwt';
+export * from './lib/utils';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}

package/dist/lib/jwt.d.ts

@@ -0,0 +1,35 @@
+export interface DecodedJWT {
+    header: Record<string, any>;
+    payload: Record<string, any>;
+    raw: string;
+}
+export interface JWTValidation {
+    isValid: boolean;
+    isExpired: boolean;
+    expiresAt?: Date;
+    issuedAt?: Date;
+    error?: string;
+}
+/**
+ * Decodes a JWT token into header and payload
+ */
+export declare function decodeToken(token: string): DecodedJWT | null;
+/**
+ * Validates JWT and checks expiration
+ */
+export declare function validateToken(decoded: DecodedJWT): JWTValidation;
+/**
+ * Calculates time remaining until expiration
+ */
+export declare function getTimeRemaining(expiresAt: Date): {
+    total: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+/**
+ * Formats time remaining as human-readable string
+ */
+export declare function formatTimeRemaining(time: ReturnType<typeof getTimeRemaining>): string;
+//# sourceMappingURL=jwt.d.ts.map

package/dist/lib/jwt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jwt.d.ts","sourceRoot":"","sources":["../../src/lib/jwt.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAqB5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,UAAU,GAAG,aAAa,CAuBhE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,IAAI,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,CAaA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,GAAG,MAAM,CAUrF"}

package/dist/lib/jwt.js

@@ -0,0 +1,79 @@
+import { decodeJwt, decodeProtectedHeader } from 'jose';
+/**
+ * Decodes a JWT token into header and payload
+ */
+export function decodeToken(token) {
+    try {
+        const trimmedToken = token.trim();
+        // Basic validation
+        if (!trimmedToken || trimmedToken.split('.').length !== 3) {
+            return null;
+        }
+        const header = decodeProtectedHeader(trimmedToken);
+        const payload = decodeJwt(trimmedToken);
+        return {
+            header,
+            payload,
+            raw: trimmedToken,
+        };
+    }
+    catch (error) {
+        console.error('Failed to decode JWT:', error);
+        return null;
+    }
+}
+/**
+ * Validates JWT and checks expiration
+ */
+export function validateToken(decoded) {
+    const { payload } = decoded;
+    const now = Math.floor(Date.now() / 1000); // Current time in seconds
+    // Check if token has expiration
+    if (!payload.exp) {
+        return {
+            isValid: true,
+            isExpired: false,
+            error: 'No expiration claim (exp) found',
+        };
+    }
+    const expiresAt = new Date(payload.exp * 1000);
+    const issuedAt = payload.iat ? new Date(payload.iat * 1000) : undefined;
+    const isExpired = payload.exp < now;
+    return {
+        isValid: !isExpired,
+        isExpired,
+        expiresAt,
+        issuedAt,
+    };
+}
+/**
+ * Calculates time remaining until expiration
+ */
+export function getTimeRemaining(expiresAt) {
+    const total = expiresAt.getTime() - Date.now();
+    if (total <= 0) {
+        return { total: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
+    }
+    const seconds = Math.floor((total / 1000) % 60);
+    const minutes = Math.floor((total / 1000 / 60) % 60);
+    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+    const days = Math.floor(total / (1000 * 60 * 60 * 24));
+    return { total, days, hours, minutes, seconds };
+}
+/**
+ * Formats time remaining as human-readable string
+ */
+export function formatTimeRemaining(time) {
+    const { days, hours, minutes, seconds } = time;
+    const parts = [];
+    if (days > 0)
+        parts.push(`${days}d`);
+    if (hours > 0)
+        parts.push(`${hours}h`);
+    if (minutes > 0)
+        parts.push(`${minutes}m`);
+    if (seconds > 0 || parts.length === 0)
+        parts.push(`${seconds}s`);
+    return parts.join(' ');
+}
+//# sourceMappingURL=jwt.js.map

package/dist/lib/jwt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jwt.js","sourceRoot":"","sources":["../../src/lib/jwt.ts"],"names":[],"mappings":"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"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Formats a date in a readable format
+ */
+export declare function formatDate(date: Date): string;
+/**
+ * Formats a date as relative time (e.g., "2 hours ago")
+ */
+export declare function formatRelativeTime(date: Date): string;
+/**
+ * Copies text to clipboard
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;
+/**
+ * Formats JSON with syntax highlighting
+ */
+export declare function formatJSON(obj: any): string;
+/**
+ * Truncates text with ellipsis
+ */
+export declare function truncate(text: string, maxLength: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE7C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAErD;AAED;;GAEG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAQpE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAE3C;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAGhE"}

package/dist/lib/utils.js

@@ -0,0 +1,41 @@
+import { format, formatDistanceToNow } from 'date-fns';
+/**
+ * Formats a date in a readable format
+ */
+export function formatDate(date) {
+    return format(date, 'MMM dd, yyyy \'at\' h:mm a');
+}
+/**
+ * Formats a date as relative time (e.g., "2 hours ago")
+ */
+export function formatRelativeTime(date) {
+    return formatDistanceToNow(date, { addSuffix: true });
+}
+/**
+ * Copies text to clipboard
+ */
+export async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch (error) {
+        console.error('Failed to copy to clipboard:', error);
+        return false;
+    }
+}
+/**
+ * Formats JSON with syntax highlighting
+ */
+export function formatJSON(obj) {
+    return JSON.stringify(obj, null, 2);
+}
+/**
+ * Truncates text with ellipsis
+ */
+export function truncate(text, maxLength) {
+    if (text.length <= maxLength)
+        return text;
+    return text.slice(0, maxLength) + '...';
+}
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEvD;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,IAAU;IACnC,OAAO,MAAM,CAAC,IAAI,EAAE,4BAA4B,CAAC,CAAC;AACpD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAU;IAC3C,OAAO,mBAAmB,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;AACxD,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,IAAY;IAChD,IAAI,CAAC;QACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;QACrD,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,GAAQ;IACjC,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AACtC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,SAAiB;IACtD,IAAI,IAAI,CAAC,MAAM,IAAI,SAAS;QAAE,OAAO,IAAI,CAAC;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;AAC1C,CAAC"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@rashidv/jwt-decoder",
+  "version": "1.0.0",
+  "description": "Free, open-source JWT decoder with expiry checker and live countdown",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "jwt",
+    "decoder",
+    "expiry",
+    "validator",
+    "json-web-token",
+    "authentication"
+  ],
+  "author": "Muhammed Rashid <rashidv.dev@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rashidrashiii/jwt-decoder"
+  },
+  "homepage": "https://rashidv.dev/tools/jwt-decoder",
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "jose": "^5.10.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
+    "react": "^19.0.0",
+    "typescript": "^5.7.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/components/DecodedView.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState } from 'react';
+import type { DecodedJWT } from '../lib/jwt';
+import { formatJSON, copyToClipboard } from '../lib/utils';
+
+interface DecodedViewProps {
+  decoded: DecodedJWT;
+}
+
+export function DecodedView({ decoded }: DecodedViewProps) {
+  const [copiedSection, setCopiedSection] = useState<'header' | 'payload' | null>(null);
+
+  const handleCopy = async (section: 'header' | 'payload') => {
+    const data = section === 'header' ? decoded.header : decoded.payload;
+    const success = await copyToClipboard(formatJSON(data));
+    
+    if (success) {
+      setCopiedSection(section);
+      setTimeout(() => setCopiedSection(null), 2000);
+    }
+  };
+
+  return (
+    <div className="grid md:grid-cols-2 gap-4">
+      {/* Header */}
+      <div className="rounded-lg bg-white/5 border border-white/10 p-4">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-semibold text-gray-300">Header</h3>
+          <button
+            onClick={() => handleCopy('header')}
+            className="text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors"
+          >
+            {copiedSection === 'header' ? '✓ Copied' : 'Copy'}
+          </button>
+        </div>
+        <pre className="text-xs text-gray-300 overflow-x-auto">
+          <code>{formatJSON(decoded.header)}</code>
+        </pre>
+      </div>
+
+      {/* Payload */}
+      <div className="rounded-lg bg-white/5 border border-white/10 p-4">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-semibold text-gray-300">Payload</h3>
+          <button
+            onClick={() => handleCopy('payload')}
+            className="text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors"
+          >
+            {copiedSection === 'payload' ? '✓ Copied' : 'Copy'}
+          </button>
+        </div>
+        <pre className="text-xs text-gray-300 overflow-x-auto">
+          <code>{formatJSON(decoded.payload)}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/src/components/ExpiryTimer.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { JWTValidation } from '../lib/jwt';
+import { getTimeRemaining, formatTimeRemaining } from '../lib/jwt';
+import { formatDate, formatRelativeTime } from '../lib/utils';
+
+interface ExpiryTimerProps {
+  validation: JWTValidation;
+}
+
+export function ExpiryTimer({ validation }: ExpiryTimerProps) {
+  const [timeRemaining, setTimeRemaining] = useState<ReturnType<typeof getTimeRemaining> | null>(null);
+
+  useEffect(() => {
+    if (!validation.expiresAt) return;
+
+    const updateTimer = () => {
+      setTimeRemaining(getTimeRemaining(validation.expiresAt!));
+    };
+
+    updateTimer();
+    const interval = setInterval(updateTimer, 1000);
+
+    return () => clearInterval(interval);
+  }, [validation.expiresAt]);
+
+  if (!validation.expiresAt) {
+    return (
+      <div className="rounded-lg bg-yellow-500/10 border border-yellow-500/20 p-4">
+        <p className="text-sm text-yellow-400">
+          ⚠️ No expiration claim (exp) found in token
+        </p>
+      </div>
+    );
+  }
+
+  const isExpired = validation.isExpired;
+  const isExpiringSoon = timeRemaining && timeRemaining.total > 0 && timeRemaining.total < 5 * 60 * 1000; // 5 minutes
+
+  return (
+    <div className={`rounded-lg border p-4 ${
+      isExpired 
+        ? 'bg-red-500/10 border-red-500/20' 
+        : isExpiringSoon 
+        ? 'bg-yellow-500/10 border-yellow-500/20'
+        : 'bg-green-500/10 border-green-500/20'
+    }`}>
+      <div className="space-y-3">
+        {/* Status */}
+        <div className="flex items-center gap-2">
+          <span className="text-2xl">
+            {isExpired ? '🔴' : isExpiringSoon ? '🟡' : '🟢'}
+          </span>
+          <div>
+            <p className={`text-sm font-semibold ${
+              isExpired ? 'text-red-400' : isExpiringSoon ? 'text-yellow-400' : 'text-green-400'
+            }`}>
+              {isExpired ? 'Expired' : isExpiringSoon ? 'Expiring Soon' : 'Valid'}
+            </p>
+            <p className="text-xs text-gray-400">
+              {isExpired ? 'This token is no longer valid' : 'Token is currently valid'}
+            </p>
+          </div>
+        </div>
+
+        {/* Time Remaining */}
+        {!isExpired && timeRemaining && (
+          <div className="flex items-center gap-2">
+            <span className="text-lg">⏱️</span>
+            <div>
+              <p className="text-sm font-semibold text-white">
+                {formatTimeRemaining(timeRemaining)}
+              </p>
+              <p className="text-xs text-gray-400">Time remaining</p>
+            </div>
+          </div>
+        )}
+
+        {/* Expiry Date */}
+        <div className="flex items-center gap-2">
+          <span className="text-lg">📅</span>
+          <div>
+            <p className="text-sm font-semibold text-white">
+              {formatDate(validation.expiresAt)}
+            </p>
+            <p className="text-xs text-gray-400">
+              {isExpired ? 'Expired' : 'Expires'} {formatRelativeTime(validation.expiresAt)}
+            </p>
+          </div>
+        </div>
+
+        {/* Issued At */}
+        {validation.issuedAt && (
+          <div className="flex items-center gap-2">
+            <span className="text-lg">🕐</span>
+            <div>
+              <p className="text-sm font-semibold text-white">
+                {formatDate(validation.issuedAt)}
+              </p>
+              <p className="text-xs text-gray-400">
+                Issued {formatRelativeTime(validation.issuedAt)}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/JWTDecoder.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { TokenInput } from './TokenInput';
+import { DecodedView } from './DecodedView';
+import { ExpiryTimer } from './ExpiryTimer';
+import { decodeToken, validateToken, type DecodedJWT, type JWTValidation } from '../lib/jwt';
+
+export function JWTDecoder() {
+  const [decoded, setDecoded] = useState<DecodedJWT | null>(null);
+  const [validation, setValidation] = useState<JWTValidation | null>(null);
+  const [error, setError] = useState<string>('');
+
+  const handleTokenChange = (token: string) => {
+    if (!token.trim()) {
+      setDecoded(null);
+      setValidation(null);
+      setError('');
+      return;
+    }
+
+    const decodedToken = decodeToken(token);
+    
+    if (!decodedToken) {
+      setError('Invalid JWT token. Please check the format.');
+      setDecoded(null);
+      setValidation(null);
+      return;
+    }
+
+    setError('');
+    setDecoded(decodedToken);
+    setValidation(validateToken(decodedToken));
+  };
+
+  return (
+    <div className="w-full max-w-6xl mx-auto space-y-6">
+      {/* Token Input */}
+      <TokenInput onTokenChange={handleTokenChange} error={error} />
+
+      {/* Results */}
+      {decoded && validation && (
+        <div className="space-y-6 animate-fade-in">
+          {/* Expiry Timer */}
+          <ExpiryTimer validation={validation} />
+
+          {/* Decoded Token */}
+          <DecodedView decoded={decoded} />
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!decoded && !error && (
+        <div className="text-center py-12 text-gray-500">
+          <p className="text-lg mb-2">👆 Paste a JWT token above to decode it</p>
+          <p className="text-sm">We'll show you the header, payload, and expiration status</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TokenInput.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useState } from 'react';
+
+interface TokenInputProps {
+  onTokenChange: (token: string) => void;
+  error?: string;
+}
+
+export function TokenInput({ onTokenChange, error }: TokenInputProps) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    onTokenChange(newValue);
+  };
+
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      setValue(text);
+      onTokenChange(text);
+    } catch (err) {
+      console.error('Failed to read clipboard:', err);
+    }
+  };
+
+  const handleClear = () => {
+    setValue('');
+    onTokenChange('');
+  };
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between mb-2">
+        <label htmlFor="jwt-input" className="text-sm font-medium text-gray-300">
+          JWT Token
+        </label>
+        <div className="flex gap-2">
+          <button
+            onClick={handlePaste}
+            className="text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors"
+          >
+            Paste
+          </button>
+          {value && (
+            <button
+              onClick={handleClear}
+              className="text-xs px-3 py-1 rounded bg-white/5 hover:bg-white/10 text-gray-300 transition-colors"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      </div>
+      
+      <textarea
+        id="jwt-input"
+        value={value}
+        onChange={handleChange}
+        placeholder="Paste your JWT token here..."
+        className={`w-full h-32 px-4 py-3 rounded-lg bg-white/5 border ${
+          error ? 'border-red-500/50' : 'border-white/10'
+        } text-white placeholder-gray-500 focus:outline-none focus:border-primary/50 transition-colors resize-none font-mono text-sm`}
+      />
+      
+      {error && (
+        <p className="mt-2 text-sm text-red-400">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { JWTDecoder } from './components/JWTDecoder';
+export { TokenInput } from './components/TokenInput';
+export { DecodedView } from './components/DecodedView';
+export { ExpiryTimer } from './components/ExpiryTimer';
+
+export * from './lib/jwt';
+export * from './lib/utils';

package/src/lib/jwt.ts

@@ -0,0 +1,108 @@
+import { decodeJwt, decodeProtectedHeader } from 'jose';
+
+export interface DecodedJWT {
+  header: Record<string, any>;
+  payload: Record<string, any>;
+  raw: string;
+}
+
+export interface JWTValidation {
+  isValid: boolean;
+  isExpired: boolean;
+  expiresAt?: Date;
+  issuedAt?: Date;
+  error?: string;
+}
+
+/**
+ * Decodes a JWT token into header and payload
+ */
+export function decodeToken(token: string): DecodedJWT | null {
+  try {
+    const trimmedToken = token.trim();
+    
+    // Basic validation
+    if (!trimmedToken || trimmedToken.split('.').length !== 3) {
+      return null;
+    }
+
+    const header = decodeProtectedHeader(trimmedToken);
+    const payload = decodeJwt(trimmedToken);
+
+    return {
+      header,
+      payload,
+      raw: trimmedToken,
+    };
+  } catch (error) {
+    console.error('Failed to decode JWT:', error);
+    return null;
+  }
+}
+
+/**
+ * Validates JWT and checks expiration
+ */
+export function validateToken(decoded: DecodedJWT): JWTValidation {
+  const { payload } = decoded;
+  const now = Math.floor(Date.now() / 1000); // Current time in seconds
+
+  // Check if token has expiration
+  if (!payload.exp) {
+    return {
+      isValid: true,
+      isExpired: false,
+      error: 'No expiration claim (exp) found',
+    };
+  }
+
+  const expiresAt = new Date(payload.exp * 1000);
+  const issuedAt = payload.iat ? new Date(payload.iat * 1000) : undefined;
+  const isExpired = payload.exp < now;
+
+  return {
+    isValid: !isExpired,
+    isExpired,
+    expiresAt,
+    issuedAt,
+  };
+}
+
+/**
+ * Calculates time remaining until expiration
+ */
+export function getTimeRemaining(expiresAt: Date): {
+  total: number;
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+} {
+  const total = expiresAt.getTime() - Date.now();
+  
+  if (total <= 0) {
+    return { total: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
+  }
+
+  const seconds = Math.floor((total / 1000) % 60);
+  const minutes = Math.floor((total / 1000 / 60) % 60);
+  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+  const days = Math.floor(total / (1000 * 60 * 60 * 24));
+
+  return { total, days, hours, minutes, seconds };
+}
+
+/**
+ * Formats time remaining as human-readable string
+ */
+export function formatTimeRemaining(time: ReturnType<typeof getTimeRemaining>): string {
+  const { days, hours, minutes, seconds } = time;
+  
+  const parts: string[] = [];
+  if (days > 0) parts.push(`${days}d`);
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0) parts.push(`${minutes}m`);
+  if (seconds > 0 || parts.length === 0) parts.push(`${seconds}s`);
+  
+  return parts.join(' ');
+}

package/src/lib/utils.ts

@@ -0,0 +1,43 @@
+import { format, formatDistanceToNow } from 'date-fns';
+
+/**
+ * Formats a date in a readable format
+ */
+export function formatDate(date: Date): string {
+  return format(date, 'MMM dd, yyyy \'at\' h:mm a');
+}
+
+/**
+ * Formats a date as relative time (e.g., "2 hours ago")
+ */
+export function formatRelativeTime(date: Date): string {
+  return formatDistanceToNow(date, { addSuffix: true });
+}
+
+/**
+ * Copies text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (error) {
+    console.error('Failed to copy to clipboard:', error);
+    return false;
+  }
+}
+
+/**
+ * Formats JSON with syntax highlighting
+ */
+export function formatJSON(obj: any): string {
+  return JSON.stringify(obj, null, 2);
+}
+
+/**
+ * Truncates text with ellipsis
+ */
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}