add support for otp and mfa

2025-10-19 01:39:34 +08:00 · 2025-09-07 20:46:34 -04:00
parent 0d97a604f8
commit 270e59d9ea
8 changed files with 305 additions and 94 deletions
--- a/src/site/bun.lockb
+++ b/src/site/bun.lockb
--- a/src/site/package-lock.json
+++ b/src/site/package-lock.json
@@ -35,6 +35,7 @@
 				"clsx": "^2.1.1",
 				"cmdk": "^1.1.1",
 				"d3-time": "^3.1.0",
+				"input-otp": "^1.4.2",
 				"lucide-react": "^0.452.0",
 				"nanostores": "^0.11.4",
 				"pocketbase": "^0.26.2",
@@ -67,7 +68,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -81,7 +82,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
 			"integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-validator-identifier": "^7.27.1",
@@ -96,7 +97,7 @@
 			"version": "7.28.0",
 			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
 			"integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -106,7 +107,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz",
 			"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
@@ -137,7 +138,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
 			"integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.28.3",
@@ -154,7 +155,7 @@
 			"version": "7.27.2",
 			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
 			"integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/compat-data": "^7.27.2",
@@ -171,7 +172,7 @@
 			"version": "7.28.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
 			"integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -181,7 +182,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
 			"integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/traverse": "^7.27.1",
@@ -195,7 +196,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
 			"integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-module-imports": "^7.27.1",
@@ -213,7 +214,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
 			"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -223,7 +224,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
 			"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -233,7 +234,7 @@
 			"version": "7.27.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
 			"integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -243,7 +244,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.3.tgz",
 			"integrity": "sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/template": "^7.27.2",
@@ -257,7 +258,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
 			"integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/types": "^7.28.2"
@@ -285,7 +286,7 @@
 			"version": "7.27.2",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
 			"integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/code-frame": "^7.27.1",
@@ -300,7 +301,7 @@
 			"version": "7.28.3",
 			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.3.tgz",
 			"integrity": "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/code-frame": "^7.27.1",
@@ -319,7 +320,7 @@
 			"version": "7.28.2",
 			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
 			"integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-string-parser": "^7.27.1",
@@ -855,7 +856,7 @@
 			"version": "29.6.3",
 			"resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
 			"integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@sinclair/typebox": "^0.27.8"
@@ -868,7 +869,7 @@
 			"version": "29.6.3",
 			"resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
 			"integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jest/schemas": "^29.6.3",
@@ -886,7 +887,7 @@
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
 			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -908,7 +909,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -918,14 +919,14 @@
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.30",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
 			"integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -946,7 +947,7 @@
 			"version": "5.4.1",
 			"resolved": "https://registry.npmjs.org/@lingui/babel-plugin-lingui-macro/-/babel-plugin-lingui-macro-5.4.1.tgz",
 			"integrity": "sha512-9IO+PDvdneY8OCI8zvI1oDXpzryTMtyRv7uq9O0U1mFCvIPVd5dWQKQDu/CpgpYAc2+JG/izn5PNl9xzPc6ckw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/core": "^7.20.12",
@@ -1166,7 +1167,7 @@
 			"version": "5.4.1",
 			"resolved": "https://registry.npmjs.org/@lingui/conf/-/conf-5.4.1.tgz",
 			"integrity": "sha512-aDkj/bMSr/mCL8Nr1TS52v0GLCuVa4YqtRz+WvUCFZw/ovVInX0hKq1TClx/bSlhu60FzB/CbclxFMBw8aLVUg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.20.13",
