diff --git a/apps/web/src/components/AuthForm.tsx b/apps/web/src/components/AuthForm.tsx
index a2e41bcd..3b51b2b3 100644
--- a/apps/web/src/components/AuthForm.tsx
+++ b/apps/web/src/components/AuthForm.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
 import { z } from "zod";
@@ -7,7 +8,6 @@ import { authClient } from "@kan/auth";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
-import { api } from "~/utils/api";
 
 interface FormValues {
   email: string;
@@ -20,34 +20,53 @@ interface AuthProps {
 const EmailSchema = z.object({ email: z.string().email() });
 
 export function Auth({ setIsMagicLinkSent }: AuthProps) {
+  const [isLoginWithGooglePending, setIsLoginWithGooglePending] =
+    useState(false);
+  const [isLoginWithEmailPending, setIsLoginWithEmailPending] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+
   const {
     register,
     handleSubmit,
-    watch,
     formState: { errors },
   } = useForm<FormValues>({
     resolver: zodResolver(EmailSchema),
   });
 
-  const email = watch("email");
-
-  const loginWithEmail = api.auth.loginWithEmail.useMutation({
-    onSuccess: () => {
-      setIsMagicLinkSent(true, email);
-    },
-  });
-
   const handleLoginWithEmail = async (email: string) => {
-    const { data, error } = await authClient.signIn.magicLink({
+    setIsLoginWithEmailPending(true);
+    setLoginError(null);
+    const { error } = await authClient.signIn.magicLink({
       email,
       callbackURL: "/boards",
     });
 
-    if (!error) {
+    setIsLoginWithEmailPending(false);
+
+    if (error) {
+      setLoginError(
+        "Something went wrong, please try again later or contact customer support.",
+      );
+    } else {
       setIsMagicLinkSent(true, email);
     }
   };
 
+  const handleLoginWithGoogle = async () => {
+    setIsLoginWithGooglePending(true);
+    setLoginError(null);
+    const { error } = await authClient.signIn.social({
+      provider: "google",
+      callbackURL: "/boards",
+    });
+
+    setIsLoginWithGooglePending(false);
+
+    if (error) {
+      setLoginError("Failed to login with Google. Please try again.");
+    }
+  };
+
   const onSubmit = async (values: FormValues) => {
     await handleLoginWithEmail(values.email);
   };
@@ -56,12 +75,8 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
     <div className="space-y-6">
       <div>
         <Button
-          onClick={() =>
-            authClient.signIn.social({
-              provider: "google",
-              callbackURL: "/boards",
-            })
-          }
+          onClick={handleLoginWithGoogle}
+          isLoading={isLoginWithGooglePending}
           iconLeft={<FaGoogle />}
           fullWidth
           size="lg"
@@ -79,21 +94,17 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {
           {...register("email", { required: true })}
           placeholder="Enter your email address"
         />
-        {!loginWithEmail.error && errors.email && (
+        {errors.email && (
           <p className="mt-2 text-xs text-red-400">
             Please enter a valid email address
           </p>
         )}
-        {loginWithEmail.error ? (
-          <p className="mt-2 text-xs text-red-400">
-            Something went wrong, please try again later or contact customer
-            support.
-          </p>
-        ) : null}
-
+        {loginError && (
+          <p className="mt-2 text-xs text-red-400">{loginError}</p>
+        )}
         <div className="mt-[1.5rem]">
           <Button
-            isLoading={loginWithEmail.isPending}
+            isLoading={isLoginWithEmailPending}
             fullWidth
             size="lg"
             variant="secondary"
diff --git a/packages/auth/src/auth.ts b/packages/auth/src/auth.ts
index 09b2078f..1c5b7c17 100644
--- a/packages/auth/src/auth.ts
+++ b/packages/auth/src/auth.ts
@@ -13,6 +13,7 @@ import { createStripeClient } from "@kan/stripe";
 const db = createDrizzleClient();
 export const auth = betterAuth({
   secret: process.env.BETTER_AUTH_SECRET!,
+  baseURL: process.env.BETTER_AUTH_BASE_URL!,
   database: drizzleAdapter(db, {
     provider: "pg",
     schema: {
diff --git a/turbo.json b/turbo.json
index 9a6bf3c0..3df45e1f 100644
--- a/turbo.json
+++ b/turbo.json
@@ -62,7 +62,8 @@
     "S3_SECRET_ACCESS_KEY",
     "S3_ENDPOINT",
     "PORT",
-    "BETTER_AUTH_SECRET"
+    "BETTER_AUTH_SECRET",
+    "BETTER_AUTH_URL"
   ],
   "globalPassThroughEnv": [
     "NODE_ENV",