refactor: added auth hooks for handling sign and signup logics

apps/web/src/app/(auth)/login/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { signIn } from "@opencut/auth/client";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -10,7 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Suspense, useState } from "react";
+import { Suspense } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
@@ -18,51 +17,47 @@ import Link from "next/link";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { ArrowLeft, Loader2 } from "lucide-react";
 import { GoogleIcon } from "@/components/icons";
+import { useLogin } from "@/hooks/auth/useLogin";
 
-function LoginForm() {
+export default function LoginPage() {
   const router = useRouter();
-  const [email, setEmail] = useState("");
+  const {
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
-
-  const handleLogin = async () => {
-    setError(null);
-    setIsEmailLoading(true);
-
-    const { error } = await signIn.email({
     email,
+    setEmail,
     password,
-    });
+    setPassword,
-
+    error,
-    if (error) {
+    isAnyLoading,
-      setError(error.message || "An unexpected error occurred.");
+    isEmailLoading,
-      setIsEmailLoading(false);
+    isGoogleLoading,
-      return;
+    handleLogin,
-    }
+    handleGoogleLogin,
-
+  } = useLogin();
-    router.push("/editor");
-  };
-
-  const handleGoogleLogin = async () => {
-    setError(null);
-    setIsGoogleLoading(true);
-
-    try {
-      await signIn.social({
-        provider: "google",
-        callbackURL: "/editor",
-      });
-    } catch (error) {
-      setError("Failed to sign in with Google. Please try again.");
-      setIsGoogleLoading(false);
-    }
-  };
-
-  const isAnyLoading = isEmailLoading || isGoogleLoading;
 
   return (
+    <div className="flex h-screen items-center justify-center relative">
+      <Button
+        variant="text"
+        onClick={() => router.back()}
+        className="absolute top-6 left-6"
+      >
+        <ArrowLeft className="h-5 w-5" /> Back
+      </Button>
+      <Card className="w-[400px] shadow-lg border-0">
+        <CardHeader className="text-center pb-4">
+          <CardTitle className="text-2xl font-semibold">Welcome back</CardTitle>
+          <CardDescription className="text-base">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <Suspense
+            fallback={
+              <div className="text-center">
+                <Loader2 className="animate-spin" />
+              </div>
+            }
+          >
             <div className="flex flex-col space-y-6">
               {error && (
                 <Alert variant="destructive">
@@ -128,38 +123,6 @@ function LoginForm() {
                 </Button>
               </div>
             </div>
-  );
-}
-
-export default function LoginPage() {
-  const router = useRouter();
-
-  return (
-    <div className="flex h-screen items-center justify-center relative">
-      <Button
-        variant="text"
-        onClick={() => router.back()}
-        className="absolute top-6 left-6"
-      >
-        <ArrowLeft className="h-5 w-5" /> Back
-      </Button>
-      <Card className="w-[400px] shadow-lg border-0">
-        <CardHeader className="text-center pb-4">
-          <CardTitle className="text-2xl font-semibold">Welcome back</CardTitle>
-          <CardDescription className="text-base">
-            Sign in to your account to continue
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-0">
-          <Suspense
-            fallback={
-              <div className="text-center">
-                <Loader2 className="animate-spin" />
-              </div>
-            }
-          >
-            <LoginForm />
-          </Suspense>
             <div className="mt-6 text-center text-sm">
               Don't have an account?{" "}
               <Link
@@ -169,6 +132,7 @@ export default function LoginPage() {
                 Sign up
               </Link>
             </div>
+          </Suspense>
         </CardContent>
       </Card>
     </div>

apps/web/src/app/(auth)/signup/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { signUp, signIn } from "@opencut/auth/client";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -10,62 +9,59 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Suspense, useState } from "react";
+import { Suspense } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import Link from "next/link";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Loader2, ArrowLeft } from "lucide-react";
+import { ArrowLeft, Loader2 } from "lucide-react";
 import { GoogleIcon } from "@/components/icons";
+import { useSignUp } from "@/hooks/auth/useSignUp";
 
-function SignUpForm() {
+export default function SignUpPage() {
   const router = useRouter();
-  const [name, setName] = useState("");
+  const {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
-
-  const handleSignUp = async () => {
-    setError(null);
-    setIsEmailLoading(true);
-
-    const { error } = await signUp.email({
     name,
+    setName,
     email,
+    setEmail,
     password,
-    });
+    setPassword,
-
+    error,
-    if (error) {
+    isAnyLoading,
-      setError(error.message || "An unexpected error occurred.");
+    isEmailLoading,
-      setIsEmailLoading(false);
+    isGoogleLoading,
-      return;
+    handleSignUp,
-    }
+    handleGoogleSignUp,
-
+  } = useSignUp();
-    router.push("/login");
-  };
-
-  const handleGoogleSignUp = async () => {
-    setError(null);
-    setIsGoogleLoading(true);
-
-    try {
-      await signIn.social({
-        provider: "google",
-      });
-
-      router.push("/editor");
-    } catch (error) {
-      setError("Failed to sign up with Google. Please try again.");
-      setIsGoogleLoading(false);
-    }
-  };
-
-  const isAnyLoading = isEmailLoading || isGoogleLoading;
 
   return (
+    <div className="flex h-screen items-center justify-center relative">
+      <Button
+        variant="text"
+        onClick={() => router.back()}
+        className="absolute top-6 left-6"
+      >
+        <ArrowLeft className="h-5 w-5" /> Back
+      </Button>
+      <Card className="w-[400px] shadow-lg border-0">
+        <CardHeader className="text-center pb-4">
+          <CardTitle className="text-2xl font-semibold">
+            Create your account
+          </CardTitle>
+          <CardDescription className="text-base">
+            Get started with your free account today
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <Suspense
+            fallback={
+              <div className="text-center">
+                <Loader2 className="animate-spin" />
+              </div>
+            }
+          >
             <div className="flex flex-col space-y-6">
               {error && (
                 <Alert variant="destructive">
@@ -73,7 +69,6 @@ function SignUpForm() {
                   <AlertDescription>{error}</AlertDescription>
                 </Alert>
               )}
-
               <Button
                 onClick={handleGoogleSignUp}
                 variant="outline"
@@ -87,7 +82,6 @@ function SignUpForm() {
                 )}{" "}
                 Continue with Google
               </Button>
-
               <div className="relative">
                 <div className="absolute inset-0 flex items-center">
                   <Separator className="w-full" />
@@ -98,7 +92,6 @@ function SignUpForm() {
                   </span>
                 </div>
               </div>
-
               <div className="space-y-4">
                 <div className="space-y-2">
                   <Label htmlFor="name">Full Name</Label>
@@ -150,41 +143,6 @@ function SignUpForm() {
                 </Button>
               </div>
             </div>
-  );
-}
-
-export default function SignUpPage() {
-  const router = useRouter();
-
-  return (
-    <div className="flex h-screen items-center justify-center relative">
-      <Button
-        variant="text"
-        onClick={() => router.back()}
-        className="absolute top-6 left-6"
-      >
-        <ArrowLeft className="h-5 w-5" /> Back
-      </Button>
-
-      <Card className="w-[400px] shadow-lg border-0">
-        <CardHeader className="text-center pb-4">
-          <CardTitle className="text-2xl font-semibold">
-            Create your account
-          </CardTitle>
-          <CardDescription className="text-base">
-            Get started with your free account today
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-0">
-          <Suspense
-            fallback={
-              <div className="text-center">
-                <Loader2 className="animate-spin" />
-              </div>
-            }
-          >
-            <SignUpForm />
-          </Suspense>
             <div className="mt-6 text-center text-sm">
               Already have an account?{" "}
               <Link
@@ -194,6 +152,7 @@ export default function SignUpPage() {
                 Sign in
               </Link>
             </div>
+          </Suspense>
         </CardContent>
       </Card>
     </div>

apps/web/src/hooks/auth/useLogin.ts

@@ -0,0 +1,60 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/navigation";
+import { signIn } from "@opencut/auth/client";
+
+export function useLogin() {
+    const router = useRouter();
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [isEmailLoading, setIsEmailLoading] = useState(false);
+    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+
+    const handleLogin = useCallback(async () => {
+        setError(null);
+        setIsEmailLoading(true);
+
+        const { error } = await signIn.email({
+            email,
+            password,
+        });
+
+        if (error) {
+            setError(error.message || "An unexpected error occurred.");
+            setIsEmailLoading(false);
+            return;
+        }
+
+        router.push("/editor");
+    }, [router, email, password]);
+
+    const handleGoogleLogin = async () => {
+        setError(null);
+        setIsGoogleLoading(true);
+
+        try {
+            await signIn.social({
+                provider: "google",
+                callbackURL: "/editor",
+            });
+        } catch (error) {
+            setError("Failed to sign in with Google. Please try again.");
+            setIsGoogleLoading(false);
+        }
+    };
+
+    const isAnyLoading = isEmailLoading || isGoogleLoading;
+
+    return {
+        email,
+        setEmail,
+        password,
+        setPassword,
+        error,
+        isEmailLoading,
+        isGoogleLoading,
+        isAnyLoading,
+        handleLogin,
+        handleGoogleLogin,
+    };
+}

apps/web/src/hooks/auth/useSignUp.ts

@@ -0,0 +1,65 @@
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { signUp, signIn } from "@opencut/auth/client";
+
+export function useSignUp() {
+    const router = useRouter();
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [isEmailLoading, setIsEmailLoading] = useState(false);
+    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+
+    const handleSignUp = useCallback(async () => {
+        setError(null);
+        setIsEmailLoading(true);
+
+        const { error } = await signUp.email({
+            name,
+            email,
+            password,
+        });
+
+        if (error) {
+            setError(error.message || "An unexpected error occurred.");
+            setIsEmailLoading(false);
+            return;
+        }
+
+        router.push("/login");
+    }, [name, email, password, router]);
+
+    const handleGoogleSignUp = useCallback(async () => {
+        setError(null);
+        setIsGoogleLoading(true);
+
+        try {
+            await signIn.social({
+                provider: "google",
+            });
+
+            router.push("/editor");
+        } catch (error) {
+            setError("Failed to sign up with Google. Please try again.");
+            setIsGoogleLoading(false);
+        }
+    }, [router]);
+
+    const isAnyLoading = isEmailLoading || isGoogleLoading;
+
+    return {
+        name,
+        setName,
+        email,
+        setEmail,
+        password,
+        setPassword,
+        error,
+        isEmailLoading,
+        isGoogleLoading,
+        isAnyLoading,
+        handleSignUp,
+        handleGoogleSignUp,
+    };
+}