feat: Add dedicated login and logout routes, refactor Supabase environment variables, and update registration form UI.

2026-03-15 17:32:55 +01:00
parent 0b50638583
commit 63506d620f
7 changed files with 100 additions and 26 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=""
--- a/src/integrations/supabase/supabase.ts
+++ b/src/integrations/supabase/supabase.ts
@@ -3,10 +3,10 @@ import { createServerOnlyFn } from "@tanstack/react-start"
 import { getCookies, setCookie } from "@tanstack/react-start/server"

 const supabase_url = createServerOnlyFn(
-	() => process.env.VITE_SUPABASE_URL as string
+	() => process.env.SUPABASE_URL as string
 )
 const supabase_key = createServerOnlyFn(
-	() => process.env.VITE_SUPABASE_KEY as string
+	() => process.env.SUPABASE_KEY as string
 )

 export function getSupabaseServerClient() {
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,6 +9,8 @@
 // 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 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 IndexRouteImport } from './routes/index'
@@ -19,6 +21,16 @@ import { Route as AccessLoginRouteImport } from './routes/access.login'
 import { Route as AuthedDashboardRouteImport } from './routes/_authed/dashboard'
 import { Route as DemoSentryTestingRouteImport } from './routes/demo/sentry.testing'

+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',
@@ -67,6 +79,8 @@ const DemoSentryTestingRoute = DemoSentryTestingRouteImport.update({
 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/access': typeof AccessRouteWithChildren
+  '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
  '/dashboard': typeof AuthedDashboardRoute
  '/access/login': typeof AccessLoginRoute
  '/access/register': typeof AccessRegisterRoute
@@ -77,6 +91,8 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/access': typeof AccessRouteWithChildren
+  '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
  '/dashboard': typeof AuthedDashboardRoute
  '/access/login': typeof AccessLoginRoute
  '/access/register': typeof AccessRegisterRoute
@@ -89,6 +105,8 @@ export interface FileRoutesById {
  '/': typeof IndexRoute
  '/_authed': typeof AuthedRouteWithChildren
  '/access': typeof AccessRouteWithChildren
+  '/login': typeof LoginRoute
+  '/logout': typeof LogoutRoute
  '/_authed/dashboard': typeof AuthedDashboardRoute
  '/access/login': typeof AccessLoginRoute
  '/access/register': typeof AccessRegisterRoute
@@ -101,6 +119,8 @@ export interface FileRouteTypes {
  fullPaths:
    | '/'
    | '/access'
+    | '/login'
+    | '/logout'
    | '/dashboard'
    | '/access/login'
    | '/access/register'
@@ -111,6 +131,8 @@ export interface FileRouteTypes {
  to:
    | '/'
    | '/access'
+    | '/login'
+    | '/logout'
    | '/dashboard'
    | '/access/login'
    | '/access/register'
@@ -122,6 +144,8 @@ export interface FileRouteTypes {
    | '/'
    | '/_authed'
    | '/access'
+    | '/login'
+    | '/logout'
    | '/_authed/dashboard'
    | '/access/login'
    | '/access/register'
@@ -134,6 +158,8 @@ export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AuthedRoute: typeof AuthedRouteWithChildren
  AccessRoute: typeof AccessRouteWithChildren
+  LoginRoute: typeof LoginRoute
+  LogoutRoute: typeof LogoutRoute
  DemoI18nRoute: typeof DemoI18nRoute
  DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
  DemoSentryTestingRoute: typeof DemoSentryTestingRoute
@@ -141,6 +167,20 @@ 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 LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/access': {
      id: '/access'
      path: '/access'
@@ -235,6 +275,8 @@ const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AuthedRoute: AuthedRouteWithChildren,
  AccessRoute: AccessRouteWithChildren,
+  LoginRoute: LoginRoute,
+  LogoutRoute: LogoutRoute,
  DemoI18nRoute: DemoI18nRoute,
  DemoTanstackQueryRoute: DemoTanstackQueryRoute,
  DemoSentryTestingRoute: DemoSentryTestingRoute,
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -21,7 +21,9 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 		if (typeof document !== "undefined") {
 			document.documentElement.setAttribute("lang", getLocale())
 		}
-		return await user.userData()
+		return {
+			user: await user.userData()
+		}
 	},
 	head: () => ({
 		meta: [
--- a/src/routes/access.register.tsx
+++ b/src/routes/access.register.tsx
@@ -1,4 +1,13 @@
-import { Button, 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 { useSignup } from "@/lib/hooks/useSignup"
@@ -29,28 +38,32 @@ function RouteComponent() {
 	return (
 		<div>
 			<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
-				<Label isRequired className="ml-4 text-lg">
-					Correo
-				</Label>
-				<Input
-					placeholder="Introduce tu correo"
-					type="email"
-					name="email"
-					variant="secondary"
-					className="py-4 text-lg "
-					required
-				/>
-				<Label isRequired className="ml-4 text-lg">
-					Contraseña
-				</Label>
-				<Input
-					placeholder="Introduce tu contraseña"
+				<Fieldset>
+					<Fieldset.Group>
+						<TextField
+							type="email"
+							name="email"
+							variant="secondary"
+							className="py-4 text-lg"
+							isRequired
+						>
+							<Label>Correo</Label>
+							<Input placeholder="Introduce tu correo" />
+							<FieldError />
+						</TextField>
+					</Fieldset.Group>
+				</Fieldset>
+				<TextField
 					type="password"
 					name="password"
 					variant="secondary"
-					className="py-4 text-lg "
-					required
-				/>
+					className="py-4 text-lg"
+					isRequired
+				>
+					<Label>Contraseña</Label>
+					<Input placeholder="Introduce tu contraseña" />
+					<FieldError />
+				</TextField>
 				<div className="flex justify-end">
 					<Button
 						type="submit"
--- 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/logout.tsx
+++ b/src/routes/logout.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/logout")({
+	beforeLoad: async ({ context }) => {}
+})