From 684a1d76bfe60dda8f47053c9eedfc21533f4e68 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Sat, 20 May 2023 04:05:36 +0200
Subject: [PATCH] add auth modal

---
 .env.example              |   3 +-
 components.d.ts           |   1 +
 package-lock.json         | 354 +++++++++++++++++++++++++-------------
 package.json              |   3 +-
 src/components/Auth.vue   |  17 ++
 src/components/Modal.vue  |   8 +-
 src/components/TopBar.vue |  23 ++-
 src/main.ts               |   1 +
 src/plugins/firebase.ts   |  22 +++
 src/utils/firebase.ts     |  15 --
 10 files changed, 303 insertions(+), 144 deletions(-)
 create mode 100644 src/components/Auth.vue
 create mode 100644 src/plugins/firebase.ts
 delete mode 100644 src/utils/firebase.ts

diff --git a/.env.example b/.env.example
index 260b597..8321832 100644
--- a/.env.example
+++ b/.env.example
@@ -3,7 +3,6 @@ VITE_FIREBASE_AUTH_DOMAIN=
 VITE_FIREBASE_DATABASE_URL=
 VITE_FIREBASE_PROJECT_ID=
 VITE_FIREBASE_STORAGE_BUCKET=
-VITE_FIREBASE_MESSAGE_SENDER_ID=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
 VITE_FIREBASE_APP_ID=
 VITE_FIREBASE_MEASUREMENT_ID=
-
diff --git a/components.d.ts b/components.d.ts
index 0d0e58d..4c029be 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    Auth: typeof import('./src/components/Auth.vue')['default']
     Autocomplete: typeof import('./src/components/Note/Autocomplete.vue')['default']
     Hamburger: typeof import('./src/components/TopBar/Hamburger.vue')['default']
     ListView: typeof import('./src/components/ViewModes/ListView.vue')['default']
diff --git a/package-lock.json b/package-lock.json
index 125596c..3a2c8d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,8 @@
         "daisyui": "^2.51.6",
         "date-fns": "^2.29.3",
         "dompurify": "^3.0.2",
-        "firebase": "^9.20.0",
+        "firebase": "^9.22.0",
+        "firebaseui": "^6.0.2",
         "hamburgers": "^1.2.1",
         "lodash-es": "^4.17.21",
         "marked": "^4.3.0",
@@ -889,9 +890,9 @@
       }
     },
     "node_modules/@firebase/analytics": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.9.5.tgz",
-      "integrity": "sha512-hJTVs2jLxPXE7hs7D/jaEsgGivrm7tSEl65kb5NkDBWV7QQBUnRfVML/xra9nTFLLJhAdbExZPHg6HfIuMSYEQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.0.tgz",
+      "integrity": "sha512-Locv8gAqx0e+GX/0SI3dzmBY5e9kjVDtD+3zCFLJ0tH2hJwuCAiL+5WkHuxKj92rqQj/rvkBUCfA1ewlX2hehg==",
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/installations": "0.6.4",
@@ -904,11 +905,11 @@
       }
     },
     "node_modules/@firebase/analytics-compat": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.5.tgz",
