From 51c7b9f86d869d9b7393c7dbe8b10f9e6be0c576 Mon Sep 17 00:00:00 2001
From: juan <jpenalver@jnc.es>
Date: Sun, 10 Aug 2025 16:37:53 +0200
Subject: [PATCH] feat: refactor authentication routes and add toast
 notifications for login/signup/logout actions

---
 readme.md                            |  3 +-
 src/lib/mutations/mutationLogin.tsx  | 61 ++++++++++++++++++++++++++++
 src/lib/mutations/mutationSignup.tsx | 58 ++++++++++++++++++++++++++
 src/routes/_authed.tsx               | 19 ---------
 src/routes/login.tsx                 | 36 ++--------------
 src/routes/logout.tsx                |  2 +
 src/routes/signup.tsx                | 46 ++-------------------
 7 files changed, 129 insertions(+), 96 deletions(-)
 create mode 100644 src/lib/mutations/mutationLogin.tsx
 create mode 100644 src/lib/mutations/mutationSignup.tsx

diff --git a/readme.md b/readme.md
index dd165b6..178c352 100644
--- a/readme.md
+++ b/readme.md
@@ -1 +1,2 @@
-## Supabase
\ No newline at end of file
+## Supabase
+Usuarios de prueba demo12 - juan.penalver@outlook.com
\ No newline at end of file
diff --git a/src/lib/mutations/mutationLogin.tsx b/src/lib/mutations/mutationLogin.tsx
new file mode 100644
index 0000000..587ded3
--- /dev/null
+++ b/src/lib/mutations/mutationLogin.tsx
@@ -0,0 +1,61 @@
+import { useMutation } from "@tanstack/react-query"
+import { getRouteApi } from "@tanstack/react-router"
+import { createServerFn, useServerFn } from "@tanstack/react-start"
+import { toast } from "sonner"
+import { getSupabaseServerClient } from "@/integrations/supabase/supabase"
+
+const apiRouter = getRouteApi("/login")
+
+export const loginFn = createServerFn({ method: "POST" })
+	.validator((d: { email: string; password: string }) => d)
+	.handler(async ({ data }) => {
+		const supabase = getSupabaseServerClient()
+		const response = await supabase.auth.signInWithPassword({
+			email: data.email,
+			password: data.password
+		})
+		console.log(response)
+		if (response.error) {
+			return {
+				error: true,
+				message: response.error.message
+			}
+		}
+	})
+export const mutationLogin = () => {
+	const navigate = apiRouter.useNavigate()
+	const loginFunction = useServerFn(loginFn)
+	const mutation = useMutation({
+		mutationKey: ["login"],
+		mutationFn: async (data: { email: string; password: string }) => {
+			toast.loading("Logging in...", { id: "login" })
+			return loginFunction({
+				data: {
+					email: data.email,
+					password: data.password
+				}
+			})
+		},
+		onSuccess: (data, ctx) => {
+			console.log("Login successful", data)
+			console.log("ctx", ctx)
+
+			if (data?.error) {
+				toast.error(data.message)
+				return
+			}
+			toast.success("Login successful! Redirecting to posts...", {
+				id: "login"
+			})
+			navigate({
+				to: "/post"
+			})
+		},
+		onError: (error) => {
+			toast.error("Login failed. Please try again.", { id: "login" })
+			console.log("No se ha podido procesar el login", error)
+		}
+	})
+
+	return mutation
+}
diff --git a/src/lib/mutations/mutationSignup.tsx b/src/lib/mutations/mutationSignup.tsx
new file mode 100644
index 0000000..57b5aa4
--- /dev/null
+++ b/src/lib/mutations/mutationSignup.tsx
@@ -0,0 +1,58 @@
+import { useMutation } from "@tanstack/react-query"
+import { getRouteApi, redirect } from "@tanstack/react-router"
+import { createServerFn, useServerFn } from "@tanstack/react-start"
+import { toast } from "sonner"
+import { getSupabaseServerClient } from "@/integrations/supabase/supabase"
+
+const apiRouter = getRouteApi("/signup")
+export const signupFn = createServerFn({ method: "POST" })
+	.validator(
+		(d: { email: string; password: string; redirectUrl?: string }) => d
+	)
+	.handler(async ({ data }) => {
+		const supabase = getSupabaseServerClient()
+		const { error } = await supabase.auth.signUp({
+			email: data.email,
+			password: data.password
+		})
+		if (error) {
+			return {
+				error: true,
+				message: error.message
+			}
+		}
+
+		throw redirect({
+			href: data.redirectUrl || "/"
+		})
+	})
+
+export const mutationSignup = () => {
+	const navigate = apiRouter.useNavigate()
+	const signup = useServerFn(signupFn)
+	const mutation = useMutation({
+		mutationKey: ["signup"],
+		mutationFn: async (data: {
+			email: string
+			password: string
+			redirectUrl?: string
+		}) => {
+			toast.loading("Signing up...", { id: "signup" })
+			return signup({
+				data: {
+					email: data.email,
+					password: data.password,
+					redirectUrl: data.redirectUrl
+				}
+			})
+		},
+		onSuccess: () => {
+			toast.success("Signup successful! Redirecting to login...", { id: "signup" })
+			navigate({
+				to: "/login"
+			})
+		}
+	})
+
+	return mutation
+}
diff --git a/src/routes/_authed.tsx b/src/routes/_authed.tsx
index 3761792..052bb7e 100644
--- a/src/routes/_authed.tsx
+++ b/src/routes/_authed.tsx
@@ -1,24 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { createServerFn } from "@tanstack/react-start"
-// import { Login } from "../components/Login";
-import { getSupabaseServerClient } from "@/integrations/supabase/supabase"
 
