feat: Add client-side password confirmation to signup, localize validation messages, and refactor login form layout.

.env.development

@@ -6,4 +6,4 @@ APIKEY_MAPS="AIzaSyAwfOShBqkBcS46WqmlsIVWQJ8gpdOPk_4"
 SUPABASE_URL="https://qsssikzgwomudkwfmgad.supabase.co"
 SUPABASE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzc3Npa3pnd29tdWRrd2ZtZ2FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQzMjY1NTQsImV4cCI6MjA2OTkwMjU1NH0.BTSscdTcPP1GVmMB-H5caLpWsfuAw1V6mXiqogF8TjU"
 VITE_LOGIN_USER="test@test.com"
-VITE_PASSWORD_USER=""
+VITE_PASSWORD_USER="test"

AGENTS.md

@@ -0,0 +1,41 @@
+# AGENTS.md — findyourpilot
+
+Project context for AI coding agents. This file defines which skill files to load
+depending on the task at hand.
+
+<!-- intent-skills:start -->
+# Skill mappings - when working in these areas, load the linked skill file into context.
+skills:
+  - task: "Building or modifying routes, loaders, search params, or navigation with TanStack Router"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/SKILL.md"
+
+  - task: "Working with route search params, type-safe URL state, or Zod-validated search params"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/search-params/SKILL.md"
+
+  - task: "Implementing route guards, authentication redirects, or protected routes"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/auth-and-guards/SKILL.md"
+
+  - task: "Loading data in routes, using loaders, or integrating with TanStack Query"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/data-loading/SKILL.md"
+
+  - task: "Creating server functions, SSR patterns, full-stack logic, or the TanStack Start execution model"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/SKILL.md"
+
+  - task: "Creating or modifying createServerFn, input validation on server functions, or handling server errors"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/server-functions/SKILL.md"
+
+  - task: "Creating middleware, request middleware, or passing context between server functions"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/middleware/SKILL.md"
+
+  - task: "Creating API endpoints or server-only routes (server property on createFileRoute)"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/server-routes/SKILL.md"
+
+  - task: "Deploying the app to Cloudflare, Vercel, Netlify, Node.js/Docker, or configuring SSR/SPA/prerendering"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/deployment/SKILL.md"
+
+  - task: "Writing, reviewing, or optimising Supabase/Postgres queries, schema design, RLS policies, or migrations"
+    load: ".agents/skills/supabase-postgres-best-practices/SKILL.md"
+
+  - task: "Designing or improving UI layouts, dashboards, component composition, or interactive product interfaces with HeroUI"
+    load: ".agents/skills/interface-design/SKILL.md"
+<!-- intent-skills:end -->

package.json

@@ -14,42 +14,45 @@
     "machine-translate": "inlang machine translate --project project.inlang"
   },
   "dependencies": {
-    "@heroui/react": "^3.0.0-beta.8",
-    "@heroui/styles": "^3.0.0-beta.8",
-    "@sentry/tanstackstart-react": "^10.42.0",
+    "@heroui/react": "^3.0.0-rc.1",
+    "@heroui/styles": "^3.0.0-rc.1",
+    "@sentry/tanstackstart-react": "^10.45.0",
     "@supabase/ssr": "^0.9.0",
-    "@supabase/supabase-js": "^2.99.1",
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.166.7",
-    "@tanstack/react-router-ssr-query": "^1.166.7",
-    "@tanstack/react-start": "^1.166.8",
-    "@tanstack/router-plugin": "^1.166.7",
+    "@supabase/supabase-js": "^2.99.3",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.91.2",
+    "@tanstack/react-router": "^1.167.5",
+    "@tanstack/react-router-ssr-query": "^1.166.9",
+    "@tanstack/react-start": "^1.166.17",
+    "@tanstack/router-plugin": "^1.166.14",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
+    "maplibre-gl": "^5.20.2",
     "nitro": "^3.0.1-alpha.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwindcss": "^4.2.1",
-    "tw-animate-css": "^1.4.0"
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.6",
-    "@inlang/paraglide-js": "^2.13.1",
-    "@tanstack/devtools-vite": "^0.5.5",
-    "@tanstack/react-devtools": "^0.9.13",
-    "@tanstack/react-router-devtools": "^1.166.7",
+    "@biomejs/biome": "^2.4.8",
+    "@inlang/paraglide-js": "^2.15.0",
+    "@tanstack/devtools-vite": "^0.6.0",
+    "@tanstack/react-devtools": "^0.10.0",
     "@tanstack/react-query-devtools": "^5.91.3",
+    "@tanstack/react-router-devtools": "^1.166.9",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.19.15",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "jsdom": "^28.1.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.0.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.1",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^3.2.4",
-    "@inlang/cli": "^3.0.0"
+    "vitest": "^4.1.0"
   }
 }