-      "integrity": "sha512-ohKUrwSoXvyUJdSLuDr82mOqrzgWKyHMUt9/TfYKkyDXnFjNlBcFBpkpl/UHMAOJe0M60YYXiVCZoGQYldCslA==",
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.6.tgz",
+      "integrity": "sha512-4MqpVLFkGK7NJf/5wPEEP7ePBJatwYpyjgJ+wQHQGHfzaCDgntOnl9rL2vbVGGKCnRqWtZDIWhctB86UWXaX2Q==",
       "dependencies": {
-        "@firebase/analytics": "0.9.5",
+        "@firebase/analytics": "0.10.0",
         "@firebase/analytics-types": "0.8.0",
         "@firebase/component": "0.6.4",
         "@firebase/util": "1.9.3",
@@ -924,21 +925,21 @@
       "integrity": "sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw=="
     },
     "node_modules/@firebase/app": {
-      "version": "0.9.8",
-      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.8.tgz",
-      "integrity": "sha512-mYoH/aT4Dx6szBBnO7qcEr5ieJRnWU9TENgPiZI5DtkrIDTpW9540KMn996176PkR4GbLKto6rtvUX5P7ii+KQ==",
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.10.tgz",
+      "integrity": "sha512-2aLHuPLrjgxds95e2JpuAb29pBGArihHwjdJBUKtJnSxxEdwxAsGuXzSrOrmzYXlAwxUTZkOD6Cbl/dfTTwhKA==",
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
-        "idb": "7.0.1",
+        "idb": "7.1.1",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@firebase/app-check": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.6.5.tgz",
-      "integrity": "sha512-TCHJ+kghqDiNWCXAsPnHaE98CxBfEW9D16CIC3gYVaXrh3w42UNWqbR+S+ggSc7xN+vP9QRhCOY5pvr7rBEEUg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.7.0.tgz",
+      "integrity": "sha512-y0raLJpEtiL+wonfInFMaSfBV/EDvr356ZHMWbpr5F7fR0/I3cC0h7U6SKpKhrbSHJ0fOYIe0xbih20KTlpcnA==",
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -950,11 +951,11 @@
       }
     },
     "node_modules/@firebase/app-check-compat": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.5.tgz",
-      "integrity": "sha512-ji+LxuM2AyFCaJCBfJllnQ1OIedMq+iMwzABlfP9yVrhcR6ZSdCLLhDGMyoENyoPiZo6av+5b3acYUTYrffFeQ==",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.6.tgz",
+      "integrity": "sha512-azHAeHi9igoaIo04E6Yfuc7aIbWoWuBXuqjyYyWbeCc8Zz/NfJvIAgmXugN4LdxsHJ7XGlZTvwJ6YaYROdSa7A==",
       "dependencies": {
-        "@firebase/app-check": "0.6.5",
+        "@firebase/app-check": "0.7.0",
         "@firebase/app-check-types": "0.5.0",
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -976,11 +977,11 @@
       "integrity": "sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ=="
     },
     "node_modules/@firebase/app-compat": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.8.tgz",
-      "integrity": "sha512-aG9juNXD+m8gWs6VnrLUWWV1LtJu8W0+uyX5u+Sz6YjDO69JN2jEaxCsb7Wr1egXKKJN1YrhoS+0kQqWakp61Q==",
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.10.tgz",
+      "integrity": "sha512-kulrAW9JKkWeLeXKYjipCh60MmZcRC626NYpNWKxnjZ3YsVk6vgMuM+BHvhHQVp0fgfOq3hMNp5tyhlAB1Q1EQ==",
       "dependencies": {
-        "@firebase/app": "0.9.8",
+        "@firebase/app": "0.9.10",
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
@@ -992,10 +993,15 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz",
       "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q=="
     },
+    "node_modules/@firebase/app/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/@firebase/auth": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.23.0.tgz",
-      "integrity": "sha512-OzDs1osO8R/9BIgKLoJCRoDdR4sM/MUVu2mNhMya2qJVH00I1fYqrmGeV3jUH5vcy0MYkJvxa2J7oXetaoKcCg==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.23.2.tgz",
+      "integrity": "sha512-dM9iJ0R6tI1JczuGSxXmQbXAgtYie0K4WvKcuyuSTCu9V8eEDiz4tfa1sO3txsfvwg7nOY3AjoCyMYEdqZ8hdg==",
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -1008,11 +1014,11 @@
       }
     },
     "node_modules/@firebase/auth-compat": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.4.0.tgz",
-      "integrity": "sha512-MS4S90rOjv9/DkumQkKbQs84YgRVHLFQKI+UI3PRdbPO+50Bl3MNXtTyGlLKSIdMjMISeX8IbyBmCdOOTQZmLw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.4.2.tgz",
+      "integrity": "sha512-Q30e77DWXFmXEt5dg5JbqEDpjw9y3/PcP9LslDPR7fARmAOTIY9MM6HXzm9KC+dlrKH/+p6l8g9ifJiam9mc4A==",
       "dependencies": {
-        "@firebase/auth": "0.23.0",
+        "@firebase/auth": "0.23.2",
         "@firebase/auth-types": "0.12.0",
         "@firebase/component": "0.6.4",
         "@firebase/util": "1.9.3",
@@ -1082,14 +1088,14 @@
       }
     },
     "node_modules/@firebase/firestore": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.10.1.tgz",
