feat: login (#2)

Co-authored-by: Jrodenas <jrodenas@gmail.com> Reviewed-on: #2
2026-03-23 19:05:56 +00:00
parent cec96b94da
commit 828bf30faf
21 changed files with 3406 additions and 2372 deletions
--- a/.env.development
+++ b/.env.development
@@ -3,6 +3,7 @@
 # SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzc3Npa3pnd29tdWRrd2ZtZ2FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQzMjY1NTQsImV4cCI6MjA2OTkwMjU1NH0.BTSscdTcPP1GVmMB-H5caLpWsfuAw1V6mXiqogF8TjU"
 DATABASE_URL="postgresql://postgres.qsssikzgwomudkwfmgad:Wrongly1-Untimed0-Peculiar0-Unlikable7-Cubbyhole8@aws-0-eu-north-1.pooler.supabase.com:6543/postgres"
 APIKEY_MAPS="AIzaSyAwfOShBqkBcS46WqmlsIVWQJ8gpdOPk_4"
-VITE_SUPABASE_URL="https://qsssikzgwomudkwfmgad.supabase.co"
-VITE_SUPABASE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzc3Npa3pnd29tdWRrd2ZtZ2FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQzMjY1NTQsImV4cCI6MjA2OTkwMjU1NH0.BTSscdTcPP1GVmMB-H5caLpWsfuAw1V6mXiqogF8TjU"
-        
+SUPABASE_URL="https://qsssikzgwomudkwfmgad.supabase.co"
+SUPABASE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzc3Npa3pnd29tdWRrd2ZtZ2FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQzMjY1NTQsImV4cCI6MjA2OTkwMjU1NH0.BTSscdTcPP1GVmMB-H5caLpWsfuAw1V6mXiqogF8TjU"
+VITE_LOGIN_USER="test@test.com"
+VITE_PASSWORD_USER="test"
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -0,0 +1,25 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "shell",
+			"label": "pnpm: dev",
+			"command": "pnpm dev",
+			"problemMatcher": [],
+			"group": {
+				"kind": "test",
+				"isDefault": true
+			},
+			"presentation": {
+				"reveal": "always",
+				"panel": "dedicated"
+			}
+		},
+		{
+			"type": "shell",
+			"label": "pnpm: build",
+			"command": "pnpm build",
+			"problemMatcher": []
+		}
+	]
+}
--- a/AGENTS.md
+++ b/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 -->
--- a/package.json
+++ b/package.json
@@ -14,43 +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.98.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.163.3",
-    "@tanstack/react-router-ssr-query": "^1.163.3",
-    "@tanstack/react-start": "^1.166.1",
-    "@tanstack/router-plugin": "^1.164.0",
+    "@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.19.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.5",
-    "@inlang/cli": "^3.0.0",
-    "@inlang/paraglide-js": "^2.13.1",
-    "@tanstack/devtools-vite": "^0.5.3",
-    "@tanstack/react-devtools": "^0.9.9",
+    "@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.163.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"
+    "vitest": "^4.1.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/integrations/supabase/supabase.ts
+++ b/src/integrations/supabase/supabase.ts
@@ -1,24 +1,28 @@
 import { createServerClient } from "@supabase/ssr"
+import { createServerOnlyFn } from "@tanstack/react-start"
 import { getCookies, setCookie } from "@tanstack/react-start/server"