src/lib/hooks/useLogin.tsx

@@ -14,13 +14,14 @@ export const useLogin = () => {
 		mutationKey: ["login"],
 		mutationFn: async (data: TLoginForm) => {
 			const response = await user.login({ data })
+
 			if (response.error) {
 				throw new Error(response.message)
 			}
 		},
 		onSuccess: () => {
 			navigate({
-				to: "/"
+				to: "/dashboard"
 			})
 		}
 	})

src/lib/hooks/useSignup.tsx

@@ -1,38 +1,44 @@
 import { toast } from "@heroui/react"
 import { useMutation } from "@tanstack/react-query"
-import { useNavigate } from "@tanstack/react-router"
 import type z from "zod"
 import { user } from "@/lib/server/user"
-import { signupFormSchema } from "@/lib/validation/user"
+import type { signupClientFormSchema } from "@/lib/validation/user"
 
-type TSignupForm = z.infer<typeof signupFormSchema>
+type TSignupClientForm = z.infer<typeof signupClientFormSchema>
 
 export const useSignup = () => {
-	const navigate = useNavigate()
-	const signup = useMutation({
+	const signupMutation = useMutation({
 		mutationKey: ["signup"],
-		mutationFn: async (data: TSignupForm) => user.signup({ data }),
-		onSuccess: () => {
-			navigate({
-				to: "/access/login"
-			})
+		mutationFn: async (data: TSignupClientForm) => {
+			const { confirmPassword: _, ...serverData } = data
+			const response = await user.signup({ data: serverData })
+
+			if (response && "error" in response && response.error) {
+				throw new Error(
+					"message" in response
+						? (response.message as string)
+						: "Error desconocido"
+				)
+			}
 		}
 	})
 
-	const validateSignup = (formData: TSignupForm) => {
-		if (!signupFormSchema.safeParse(formData).success) {
-			toast.danger("Signup failed. Please check your input.")
+	const validateSignup = (formData: TSignupClientForm) => {
+		if (formData.password !== formData.confirmPassword) {
+			toast.danger("Las contraseñas no coinciden")
+			return
 		}
-		const promise = signup.mutateAsync(formData)
+
+		const promise = signupMutation.mutateAsync(formData)
 		toast.promise(promise, {
-			loading: "Signing up...",
-			success: "Signup successful! Redirecting to login...",
-			error: "Signup failed!"
+			loading: "Creando tu cuenta...",
+			success: "¡Cuenta creada! Revisa tu correo para confirmarla.",
+			error: (error: Error) => error.message
 		})
 	}
 
 	return {
 		signup: validateSignup,
-		isPending: signup.isPending
+		isPending: signupMutation.isPending
 	}
 }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

src/lib/validation/user.ts

@@ -1,18 +1,28 @@
 import * as z from "zod"
 
 export const loginFormSchema = z.object({
-	email: z.email("Invalid email address"),
-	password: z.string().min(1, "Password must be at least 1 character long")
+	email: z.email("Introduce un correo válido"),
+	password: z.string().min(1, "La contraseña es obligatoria")
 })
 
 export const signupFormSchema = z.object({
-	email: z.email("Invalid email address"),
-	password: z.string().min(6, "Password must be at least 6 characters long"),
-	name: z.string().min(1, "The field is required"),
-	location: z.string().min(1, "The field is required"),
+	email: z.email("Introduce un correo válido"),
+	password: z.string().min(6, "La contraseña debe tener al menos 6 caracteres"),
+	name: z.string().min(1, "El nombre es obligatorio"),
+	location: z.string().min(1, "La ubicación es obligatoria"),
 	redirectUrl: z.string().optional()
 })
 
+// Schema extendido para el formulario cliente (incluye confirmación de contraseña)
+export const signupClientFormSchema = signupFormSchema
+	.extend({
+		confirmPassword: z.string().min(6, "Confirma tu contraseña")
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: "Las contraseñas no coinciden",
+		path: ["confirmPassword"]
+	})
+
 export const profileFormSchema = z.object({
 	id: z.uuid(),
 	firstName: z.string().min(1, "First name is required"),

src/routeTree.gen.ts

@@ -12,13 +12,13 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LogoutRouteImport } from './routes/logout'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AccessRouteImport } from './routes/access'
-import { Route as AuthedRouteImport } from './routes/_authed'
+import { Route as AuthRouteImport } from './routes/_auth'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DemoTanstackQueryRouteImport } from './routes/demo/tanstack-query'
 import { Route as DemoI18nRouteImport } from './routes/demo.i18n'
 import { Route as AccessRegisterRouteImport } from './routes/access.register'
 import { Route as AccessLoginRouteImport } from './routes/access.login'
-import { Route as AuthedDashboardRouteImport } from './routes/_authed/dashboard'
+import { Route as AuthDashboardRouteImport } from './routes/_auth/dashboard'
 import { Route as DemoSentryTestingRouteImport } from './routes/demo/sentry.testing'
 
 const LogoutRoute = LogoutRouteImport.update({
@@ -36,8 +36,8 @@ const AccessRoute = AccessRouteImport.update({
   path: '/access',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AuthedRoute = AuthedRouteImport.update({
-  id: '/_authed',
+const AuthRoute = AuthRouteImport.update({
+  id: '/_auth',
   getParentRoute: () => rootRouteImport,
 } as any)
 const IndexRoute = IndexRouteImport.update({
@@ -65,10 +65,10 @@ const AccessLoginRoute = AccessLoginRouteImport.update({
   path: '/login',
   getParentRoute: () => AccessRoute,
 } as any)
-const AuthedDashboardRoute = AuthedDashboardRouteImport.update({
+const AuthDashboardRoute = AuthDashboardRouteImport.update({
   id: '/dashboard',
   path: '/dashboard',
-  getParentRoute: () => AuthedRoute,
+  getParentRoute: () => AuthRoute,
 } as any)
 const DemoSentryTestingRoute = DemoSentryTestingRouteImport.update({
   id: '/demo/sentry/testing',
@@ -81,7 +81,7 @@ export interface FileRoutesByFullPath {
   '/access': typeof AccessRouteWithChildren
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
-  '/dashboard': typeof AuthedDashboardRoute
+  '/dashboard': typeof AuthDashboardRoute
   '/access/login': typeof AccessLoginRoute
   '/access/register': typeof AccessRegisterRoute
   '/demo/i18n': typeof DemoI18nRoute
@@ -93,7 +93,7 @@ export interface FileRoutesByTo {
   '/access': typeof AccessRouteWithChildren
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
-  '/dashboard': typeof AuthedDashboardRoute
+  '/dashboard': typeof AuthDashboardRoute
   '/access/login': typeof AccessLoginRoute
   '/access/register': typeof AccessRegisterRoute
   '/demo/i18n': typeof DemoI18nRoute
@@ -103,11 +103,11 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/_authed': typeof AuthedRouteWithChildren
+  '/_auth': typeof AuthRouteWithChildren
   '/access': typeof AccessRouteWithChildren
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
-  '/_authed/dashboard': typeof AuthedDashboardRoute
+  '/_auth/dashboard': typeof AuthDashboardRoute
   '/access/login': typeof AccessLoginRoute
   '/access/register': typeof AccessRegisterRoute
   '/demo/i18n': typeof DemoI18nRoute
@@ -142,11 +142,11 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
-    | '/_authed'
+    | '/_auth'
     | '/access'
     | '/login'
     | '/logout'
-    | '/_authed/dashboard'
+    | '/_auth/dashboard'
     | '/access/login'
     | '/access/register'
     | '/demo/i18n'
@@ -156,7 +156,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  AuthedRoute: typeof AuthedRouteWithChildren
+  AuthRoute: typeof AuthRouteWithChildren
   AccessRoute: typeof AccessRouteWithChildren
   LoginRoute: typeof LoginRoute
   LogoutRoute: typeof LogoutRoute
@@ -188,11 +188,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AccessRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_authed': {
-      id: '/_authed'
+    '/_auth': {
+      id: '/_auth'
       path: ''
       fullPath: '/'
-      preLoaderRoute: typeof AuthedRouteImport
+      preLoaderRoute: typeof AuthRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/': {
@@ -230,12 +230,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AccessLoginRouteImport
       parentRoute: typeof AccessRoute
     }
-    '/_authed/dashboard': {
-      id: '/_authed/dashboard'
+    '/_auth/dashboard': {
+      id: '/_auth/dashboard'
       path: '/dashboard'
       fullPath: '/dashboard'
-      preLoaderRoute: typeof AuthedDashboardRouteImport
-      parentRoute: typeof AuthedRoute
+      preLoaderRoute: typeof AuthDashboardRouteImport
+      parentRoute: typeof AuthRoute
     }
     '/demo/sentry/testing': {
       id: '/demo/sentry/testing'
@@ -247,16 +247,15 @@ declare module '@tanstack/react-router' {
   }
 }
 
-interface AuthedRouteChildren {
-  AuthedDashboardRoute: typeof AuthedDashboardRoute
+interface AuthRouteChildren {
+  AuthDashboardRoute: typeof AuthDashboardRoute
 }
 
-const AuthedRouteChildren: AuthedRouteChildren = {
-  AuthedDashboardRoute: AuthedDashboardRoute,
+const AuthRouteChildren: AuthRouteChildren = {
+  AuthDashboardRoute: AuthDashboardRoute,
 }
 
-const AuthedRouteWithChildren =
-  AuthedRoute._addFileChildren(AuthedRouteChildren)
+const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
 
 interface AccessRouteChildren {
   AccessLoginRoute: typeof AccessLoginRoute
@@ -273,7 +272,7 @@ const AccessRouteWithChildren =
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  AuthedRoute: AuthedRouteWithChildren,
+  AuthRoute: AuthRouteWithChildren,
   AccessRoute: AccessRouteWithChildren,
   LoginRoute: LoginRoute,
   LogoutRoute: LogoutRoute,

src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { ToastProvider } from "@heroui/react"
 import type { QueryClient } from "@tanstack/react-query"
 import {
 	createRootRouteWithContext,
@@ -55,6 +56,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<HeadContent />
 			</head>
 			<body>
+				<ToastProvider />
 				{children}
 				<Devtools />
 				<Scripts />

src/routes/_auth.tsx

@@ -1,8 +1,8 @@
 import { createFileRoute, Link, Outlet } from "@tanstack/react-router"
 
-export const Route = createFileRoute("/_authed")({
+export const Route = createFileRoute("/_auth")({
 	beforeLoad: ({ context }) => {
-		if (context.error) {
+		if (context.user.error) {
 			throw new Error("Not authenticated")
 		}
 	},

src/routes/_auth/dashboard.tsx

@@ -0,0 +1,79 @@
+import { Card } from "@heroui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { Drone } from "lucide-react"
+import { useState } from "react"
+import {
+	Map as MapComponent,
+	MapMarker,
+	type MapViewport,
+	MarkerContent,
+	MarkerPopup,
+	MarkerTooltip
+} from "@/components/maps/map"
+
+export const Route = createFileRoute("/_auth/dashboard")({
+	component: RouteComponent
+})
+
+function RouteComponent() {
+	const locations = [
+		{
+			id: 1,
+			name: "Location 1",
+			lat: 40.76,
+			lng: -73.98
+		},
+		{
+			id: 2,
+			name: "Location 2",
+			lat: 40.77,
+			lng: -73.99
+		},
+		{
+			id: 3,
+			name: "Location 3",
+			lat: 40.5874827,
+			lng: -1.7925343
+		}
+	]
+	const [viewport, setViewport] = useState<MapViewport>({
+		center: [40.5874827, -1.7925343],
+		zoom: 8,
+		bearing: 0,
+		pitch: 0
+	})
+	return (
+		<div>
+			<Card className="h-200 p-0 overflow-hidden">
+				<MapComponent
+					center={[40.5874827, -1.7925343]}
+					zoom={10}
+					viewport={viewport}
+					onViewportChange={setViewport}
+				>
+					{locations.map((location) => (
+						<MapMarker
+							key={location.id}
+							longitude={location.lng}
+							latitude={location.lat}
+						>
+							{/* Prueba para ssl */}
+							<MarkerContent>
+								<Drone size={24} color="green" className="text-green-200" />
+							</MarkerContent>
+							<MarkerTooltip>{location.name}</MarkerTooltip>
+							<MarkerPopup>
+								<div className="space-y-1">
+									<p className="font-medium text-foreground">{location.name}</p>
+									<p className="text-xs text-muted-foreground">
+										{location.lat.toFixed(4)}, {location.lng.toFixed(4)}
+									</p>
+								</div>
+							</MarkerPopup>
+						</MapMarker>
+					))}
+				</MapComponent>
+			</Card>
+		</div>
+	)
+}

src/routes/_authed/dashboard.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/_authed/dashboard')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return <div>Hello "/_authed/dashboard"!</div>
-}

src/routes/access.login.tsx

@@ -1,4 +1,13 @@
-import { Button, Card, Form, Input, Label, Spinner } from "@heroui/react"
+import {
+	Button,
+	FieldError,
+	Fieldset,
+	Form,
+	Input,
+	Label,
+	Spinner,
+	TextField
+} from "@heroui/react"
 import { createFileRoute } from "@tanstack/react-router"
 import { LogIn } from "lucide-react"
 import { useLogin } from "@/lib/hooks/useLogin"
@@ -20,32 +29,41 @@ function RouteComponent() {
 	}
 
 	return (
-		<div>
-			<Card.Content>
+		<>
 			<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
-					<Label isRequired className="ml-4 text-lg">
-						Correo
-					</Label>
-					<Input
-						placeholder="Introduce tu correo"
+				<Fieldset>
+					<Fieldset.Group>
+						<TextField
 							type="email"
 							name="email"
 							variant="secondary"
-						className="py-4 text-lg "
-						required
-					/>
+							className="py-4 text-lg"
+							isRequired
+							defaultValue={import.meta.env.VITE_LOGIN_USER}
+						>
 							<Label isRequired className="ml-4 text-lg">
-						Contraseña
+								Correo
 							</Label>
-					<Input
-						placeholder="Introduce tu contraseña"
+							<Input placeholder="Introduce tu correo" />
+							<FieldError />
+						</TextField>
+						<TextField
 							type="password"
 							name="password"
 							variant="secondary"
-						className="py-4 text-lg "
-						required
-					/>
-					<div className="flex justify-end">
+							className="py-4 text-lg"
+							isRequired
+							defaultValue={import.meta.env.VITE_PASSWORD_USER}
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Contraseña
+							</Label>
+							<Input placeholder="Introduce tu contraseña" />
+							<FieldError />
+						</TextField>
+					</Fieldset.Group>
+				</Fieldset>
+
 				<Button
 					type="submit"
 					className="py-6 px-8 w-full text-white text-lg"
@@ -55,17 +73,15 @@ function RouteComponent() {
 					{isPending ? <Spinner /> : <LogIn size={18} />}
 					Entrar
 				</Button>
-					</div>
 			</Form>
-			</Card.Content>
-			<Card.Footer>
-				<div className="flex justify-evenly w-full gap-4">
+			<div className="flex justify-evenly w-full gap-4 mt-2">
 				<Button size="lg" className="w-full" variant="secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="16"
 						height="16"
 						viewBox="0 0 16 16"
+						aria-hidden="true"
 					>
 						<g fill="none" fillRule="evenodd" clipRule="evenodd">
 							<path
@@ -95,9 +111,10 @@ function RouteComponent() {
 				<Button size="lg" className="w-full" variant="secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-							width="256"
-							height="256"
+						width="16"
+						height="16"
 						viewBox="0 0 256 256"
+						aria-hidden="true"
 					>
 						<path
 							fill="#1877f2"
@@ -111,7 +128,6 @@ function RouteComponent() {
 					Facebook
 				</Button>
 			</div>
-			</Card.Footer>
-		</div>
+		</>
 	)
 }

src/routes/access.register.tsx

@@ -9,7 +9,7 @@ import {
 	TextField
 } from "@heroui/react"
 import { createFileRoute } from "@tanstack/react-router"
-import { LogIn } from "lucide-react"
+import { UserPlus } from "lucide-react"
 import { useSignup } from "@/lib/hooks/useSignup"
 
 export const Route = createFileRoute("/access/register")({
@@ -22,67 +22,105 @@ function RouteComponent() {
 	const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault()
 		const formData = new FormData(e.currentTarget)
-		const email = formData.get("email") as string
-		const password = formData.get("password") as string
-		const location = formData.get("location") as string
-		const name = formData.get("name") as string
-
 		signup({
-			email,
-			password,
-			location,
-			name
+			email: formData.get("email") as string,
+			password: formData.get("password") as string,
+			confirmPassword: formData.get("confirmPassword") as string,
+			location: formData.get("location") as string,
+			name: formData.get("name") as string
 		})
 	}
 
 	return (
-		<div>
+		<>
 			<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
 				<Fieldset>
 					<Fieldset.Group>
+						<TextField
+							type="text"
+							name="name"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Nombre completo
+							</Label>
+							<Input placeholder="Tu nombre y apellidos" />
+							<FieldError />
+						</TextField>
 						<TextField
 							type="email"
 							name="email"
 							variant="secondary"
-							className="py-4 text-lg"
+							className="py-2 text-lg"
 							isRequired
 						>
-							<Label>Correo</Label>
-							<Input placeholder="Introduce tu correo" />
+							<Label isRequired className="ml-4 text-lg">
+								Correo electrónico
+							</Label>
+							<Input placeholder="tu@correo.com" />
+							<FieldError />
+						</TextField>
+						<TextField
+							type="text"
+							name="location"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Ubicación
+							</Label>
+							<Input placeholder="Ciudad, País" />
 							<FieldError />
 						</TextField>
-					</Fieldset.Group>
-				</Fieldset>
 						<TextField
 							type="password"
 							name="password"
 							variant="secondary"
-					className="py-4 text-lg"
+							className="py-2 text-lg"
 							isRequired
 						>
-					<Label>Contraseña</Label>
-					<Input placeholder="Introduce tu contraseña" />
+							<Label isRequired className="ml-4 text-lg">
+								Contraseña
+							</Label>
+							<Input placeholder="Mínimo 6 caracteres" />
 							<FieldError />
 						</TextField>
-				<div className="flex justify-end">
+						<TextField
+							type="password"
+							name="confirmPassword"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Confirmar contraseña
+							</Label>
+							<Input placeholder="Repite tu contraseña" />
+							<FieldError />
+						</TextField>
+					</Fieldset.Group>
+				</Fieldset>
 				<Button
 					type="submit"
 					className="py-6 px-8 w-full text-white text-lg"
 					size="lg"
 					isPending={isPending}
 				>
-						{isPending ? <Spinner /> : <LogIn size={18} />}
-						Entrar
+					{isPending ? <Spinner /> : <UserPlus size={18} />}
+					Crear cuenta
 				</Button>
-				</div>
 			</Form>
-			<div className="flex justify-evenly w-full gap-4">
+			<div className="flex justify-evenly w-full gap-4 mt-2">
 				<Button size="lg" className="w-full" variant="secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="16"
 						height="16"
 						viewBox="0 0 16 16"
+						aria-hidden="true"
 					>
 						<g fill="none" fillRule="evenodd" clipRule="evenodd">
 							<path
@@ -112,9 +150,10 @@ function RouteComponent() {
 				<Button size="lg" className="w-full" variant="secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						width="256"
-						height="256"
+						width="16"
+						height="16"
 						viewBox="0 0 256 256"
+						aria-hidden="true"
 					>
 						<path
 							fill="#1877f2"
@@ -128,6 +167,6 @@ function RouteComponent() {
 					Facebook
 				</Button>
 			</div>
-		</div>
+		</>
 	)
 }

src/routes/index.tsx

@@ -12,6 +12,8 @@ import {
 export const Route = createFileRoute("/")({ component: App })
 
 function App() {
+	const navigate = Route.useNavigate()
+
 	const features = [
 		{
 			icon: <Zap className="w-12 h-12 text-cyan-400" />,
@@ -53,7 +55,17 @@ function App() {
 
 	return (
 		<div className="min-h-screen bg-linear-to-b from-slate-900 via-slate-800 to-slate-900">
-			<Button> Hola</Button>
+			<Button
+				onPress={() => {
+					navigate({
+						to: "/login",
+						viewTransition: true
+					})
+				}}
+			>
+				{" "}
+				Hola
+			</Button>
 			<section className="relative py-20 px-6 text-center overflow-hidden">
 				<div className="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
 				<div className="relative max-w-5xl mx-auto">

src/routes/logout.tsx

@@ -1,5 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { user } from "@/lib/server/user"
 
 export const Route = createFileRoute("/logout")({
-	beforeLoad: async ({ context }) => {}
+	beforeLoad: async () => {
+		await user.logout()
+	},
+	preload: false
 })