@@ -2585,7 +2586,7 @@
 			"version": "0.27.8",
 			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
 			"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@swc/core": {
@@ -3255,14 +3256,14 @@
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
 			"integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/istanbul-lib-report": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
 			"integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/istanbul-lib-coverage": "*"
@@ -3272,7 +3273,7 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
 			"integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/istanbul-lib-report": "*"
@@ -3282,7 +3283,7 @@
 			"version": "24.3.0",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
 			"integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"undici-types": "~7.10.0"
@@ -3292,7 +3293,7 @@
 			"version": "19.1.11",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.11.tgz",
 			"integrity": "sha512-lr3jdBw/BGj49Eps7EvqlUaoeA0xpj3pc0RoJkHpYaCHkVK7i28dKyImLQb3JVlqs3aYSXf7qYuWOW/fgZnTXQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"csstype": "^3.0.2"
@@ -3302,7 +3303,7 @@
 			"version": "19.1.7",
 			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
 			"integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"@types/react": "^19.0.0"
@@ -3312,7 +3313,7 @@
 			"version": "17.0.33",
 			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
 			"integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/yargs-parser": "*"
@@ -3322,7 +3323,7 @@
 			"version": "21.0.3",
 			"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
 			"integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@vitejs/plugin-react-swc": {
@@ -3359,7 +3360,7 @@
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"color-convert": "^2.0.1"
@@ -3402,7 +3403,7 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
 			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-			"devOptional": true,
+			"dev": true,
 			"license": "Python-2.0"
 		},
 		"node_modules/aria-hidden": {
@@ -3497,7 +3498,7 @@
 			"version": "4.25.1",
 			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
 			"integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
-			"devOptional": true,
+			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3568,7 +3569,7 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
 			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -3578,7 +3579,7 @@
 			"version": "6.3.0",
 			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
 			"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=10"
@@ -3591,7 +3592,7 @@
 			"version": "1.0.30001727",
 			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
 			"integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
-			"devOptional": true,
+			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3612,7 +3613,7 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"ansi-styles": "^4.1.0",
@@ -3724,7 +3725,7 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"color-name": "~1.1.4"
@@ -3737,7 +3738,7 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/colors": {
@@ -3754,14 +3755,14 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
 			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/cosmiconfig": {
 			"version": "8.3.6",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
 			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"import-fresh": "^3.3.0",
@@ -3941,7 +3942,7 @@
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
 			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"ms": "^2.1.3"
@@ -4011,7 +4012,7 @@
 			"version": "1.5.182",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.182.tgz",
 			"integrity": "sha512-Lv65Btwv9W4J9pyODI6EWpdnhfvrve/us5h1WspW8B2Fb0366REPtY3hX7ounk1CkV/TBjWCEvCBBbYbmV0qCA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/emoji-regex": {
@@ -4039,7 +4040,7 @@
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
 			"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"is-arrayish": "^0.2.1"
@@ -4108,7 +4109,7 @@
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
 			"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -4196,7 +4197,7 @@
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
 			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
@@ -4222,7 +4223,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -4253,7 +4254,7 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
 			"integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"parent-module": "^1.0.0",
@@ -4273,6 +4274,16 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/input-otp": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz",
+			"integrity": "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+			}
+		},
 		"node_modules/internmap": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -4286,7 +4297,7 @@
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
 			"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/is-binary-path": {
@@ -4379,7 +4390,7 @@
 			"version": "29.6.3",
 			"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
 			"integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -4389,7 +4400,7 @@
 			"version": "29.7.0",
 			"resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.7.0.tgz",
 			"integrity": "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jest/types": "^29.6.3",
@@ -4407,7 +4418,7 @@
 			"version": "1.21.7",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
 			"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"jiti": "bin/jiti.js"
@@ -4429,7 +4440,7 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
 			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"argparse": "^2.0.1"
@@ -4442,7 +4453,7 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
 			"integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"jsesc": "bin/jsesc"
@@ -4455,14 +4466,14 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
 			"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/json5": {
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
 			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"json5": "lib/cli.js"
@@ -4475,7 +4486,7 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
 			"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -4724,7 +4735,7 @@
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/lodash": {
@@ -4773,7 +4784,7 @@
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
 			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-			"devOptional": true,
+			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"yallist": "^3.0.2"
@@ -4884,7 +4895,7 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
@@ -4925,7 +4936,7 @@
 			"version": "2.0.19",
 			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
 			"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/normalize-path": {
@@ -5021,7 +5032,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
 			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"callsites": "^3.0.0"
@@ -5034,7 +5045,7 @@
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
 			"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@babel/code-frame": "^7.0.0",
@@ -5063,7 +5074,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
 			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -5073,7 +5084,7 @@
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
@@ -5135,7 +5146,7 @@
 			"version": "29.7.0",
 			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
 			"integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jest/schemas": "^29.6.3",
@@ -5150,7 +5161,7 @@
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
 			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=10"
@@ -5396,7 +5407,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
 			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=4"
@@ -5494,7 +5505,7 @@
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
 			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"devOptional": true,
+			"dev": true,
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -5677,7 +5688,7 @@
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"has-flag": "^4.0.0"
@@ -5811,7 +5822,7 @@
 			"version": "5.9.2",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
 			"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
-			"devOptional": true,
+			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
@@ -5825,14 +5836,14 @@
 			"version": "7.10.0",
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
 			"integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
-			"devOptional": true,
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
 			"integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-			"devOptional": true,
+			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -6164,7 +6175,7 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
 			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-			"devOptional": true,
+			"dev": true,
 			"license": "ISC"
 		}
 	}
--- a/src/site/package.json
+++ b/src/site/package.json
@@ -38,6 +38,7 @@
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
 		"d3-time": "^3.1.0",
+		"input-otp": "^1.4.2",
 		"lucide-react": "^0.452.0",
 		"nanostores": "^0.11.4",
 		"pocketbase": "^0.26.2",
--- a/src/site/src/components/login/auth-form.tsx
+++ b/src/site/src/components/login/auth-form.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { LoaderCircle, LockIcon, LogInIcon, MailIcon } from "lucide-react"
+import { KeyIcon, LoaderCircle, LockIcon, LogInIcon, MailIcon } from "lucide-react"
 import { $authenticated } from "@/lib/stores"
 import * as v from "valibot"
 import { toast } from "../ui/use-toast"
@@ -14,6 +14,7 @@ import { AuthMethodsList, AuthProviderInfo, OAuth2AuthConfig } from "pocketbase"
 import { $router, Link, prependBasePath } from "../router"
 import { getPagePath } from "@nanostores/router"
 import { pb } from "@/lib/api"
+import { OtpInputForm } from "./otp-forms"

 const honeypot = v.literal("")
 const emailSchema = v.pipe(v.string(), v.email(t`Invalid email address.`))
@@ -36,10 +37,11 @@ const RegisterSchema = v.looseObject({
 	passwordConfirm: passwordSchema,
 })

-const showLoginFaliedToast = () => {
+export const showLoginFaliedToast = (description?: string) => {
+	description ||= t`Please check your credentials and try again`
 	toast({
 		title: t`Login attempt failed`,
-		description: t`Please check your credentials and try again`,
+		description,
 		variant: "destructive",
 	})
 }
@@ -65,6 +67,8 @@ export function UserAuthForm({
 	const [isLoading, setIsLoading] = useState<boolean>(false)
 	const [isOauthLoading, setIsOauthLoading] = useState<boolean>(false)
 	const [errors, setErrors] = useState<Record<string, string | undefined>>({})
+	const [mfaId, setMfaId] = useState<string | undefined>()
+	const [otpId, setOtpId] = useState<string | undefined>()

 	const handleSubmit = useCallback(
 		async (e: React.FormEvent<HTMLFormElement>) => {
@@ -106,17 +110,19 @@ export function UserAuthForm({
 				}
 				$authenticated.set(true)
 			} catch (err: any) {
+				const mfaId = err?.response?.mfaId
+				if (!mfaId) {
 					showLoginFaliedToast()
-				// todo: implement MFA
-				// const mfaId = err.response?.mfaId
-				// if (!mfaId) {
-				// 	showLoginFaliedToast()
-				// 	throw err
-				// }
-				// the user needs to authenticate again with another auth method, for example OTP
-				// const result = await pb.collection("users").requestOTP(email)
-				// ... show a modal for users to check their email and to enter the received code ...
-				// await pb.collection("users").authWithOTP(result.otpId, "EMAIL_CODE", { mfaId: mfaId })
+					throw err
+				}
+				setMfaId(mfaId)
+				try {
+					const { otpId } = await pb.collection("users").requestOTP(email)
+					setOtpId(otpId)
+				} catch (err) {
+					console.log({ err })
+					showLoginFaliedToast()
+				}
 			} finally {
 				setIsLoading(false)
 			}
@@ -131,6 +137,8 @@ export function UserAuthForm({
 	const authProviders = authMethods.oauth2.providers ?? []
 	const oauthEnabled = authMethods.oauth2.enabled && authProviders.length > 0
 	const passwordEnabled = authMethods.password.enabled
+	const otpEnabled = authMethods.otp.enabled
+	const mfaEnabled = authMethods.mfa.enabled

 	function loginWithOauth(provider: AuthProviderInfo, forcePopup = false) {
 		setIsOauthLoading(true)
@@ -173,6 +181,10 @@ export function UserAuthForm({
 		}
 	}, [])

+	if (otpId && mfaId) {
+		return <OtpInputForm otpId={otpId} mfaId={mfaId} />
+	}
+
 	return (
 		<div className={cn("grid gap-6", className)} {...props}>
 			{passwordEnabled && (
@@ -249,7 +261,7 @@ export function UserAuthForm({
 							</button>
 						</div>
 					</form>
-					{(isFirstRun || oauthEnabled) && (
+					{(isFirstRun || oauthEnabled || (otpEnabled && !mfaEnabled)) && (
 						// only show 'continue with' during onboarding or if we have auth providers
 						<div className="relative">
 							<div className="absolute inset-0 flex items-center">
@@ -264,6 +276,15 @@ export function UserAuthForm({
 					)}
 				</>
 			)}
+			{/* hide OTP button if MFA is enabled (it will be used as MFA) */}
+			{otpEnabled && !mfaEnabled && (
+				<div className="grid gap-2 -mt-1">
+					<Link href="/request-otp" type="button" className={cn(buttonVariants({ variant: "outline" }), "flex gap-2")}>
+						<KeyIcon className="size-4" />
+						<Trans>One-time password</Trans>
+					</Link>
+				</div>
+			)}
 			{oauthEnabled && (
 				<div className="grid gap-2 -mt-1">
 					{authMethods.oauth2.providers.map((provider) => (
--- a/src/site/src/components/login/login.tsx
+++ b/src/site/src/components/login/login.tsx
@@ -9,6 +9,7 @@ import { AuthMethodsList } from "pocketbase"
 import { useTheme } from "../theme-provider"
 import { pb } from "@/lib/api"
 import { ModeToggle } from "../mode-toggle"
+import { OtpRequestForm } from "./otp-forms"

 export default function () {
 	const page = useStore($router)
@@ -37,6 +38,8 @@ export default function () {
 			return t`Please create an admin account`
 		} else if (page?.route === "forgot_password") {
 			return t`Enter email address to reset password`
+		} else if (page?.route === "request_otp") {
+			return t`Request a one-time password`
 		} else {
 			return t`Please sign in to your account`
 		}
@@ -51,7 +54,7 @@ export default function () {
 			<div
 				className="grid gap-5 w-full px-4 mx-auto"
 				// @ts-ignore
-				style={{ maxWidth: "22em", "--border": theme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
+				style={{ maxWidth: "21.5em", "--border": theme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
 			>
 				<div className="absolute top-3 right-3">
 					<ModeToggle />
@@ -65,6 +68,8 @@ export default function () {
 				</div>
 				{page?.route === "forgot_password" ? (
 					<ForgotPassword />
+				) : page?.route === "request_otp" ? (
+					<OtpRequestForm />
 				) : (
 					<UserAuthForm isFirstRun={isFirstRun} authMethods={authMethods} />
 				)}
--- a/src/site/src/components/login/otp-forms.tsx
+++ b/src/site/src/components/login/otp-forms.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useState } from "react"
+import { pb } from "@/lib/api"
+import { $authenticated } from "@/lib/stores"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/otp"
+import { Trans } from "@lingui/react/macro"
+import { showLoginFaliedToast } from "./auth-form"
+import { cn } from "@/lib/utils"
+import { MailIcon, LoaderCircle, SendHorizonalIcon } from "lucide-react"
+import { Label } from "../ui/label"
+import { buttonVariants } from "../ui/button"
+import { Input } from "../ui/input"
+import { $router } from "../router"
+
+export function OtpInputForm({ otpId, mfaId }: { otpId: string; mfaId: string }) {
+	const [value, setValue] = useState("")
+
+	if (value.length === 6) {
+		pb.collection("users")
+			.authWithOTP(otpId, value, { mfaId })
+			.then(() => {
+				$router.open("/")
+				$authenticated.set(true)
+			})
+			.catch((err) => {
+				showLoginFaliedToast(err.message)
+			})
+	}
+
+	return (
+		<div className="grid gap-3 items-center justify-center">
+			<InputOTP maxLength={6} value={value} onChange={setValue} autoFocus>
+				<InputOTPGroup>
+					{Array.from({ length: 6 }).map((_, i) => (
+						<InputOTPSlot key={i} index={i} />
+					))}
+				</InputOTPGroup>
+			</InputOTP>
+			<div className="text-center text-sm text-muted-foreground">
+				<Trans>Enter your one-time password.</Trans>
+			</div>
+		</div>
+	)
+}
+
+export function OtpRequestForm() {
+	const [isLoading, setIsLoading] = useState<boolean>(false)
+	const [email, setEmail] = useState("")
+	const [otpId, setOtpId] = useState<string | undefined>()
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement>) => {
+			e.preventDefault()
+			setIsLoading(true)
+			try {
+				// console.log(email)
+				const { otpId } = await pb.collection("users").requestOTP(email)
+				setOtpId(otpId)
+			} catch (e: any) {
+				showLoginFaliedToast(e?.message)
+			} finally {
+				setIsLoading(false)
+				setEmail("")
+			}
+		},
+		[email]
+	)
+
+	if (otpId) {
+		return <OtpInputForm otpId={otpId} mfaId={""} />
+	}
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<div className="grid gap-3">
+				<div className="grid gap-1 relative">
+					<MailIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+					<Label className="sr-only" htmlFor="email">
+						<Trans>Email</Trans>
+					</Label>
+					<Input
+						value={email}
+						onChange={(e) => setEmail(e.target.value)}
+						id="email"
+						name="email"
+						required
+						placeholder="name@example.com"
+						type="email"
+						autoCapitalize="none"
+						autoComplete="email"
+						autoCorrect="off"
+						disabled={isLoading}
+						className="ps-9"
+					/>
+				</div>
+				<button className={cn(buttonVariants())} disabled={isLoading}>
+					{isLoading ? (
+						<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
+					) : (
+						<SendHorizonalIcon className="me-2 h-4 w-4" />
+					)}
+					<Trans>Request OTP</Trans>
+				</button>
+			</div>
+		</form>
+	)
+}
--- a/src/site/src/components/router.tsx
+++ b/src/site/src/components/router.tsx
@@ -5,6 +5,7 @@ const routes = {
 	system: `/system/:name`,
 	settings: `/settings/:name?`,
 	forgot_password: `/forgot-password`,
+	request_otp: `/request-otp`,
 } as const

 /**
--- a/src/site/src/components/ui/otp.tsx
+++ b/src/site/src/components/ui/otp.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput> & {
+	containerClassName?: string
+}) {
+	return (
+		<OTPInput
+			data-slot="input-otp"
+			containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
+			className={cn("disabled:cursor-not-allowed", className)}
+			{...props}
+		/>
+	)
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="input-otp-group" className={cn("flex items-center", className)} {...props} />
+}
+
+function InputOTPSlot({
+	index,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	index: number
+}) {
+	const inputOTPContext = React.useContext(OTPInputContext)
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+	return (
+		<div
+			data-slot="input-otp-slot"
+			data-active={isActive}
+			className={cn(
+				"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+				className
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+				</div>
+			)}
+		</div>
+	)
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="input-otp-separator" role="separator" {...props}>
+			<MinusIcon />
+		</div>
+	)
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }