implement turnstile

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@marsidev/react-turnstile": "^1.0.0",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",

src/api/backend/auth/signin.ts

@@ -1,10 +1,9 @@
-import { getCookieValue } from "@/lib/cookie";
 import { client } from "../base";
 import { LoginResponse } from "./types";
 
-export const login = ({ code }: { code: string }) => {
+export const login = (body: { code: string; ttkn: string }) => {
   return client<LoginResponse>("/_secure/signin/identifier", {
     method: "POST",
-    body: { code, uid: getCookieValue("userId"), ttkn: getCookieValue("authKey") },
+    body,
   });
 };

src/api/backend/auth/signup.ts

@@ -1,19 +1,17 @@
-import { getCookieValue } from "@/lib/cookie";
 import { client } from "../base";
 import { GenerateUserResponse, VerifyAuthKeyResponse } from "./types";
 
-export const verifyAuthKey = () => {
+export const verifyAuthKey = (ttkn: string) => {
   return client<VerifyAuthKeyResponse>("/_secure/signup/verify", {
     method: "POST",
     body: {
-      ttkn: getCookieValue("authKey"),
-      uid: getCookieValue("userId"),
+      ttkn,
     },
   });
 };
 
-export const generateUser = async ({ username }: { username: string }) => {
-  const verifyAuthKeyResponse = await verifyAuthKey();
+export const generateUser = async ({ username, ttkn }: { username: string; ttkn: string }) => {
+  const verifyAuthKeyResponse = await verifyAuthKey(ttkn);
   if (!verifyAuthKeyResponse?.stk) {
     throw new Error("Invalid auth key");
   }

src/components/layout/turnstile.tsx

@@ -0,0 +1,21 @@
+import { useSettingsStore } from "@/stores/settings";
+import { Turnstile, TurnstileInstance, TurnstileProps } from "@marsidev/react-turnstile";
+import { Optional } from "@tanstack/react-query";
+import * as React from "react";
+
+type TurnstileWidgetProps = Optional<TurnstileProps, "siteKey">;
+
+export const TurnstileWidget = React.forwardRef<TurnstileInstance | undefined, TurnstileWidgetProps>((props, ref) => {
+  const theme = useSettingsStore((state) => state.theme);
+
+  return (
+    <Turnstile
+      {...props}
+      options={{
+        theme,
+      }}
+      ref={ref}
+      siteKey="0x4AAAAAAAhednrFondcId0A"
+    />
+  );
+});

src/routes/login.tsx

@@ -12,13 +12,15 @@ import { login } from "@/api/backend/auth/signin";
 import { useAuthStore } from "@/stores/auth";
 import { toast } from "sonner";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { TurnstileWidget } from "@/components/layout/turnstile";
 
 export const Route = createFileRoute("/login")({
   component: Login,
 });
 
 const loginFormSchema = z.object({
   code: z.string({ message: "Code must be 12 digits" }).min(12, { message: "Code must be 12 digits" }).max(12, { message: "Code must be 12 digits" }),
+  ttkn: z.string({ message: "Captcha not completed" }),
 });
 
 function InputOTPGroups() {
@@ -78,7 +80,7 @@ function Login() {
             <CardHeader>
               <CardTitle>Login</CardTitle>
             </CardHeader>
-            <CardContent>
+            <CardContent className="flex flex-col gap-4">
               <FormField
                 control={form.control}
                 name="code"
@@ -95,6 +97,27 @@ function Login() {
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="ttkn"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <TurnstileWidget
+                        id={field.name}
+                        onSuccess={(token) => {
+                          form.setValue("ttkn", token);
+                        }}
+                        onExpire={() => form.setError("ttkn", { message: "Captcha expired" })}
+                        onError={() => form.setError("ttkn", { message: "Captcha not completed" })}
+                        onUnsupported={() => form.setError("ttkn", { message: "Captcha not supported" })}
+                        onTimeout={() => form.setError("ttkn", { message: "Captcha timed out" })}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </CardContent>
             <CardFooter className="flex-col justify-between gap-2 xl:flex-row xl:gap-0">
               <p className="text-sm">

src/routes/register.tsx

@@ -14,6 +14,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { toast } from "sonner";
 import { ClipBoardButton } from "@/components/layout/clipboard-button";
+import { TurnstileWidget } from "@/components/layout/turnstile";
 
 export const Route = createFileRoute("/register")({
   component: Register,
@@ -24,6 +25,7 @@ export const Route = createFileRoute("/register")({
 
 const displayNameSchema = z.object({
   displayName: z.string().min(1, { message: "Display name is required" }),
+  ttkn: z.string({ message: "Captcha not completed" }),
 });
 
 function Register() {
@@ -58,12 +60,12 @@ function Register() {
   }, [data, form]);
 
   const handleDisplayName = (data: z.infer<typeof displayNameSchema>) => {
-    mutate({ username: data.displayName });
+    mutate({ username: data.displayName, ttkn: data.ttkn });
   };
 
   return (
     <div className="flex flex-1 items-center justify-center">
-      <Card className="w-full lg:w-2/5">
+      <Card className="w-full lg:w-3/5">
         <CardHeader>
           <CardTitle>Register</CardTitle>
         </CardHeader>
@@ -84,7 +86,7 @@ function Register() {
             </div>
           ) : (
             <Form {...form}>
-              <form onSubmit={form.handleSubmit(handleDisplayName)}>
+              <form onSubmit={form.handleSubmit(handleDisplayName)} className="flex flex-col gap-4">
                 <FormField
                   control={form.control}
                   name="displayName"
@@ -99,6 +101,27 @@ function Register() {
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="ttkn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <TurnstileWidget
+                          id={field.name}
+                          onSuccess={(token) => {
+                            form.setValue("ttkn", token);
+                          }}
+                          onExpire={() => form.setError("ttkn", { message: "Captcha expired" })}
+                          onError={() => form.setError("ttkn", { message: "Captcha not completed" })}
+                          onUnsupported={() => form.setError("ttkn", { message: "Captcha not supported" })}
+                          onTimeout={() => form.setError("ttkn", { message: "Captcha timed out" })}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
                 <div className="flex justify-end pt-4">
                   <Button type="submit" loading={isPending} className="w-full lg:w-fit">
                     Continue