feat: add design persistence functionality with Auth0 and Supabase integration

- Implemented `useDesignPersistence` composable for managing design records. - Enhanced `useSlipmatDesigner` to support loading designs from JSON. - Created global authentication middleware for route protection. - Added Supabase client plugin for database interactions. - Developed API endpoints for fetching, saving, and retrieving designs. - Introduced utility functions for Auth0 token verification and Supabase client retrieval. - Updated Nuxt configuration to include Auth0 and Supabase environment variables. - Added necessary dependencies for Auth0 and Supabase. - Enhanced TypeScript configuration for improved type support.
2025-11-07 00:01:52 +08:00
parent e2955debb7
commit 4d91925fad
20 changed files with 1242 additions and 19 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,12 +7,48 @@
      "name": "slipmatz-web",
      "hasInstallScript": true,
      "dependencies": {
+        "@auth0/auth0-vue": "^2.4.0",
+        "@supabase/supabase-js": "^2.48.0",
        "@tailwindcss/vite": "^4.1.16",
        "fabric": "^6.0.2",
+        "jose": "^5.9.6",
        "nuxt": "^4.2.0",
        "tailwindcss": "^4.1.16",
        "vue": "^3.5.22",
-        "vue-router": "^4.6.3"
+        "vue-router": "^4.6.3",
+        "zod": "^3.23.8"
+      },
+      "devDependencies": {
+        "@types/node": "^22.10.1"
+      }
+    },
+    "node_modules/@auth0/auth0-spa-js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.8.0.tgz",
+      "integrity": "sha512-Lu3dBius0CMRHNAWtw/RyIZH0b5B4jV9ZlVjpp5s7A11AO/XyABkNl0VW7Cz5ZHpAkXEba1CMnkxDG1/9LNIqg==",
+      "license": "MIT",
+      "dependencies": {
+        "browser-tabs-lock": "^1.2.15",
+        "dpop": "^2.1.1",
+        "es-cookie": "~1.3.2"
+      }
+    },
+    "node_modules/@auth0/auth0-vue": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-vue/-/auth0-vue-2.4.0.tgz",
+      "integrity": "sha512-12iLvojP8Pvxqu2Abxzksp0HqlSovGiAUhWrppnOaJP02MZEBQo+c/IwM6VbM0edNk+eqqjX5u96iw5peaCPSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@auth0/auth0-spa-js": "^2.1.3",
+        "vue": "^3.2.41"
+      },
+      "peerDependencies": {
+        "vue-router": "^4.0.12"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
      }
    },
    "node_modules/@babel/code-frame": {
@@ -3081,6 +3117,85 @@
      "integrity": "sha512-IGytNtnUnPIobIbOq5Y6LIlqiHNX+vnToQIS7lj6L5819C+rA8TXRDkkG8vePsiBOGcoW9R6i+dp2YBUKdB09Q==",
      "license": "CC0-1.0"
    },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.78.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.78.0.tgz",
+      "integrity": "sha512-cXDtu1U0LeZj/xfnFoV7yCze37TcbNo8FCxy1FpqhMbB9u9QxxDSW6pA5gm/07Ei7m260Lof4CZx67Cu6DPeig==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "tslib": "2.8.1"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.78.0",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.78.0.tgz",
+      "integrity": "sha512-t1jOvArBsOINyqaRee1xJ3gryXLvkBzqnKfi6q3YRzzhJbGS6eXz0pXR5fqmJeB01fLC+1njpf3YhMszdPEF7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "tslib": "2.8.1"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.78.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.78.0.tgz",
+      "integrity": "sha512-AwhpYlSvJ+PSnPmIK8sHj7NGDyDENYfQGKrMtpVIEzQA2ApUjgpUGxzXWN4Z0wEtLQsvv7g4y9HVad9Hzo1TNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "tslib": "2.8.1"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.78.0",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.78.0.tgz",
+      "integrity": "sha512-rCs1zmLe7of7hj4s7G9z8rTqzWuNVtmwDr3FiCRCJFawEoa+RQO1xpZGbdeuVvVmKDyVN6b542Okci+117y/LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.78.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.78.0.tgz",
+      "integrity": "sha512-n17P0JbjHOlxqJpkaGFOn97i3EusEKPEbWOpuk1r4t00Wg06B8Z4GUiq0O0n1vUpjiMgJUkLIMuBVp+bEgunzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "tslib": "2.8.1"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.78.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.78.0.tgz",
+      "integrity": "sha512-xYMRNBFmKp2m1gMuwcp/gr/HlfZKqjye1Ib8kJe29XJNsgwsfO/f8skxnWiscFKTlkOKLuBexNgl5L8dzGt6vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.78.0",
+        "@supabase/functions-js": "2.78.0",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "2.78.0",
+        "@supabase/realtime-js": "2.78.0",
+        "@supabase/storage-js": "2.78.0"
+      }
+    },
    "node_modules/@tailwindcss/node": {
      "version": "4.1.16",
      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
@@ -3364,18 +3479,42 @@
      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
      "license": "MIT"
    },
+    "node_modules/@types/node": {
+      "version": "22.18.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.13.tgz",
+      "integrity": "sha512-Bo45YKIjnmFtv6I1TuC8AaHBbqXtIo+Om5fE4QiU1Tj8QR/qt+8O3BAtOimG5IFmwaWiPmB3Mv3jtYzBA4Us2A==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
    "node_modules/@types/parse-path": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
      "integrity": "sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==",
      "license": "MIT"
    },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "license": "MIT"
+    },
    "node_modules/@types/resolve": {
      "version": "1.20.2",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
      "license": "MIT"
    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@unhead/vue": {
      "version": "2.0.19",
      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.19.tgz",
@@ -4172,6 +4311,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/browser-tabs-lock": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.3.0.tgz",
+      "integrity": "sha512-g6nHaobTiT0eMZ7jh16YpD2kcjAp+PInbiVq3M1x6KKaEIVhT4v9oURNIpZLOZ3LQbQ3XYfNhMAb/9hzNLIWrw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash": ">=4.17.21"
+      }
+    },
    "node_modules/browserslist": {
      "version": "4.27.0",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
@@ -5574,6 +5723,15 @@
        "url": "https://dotenvx.com"
      }
    },
+    "node_modules/dpop": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/dpop/-/dpop-2.1.1.tgz",
+      "integrity": "sha512-J0Of2JTiM4h5si0tlbPQ/lkqfZ5wAEVkKYBhkwyyANnPJfWH4VsR5uIkZ+T+OSPIwDYUg1fbd5Mmodd25HjY1w==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -5668,6 +5826,12 @@
      "integrity": "sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==",
      "license": "MIT"
    },
+    "node_modules/es-cookie": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz",
+      "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==",
+      "license": "MIT"
+    },
    "node_modules/es-define-property": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -7044,6 +7208,15 @@
        "jiti": "lib/jiti-cli.mjs"
      }
    },
+    "node_modules/jose": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+      "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10502,8 +10675,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
    },
    "node_modules/type-fest": {
      "version": "5.1.0",
@@ -10574,6 +10746,12 @@
        "node": ">=20.18.1"
      }
    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "license": "MIT"
+    },
    "node_modules/unenv": {
      "version": "2.0.0-rc.24",
      "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.24.tgz",
@@ -11754,6 +11932,15 @@
      "engines": {
        "node": ">= 14"
      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
    }
  }
 }