- 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 (
-
+ {" "}
+
+
+
-
- 
-
-
- );
+ const navigate = apiRouter.useNavigate()
+ return (
+
- 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 (
-
+ Edit src/routes/index.tsx and save to reload.
+
+
+
+
+
-
- );
+ if (data?.error) {
+ alert(data.message)
+ return
+ }
+ navigate({
+ to: "/post"
+ })
+ },
+ onError: (error) => {
+ console.log("No se ha podido procesar el login", error)
+ }
+ })
+ return (
+ Login
- -
+
+ )
}
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 (
- Login
+ +
-
- );
+ 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
- -
+
+ )
}
Signup
+ +