build error fix.

Author: DavidK4leido5

apps/codebility/app/auth/2fa-challenge/_components/TwoFactorForm.tsx

@@ -2,14 +2,13 @@
 
 import { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { getClientSupabase } from "@/utils/supabase/client";
+import { createClientClientComponent } from "@/utils/supabase/client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@codevs/ui/input";
 import { ArrowLeft } from "lucide-react";
 import toast from "react-hot-toast";
 
 export default function TwoFactorForm() {
-  const [supabase] = useState(() => getClientSupabase());
   const [code, setCode] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [factorId, setFactorId] = useState<string | null>(null);
@@ -18,6 +17,9 @@ export default function TwoFactorForm() {
 
   useEffect(() => {
     async function loadFactors() {
+      const supabase = createClientClientComponent();
+      if (!supabase) return;
+
       try {
         const { data, error } = await supabase.auth.mfa.listFactors();
         if (error) throw error;
@@ -35,7 +37,7 @@ export default function TwoFactorForm() {
       }
     }
     loadFactors();
-  }, [supabase, router]);
+  }, [router]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -51,6 +53,13 @@ export default function TwoFactorForm() {
 
     setIsLoading(true);
 
+    const supabase = createClientClientComponent();
+    if (!supabase) {
+      toast.error("Authentication service unavailable");
+      setIsLoading(false);
+      return;
+    }
+
     try {
       // Standard TOTP Challenge & Verify
       const { data, error } = await supabase.auth.mfa.challengeAndVerify({
@@ -74,6 +83,9 @@ export default function TwoFactorForm() {
   };
 
   const handleSignOut = async () => {
+    const supabase = createClientClientComponent();
+    if (!supabase) return;
+
     await supabase.auth.signOut();
     router.push("/auth/sign-in");
   };

apps/codebility/app/auth/2fa-challenge/page.tsx

@@ -3,6 +3,8 @@ import Logo from "@/components/shared/Logo";
 import { Toaster } from "@/components/ui/toaster";
 import TwoFactorForm from "./_components/TwoFactorForm";
 
+export const dynamic = "force-dynamic";
+
 export default function TwoFactorChallengePage() {
   return (
     <>

apps/codebility/app/home/account-settings/_components/AccountSettings2FA.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { getClientSupabase } from "@/utils/supabase/client";
+import { createClientClientComponent } from "@/utils/supabase/client";
 import { ShieldCheck, ShieldAlert, CheckCircle2, Copy, QrCode, Key, Lock } from "lucide-react";
 import toast from "react-hot-toast";
 
@@ -25,7 +25,6 @@ interface Factor {
 }
 
 export default function AccountSettings2FA() {
-  const [supabase] = useState(() => getClientSupabase());
   const [loading, setLoading] = useState(true);
   const [factors, setFactors] = useState<Factor[]>([]);
   const [activeFactor, setActiveFactor] = useState<Factor | null>(null);
@@ -43,6 +42,12 @@ export default function AccountSettings2FA() {
   const [submitting, setSubmitting] = useState(false);
 
   const fetchMfaFactors = async () => {
+    const supabase = createClientClientComponent();
+    if (!supabase) {
+      setLoading(false);
+      return;
+    }
+
     try {
       setLoading(true);
       const { data, error } = await supabase.auth.mfa.listFactors();
@@ -65,6 +70,12 @@ export default function AccountSettings2FA() {
   }, []);
 
   const handleStartEnrollment = async () => {
+    const supabase = createClientClientComponent();
+    if (!supabase) {
+      toast.error("Authentication service unavailable");
+      return;
+    }
+
     try {
       setSubmitting(true);
       setVerificationCode("");
@@ -96,6 +107,12 @@ export default function AccountSettings2FA() {
       return;
     }
 
+    const supabase = createClientClientComponent();
+    if (!supabase) {
+      toast.error("Authentication service unavailable");
+      return;
+    }
+
     try {
       setSubmitting(true);
 
@@ -125,6 +142,12 @@ export default function AccountSettings2FA() {
   const handleDisable2FA = async () => {
     if (!activeFactor) return;
 
+    const supabase = createClientClientComponent();
+    if (!supabase) {
+      toast.error("Authentication service unavailable");
+      return;
+    }
+
     try {
       setSubmitting(true);
       const { error } = await supabase.auth.mfa.unenroll({