-export const loginFn = createServerFn({ method: "POST" })
-	.validator((d: { email: string; password: string }) => d)
-	.handler(async ({ data }) => {
-		const supabase = getSupabaseServerClient()
-		const response = await supabase.auth.signInWithPassword({
-			email: data.email,
-			password: data.password
-		})
-		console.log(response)
-		if (response.error) {
-			return {
-				error: true,
-				message: response.error.message
-			}
-		}
-	})
 
 export const Route = createFileRoute("/_authed")({
 	beforeLoad: ({ context }) => {
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index aadd065..01ce9e9 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -1,42 +1,12 @@
 import { Button, Form, Input } from "@heroui/react"
-import { useMutation } from "@tanstack/react-query"
-import { createFileRoute, getRouteApi } from "@tanstack/react-router"
-import { useServerFn } from "@tanstack/react-start"
-import { loginFn } from "./_authed"
+import { createFileRoute } from "@tanstack/react-router"
+import { mutationLogin } from "@/lib/mutations/mutationLogin"
 
 export const Route = createFileRoute("/login")({
 	component: LoginComp
 })
-const apiRouter = getRouteApi("/login")
 function LoginComp() {
-	const navigate = apiRouter.useNavigate()
-	const loginFunction = useServerFn(loginFn)
-	const loginMutation = useMutation({
-		mutationKey: ["login"],
-		mutationFn: async (data: { email: string; password: string }) => {
-			return loginFunction({
-				data: {
-					email: data.email,
-					password: data.password
-				}
-			})
-		},
-		onSuccess: (data, ctx) => {
-			console.log("Login successful", data)
-			console.log("ctx", ctx)
-
-			if (data?.error) {
-				alert(data.message)
-				return
-			}
-			navigate({
-				to: "/post"
-			})
-		},
-		onError: (error) => {
-			console.log("No se ha podido procesar el login", error)
-		}
-	})
+	const loginMutation = mutationLogin();
 	return (
 		<div className="flex justify-center items-center flex-col h-screen">
 			<p className="font-semibold mb-3">Login</p>
diff --git a/src/routes/logout.tsx b/src/routes/logout.tsx
index 7f8de18..b5bf84e 100644
--- a/src/routes/logout.tsx
+++ b/src/routes/logout.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
 import { createServerFn } from "@tanstack/react-start"
+import { toast } from "sonner"
 import { getSupabaseServerClient } from "@/integrations/supabase/supabase"
 
 const logoutFn = createServerFn().handler(async () => {
@@ -7,6 +8,7 @@ const logoutFn = createServerFn().handler(async () => {
 	const { error } = await supabase.auth.signOut()
 
 	if (error) {
+		toast.error("Logout failed. Please try again.")
 		return {
 			error: true,
 			message: error.message
diff --git a/src/routes/signup.tsx b/src/routes/signup.tsx
index 09454f3..5c36830 100644
--- a/src/routes/signup.tsx
+++ b/src/routes/signup.tsx
@@ -1,53 +1,13 @@
 import { Button, Form, Input } from "@heroui/react"
-import { useMutation } from "@tanstack/react-query"
-import { createFileRoute, redirect } from "@tanstack/react-router"
-import { createServerFn, useServerFn } from "@tanstack/react-start"
-import { getSupabaseServerClient } from "@/integrations/supabase/supabase"
-
-export const signupFn = createServerFn({ method: "POST" })
-	.validator(
-		(d: { email: string; password: string; redirectUrl?: string }) => d
-	)
-	.handler(async ({ data }) => {
-		const supabase = getSupabaseServerClient()
-		const { error } = await supabase.auth.signUp({
-			email: data.email,
-			password: data.password
-		})
-		if (error) {
-			return {
-				error: true,
-				message: error.message
-			}
-		}
-
-		throw redirect({
-			href: data.redirectUrl || "/"
-		})
-	})
+import { createFileRoute } from "@tanstack/react-router"
+import { mutationSignup } from "@/lib/mutations/mutationSignup"
 
 export const Route = createFileRoute("/signup")({
 	component: SignupComp
 })
 
 function SignupComp() {
-	const signup = useServerFn(signupFn)
-	const signupMutation = useMutation({
-		mutationKey: ["signup"],
-		mutationFn: async (data: {
-			email: string
-			password: string
-			redirectUrl?: string
-		}) => {
-			return signup({
-				data: {
-					email: data.email,
-					password: data.password,
-					redirectUrl: data.redirectUrl
-				}
-			})
-		}
-	})
+	const signupMutation = mutationSignup()
 	return (
 		<div className="flex justify-center items-center flex-col h-screen">
 			<p className="font-semibold mb-3">Signup</p>