How do I generate jwt in a react app built with vite?

Question

I used the jwt-simple library, but I keep getting errors. First I got a Buffer not defined error. I solved this when the vite config was set this way, but now I'm getting a new error. Error:

jwt-simple.js?v=365a6f87:138 Uncaught TypeError: crypto.createHmac is not a function
    at sign (jwt-simple.js?v=365a6f87:138:28)
    at Object.jwt_encode [as encode] (jwt-simple.js?v=365a6f87:116:21)
    at handleEncode (App.tsx:29:22)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=a26df67c:3682:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=a26df67c:3707:24)
    at invokeGuardedCallback (react-dom_client.js?v=a26df67c:3741:39)
    at invokeGuardedCallbackAndCatchFirstError (react-dom_client.js?v=a26df67c:3744:33)
    at executeDispatch (react-dom_client.js?v=a26df67c:7024:11)
    at processDispatchQueueItemsInOrder (react-dom_client.js?v=a26df67c:7044:15)
    at processDispatchQueue (react-dom_client.js?v=a26df67c:7053:13)

vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  define: {
    global: "globalThis",
  },
  server: {
    port: 3000,
  },
  resolve: {
    alias: [
      { find: "stream", replacement: "stream-browserify" },
      { find: "crypto", replacement: "crypto-browserify" },
      {
        find: "url",
        replacement: "rollup-plugin-node-polyfills/polyfills/url",
      },
      {
        find: "util",
        replacement: "rollup-plugin-node-polyfills/polyfills/util",
      },
      {
        find: "zlib",
        replacement: "rollup-plugin-node-polyfills/polyfills/zlib",
      },
      {
        find: "assert",
        replacement: "rollup-plugin-node-polyfills/polyfills/assert",
      },
      {
        find: "buffer",
        replacement: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
      },
      {
        find: "process",
        replacement: "rollup-plugin-node-polyfills/polyfills/process-es6",
      },
    ],
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx",
        ".ts": "ts",
        ".tsx": "tsx",
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
          process: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [rollupNodePolyFill()],
    },
  },
});

App.tsx:

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import * as jwts from "jwt-simple";

function App() {
  const handleEncode = () => {
    const secret = "secret";
    const connectionData = {
      context: {
        user: {
          name: "fullName",
          email: "fullName@example.com",
        },
      },
      moderator: true,
      aud: "jitsi",
      iss: "12345",
      sub: "meet.jitsi",
      room: "roomName",
      exp: 1753498815,
    };
    const jwt = jwts.encode(connectionData, secret);
    console.log(jwt);
  };

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={handleEncode}>Encode</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

package.json:

{
  "name": "jitsi",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/node": "^20.12.12",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "jsonwebtoken": "8.5.1",
    "jwt-simple": "^0.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "stream-browserify": "^3.0.0",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

I also tried different libraries on this, such as jsonwebtoken, but I got the same results. My goal is to create a token with the given information and I will create this token user based. I saw that this is only in an application with vite 3. Could it be because it is vite 5?

Here is the link if you want to look at the repository: Github