-      "integrity": "sha512-p+WQMLkuHECVjB6zoyZYF4OjudquW9IlHsBx7eIfyvOZyOtTEmbSmNrJaWsqCZ/9kDo94XYJx/eZQ2Y4WBAV4A==",
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.12.0.tgz",
+      "integrity": "sha512-mZdwIJBOIAdkaykqZqMYQZldSH19gf7u1Y77UVxh4igm1zaG8ZiGE8qYVXQ/vGc+BvvUZ8OpnqLI5Z0JSJtDIg==",
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
-        "@firebase/webchannel-wrapper": "0.9.0",
+        "@firebase/webchannel-wrapper": "0.10.0",
         "@grpc/grpc-js": "~1.7.0",
         "@grpc/proto-loader": "^0.6.13",
         "node-fetch": "2.6.7",
@@ -1103,12 +1109,12 @@
       }
     },
     "node_modules/@firebase/firestore-compat": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.7.tgz",
-      "integrity": "sha512-pwSEh75e0WIQjU6UdZJcdP0AO1Tj2P7r1aIWcBf7kdqTOwZmplxhJ/rXNL6IaKo2fP+/9osXaLZiBH6WWrSbfQ==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.9.tgz",
+      "integrity": "sha512-u4fGeuaDaMnAPp20PAm6vrhktVGCtfmC3iup5ymMkOUNIqbuQ/+WLL3zUlJi+Ytl4hX0vVNg4UQEh4vfMorc4Q==",
       "dependencies": {
         "@firebase/component": "0.6.4",
-        "@firebase/firestore": "3.10.1",
+        "@firebase/firestore": "3.12.0",
         "@firebase/firestore-types": "2.5.1",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
@@ -1362,9 +1368,9 @@
       }
     },
     "node_modules/@firebase/webchannel-wrapper": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
-      "integrity": "sha512-BpiZLBWdLFw+qFel9p3Zs1jD6QmH7Ii4aTDu6+vx8ShdidChZUXqDhYJly4ZjSgQh54miXbBgBrk0S+jTIh/Qg=="
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.0.tgz",
+      "integrity": "sha512-2I8y+vJVrPfPFJrnRGpao1Qc2Gu7wmYoo5ed2s5zK/DUGgcyY1Yr/xC0YdnKM4pi7rG3HqwW9ehAKUXoTMLdoA=="
     },
     "node_modules/@fontsource/source-sans-pro": {
       "version": "4.5.11",
@@ -1544,15 +1550,15 @@
       }
     },
     "node_modules/@grpc/grpc-js/node_modules/@grpc/proto-loader": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.6.tgz",
-      "integrity": "sha512-QyAXR8Hyh7uMDmveWxDSUcJr9NAWaZ2I6IXgAYvQmfflwouTM+rArE2eEaCtLlRqO81j7pRLCt81IefUei6Zbw==",
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.7.tgz",
+      "integrity": "sha512-1TIeXOi8TuSCQprPItwoMymZXxWT0CPxUhkrkeCUH+D8U7QDwQ6b7SUz2MaLuWM2llT+J/TVFLmQI5KtML3BhQ==",
       "dependencies": {
         "@types/long": "^4.0.1",
         "lodash.camelcase": "^4.3.0",
         "long": "^4.0.0",
         "protobufjs": "^7.0.0",
-        "yargs": "^16.2.0"
+        "yargs": "^17.7.2"
       },
       "bin": {
         "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
@@ -1561,6 +1567,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/@grpc/grpc-js/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@grpc/grpc-js/node_modules/protobufjs": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.3.tgz",
@@ -1589,6 +1608,31 @@
       "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
       "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
     },
