refactor: remove supabase auth

apps/web/src/components/AuthForm.tsx

@@ -26,7 +26,7 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
     watch,
     formState: { errors },
   } = useForm<FormValues>({
-    resolver: zodResolver(EmailSchema), // Apply the zodResolver
+    resolver: zodResolver(EmailSchema),
   });
 
   const email = watch("email");
@@ -37,22 +37,21 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
     },
   });
 
-  const loginWithOAuth = api.auth.loginWithOAuth.useMutation({
-    onSuccess: (data) => {
-      if (data.url) window.open(data.url);
-    },
-  });
+  const handleLoginWithEmail = async (email: string) => {
+    const { data, error } = await authClient.signIn.magicLink({
+      email,
+      callbackURL: "/boards",
+    });
 
-  const onSubmit = (values: FormValues) => {
-    try {
-      loginWithEmail.mutate({
-        email: values.email,
-      });
-    } catch (error) {
-      console.error(error);
+    if (!error) {
+      setIsMagicLinkSent(true, email);
     }
   };
 
+  const onSubmit = async (values: FormValues) => {
+    await handleLoginWithEmail(values.email);
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -80,12 +79,12 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
           {...register("email", { required: true })}
           placeholder="Enter your email address"
         />
-        {!loginWithEmail.error && !loginWithOAuth.error && errors.email && (
+        {!loginWithEmail.error && errors.email && (
           <p className="mt-2 text-xs text-red-400">
             Please enter a valid email address
           </p>
         )}
-        {(loginWithEmail.error ?? loginWithOAuth.error) ? (
+        {loginWithEmail.error ? (
           <p className="mt-2 text-xs text-red-400">
             Something went wrong, please try again later or contact customer
             support.

apps/web/src/components/UserMenu.tsx

@@ -3,9 +3,9 @@ import { useRouter } from "next/navigation";
 import { Menu, Transition } from "@headlessui/react";
 import { Fragment } from "react";
 
+import { authClient } from "@kan/auth";
+
 import { useTheme } from "~/providers/theme";
-import createClient from "~/utils/supabase/client";
-import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 interface UserMenuProps {
   imageUrl: string | undefined;
@@ -22,17 +22,17 @@ export default function UserMenu({
   email,
   isLoading,
 }: UserMenuProps) {
-  const db = createClient();
   const router = useRouter();
   const { themePreference, switchTheme } = useTheme();
 
   const handleLogout = async () => {
-    await db.auth.signOut();
+    await authClient.signOut();
 
     router.push("/login");
   };
 
-  const avatarUrl = imageUrl ? getPublicUrl(imageUrl) : null;
+  // const avatarUrl = imageUrl ? getPublicUrl(imageUrl) : null;
+  const avatarUrl = "";
 
   return (
     <Menu as="div" className="relative inline-block w-full text-left">