feat: refactor authentication routes and add toast notifications for login/signup/logout actions

readme.md

@@ -1 +1,2 @@
-## Supabase
+## Supabase
+Usuarios de prueba demo12 - juan.penalver@outlook.com

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
+}

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
+}

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 }) => {

src/routes/login.tsx

@@ -1,42 +1,12 @@
 import { Button, Form, Input } from "@heroui/react"
-import { useMutation } from "@tanstack/react-query"
+import { createFileRoute } from "@tanstack/react-router"
-import { createFileRoute, getRouteApi } from "@tanstack/react-router"
+import { mutationLogin } from "@/lib/mutations/mutationLogin"
-import { useServerFn } from "@tanstack/react-start"
-import { loginFn } from "./_authed"
 
 export const Route = createFileRoute("/login")({
 	component: LoginComp
 })
-const apiRouter = getRouteApi("/login")
 function LoginComp() {
-	const navigate = apiRouter.useNavigate()
+	const loginMutation = mutationLogin();
-	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)
-		}
-	})
 	return (
 		<div className="flex justify-center items-center flex-col h-screen">
 			<p className="font-semibold mb-3">Login</p>

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

src/routes/signup.tsx

@@ -1,53 +1,13 @@
 import { Button, Form, Input } from "@heroui/react"
-import { useMutation } from "@tanstack/react-query"
+import { createFileRoute } from "@tanstack/react-router"
-import { createFileRoute, redirect } from "@tanstack/react-router"
+import { mutationSignup } from "@/lib/mutations/mutationSignup"
-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 || "/"
-		})
-	})
 
 export const Route = createFileRoute("/signup")({
 	component: SignupComp
 })
 
 function SignupComp() {
-	const signup = useServerFn(signupFn)
+	const signupMutation = mutationSignup()
-	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
-				}
-			})
-		}
-	})
 	return (
 		<div className="flex justify-center items-center flex-col h-screen">
 			<p className="font-semibold mb-3">Signup</p>