+    "node_modules/@grpc/grpc-js/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@grpc/grpc-js/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@grpc/proto-loader": {
       "version": "0.6.13",
       "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.6.13.tgz",
@@ -4506,6 +4550,11 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dialog-polyfill": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+      "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -5651,23 +5700,23 @@
       }
     },
     "node_modules/firebase": {
-      "version": "9.20.0",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.20.0.tgz",
-      "integrity": "sha512-qkSfdotdgZuMNCi4ddMLT+Pr18m021SkzImgplpihZOSx0utWdO39TgHivMfurlgp0fp4eQ2U4YEDPfP+Iq4bw==",
+      "version": "9.22.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.22.0.tgz",
+      "integrity": "sha512-Ay1u8IOfhPh58RFAHF7A9cKHACCgV6uI2bhkzKdkjnV0n2AAxn4tDtdXvJ3BEbfhF4WWBC2dFcEXH8cd14ptaw==",
       "dependencies": {
-        "@firebase/analytics": "0.9.5",
-        "@firebase/analytics-compat": "0.2.5",
-        "@firebase/app": "0.9.8",
-        "@firebase/app-check": "0.6.5",
-        "@firebase/app-check-compat": "0.3.5",
-        "@firebase/app-compat": "0.2.8",
+        "@firebase/analytics": "0.10.0",
+        "@firebase/analytics-compat": "0.2.6",
+        "@firebase/app": "0.9.10",
+        "@firebase/app-check": "0.7.0",
+        "@firebase/app-check-compat": "0.3.6",
+        "@firebase/app-compat": "0.2.10",
         "@firebase/app-types": "0.9.0",
-        "@firebase/auth": "0.23.0",
-        "@firebase/auth-compat": "0.4.0",
+        "@firebase/auth": "0.23.2",
+        "@firebase/auth-compat": "0.4.2",
         "@firebase/database": "0.14.4",
         "@firebase/database-compat": "0.3.4",
-        "@firebase/firestore": "3.10.1",
-        "@firebase/firestore-compat": "0.3.7",
+        "@firebase/firestore": "3.12.0",
+        "@firebase/firestore-compat": "0.3.9",
         "@firebase/functions": "0.9.4",
         "@firebase/functions-compat": "0.3.4",
         "@firebase/installations": "0.6.4",
@@ -5810,6 +5859,18 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/firebaseui": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.2.tgz",
+      "integrity": "sha512-Jwwn2I657loKrvedeCrwED9UibLFl8Cm0uH2ntDBSCpruWzG4HXlIWb35WsDdXMILRPQjJ1PwVwuRsrnsxcaXA==",
+      "dependencies": {
+        "dialog-polyfill": "^0.4.7",
+        "material-design-lite": "^1.2.0"
+      },
+      "peerDependencies": {
+        "firebase": "^9.1.3"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -8254,6 +8315,14 @@
         "typescript": ">=4.7.0"
       }
     },
+    "node_modules/material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -12856,9 +12925,9 @@
       "dev": true
     },
     "@firebase/analytics": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.9.5.tgz",
-      "integrity": "sha512-hJTVs2jLxPXE7hs7D/jaEsgGivrm7tSEl65kb5NkDBWV7QQBUnRfVML/xra9nTFLLJhAdbExZPHg6HfIuMSYEQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.0.tgz",
+      "integrity": "sha512-Locv8gAqx0e+GX/0SI3dzmBY5e9kjVDtD+3zCFLJ0tH2hJwuCAiL+5WkHuxKj92rqQj/rvkBUCfA1ewlX2hehg==",
       "requires": {
         "@firebase/component": "0.6.4",
         "@firebase/installations": "0.6.4",
@@ -12868,11 +12937,11 @@
       }
     },
     "@firebase/analytics-compat": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.5.tgz",
