cowch/lst
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): finally better auth working as i wanted it to

Browse Source
This commit is contained in:
Blake Matthes
2025-09-22 22:40:44 -05:00
parent 4ab43d91b9
commit 8f1375ab7b
50 changed files with 7939 additions and 5909 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/routes/(auth)/-components/LoginForm.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { useRouter, useSearch } from "@tanstack/react-router";
import { getSession, signin, useAuth } from "../../../lib/authClient";
import { useAppForm } from "../../../lib/formStuff";
import { LstCard } from "../../../components/ui/lstCard";
import { toast } from "sonner";
export default function LoginForm() {
const router = useRouter();
const search = useSearch({ from: "/(auth)/login" });
const { setSession } = useAuth();
const form = useAppForm({
defaultValues: {
username: "",
password: "",
},
onSubmit: async ({ value }) => {
try {
await signin({
username: value.username,
password: value.password,
});
const session = await getSession();
setSession(session);
toast.success(
`Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `
);
router.invalidate();
router.history.push(search.redirect ? search.redirect : "/");
} catch (error) {
console.log(error);
}
},
});
return (
<div className="ml-[25%]">
<LstCard className="p-3 w-96">
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<form.AppField
name="username"
children={(field) => (
<field.InputField
label="Username"
inputType="string"
required={true}
/>
)}
/>
<form.AppField
name="password"
children={(field) => (
<field.InputField
label="Password"
inputType="password"
required={true}
/>
)}
/>
<div className="flex justify-end mt-2">
<form.AppForm>
<form.SubmitButton>Login</form.SubmitButton>
</form.AppForm>
</div>
</form>
</LstCard>
</div>
);
}

30
frontend/src/routes/(auth)/login.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { createFileRoute, redirect } from "@tanstack/react-router";
import { z } from "zod";
import { authClient } from "../../lib/authClient";
import LoginForm from "./-components/LoginForm";
export const Route = createFileRoute("/(auth)/login")({
component: RouteComponent,
validateSearch: z.object({
redirect: z.string().optional(),
}),
beforeLoad: async () => {
const result = await authClient.getSession({
query: { disableCookieCache: true }, // force DB/Server lookup
});
//console.log("session check:", result.data);
if (result.data) {
throw redirect({ to: "/" });
}
},
});
function RouteComponent() {
return (
<div>
<LoginForm />
</div>
);
}

9
frontend/src/routes/__admin.tsx
View File

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

42
frontend/src/routes/__root.tsx
View File

@@ -1,16 +1,32 @@
import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import type { QueryClient } from "@tanstack/react-query";
import { Toaster } from "sonner";
import { SessionGuard } from "../lib/providers/SessionProvider";
import Nav from "../components/navBar/Nav";
const RootLayout = () => (
<>
<nav className="flex gap-1">
<Link to="/">Home</Link>
{/* <Link to="/admin">Admin</Link> */}
</nav>
<hr></hr>
<Outlet />
<TanStackRouterDevtools />
</>
);
interface RootRouteContext {
queryClient: QueryClient;
//user: User | null;
//login: (user: User) => void;
//logout: () => void;
}
export const Route = createRootRoute({ component: RootLayout });
const RootLayout = () => {
//const { logout, login } = Route.useRouteContext();
return (
<div>
<SessionGuard>
<Nav />
<Outlet />
<Toaster expand={true} richColors closeButton />
<TanStackRouterDevtools />
</SessionGuard>
</div>
);
};
export const Route = createRootRouteWithContext<RootRouteContext>()({
component: RootLayout,
});

23
frontend/src/routes/_adminLayout/-components/Nav.tsx
View File

@@ -1,23 +0,0 @@
import { Link } from "@tanstack/react-router";
export default function Nav() {
return (
<div>
<nav className="flex gap-1">
<Link
to="/admin"
className="[&.active]:font-bold"
activeOptions={{ exact: true }}
>
Admin
</Link>
<Link to="/admin/servers" className="[&.active]:font-bold">
Servers
</Link>
<Link to="/admin/users" className="[&.active]:font-bold">
Users
</Link>
</nav>
</div>
);
}

8
frontend/src/routes/_adminLayout/-components/Server.tsx
View File

@@ -1,8 +0,0 @@
import { getRouteApi } from "@tanstack/react-router";
export default function Server() {
const { useParams } = getRouteApi("/_adminLayout/admin/servers/$serverId");
const { serverId } = useParams();
return <div>server id {serverId}!</div>;
}

9
frontend/src/routes/_adminLayout/admin/index.tsx
View File

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

27
frontend/src/routes/_adminLayout/admin/servers.tsx
View File

@@ -1,27 +0,0 @@
import { createFileRoute, Link } from "@tanstack/react-router";
export const Route = createFileRoute("/_adminLayout/admin/servers")({
component: RouteComponent,
});
function RouteComponent() {
return (
<div>
Hello "/admin/servers"! <br />
<Link
to="/admin/servers/$serverId"
params={{
serverId: "5",
}}
>
Server 5
</Link>
<Link
to="/admin/servers/$serverId"
params={(prev) => ({ ...prev, serverId: "10" })}
>
Server 5
</Link>
</div>
);
}

10
frontend/src/routes/_adminLayout/admin/servers/$serverId.tsx
View File

@@ -1,10 +0,0 @@
import { createFileRoute } from "@tanstack/react-router";
import Server from "../../-components/Server";
export const Route = createFileRoute("/_adminLayout/admin/servers/$serverId")({
component: RouteComponent,
});
function RouteComponent() {
return <Server />;
}

9
frontend/src/routes/_adminLayout/admin/servers/$serverId_/edit.tsx
View File

@@ -1,9 +0,0 @@
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/_adminLayout/admin/servers/$serverId_/edit')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/_adminLayout/admin/_server/$edit"!</div>
}

9
frontend/src/routes/_adminLayout/admin/user/$userId.tsx
View File

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

9
frontend/src/routes/_adminLayout/admin/users.tsx
View File

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

16
frontend/src/routes/_adminLayout/route.tsx
View File

@@ -1,16 +0,0 @@
import { createFileRoute, Outlet } from "@tanstack/react-router";
import Nav from "./-components/Nav";
export const Route = createFileRoute("/_adminLayout")({
component: RouteComponent,
});
function RouteComponent() {
return (
<div>
<Nav />
<hr />
<Outlet />
</div>
);
}

9
frontend/src/routes/admin_/settings.tsx
View File

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

17
frontend/src/routes/index.tsx
View File

@@ -1,19 +1,24 @@
import { createFileRoute } from "@tanstack/react-router";
import { Button } from "../components/ui/button";
import { useAuth } from "../lib/authClient";
export const Route = createFileRoute("/")({
component: Index,
});
function Index() {
const { session } = useAuth();
return (
<div>
<div className="h-screen flex items-center justify-center">
<Button className="h-96 w-96">
<a href="/lst/d" target="_blank" className="text-4xl">
LST-DOCS
</a>
</Button>
<div className="h-screen flex flex-col items-center justify-center">
<div>Welcome, {session ? session.user.username : "Guest"}</div>
<div>
<Button className="h-96 w-96">
<a href="/lst/d" target="_blank" className="text-4xl">
LST-DOCS
</a>
</Button>
</div>
</div>
</div>
);