From 83b86ab0f0d8b46d20b32554287efac9aab2a945 Mon Sep 17 00:00:00 2001 From: Jrodenas Date: Thu, 7 Aug 2025 20:12:35 +0200 Subject: [PATCH] feat: implement Sonner for toast notifications --- .vscode/settings.json | 35 +++++++ package-lock.json | 141 +++++++++++++++++++++++++- package.json | 1 + src/integrations/sonner/provider.tsx | 13 +++ src/integrations/supabase/supabase.ts | 42 ++++---- src/router.tsx | 2 +- src/routes/__root.tsx | 124 +++++++++++----------- src/routes/_authed.tsx | 66 ++++++------ src/routes/_authed/post.tsx | 44 ++++---- src/routes/index.tsx | 82 +++++++-------- src/routes/login.tsx | 108 ++++++++++---------- src/routes/logout.tsx | 36 +++---- src/routes/signup.tsx | 134 ++++++++++++------------ 13 files changed, 506 insertions(+), 322 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/integrations/sonner/provider.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..70dd163 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,35 @@ +{ + "files.watcherExclude": { + "**/routeTree.gen.ts": true + }, + "search.exclude": { + "**/routeTree.gen.ts": true + }, + "files.readonlyInclude": { + "**/routeTree.gen.ts": true + }, + "[javascript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[typescript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[json]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[jsonc]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[css]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "editor.codeActionsOnSave": { + "source.organizeImports.biome": "explicit" + } +} diff --git a/package-lock.json b/package-lock.json index b54b21e..49e70d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,8 @@ "name": "template", "dependencies": { "@heroui/react": "^2.8.2", + "@supabase/ssr": "^0.6.1", + "@supabase/supabase-js": "^2.53.1", "@tailwindcss/vite": "^4.1.11", "@tanstack/react-query": "^5.84.1", "@tanstack/react-query-devtools": "^5.84.1", @@ -18,6 +20,7 @@ "framer-motion": "^12.23.12", "react": "^19.1.1", "react-dom": "^19.1.1", + "sonner": "^2.0.7", "tailwindcss": "^4.1.11", "vite-tsconfig-paths": "^5.1.4" }, @@ -6020,6 +6023,114 @@ "integrity": "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==", "license": "CC0-1.0" }, + "node_modules/@supabase/auth-js": { + "version": "2.71.1", + "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.71.1.tgz", + "integrity": "sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/functions-js": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.5.tgz", + "integrity": "sha512-v5GSqb9zbosquTo6gBwIiq7W9eQ7rE5QazsK/ezNiQXdCbY+bH8D9qEaBIkhVvX4ZRW5rP03gEfw5yw9tiq4EQ==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/node-fetch": { + "version": "2.6.15", + "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz", + "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + } + }, + "node_modules/@supabase/node-fetch/node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, + "node_modules/@supabase/node-fetch/node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, + "node_modules/@supabase/node-fetch/node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/@supabase/postgrest-js": { + "version": "1.19.4", + "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.19.4.tgz", + "integrity": "sha512-O4soKqKtZIW3olqmbXXbKugUtByD2jPa8kL2m2c1oozAO11uCcGrRhkZL0kVxjBLrXHE0mdSkFsMj7jDSfyNpw==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/realtime-js": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.15.0.tgz", + "integrity": "sha512-SEIWApsxyoAe68WU2/5PCCuBwa11LL4Bb8K3r2FHCt3ROpaTthmDiWEhnLMGayP05N4QeYrMk0kyTZOwid/Hjw==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.13", + "@types/phoenix": "^1.6.6", + "@types/ws": "^8.18.1", + "ws": "^8.18.2" + } + }, + "node_modules/@supabase/ssr": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.6.1.tgz", + "integrity": "sha512-QtQgEMvaDzr77Mk3vZ3jWg2/y+D8tExYF7vcJT+wQ8ysuvOeGGjYbZlvj5bHYsj/SpC0bihcisnwPrM4Gp5G4g==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1" + }, + "peerDependencies": { + "@supabase/supabase-js": "^2.43.4" + } + }, + "node_modules/@supabase/storage-js": { + "version": "2.10.4", + "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.10.4.tgz", + "integrity": "sha512-cvL02GarJVFcNoWe36VBybQqTVRq6wQSOCvTS64C+eyuxOruFIm1utZAY0xi2qKtHJO3EjKaj8iWJKySusDmAQ==", + "license": "MIT", + "dependencies": { + "@supabase/node-fetch": "^2.6.14" + } + }, + "node_modules/@supabase/supabase-js": { + "version": "2.54.0", + "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.54.0.tgz", + "integrity": "sha512-DLw83YwBfAaFiL3oWV26+sHRdeCGtxmIKccjh/Pndze3BWM4fZghzYKhk3ElOQU8Bluq4AkkCJ5bM5Szl/sfRg==", + "license": "MIT", + "dependencies": { + "@supabase/auth-js": "2.71.1", + "@supabase/functions-js": "2.4.5", + "@supabase/node-fetch": "2.6.15", + "@supabase/postgrest-js": "1.19.4", + "@supabase/realtime-js": "2.15.0", + "@supabase/storage-js": "^2.10.4" + } + }, "node_modules/@swc/helpers": { "version": "0.5.17", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz", @@ -7009,7 +7120,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.2.0.tgz", "integrity": "sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==", "license": "MIT", - "optional": true, "dependencies": { "undici-types": "~7.10.0" } @@ -7020,6 +7130,12 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "license": "MIT" }, + "node_modules/@types/phoenix": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz", + "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==", + "license": "MIT" + }, "node_modules/@types/react": { "version": "19.1.9", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz", @@ -7052,6 +7168,15 @@ "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==", "license": "MIT" }, + "node_modules/@types/ws": { + "version": "8.18.1", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", + "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==", + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/yauzl": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", @@ -12739,6 +12864,16 @@ "seroval-plugins": "~1.3.0" } }, + "node_modules/sonner": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz", + "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/source-map": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", @@ -13443,8 +13578,7 @@ "version": "7.10.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz", "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==", - "license": "MIT", - "optional": true + "license": "MIT" }, "node_modules/unenv": { "version": "1.10.0", @@ -14411,7 +14545,6 @@ "version": "8.18.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", - "dev": true, "license": "MIT", "engines": { "node": ">=10.0.0" diff --git a/package.json b/package.json index 676f569..8be49e2 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "framer-motion": "^12.23.12", "react": "^19.1.1", "react-dom": "^19.1.1", + "sonner": "^2.0.7", "tailwindcss": "^4.1.11", "vite-tsconfig-paths": "^5.1.4" }, diff --git a/src/integrations/sonner/provider.tsx b/src/integrations/sonner/provider.tsx new file mode 100644 index 0000000..7453594 --- /dev/null +++ b/src/integrations/sonner/provider.tsx @@ -0,0 +1,13 @@ +import { Toaster } from "sonner" + +export const SonnerProvider = () => { + return ( + + ) +} diff --git a/src/integrations/supabase/supabase.ts b/src/integrations/supabase/supabase.ts index 39ad47a..bdc3cb5 100644 --- a/src/integrations/supabase/supabase.ts +++ b/src/integrations/supabase/supabase.ts @@ -1,24 +1,24 @@ -import { parseCookies, setCookie } from '@tanstack/react-start/server' -import { createServerClient } from '@supabase/ssr' +import { createServerClient } from "@supabase/ssr" +import { parseCookies, setCookie } from "@tanstack/react-start/server" export function getSupabaseServerClient() { - return createServerClient( - process.env.SUPABASE_URL!, - process.env.SUPABASE_ANON_KEY!, - { - cookies: { - getAll() { - return Object.entries(parseCookies()).map(([name, value]) => ({ - name, - value, - })) - }, - setAll(cookies) { - cookies.forEach((cookie) => { - setCookie(cookie.name, cookie.value) - }) - }, - }, - }, - ) + return createServerClient( + process.env.SUPABASE_URL as string, + process.env.SUPABASE_ANON_KEY as string, + { + cookies: { + getAll() { + return Object.entries(parseCookies()).map(([name, value]) => ({ + name, + value + })) + }, + setAll(cookies) { + cookies.forEach((cookie) => { + setCookie(cookie.name, cookie.value) + }) + } + } + } + ) } diff --git a/src/router.tsx b/src/router.tsx index 1f1e176..b2d7371 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -10,7 +10,7 @@ export const createRouter = () => { return routerWithQueryClient( createTanstackRouter({ routeTree, - context: { ...rqContext }, + context: { ...rqContext, user: null }, defaultPreload: "intent", Wrap: (props: { children: React.ReactNode }) => { return {props.children} diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 7d299d7..18e3354 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -1,74 +1,76 @@ -import css from "@styles/globals.css?url"; -import type { QueryClient } from "@tanstack/react-query"; +import css from "@styles/globals.css?url" +import type { QueryClient } from "@tanstack/react-query" import { - createRootRouteWithContext, - HeadContent, - Scripts, -} from "@tanstack/react-router"; -import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; -import { HeroUIProvider } from "@/integrations/heroui/provider"; -import { createServerFn } from "@tanstack/react-start"; -import { getSupabaseServerClient } from "@/integrations/supabase/supabase"; + createRootRouteWithContext, + HeadContent, + Scripts +} from "@tanstack/react-router" +import { TanStackRouterDevtools } from "@tanstack/react-router-devtools" +import { createServerFn } from "@tanstack/react-start" +import { HeroUIProvider } from "@/integrations/heroui/provider" +import { SonnerProvider } from "@/integrations/sonner/provider" +import { getSupabaseServerClient } from "@/integrations/supabase/supabase" interface MyRouterContext { - queryClient: QueryClient; - user: null; + queryClient: QueryClient + user: null } const fetchUser = createServerFn({ method: "GET" }).handler(async () => { - const supabase = getSupabaseServerClient(); - const { data, error: _error } = await supabase.auth.getUser(); + const supabase = getSupabaseServerClient() + const { data, error: _error } = await supabase.auth.getUser() - if (!data.user?.email) { - return null; - } + if (!data.user?.email) { + return null + } - return { - email: data.user.email, - }; -}); + return { + email: data.user.email + } +}) export const Route = createRootRouteWithContext()({ - beforeLoad: async () => { - const user = await fetchUser(); - return { - user, - }; - }, - head: () => ({ - meta: [ - { - charSet: "utf-8", - }, - { - name: "viewport", - content: "width=device-width, initial-scale=1", - }, - { - title: "TanStack Start Starter", - }, - ], - links: [ - { - rel: "stylesheet", - href: css, - }, - ], - }), + beforeLoad: async () => { + const user = await fetchUser() + return { + user + } + }, + head: () => ({ + meta: [ + { + charSet: "utf-8" + }, + { + name: "viewport", + content: "width=device-width, initial-scale=1" + }, + { + title: "TanStack Start Starter" + } + ], + links: [ + { + rel: "stylesheet", + href: css + } + ] + }), - shellComponent: RootDocument, -}); + shellComponent: RootDocument +}) function RootDocument({ children }: { children: React.ReactNode }) { - return ( - - - - - - {children} - - - - - ); + return ( + + + + + + {children} + + + + + + ) } diff --git a/src/routes/_authed.tsx b/src/routes/_authed.tsx index 31a35bf..3761792 100644 --- a/src/routes/_authed.tsx +++ b/src/routes/_authed.tsx @@ -1,39 +1,39 @@ -import { createFileRoute } from "@tanstack/react-router"; -import { createServerFn } from "@tanstack/react-start"; +import { createFileRoute } from "@tanstack/react-router" +import { createServerFn } from "@tanstack/react-start" // import { Login } from "../components/Login"; -import { getSupabaseServerClient } from "@/integrations/supabase/supabase"; +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, - }; - } - }); + .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 }) => { - console.log("contextw", context); - if (!context?.user) { - throw new Error("Not authenticated"); - } - }, - errorComponent: ({ error }) => { - if (error.message === "Not authenticated") { -

- Not authenticated. Please login. -

; - } + beforeLoad: ({ context }) => { + console.log("contextw", context) + if (!context?.user) { + throw new Error("Not authenticated") + } + }, + errorComponent: ({ error }) => { + if (error.message === "Not authenticated") { + ;

+ Not authenticated. Please login. +

+ } - throw error; - }, -}); + throw error + } +}) diff --git a/src/routes/_authed/post.tsx b/src/routes/_authed/post.tsx index 4b1231c..d3925ba 100644 --- a/src/routes/_authed/post.tsx +++ b/src/routes/_authed/post.tsx @@ -1,27 +1,27 @@ -import { Button } from "@heroui/react"; -import { createFileRoute } from "@tanstack/react-router"; +import { Button } from "@heroui/react" +import { createFileRoute } from "@tanstack/react-router" export const Route = createFileRoute("/_authed/post")({ - component: RouteComponent, -}); + component: RouteComponent +}) function RouteComponent() { - const navigate = Route.useNavigate(); - return ( -
- Hello "/_authed/post"!{" "} -
- {" "} - -
-
- ); + const navigate = Route.useNavigate() + return ( +
+ Hello "/_authed/post"!{" "} +
+ {" "} + +
+
+ ) } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index c58fa41..fc2ac80 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,45 +1,45 @@ -import logo from "@assets/logo.svg"; -import { Button } from "@heroui/react"; -import { createFileRoute, getRouteApi } from "@tanstack/react-router"; +import logo from "@assets/logo.svg" +import { Button } from "@heroui/react" +import { createFileRoute, getRouteApi } from "@tanstack/react-router" export const Route = createFileRoute("/")({ - component: App, -}); -const apiRouter = getRouteApi("/"); + component: App +}) +const apiRouter = getRouteApi("/") function App() { - const navigate = apiRouter.useNavigate(); - return ( -
-
- logo -

- Edit src/routes/index.tsx and save to reload. -

-
- - -
-
-
- ); + const navigate = apiRouter.useNavigate() + return ( +
+
+ logo +

+ Edit src/routes/index.tsx and save to reload. +

+
+ + +
+
+
+ ) } diff --git a/src/routes/login.tsx b/src/routes/login.tsx index 27acd90..aadd065 100644 --- a/src/routes/login.tsx +++ b/src/routes/login.tsx @@ -1,59 +1,59 @@ -import { useMutation } from "@tanstack/react-query"; -import { createFileRoute, getRouteApi } from "@tanstack/react-router"; -import { useServerFn } from "@tanstack/react-start"; -import { loginFn } from "./_authed"; -import { Button, Form, Input } from "@heroui/react"; +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" export const Route = createFileRoute("/login")({ - component: LoginComp, -}); -const apiRouter = getRouteApi("/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); + 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); - }, - }); - return ( -
-

Login

-
{ - e.preventDefault(); - const formData = new FormData(e.currentTarget); - const email = formData.get("email") as string; - const password = formData.get("password") as string; - loginMutation.mutate({ email, password }); - }} - > - - - -
-
- ); + if (data?.error) { + alert(data.message) + return + } + navigate({ + to: "/post" + }) + }, + onError: (error) => { + console.log("No se ha podido procesar el login", error) + } + }) + return ( +
+

Login

+
{ + e.preventDefault() + const formData = new FormData(e.currentTarget) + const email = formData.get("email") as string + const password = formData.get("password") as string + loginMutation.mutate({ email, password }) + }} + > + + + +
+
+ ) } diff --git a/src/routes/logout.tsx b/src/routes/logout.tsx index 85d55c3..7f8de18 100644 --- a/src/routes/logout.tsx +++ b/src/routes/logout.tsx @@ -1,24 +1,24 @@ -import { getSupabaseServerClient } from "@/integrations/supabase/supabase"; -import { redirect, createFileRoute } from "@tanstack/react-router"; -import { createServerFn } from "@tanstack/react-start"; +import { createFileRoute, redirect } from "@tanstack/react-router" +import { createServerFn } from "@tanstack/react-start" +import { getSupabaseServerClient } from "@/integrations/supabase/supabase" const logoutFn = createServerFn().handler(async () => { - const supabase = getSupabaseServerClient(); - const { error } = await supabase.auth.signOut(); + const supabase = getSupabaseServerClient() + const { error } = await supabase.auth.signOut() - if (error) { - return { - error: true, - message: error.message, - }; - } + if (error) { + return { + error: true, + message: error.message + } + } - throw redirect({ - href: "/", - }); -}); + throw redirect({ + href: "/" + }) +}) export const Route = createFileRoute("/logout")({ - preload: false, - loader: () => logoutFn(), -}); + preload: false, + loader: () => logoutFn() +}) diff --git a/src/routes/signup.tsx b/src/routes/signup.tsx index 27a2442..09454f3 100644 --- a/src/routes/signup.tsx +++ b/src/routes/signup.tsx @@ -1,75 +1,75 @@ -import { redirect, createFileRoute } from "@tanstack/react-router"; -import { createServerFn, useServerFn } from "@tanstack/react-start"; -import { getSupabaseServerClient } from "@/integrations/supabase/supabase"; -import { Button, Form, Input } from "@heroui/react"; -import { useMutation } from "@tanstack/react-query"; +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, - }; - } + .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 || "/", - }); - }); + throw redirect({ + href: data.redirectUrl || "/" + }) + }) export const Route = createFileRoute("/signup")({ - component: SignupComp, -}); + 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, - }, - }); - }, - }); - return ( -
-

Signup

-
{ - e.preventDefault(); - const formData = new FormData(e.currentTarget); - const email = formData.get("email") as string; - const password = formData.get("password") as string; - signupMutation.mutate({ - email, - password, - }); - }} - > - - - -
-
- ); + 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 + } + }) + } + }) + return ( +
+

Signup

+
{ + e.preventDefault() + const formData = new FormData(e.currentTarget) + const email = formData.get("email") as string + const password = formData.get("password") as string + signupMutation.mutate({ + email, + password + }) + }} + > + + + +
+
+ ) }