feat: support webauthn login (#104)

* feat: support webauthn login

* manually merge

* feat: better feedback to users

* fix codefactor

* fix: unable to sign in for non-admin users

package.json

@@ -50,6 +50,7 @@
     "vite-plugin-solid": "^2.3.0"
   },
   "dependencies": {
+    "@github/webauthn-json": "^2.1.1",
     "@hope-ui/solid": "0.6.7",
     "@monaco-editor/loader": "^1.3.2",
     "@motionone/solid": "^10.14.1",

src/lang/en/settings.json

@@ -84,5 +84,6 @@
   "token": "Token",
   "version": "Version",
   "video_autoplay": "Video autoplay",
-  "video_types": "Video types"
+  "video_types": "Video types",
+  "webauthn_login_enabled": "Webauthn login enabled"
 }

src/lang/en/users.json

@@ -38,5 +38,9 @@
   "modify_nothing": "So you cannot modify anything in the manage page.",
   "sso_login": "Single sign-on Login",
   "connect_sso": "Connect Single sign-on Platform",
-  "disconnect_sso": "Disconnect Single sign-on Platform"
+  "disconnect_sso": "Disconnect Single sign-on Platform",
+  "webauthn": "WebAuthn",
+  "add_webauthn": "Add a Webauthn credential",
+  "add_webauthn_success": "Webauthn credential successfully added!",
+  "webauthn_not_supported": "Webauthn is not supported in your browser or you are in an unsafe origin"
 }

src/pages/login/index.tsx

@@ -10,6 +10,7 @@ import {
   HStack,
   VStack,
   Checkbox,
+  Icon,
 } from "@hope-ui/solid"
 import { createMemo, createSignal, Show } from "solid-js"
 import { SwitchColorMode, SwitchLanguageWhite } from "~/components"
@@ -20,13 +21,22 @@ import {
   notify,
   handleRespWithoutNotify,
   base_path,
+  handleResp,
   hashPwd,
 } from "~/utils"
-import { Resp } from "~/types"
+import { PResp, Resp } from "~/types"
 import LoginBg from "./LoginBg"
 import { createStorageSignal } from "@solid-primitives/storage"
-import { getSetting } from "~/store"
+import { getSetting, getSettingBool } from "~/store"
 import { SSOLogin } from "./SSOLogin"
+import { IoFingerPrint } from "solid-icons/io"
+import {
+  parseRequestOptionsFromJSON,
+  get,
+  AuthenticationPublicKeyCredential,
+  supported,
+  CredentialRequestOptionsJSON,
+} from "@github/webauthn-json/browser-ponyfill"
 
 const Login = () => {
   const logos = getSetting("logo").split("\n")
@@ -44,6 +54,7 @@ const Login = () => {
     localStorage.getItem("password") || "",
   )
   const [opt, setOpt] = createSignal("")
+  const [useauthn, setuseauthn] = createSignal(false)
   const [remember, setRemember] = createStorageSignal("remember-pwd", "false")
   const [loading, data] = useFetch(
     async (): Promise<Resp<{ token: string }>> =>
@@ -53,31 +64,88 @@ const Login = () => {
         otp_code: opt(),
       }),
   )
+  const [, postauthnlogin] = useFetch(
+    (
+      session: string,
+      credentials: AuthenticationPublicKeyCredential,
+      username: string,
+    ): Promise<Resp<{ token: string }>> =>
+      r.post(
+        "/authn/webauthn_finish_login?username=" + username,
+        JSON.stringify(credentials),
+        {
+          headers: {
+            session: session,
+          },
+        },
+      ),
+  )
+  interface Webauthntemp {
+    session: string
+    options: CredentialRequestOptionsJSON
+  }
+  const [, getauthntemp] = useFetch(
+    (username): PResp<Webauthntemp> =>
+      r.get("/authn/webauthn_begin_login?username=" + username),
+  )
   const { searchParams, to } = useRouter()