-      "integrity": "sha512-ohKUrwSoXvyUJdSLuDr82mOqrzgWKyHMUt9/TfYKkyDXnFjNlBcFBpkpl/UHMAOJe0M60YYXiVCZoGQYldCslA==",
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.6.tgz",
+      "integrity": "sha512-4MqpVLFkGK7NJf/5wPEEP7ePBJatwYpyjgJ+wQHQGHfzaCDgntOnl9rL2vbVGGKCnRqWtZDIWhctB86UWXaX2Q==",
       "requires": {
-        "@firebase/analytics": "0.9.5",
+        "@firebase/analytics": "0.10.0",
         "@firebase/analytics-types": "0.8.0",
         "@firebase/component": "0.6.4",
         "@firebase/util": "1.9.3",
@@ -12885,21 +12954,28 @@
       "integrity": "sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw=="
     },
     "@firebase/app": {
-      "version": "0.9.8",
-      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.8.tgz",
-      "integrity": "sha512-mYoH/aT4Dx6szBBnO7qcEr5ieJRnWU9TENgPiZI5DtkrIDTpW9540KMn996176PkR4GbLKto6rtvUX5P7ii+KQ==",
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.10.tgz",
+      "integrity": "sha512-2aLHuPLrjgxds95e2JpuAb29pBGArihHwjdJBUKtJnSxxEdwxAsGuXzSrOrmzYXlAwxUTZkOD6Cbl/dfTTwhKA==",
       "requires": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
-        "idb": "7.0.1",
+        "idb": "7.1.1",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "idb": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+          "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+        }
       }
     },
     "@firebase/app-check": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.6.5.tgz",
-      "integrity": "sha512-TCHJ+kghqDiNWCXAsPnHaE98CxBfEW9D16CIC3gYVaXrh3w42UNWqbR+S+ggSc7xN+vP9QRhCOY5pvr7rBEEUg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.7.0.tgz",
+      "integrity": "sha512-y0raLJpEtiL+wonfInFMaSfBV/EDvr356ZHMWbpr5F7fR0/I3cC0h7U6SKpKhrbSHJ0fOYIe0xbih20KTlpcnA==",
       "requires": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -12908,11 +12984,11 @@
       }
     },
     "@firebase/app-check-compat": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.5.tgz",
-      "integrity": "sha512-ji+LxuM2AyFCaJCBfJllnQ1OIedMq+iMwzABlfP9yVrhcR6ZSdCLLhDGMyoENyoPiZo6av+5b3acYUTYrffFeQ==",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.6.tgz",
+      "integrity": "sha512-azHAeHi9igoaIo04E6Yfuc7aIbWoWuBXuqjyYyWbeCc8Zz/NfJvIAgmXugN4LdxsHJ7XGlZTvwJ6YaYROdSa7A==",
       "requires": {
-        "@firebase/app-check": "0.6.5",
+        "@firebase/app-check": "0.7.0",
         "@firebase/app-check-types": "0.5.0",
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -12931,11 +13007,11 @@
       "integrity": "sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ=="
     },
     "@firebase/app-compat": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.8.tgz",
-      "integrity": "sha512-aG9juNXD+m8gWs6VnrLUWWV1LtJu8W0+uyX5u+Sz6YjDO69JN2jEaxCsb7Wr1egXKKJN1YrhoS+0kQqWakp61Q==",
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.10.tgz",
+      "integrity": "sha512-kulrAW9JKkWeLeXKYjipCh60MmZcRC626NYpNWKxnjZ3YsVk6vgMuM+BHvhHQVp0fgfOq3hMNp5tyhlAB1Q1EQ==",
       "requires": {
-        "@firebase/app": "0.9.8",
+        "@firebase/app": "0.9.10",
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
@@ -12948,9 +13024,9 @@
       "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q=="
     },
     "@firebase/auth": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.23.0.tgz",
-      "integrity": "sha512-OzDs1osO8R/9BIgKLoJCRoDdR4sM/MUVu2mNhMya2qJVH00I1fYqrmGeV3jUH5vcy0MYkJvxa2J7oXetaoKcCg==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.23.2.tgz",
+      "integrity": "sha512-dM9iJ0R6tI1JczuGSxXmQbXAgtYie0K4WvKcuyuSTCu9V8eEDiz4tfa1sO3txsfvwg7nOY3AjoCyMYEdqZ8hdg==",
       "requires": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -12960,11 +13036,11 @@
       }
     },
     "@firebase/auth-compat": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.4.0.tgz",