+const supabase_url = createServerOnlyFn(
+	() => process.env.SUPABASE_URL as string
+)
+const supabase_key = createServerOnlyFn(
+	() => process.env.SUPABASE_KEY as string
+)
+
 export function getSupabaseServerClient() {
-	return createServerClient(
-		process.env.VITE_SUPABASE_URL as string,
-		process.env.VITE_SUPABASE_KEY as string,
-		{
-			cookies: {
-				getAll() {
-					return Object.entries(getCookies()).map(([name, value]) => ({
-						name,
-						value,
-					}))
-				},
-				setAll(cookies) {
-					cookies.forEach((cookie) => {
-						setCookie(cookie.name, cookie.value)
-					})
-				},
+	return createServerClient(supabase_url(), supabase_key(), {
+		cookies: {
+			getAll() {
+				return Object.entries(getCookies()).map(([name, value]) => ({
+					name,
+					value
+				}))
 			},
+			setAll(cookies) {
+				cookies.forEach((cookie) => {
+					setCookie(cookie.name, cookie.value)
+				})
+			}
 		}
-	)
+	})
 }
--- a/src/lib/hooks/useLogin.tsx
+++ b/src/lib/hooks/useLogin.tsx
@@ -1,6 +1,6 @@
+import { toast } from "@heroui/react"
 import { useMutation } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
-import { toast } from "sonner"
 import type z from "zod"
 import { user } from "@/lib/server/user"
 import { loginFormSchema } from "../validation/user"
@@ -14,36 +14,34 @@ export const useLogin = () => {
 		mutationKey: ["login"],
 		mutationFn: async (data: TLoginForm) => {
 			const response = await user.login({ data })
+
 			if (response.error) {
 				throw new Error(response.message)
 			}
 		},
-		onMutate: () => {
-			toast.loading("Logging in...", { id: "login" })
-		},
 		onSuccess: () => {
-			toast.success("Login successful! Redirecting to posts..", { id: "login" })
 			navigate({
-				to: "/",
+				to: "/dashboard"
 			})
-		},
-		onError: (error) => {
-			toast.error(error.message, { id: "login" })
-		},
+		}
 	})

 	const validateLogin = (formData: TLoginForm) => {
 		if (!loginFormSchema.safeParse(formData).success) {
-			toast.error("Error en el formulario.")
+			toast.danger("Error en el formulario.")
 			return false
 		}
+		const promise = loginMutation.mutateAsync(formData)

-		loginMutation.mutate(formData)
+		toast.promise(promise, {
+			loading: "Logging in...",
+			success: "Login successful! Redirecting to posts..",
+			error: (error) => error.message
+		})
 	}

 	return {
 		login: validateLogin,
-		isPending: loginMutation.isPending,
-		errors: errors,
+		isPending: loginMutation.isPending
 	}
 }