+  const AuthnSignEnabled = getSettingBool("webauthn_login_enabled")
+  const AuthnSwitch = async () => {
+    setuseauthn(!useauthn())
+  }
   const Login = async () => {
-    if (remember() === "true") {
-      localStorage.setItem("username", username())
-      localStorage.setItem("password", password())
+    if (!useauthn()) {
+      if (remember() === "true") {
+        localStorage.setItem("username", username())
+        localStorage.setItem("password", password())
+      } else {
+        localStorage.removeItem("username")
+        localStorage.removeItem("password")
+      }
+      const resp = await data()
+      handleRespWithoutNotify(
+        resp,
+        (data) => {
+          notify.success(t("login.success"))
+          changeToken(data.token)
+          to(
+            decodeURIComponent(searchParams.redirect || base_path || "/"),
+            true,
+          )
+        },
+        (msg, code) => {
+          if (!needOpt() && code === 402) {
+            setNeedOpt(true)
+          } else {
+            notify.error(msg)
+          }
+        },
+      )
     } else {
-      localStorage.removeItem("username")
-      localStorage.removeItem("password")
+      if (!supported()) {
+        notify.error(t("users.webauthn_not_supported"))
+        return
+      }
+      if (remember() === "true") {
+        localStorage.setItem("username", username())
+      } else {
+        localStorage.removeItem("username")
+      }
+      const resp = await getauthntemp(username())
+      handleResp(resp, async (data) => {
+        const options = parseRequestOptionsFromJSON(data.options)
+        const credentials = await get(options)
+        const resp = await postauthnlogin(data.session, credentials, username())
+        handleRespWithoutNotify(resp, (data) => {
+          notify.success(t("login.success"))
+          changeToken(data.token)
+          to(
+            decodeURIComponent(searchParams.redirect || base_path || "/"),
+            true,
+          )
+        })
+      })
     }
-    const resp = await data()
-    handleRespWithoutNotify(
-      resp,
-      (data) => {
-        notify.success(t("login.success"))
-        changeToken(data.token)
-        to(decodeURIComponent(searchParams.redirect || base_path || "/"), true)
-      },
-      (msg, code) => {
-        if (!needOpt() && code === 402) {
-          setNeedOpt(true)
-        } else {
-          notify.error(msg)
-        }
-      },
-    )
   }
   const [needOpt, setNeedOpt] = createSignal(false)
 
@@ -122,18 +190,20 @@ const Login = () => {
             value={username()}
             onInput={(e) => setUsername(e.currentTarget.value)}
           />
-          <Input
-            name="password"
-            placeholder={t("login.password-tips")}
-            type="password"
-            value={password()}
-            onInput={(e) => setPassword(e.currentTarget.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                Login()
-              }
-            }}
-          />
+          <Show when={!useauthn()}>
+            <Input
+              name="password"
+              placeholder={t("login.password-tips")}
+              type="password"
+              value={password()}
+              onInput={(e) => setPassword(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  Login()
+                }
+              }}
+            />
+          </Show>
           <Flex
             px="$1"
             w="$full"
@@ -156,20 +226,22 @@ const Login = () => {
           </Flex>
         </Show>
         <HStack w="$full" spacing="$2">
-          <Button
-            colorScheme="primary"
-            w="$full"
-            onClick={() => {
-              if (needOpt()) {
-                setOpt("")
-              } else {
-                setUsername("")
-                setPassword("")
-              }
-            }}
-          >
-            {t("login.clear")}
-          </Button>
+          <Show when={!useauthn()}>
+            <Button
+              colorScheme="primary"
+              w="$full"
+              onClick={() => {
+                if (needOpt()) {
+                  setOpt("")
+                } else {
+                  setUsername("")
+                  setPassword("")
+                }
+              }}
+            >
+              {t("login.clear")}
+            </Button>
+          </Show>
           <Button w="$full" loading={loading()} onClick={Login}>
             {t("login.login")}
           </Button>
@@ -197,6 +269,15 @@ const Login = () => {
           <SwitchLanguageWhite />
           <SwitchColorMode />
           <SSOLogin />
+          <Show when={AuthnSignEnabled}>
+            <Icon
+              cursor="pointer"
+              boxSize="$8"
+              as={IoFingerPrint}
+              p="$0_5"
+              onclick={AuthnSwitch}
+            />
+          </Show>
         </Flex>
       </VStack>
       <LoginBg />