feat: whyrating - initial project from turbostarter boilerplate

apps/web/src/modules/auth/form/login/passkey.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+import { AuthProvider } from "@turbostarter/auth";
+import { useTranslation } from "@turbostarter/i18n";
+import { Badge } from "@turbostarter/ui-web/badge";
+import { Button } from "@turbostarter/ui-web/button";
+import { Icons } from "@turbostarter/ui-web/icons";
+
+import { pathsConfig } from "~/config/paths";
+import { authClient } from "~/lib/auth/client";
+
+import { auth } from "../../lib/api";
+import { useAuthFormStore } from "../store";
+
+interface PasskeyLoginProps {
+  readonly redirectTo?: string;
+}
+
+export const PasskeyLogin = ({
+  redirectTo = pathsConfig.dashboard.user.index,
+}: PasskeyLoginProps) => {
+  const router = useRouter();
+  const { setProvider, setIsSubmitting, isSubmitting, provider } =
+    useAuthFormStore();
+  const { t } = useTranslation(["auth", "common"]);
+
+  const signIn = useMutation({
+    ...auth.mutations.signIn.passkey,
+    onMutate: () => {
+      setProvider(AuthProvider.PASSKEY);
+      setIsSubmitting(true);
+    },
+    onSettled: () => {
+      setIsSubmitting(false);
+    },
+    onSuccess: () => {
+      router.replace(redirectTo);
+    },
+  });
+
+  useEffect(() => {
+    void auth.mutations.signIn.passkey.mutationFn({ autoFill: true });
+  }, []);
+
+  return (
+    <Button
+      variant="outline"
+      className="relative gap-2"
+      size="lg"
+      onClick={() => signIn.mutate(undefined)}
+      disabled={isSubmitting}
+    >
+      {isSubmitting && provider === AuthProvider.PASSKEY ? (
+        <Icons.Loader2 className="size-4 animate-spin" />
+      ) : (
+        <>
+          <Icons.Key className="size-4" />
+          {t("login.passkey.cta")}
+        </>
+      )}
+
+      {authClient.isLastUsedLoginMethod(AuthProvider.PASSKEY) && (
+        <Badge className="absolute top-0 -right-4 z-10 -translate-y-1/2 shadow-sm">
+          {t("lastUsed")}
+        </Badge>
+      )}
+    </Button>
+  );
+};