--- a/src/lib/hooks/useSignup.tsx
+++ b/src/lib/hooks/useSignup.tsx
@@ -0,0 +1,44 @@
+import { toast } from "@heroui/react"
+import { useMutation } from "@tanstack/react-query"
+import type z from "zod"
+import { user } from "@/lib/server/user"
+import type { signupClientFormSchema } from "@/lib/validation/user"
+
+type TSignupClientForm = z.infer<typeof signupClientFormSchema>
+
+export const useSignup = () => {
+	const signupMutation = useMutation({
+		mutationKey: ["signup"],
+		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: TSignupClientForm) => {
+		if (formData.password !== formData.confirmPassword) {
+			toast.danger("Las contraseñas no coinciden")
+			return
+		}
+
+		const promise = signupMutation.mutateAsync(formData)
+		toast.promise(promise, {
+			loading: "Creando tu cuenta...",
+			success: "¡Cuenta creada! Revisa tu correo para confirmarla.",
+			error: (error: Error) => error.message
+		})
+	}
+
+	return {
+		signup: validateSignup,
+		isPending: signupMutation.isPending
+	}
+}
--- a/src/lib/validation/user.ts
+++ b/src/lib/validation/user.ts
@@ -1,18 +1,28 @@
 import * as z from "zod"

 export const loginFormSchema = z.object({
-	email: z.string().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.string().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"),
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,18 +9,37 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

 import { Route as rootRouteImport } from './routes/__root'
-import { Route as LoginRouteRouteImport } from './routes/login/route'
+import { Route as LogoutRouteImport } from './routes/logout'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as AccessRouteImport } from './routes/access'
+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 AuthDashboardRouteImport } from './routes/auth/dashboard'
+import { Route as AccessRegisterRouteImport } from './routes/access.register'
+import { Route as AccessLoginRouteImport } from './routes/access.login'
+import { Route as AuthDashboardRouteImport } from './routes/_auth/dashboard'
 import { Route as DemoSentryTestingRouteImport } from './routes/demo/sentry.testing'

-const LoginRouteRoute = LoginRouteRouteImport.update({
+const LogoutRoute = LogoutRouteImport.update({
+  id: '/logout',
+  path: '/logout',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
  id: '/login',
  path: '/login',
  getParentRoute: () => rootRouteImport,
 } as any)
+const AccessRoute = AccessRouteImport.update({
+  id: '/access',
+  path: '/access',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AuthRoute = AuthRouteImport.update({
+  id: '/_auth',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
  id: '/',
  path: '/',
@@ -36,10 +55,20 @@ const DemoI18nRoute = DemoI18nRouteImport.update({
  path: '/demo/i18n',
  getParentRoute: () => rootRouteImport,
 } as any)
+const AccessRegisterRoute = AccessRegisterRouteImport.update({
+  id: '/register',
+  path: '/register',
+  getParentRoute: () => AccessRoute,
+} as any)
+const AccessLoginRoute = AccessLoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => AccessRoute,
+} as any)
 const AuthDashboardRoute = AuthDashboardRouteImport.update({
-  id: '/auth/dashboard',
-  path: '/auth/dashboard',
-  getParentRoute: () => rootRouteImport,
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => AuthRoute,
 } as any)
 const DemoSentryTestingRoute = DemoSentryTestingRouteImport.update({
  id: '/demo/sentry/testing',
@@ -49,16 +78,24 @@ const DemoSentryTestingRoute = DemoSentryTestingRouteImport.update({

 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
-  '/login': typeof LoginRouteRoute
-  '/auth/dashboard': typeof AuthDashboardRoute
+  '/access': typeof AccessRouteWithChildren
+  '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
+  '/dashboard': typeof AuthDashboardRoute
+  '/access/login': typeof AccessLoginRoute
+  '/access/register': typeof AccessRegisterRoute
  '/demo/i18n': typeof DemoI18nRoute
  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
  '/demo/sentry/testing': typeof DemoSentryTestingRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
-  '/login': typeof LoginRouteRoute
-  '/auth/dashboard': typeof AuthDashboardRoute
+  '/access': typeof AccessRouteWithChildren
+  '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
+  '/dashboard': typeof AuthDashboardRoute
+  '/access/login': typeof AccessLoginRoute
+  '/access/register': typeof AccessRegisterRoute
  '/demo/i18n': typeof DemoI18nRoute
  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
  '/demo/sentry/testing': typeof DemoSentryTestingRoute
@@ -66,8 +103,13 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
-  '/login': typeof LoginRouteRoute
-  '/auth/dashboard': typeof AuthDashboardRoute
+  '/_auth': typeof AuthRouteWithChildren
+  '/access': typeof AccessRouteWithChildren
+  '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
+  '/_auth/dashboard': typeof AuthDashboardRoute
+  '/access/login': typeof AccessLoginRoute
+  '/access/register': typeof AccessRegisterRoute
  '/demo/i18n': typeof DemoI18nRoute
  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
  '/demo/sentry/testing': typeof DemoSentryTestingRoute
@@ -76,24 +118,37 @@ export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | '/'
+    | '/access'
    | '/login'
-    | '/auth/dashboard'
+    | '/logout'
+    | '/dashboard'
+    | '/access/login'
+    | '/access/register'
    | '/demo/i18n'
    | '/demo/tanstack-query'
    | '/demo/sentry/testing'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/'
+    | '/access'
    | '/login'
-    | '/auth/dashboard'
+    | '/logout'
+    | '/dashboard'
+    | '/access/login'
+    | '/access/register'
    | '/demo/i18n'
    | '/demo/tanstack-query'
    | '/demo/sentry/testing'
  id:
    | '__root__'
    | '/'
+    | '/_auth'
+    | '/access'
    | '/login'
-    | '/auth/dashboard'
+    | '/logout'
+    | '/_auth/dashboard'
+    | '/access/login'
+    | '/access/register'
    | '/demo/i18n'
    | '/demo/tanstack-query'
    | '/demo/sentry/testing'
@@ -101,8 +156,10 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
-  LoginRouteRoute: typeof LoginRouteRoute
-  AuthDashboardRoute: typeof AuthDashboardRoute
+  AuthRoute: typeof AuthRouteWithChildren
+  AccessRoute: typeof AccessRouteWithChildren
+  LoginRoute: typeof LoginRoute
+  LogoutRoute: typeof LogoutRoute
  DemoI18nRoute: typeof DemoI18nRoute
  DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
  DemoSentryTestingRoute: typeof DemoSentryTestingRoute
@@ -110,11 +167,32 @@ export interface RootRouteChildren {

 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+    '/logout': {
+      id: '/logout'
+      path: '/logout'
+      fullPath: '/logout'
+      preLoaderRoute: typeof LogoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/login': {
      id: '/login'
      path: '/login'
      fullPath: '/login'
-      preLoaderRoute: typeof LoginRouteRouteImport
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/access': {
+      id: '/access'
+      path: '/access'
+      fullPath: '/access'
+      preLoaderRoute: typeof AccessRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_auth': {
+      id: '/_auth'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof AuthRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/': {
@@ -138,12 +216,26 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof DemoI18nRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/auth/dashboard': {
-      id: '/auth/dashboard'
-      path: '/auth/dashboard'
-      fullPath: '/auth/dashboard'
+    '/access/register': {
+      id: '/access/register'
+      path: '/register'
+      fullPath: '/access/register'
+      preLoaderRoute: typeof AccessRegisterRouteImport
+      parentRoute: typeof AccessRoute
+    }
+    '/access/login': {
+      id: '/access/login'
+      path: '/login'
+      fullPath: '/access/login'
+      preLoaderRoute: typeof AccessLoginRouteImport
+      parentRoute: typeof AccessRoute
+    }
+    '/_auth/dashboard': {
+      id: '/_auth/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
      preLoaderRoute: typeof AuthDashboardRouteImport
-      parentRoute: typeof rootRouteImport
+      parentRoute: typeof AuthRoute
    }
    '/demo/sentry/testing': {
      id: '/demo/sentry/testing'
@@ -155,10 +247,35 @@ declare module '@tanstack/react-router' {
  }
 }

+interface AuthRouteChildren {
+  AuthDashboardRoute: typeof AuthDashboardRoute
+}
+
+const AuthRouteChildren: AuthRouteChildren = {
+  AuthDashboardRoute: AuthDashboardRoute,
+}
+
+const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
+
+interface AccessRouteChildren {
+  AccessLoginRoute: typeof AccessLoginRoute
+  AccessRegisterRoute: typeof AccessRegisterRoute
+}
+
+const AccessRouteChildren: AccessRouteChildren = {
+  AccessLoginRoute: AccessLoginRoute,
+  AccessRegisterRoute: AccessRegisterRoute,
+}
+
+const AccessRouteWithChildren =
+  AccessRoute._addFileChildren(AccessRouteChildren)
+
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
-  LoginRouteRoute: LoginRouteRoute,
-  AuthDashboardRoute: AuthDashboardRoute,
+  AuthRoute: AuthRouteWithChildren,
+  AccessRoute: AccessRouteWithChildren,
+  LoginRoute: LoginRoute,
+  LogoutRoute: LogoutRoute,
  DemoI18nRoute: DemoI18nRoute,
  DemoTanstackQueryRoute: DemoTanstackQueryRoute,
  DemoSentryTestingRoute: DemoSentryTestingRoute,
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -8,7 +8,8 @@ export function getRouter() {
 	const router = createTanStackRouter({
 		routeTree,
 		context: {
-			queryClient
+			queryClient,
+			user: null
 		},
 		scrollRestoration: true,
 		defaultPreload: "intent",
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import { ToastProvider } from "@heroui/react"
 import type { QueryClient } from "@tanstack/react-query"
 import {
 	createRootRouteWithContext,
@@ -5,12 +6,13 @@ import {
 	Scripts
 } from "@tanstack/react-router"
 import { Devtools } from "@/integrations/devtools"
-import { getLocale } from "@/paraglide/runtime"
+import { getLocale } from "@/integrations/paraglide/runtime"
+import { user } from "@/lib/server/user"
 import appCss from "@/styles/globals.css?url"
-import Header from "../components/Header"

 interface MyRouterContext {
 	queryClient: QueryClient
+	user: null
 }

 export const Route = createRootRouteWithContext<MyRouterContext>()({
@@ -20,8 +22,10 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 		if (typeof document !== "undefined") {
 			document.documentElement.setAttribute("lang", getLocale())
 		}
+		return {
+			user: await user.userData()
+		}
 	},
-
 	head: () => ({
 		meta: [
 			{
@@ -52,7 +56,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<HeadContent />
 			</head>
 			<body>
-				<Header />
+				<ToastProvider />
 				{children}
 				<Devtools />
 				<Scripts />
--- a/src/routes/_auth.tsx
+++ b/src/routes/_auth.tsx
@@ -0,0 +1,31 @@
+import { createFileRoute, Link, Outlet } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/_auth")({
+	beforeLoad: ({ context }) => {
+		if (context.user.error) {
+			throw new Error("Not authenticated")
+		}
+	},
+	errorComponent: ({ error }) => {
+		if (error.message === "Not authenticated") {
+			return (
+				<p>
+					Not authenticated. Please <Link to="/access/login">login</Link>.
+				</p>
+			)
+		}
+		throw error
+	},
+	component: RouteComponent
+})
+
+function RouteComponent() {
+	return (
+		<div className="min-h-screen flex gap-2">
+			<div className="p-2"></div>
+			<div className="sm:pl-25 w-full">
+				<Outlet />
+			</div>
+		</div>
+	)
+}
--- a/src/routes/_auth/dashboard.tsx
+++ b/src/routes/_auth/dashboard.tsx
@@ -5,13 +5,13 @@ import { useState } from "react"
 import {
 	Map as MapComponent,
 	MapMarker,
-	MapViewport,
+	type MapViewport,
 	MarkerContent,
 	MarkerPopup,
 	MarkerTooltip
 } from "@/components/maps/map"

-export const Route = createFileRoute("/auth/dashboard")({
+export const Route = createFileRoute("/_auth/dashboard")({
 	component: RouteComponent
 })

@@ -44,7 +44,7 @@ function RouteComponent() {
 	})
 	return (
 		<div>
-			<Card className="h-[800px] p-0 overflow-hidden">
+			<Card className="h-200 p-0 overflow-hidden">
 				<MapComponent
 					center={[40.5874827, -1.7925343]}
 					zoom={10}
--- a/src/routes/access.login.tsx
+++ b/src/routes/access.login.tsx
@@ -0,0 +1,133 @@
+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"
+
+export const Route = createFileRoute("/access/login")({
+	component: RouteComponent
+})
+
+function RouteComponent() {
+	const { login, isPending } = useLogin()
+
+	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
+
+		login({ email, password })
+	}
+
+	return (
+		<>
+			<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
+				<Fieldset>
+					<Fieldset.Group>
+						<TextField
+							type="email"
+							name="email"
+							variant="secondary"
+							className="py-4 text-lg"
+							isRequired
+							defaultValue={import.meta.env.VITE_LOGIN_USER}
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Correo
+							</Label>
+							<Input placeholder="Introduce tu correo" />
+							<FieldError />
+						</TextField>
+						<TextField
+							type="password"
+							name="password"
+							variant="secondary"
+							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"
+					size="lg"
+					isPending={isPending}
+				>
+					{isPending ? <Spinner /> : <LogIn size={18} />}
+					Entrar
+				</Button>
+			</Form>
+			<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
+								fill="#f44336"
+								d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"
+								opacity="0.987"
+							/>
+							<path
+								fill="#ffc107"
+								d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92"
+								opacity="0.997"
+							/>
+							<path
+								fill="#448aff"
+								d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49"
+								opacity="0.999"
+							/>
+							<path
+								fill="#43a047"
+								d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z"
+								opacity="0.993"
+							/>
+						</g>
+					</svg>
+					Google
+				</Button>
+				<Button size="lg" className="w-full" variant="secondary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 256 256"
+						aria-hidden="true"
+					>
+						<path
+							fill="#1877f2"
+							d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
+						/>
+						<path
+							fill="#fff"
+							d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"
+						/>
+					</svg>
+					Facebook
+				</Button>
+			</div>
+		</>
+	)
+}
--- a/src/routes/access.register.tsx
+++ b/src/routes/access.register.tsx
@@ -0,0 +1,172 @@
+import {
+	Button,
+	FieldError,
+	Fieldset,
+	Form,
+	Input,
+	Label,
+	Spinner,
+	TextField
+} from "@heroui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { UserPlus } from "lucide-react"
+import { useSignup } from "@/lib/hooks/useSignup"
+
+export const Route = createFileRoute("/access/register")({
+	component: RouteComponent
+})
+
+function RouteComponent() {
+	const { signup, isPending } = useSignup()
+
+	const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		const formData = new FormData(e.currentTarget)
+		signup({
+			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 (
+		<>
+			<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-2 text-lg"
+							isRequired
+						>
+							<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>
+						<TextField
+							type="password"
+							name="password"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Contraseña
+							</Label>
+							<Input placeholder="Mínimo 6 caracteres" />
+							<FieldError />
+						</TextField>
+						<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 /> : <UserPlus size={18} />}
+					Crear cuenta
+				</Button>
+			</Form>
+			<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
+								fill="#f44336"
+								d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"
+								opacity="0.987"
+							/>
+							<path
+								fill="#ffc107"
+								d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92"
+								opacity="0.997"
+							/>
+							<path
+								fill="#448aff"
+								d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49"
+								opacity="0.999"
+							/>
+							<path
+								fill="#43a047"
+								d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z"
+								opacity="0.993"
+							/>
+						</g>
+					</svg>
+					Google
+				</Button>
+				<Button size="lg" className="w-full" variant="secondary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 256 256"
+						aria-hidden="true"
+					>
+						<path
+							fill="#1877f2"
+							d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
+						/>
+						<path
+							fill="#fff"
+							d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"
+						/>
+					</svg>
+					Facebook
+				</Button>
+			</div>
+		</>
+	)
+}
--- a/src/routes/access.tsx
+++ b/src/routes/access.tsx
@@ -0,0 +1,61 @@
+import { Card, type Key, Tabs } from "@heroui/react"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/access")({
+	beforeLoad: ({ location }) => {
+		if (location.pathname === "/access") {
+			redirect({
+				to: "/access/login",
+				replace: true,
+				throw: true
+			})
+		}
+	},
+	component: RouteComponent
+})
+
+function RouteComponent() {
+	const navigate = Route.useNavigate()
+
+	const onSelectTab = (tabId: Key) => {
+		navigate({
+			to: `/access/${tabId}`,
+			viewTransition: true
+		})
+	}
+
+	return (
+		<div className="grid-cols-2 grid min-h-screen">
+			<div className=" p-5 bg-default">
+				<h1 className="text-4xl font-bold text-end ">
+					Find<span className="text-accent">your</span>Pilot
+				</h1>
+				<div className="flex items-center justify-center  min-h-[90vh]">
+					<Card className="w-full max-w-md bg-white/90 backdrop-blur-2xl border-3 border-accent-soft">
+						<Card.Header>
+							<Tabs className="w-full max-w-md" onSelectionChange={onSelectTab}>
+								<Tabs.ListContainer>
+									<Tabs.List aria-label="Options">
+										<Tabs.Tab id="login" className="text-lg">
+											Acceso
+											<Tabs.Indicator className="bg-accent" />
+										</Tabs.Tab>
+										<Tabs.Tab id="register" className="text-lg ">
+											<Tabs.Separator />
+											Registro
+											<Tabs.Indicator className="bg-accent" />
+										</Tabs.Tab>
+									</Tabs.List>
+								</Tabs.ListContainer>
+							</Tabs>
+						</Card.Header>
+						<Card.Content>
+							<Outlet />
+						</Card.Content>
+					</Card>
+				</div>
+			</div>
+			<div className="bg-accent bg-[url('https://cdn.pixabay.com/photo/2023/03/22/22/37/mavic-2-7870679_1280.jpg')] bg-cover"></div>
+		</div>
+	)
+}
--- a/src/routes/index.tsx
+++ b/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">
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute, redirect } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/login")({
+	beforeLoad: () => {
+		redirect({
+			to: "/access/login",
+			replace: true,
+			throw: true
+		})
+	}
+})
--- a/src/routes/login/route.tsx
+++ b/src/routes/login/route.tsx
@@ -1,142 +0,0 @@
-import { Button, Card, Input, Label, Tabs } from "@heroui/react"
-import { createFileRoute } from "@tanstack/react-router"
-import { LogIn } from "lucide-react"
-import { useState } from "react"
-
-export const Route = createFileRoute("/login")({
-	component: RouteComponent
-})
-
-function RouteComponent() {
-	const [values, setValues] = useState({
-		email: "",
-		password: ""
-	})
-	return (
-		<div className="grid-cols-2 grid min-h-screen">
-			<div className=" p-5 bg-default">
-				<h1 className="text-4xl font-bold text-end ">
-					Find<span className="text-accent">your</span>Pilot
-				</h1>
-				<div className="flex items-center justify-center  min-h-[90vh]">
-					<Card className="w-full max-w-md bg-white/90 backdrop-blur-2xl border-3 border-accent-soft">
-						<Card.Header>
-							<Tabs className="w-full max-w-md">
-								<Tabs.ListContainer>
-									<Tabs.List aria-label="Options">
-										<Tabs.Tab id="login" className="text-lg">
-											Acceso
-											<Tabs.Indicator className="bg-accent" />
-										</Tabs.Tab>
-										<Tabs.Tab id="register" className="text-lg ">
-											<Tabs.Separator />
-											Registro
-											<Tabs.Indicator className="bg-accent" />
-										</Tabs.Tab>
-									</Tabs.List>
-								</Tabs.ListContainer>
-							</Tabs>
-						</Card.Header>
-						<Card.Content>
-							<form className="flex flex-col gap-4">
-								<Label isRequired className="ml-4 text-lg">
-									Correo
-								</Label>
-								<Input
-									placeholder="Introduce tu correo"
-									type="email"
-									value={values.email}
-									onChange={(e) =>
-										setValues({ ...values, email: e.target.value })
-									}
-									variant="secondary"
-									className="py-4 text-lg "
-									required
-								/>
-								<Label isRequired className="ml-4 text-lg">
-									Contraseña
-								</Label>
-								<Input
-									placeholder="Introduce tu contraseña"
-									type="password"
-									value={values.password}
-									onChange={(e) =>
-										setValues({ ...values, password: e.target.value })
-									}
-									variant="secondary"
-									className="py-4 text-lg "
-									required
-								/>
-								<div className="flex justify-end">
-									<Button
-										type="submit"
-										className="py-6 px-8 w-full text-white text-lg"
-										size="lg"
-									>
-										<LogIn size={18} />
-										Entrar
-									</Button>
-								</div>
-							</form>
-						</Card.Content>
-						<Card.Footer>
-							<div className="flex justify-evenly w-full gap-4">
-								<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"
-									>
-										<g fill="none" fillRule="evenodd" clipRule="evenodd">
-											<path
-												fill="#f44336"
-												d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"
-												opacity="0.987"
-											/>
-											<path
-												fill="#ffc107"
-												d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92"
-												opacity="0.997"
-											/>
-											<path
-												fill="#448aff"
-												d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49"
-												opacity="0.999"
-											/>
-											<path
-												fill="#43a047"
-												d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z"
-												opacity="0.993"
-											/>
-										</g>
-									</svg>
-									Google
-								</Button>
-								<Button size="lg" className="w-full" variant="secondary">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="256"
-										height="256"
-										viewBox="0 0 256 256"
-									>
-										<path
-											fill="#1877f2"
-											d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
-										/>
-										<path
-											fill="#fff"
-											d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"
-										/>
-									</svg>
-									Facebook
-								</Button>
-							</div>
-						</Card.Footer>
-					</Card>
-				</div>
-			</div>
-			<div className="bg-accent bg-[url('https://cdn.pixabay.com/photo/2023/03/22/22/37/mavic-2-7870679_1280.jpg')] bg-cover"></div>
-		</div>
-	)
-}
--- a/src/routes/logout.tsx
+++ b/src/routes/logout.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { user } from "@/lib/server/user"
+
+export const Route = createFileRoute("/logout")({
+	beforeLoad: async () => {
+		await user.logout()
+	},
+	preload: false
+})