jwt

package.json

@@ -13,6 +13,7 @@
     "antd": "^5.1.4",
     "generate-password-browser": "^1.1.0",
     "hardpass": "^0.1.4",
+    "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

src/App.tsx

@@ -10,6 +10,7 @@ import {
   HomeOutlined,
   GithubOutlined,
   GlobalOutlined,
+  StarOutlined,
 } from "@ant-design/icons";
 import { Button, Layout, Menu, theme } from "antd";
 import { Outlet, useNavigate } from "react-router-dom";
@@ -76,6 +77,11 @@ const App: React.FC = () => {
               icon: <GlobalOutlined />,
               label: "National Code",
             },
+            {
+              key: "jwt",
+              icon: <StarOutlined />,
+              label: "JWT",
+            },
           ]}
         />
       </Sider>

src/JWT.tsx

@@ -0,0 +1,39 @@
+import { Row, Col, Divider, QRCode } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import React, { useEffect, useState } from "react";
+import jwt_decode from "jwt-decode";
+
+export default function JWT() {
+  const [token, setToken] = useState("");
+  const [data, setData] = useState("");
+  useEffect(() => {
+    try {
+      const header = jwt_decode(token, { header: true });
+      const payload = jwt_decode(token);
+      setData(
+        `${JSON.stringify(header, null, 2)} \n ${JSON.stringify(
+          payload,
+          null,
+          2
+        )}`
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  }, [token]);
+  return (
+    <div>
+      <Row justify="center">
+        <Col xs={{ span: 24 }} md={{ span: 18, offset: 3 }}>
+          <TextArea
+            placeholder="text or url"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+          />
+          <Divider>JWT Data</Divider>
+          <code>{data}</code>
+        </Col>
+      </Row>
+    </div>
+  );
+}

src/main.tsx

@@ -5,6 +5,7 @@ import App from "./App";
 import Base64 from "./Base64";
 import Home from "./Home";
 import "./index.css";
+import JWT from "./JWT";
 import NationalCode from "./NationalCode";
 import Pashword from "./Pashword";
 import Password from "./Password";
@@ -39,6 +40,10 @@ const router = createBrowserRouter([
         path: "nationalCode",
         element: <NationalCode></NationalCode>,
       },
+      {
+        path: "jwt",
+        element: <JWT />,
+      },
     ],
   },
 ]);