-      "integrity": "sha512-MS4S90rOjv9/DkumQkKbQs84YgRVHLFQKI+UI3PRdbPO+50Bl3MNXtTyGlLKSIdMjMISeX8IbyBmCdOOTQZmLw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.4.2.tgz",
+      "integrity": "sha512-Q30e77DWXFmXEt5dg5JbqEDpjw9y3/PcP9LslDPR7fARmAOTIY9MM6HXzm9KC+dlrKH/+p6l8g9ifJiam9mc4A==",
       "requires": {
-        "@firebase/auth": "0.23.0",
+        "@firebase/auth": "0.23.2",
         "@firebase/auth-types": "0.12.0",
         "@firebase/component": "0.6.4",
         "@firebase/util": "1.9.3",
@@ -13028,14 +13104,14 @@
       }
     },
     "@firebase/firestore": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.10.1.tgz",
-      "integrity": "sha512-p+WQMLkuHECVjB6zoyZYF4OjudquW9IlHsBx7eIfyvOZyOtTEmbSmNrJaWsqCZ/9kDo94XYJx/eZQ2Y4WBAV4A==",
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-3.12.0.tgz",
+      "integrity": "sha512-mZdwIJBOIAdkaykqZqMYQZldSH19gf7u1Y77UVxh4igm1zaG8ZiGE8qYVXQ/vGc+BvvUZ8OpnqLI5Z0JSJtDIg==",
       "requires": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
         "@firebase/util": "1.9.3",
-        "@firebase/webchannel-wrapper": "0.9.0",
+        "@firebase/webchannel-wrapper": "0.10.0",
         "@grpc/grpc-js": "~1.7.0",
         "@grpc/proto-loader": "^0.6.13",
         "node-fetch": "2.6.7",
@@ -13043,12 +13119,12 @@
       }
     },
     "@firebase/firestore-compat": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.7.tgz",
-      "integrity": "sha512-pwSEh75e0WIQjU6UdZJcdP0AO1Tj2P7r1aIWcBf7kdqTOwZmplxhJ/rXNL6IaKo2fP+/9osXaLZiBH6WWrSbfQ==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.9.tgz",
+      "integrity": "sha512-u4fGeuaDaMnAPp20PAm6vrhktVGCtfmC3iup5ymMkOUNIqbuQ/+WLL3zUlJi+Ytl4hX0vVNg4UQEh4vfMorc4Q==",
       "requires": {
         "@firebase/component": "0.6.4",
-        "@firebase/firestore": "3.10.1",
+        "@firebase/firestore": "3.12.0",
         "@firebase/firestore-types": "2.5.1",
         "@firebase/util": "1.9.3",
         "tslib": "^2.1.0"
@@ -13255,9 +13331,9 @@
       }
     },
     "@firebase/webchannel-wrapper": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
-      "integrity": "sha512-BpiZLBWdLFw+qFel9p3Zs1jD6QmH7Ii4aTDu6+vx8ShdidChZUXqDhYJly4ZjSgQh54miXbBgBrk0S+jTIh/Qg=="
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.0.tgz",
+      "integrity": "sha512-2I8y+vJVrPfPFJrnRGpao1Qc2Gu7wmYoo5ed2s5zK/DUGgcyY1Yr/xC0YdnKM4pi7rG3HqwW9ehAKUXoTMLdoA=="
     },
     "@fontsource/source-sans-pro": {
       "version": "4.5.11",
@@ -13399,15 +13475,25 @@
       },
       "dependencies": {
         "@grpc/proto-loader": {
-          "version": "0.7.6",
-          "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.6.tgz",
-          "integrity": "sha512-QyAXR8Hyh7uMDmveWxDSUcJr9NAWaZ2I6IXgAYvQmfflwouTM+rArE2eEaCtLlRqO81j7pRLCt81IefUei6Zbw==",
+          "version": "0.7.7",
+          "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.7.tgz",
+          "integrity": "sha512-1TIeXOi8TuSCQprPItwoMymZXxWT0CPxUhkrkeCUH+D8U7QDwQ6b7SUz2MaLuWM2llT+J/TVFLmQI5KtML3BhQ==",
           "requires": {
             "@types/long": "^4.0.1",
             "lodash.camelcase": "^4.3.0",
             "long": "^4.0.0",
             "protobufjs": "^7.0.0",
-            "yargs": "^16.2.0"
+            "yargs": "^17.7.2"
+          }
+        },
+        "cliui": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+          "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.1",
+            "wrap-ansi": "^7.0.0"
           }
         },
         "protobufjs": {
@@ -13435,6 +13521,25 @@
               "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
             }
           }
+        },
+        "yargs": {
+          "version": "17.7.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+          "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+          "requires": {
+            "cliui": "^8.0.1",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.3",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^21.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
         }
       }
     },
@@ -15648,6 +15753,11 @@
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
       "dev": true
     },
+    "dialog-polyfill": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+      "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -16575,23 +16685,23 @@
       }
     },
     "firebase": {
-      "version": "9.20.0",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.20.0.tgz",
-      "integrity": "sha512-qkSfdotdgZuMNCi4ddMLT+Pr18m021SkzImgplpihZOSx0utWdO39TgHivMfurlgp0fp4eQ2U4YEDPfP+Iq4bw==",
+      "version": "9.22.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.22.0.tgz",
+      "integrity": "sha512-Ay1u8IOfhPh58RFAHF7A9cKHACCgV6uI2bhkzKdkjnV0n2AAxn4tDtdXvJ3BEbfhF4WWBC2dFcEXH8cd14ptaw==",
       "requires": {
-        "@firebase/analytics": "0.9.5",
-        "@firebase/analytics-compat": "0.2.5",
-        "@firebase/app": "0.9.8",
-        "@firebase/app-check": "0.6.5",
-        "@firebase/app-check-compat": "0.3.5",
-        "@firebase/app-compat": "0.2.8",
+        "@firebase/analytics": "0.10.0",
+        "@firebase/analytics-compat": "0.2.6",
+        "@firebase/app": "0.9.10",
+        "@firebase/app-check": "0.7.0",
+        "@firebase/app-check-compat": "0.3.6",
+        "@firebase/app-compat": "0.2.10",
         "@firebase/app-types": "0.9.0",
-        "@firebase/auth": "0.23.0",
-        "@firebase/auth-compat": "0.4.0",
+        "@firebase/auth": "0.23.2",
+        "@firebase/auth-compat": "0.4.2",
         "@firebase/database": "0.14.4",
         "@firebase/database-compat": "0.3.4",
-        "@firebase/firestore": "3.10.1",
-        "@firebase/firestore-compat": "0.3.7",
+        "@firebase/firestore": "3.12.0",
+        "@firebase/firestore-compat": "0.3.9",
         "@firebase/functions": "0.9.4",
         "@firebase/functions-compat": "0.3.4",
         "@firebase/installations": "0.6.4",
@@ -16721,6 +16831,15 @@
         }
       }
     },
+    "firebaseui": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.2.tgz",
+      "integrity": "sha512-Jwwn2I657loKrvedeCrwED9UibLFl8Cm0uH2ntDBSCpruWzG4HXlIWb35WsDdXMILRPQjJ1PwVwuRsrnsxcaXA==",
+      "requires": {
+        "dialog-polyfill": "^0.4.7",
+        "material-design-lite": "^1.2.0"
+      }
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -18615,6 +18734,11 @@
         }
       }
     },
+    "material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg=="
+    },
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
diff --git a/package.json b/package.json
index 6188801..853d3e5 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,8 @@
     "daisyui": "^2.51.6",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.2",
-    "firebase": "^9.20.0",
+    "firebase": "^9.22.0",
+    "firebaseui": "^6.0.2",
     "hamburgers": "^1.2.1",
     "lodash-es": "^4.17.21",
     "marked": "^4.3.0",
diff --git a/src/components/Auth.vue b/src/components/Auth.vue
new file mode 100644
index 0000000..f0f8125
--- /dev/null
+++ b/src/components/Auth.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import firebase from 'firebase/compat/app'
+import 'firebase/compat/auth'
+import * as firebaseui from 'firebaseui'
+import 'firebaseui/dist/firebaseui.css'
+
+const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+onMounted(() => {
+  ui.start('#auth', {
+    signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID]
+    // Other config options...
+  })
+})
+</script>
+<template>
+  <div id="auth"></div>
+</template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 6ac7f52..9cf95e0 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -6,14 +6,10 @@ const modalBox = ref(null)
 const show = ref(false)
 
 const open = () => (show.value = true)
-const close = async () => {
+const close = () => {
   return new Promise((resolve) => {
     modal.value?.addEventListener('transitionend', () => resolve(true))
     show.value = false
-    // nextTick(() => {
-    //   console.log('done!')
-    //   resolve(true)
-    // })
   })
 }
 
@@ -45,7 +41,7 @@ const onLeave = (el: Element, done: () => void): void => {
           </p>
           <div class="modal-action">
             <slot name="actions" v-bind="slotProps">
-              <button class="btn-sm btn" @click="close">Close</button>
+              <button class="btn-sm btn" @click="close()">Close</button>
             </slot>
           </div>
         </div>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 3c4361d..09523d8 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
+import Auth from '@/components/Auth.vue'
+
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -7,14 +9,17 @@ const props = defineProps<{
 const emit = defineEmits<{
   toggleSideBar: []
 }>()
+
+// const authRef = ref<InstanceType<typeof Auth> | null>(null)
+// const closeAuthModal = (close: () => void) => {
+//   close()
+//   authRef.value?.deleteAuthUi()
+// }
 </script>
 <template>
   <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
-      <div
-        class="flex items-center pl-3"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
-      >
+      <div class="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -33,7 +38,15 @@ const emit = defineEmits<{
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <button class="btn-outline btn-sm btn py-1 text-white">Sign in</button>
+        <Modal>
+          <template #activator="{ open }">
+            <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
+          </template>
+          <template #default><Auth /></template>
+          <template #actions="{ close }">
+            <button class="btn-sm btn" @click="close()">Close</button>
+          </template>
+        </Modal>
       </div>
     </div>
   </div>
diff --git a/src/main.ts b/src/main.ts
index f9a8518..818650d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import App from './App.vue'
 import { setDefaultNotes } from '@/composables/useNotes'
 import { defaultNotes } from '@/utils/defaultNotes'
 import { usePreferredDark, useFavicon } from '@vueuse/core'
+import '@/plugins/firebase'
 
 const isDark = usePreferredDark()
 const favicon = computed(() => (isDark.value ? '/contexted-white.ico' : '/contexted-black.ico'))
diff --git a/src/plugins/firebase.ts b/src/plugins/firebase.ts
new file mode 100644
index 0000000..043b63c
--- /dev/null
+++ b/src/plugins/firebase.ts
@@ -0,0 +1,22 @@
+// import { initializeApp } from 'firebase/app'
+import firebase from 'firebase/compat/app'
+// import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
+}
+
+// Initialize Firebase
+export const firebaseApp = firebase.initializeApp(firebaseConfig)
+// const analytics = getAnalytics(app);
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
deleted file mode 100644
index 0d879a6..0000000
--- a/src/utils/firebase.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { initializeApp } from 'firebase/app'
-
-// TODO: Replace the following with your app's Firebase project configuration
-const firebaseConfig: any = {
-  apiKey: import.meta.env.VUE_APP_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
-  databaseURL: import.meta.env.VUE_APP_FIREBASE_DATABASE_URL,
-  projectId: import.meta.env.VUE_APP_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VUE_APP_FIREBASE_MESSAGE_SENDER_ID,
-  appId: import.meta.env.VUE_APP_FIREBASE_APP_ID,
-  measurementId: import.meta.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
-}
-
-export const app = initializeApp(firebaseConfig)