From ac56bf48941133de1348eb4a0829889491b7703b Mon Sep 17 00:00:00 2001 From: Matthias Schild Date: Thu, 10 Sep 2026 23:40:08 +0200 Subject: [PATCH] feat: working login and logged out --- components/Header.tsx | 17 ++++++++++++++--- components/Headline.tsx | 7 +++++++ routes/_app.tsx | 9 ++++++--- routes/dashboard.tsx | 24 +++++++++++++++++++++--- routes/sign-in.tsx | 21 ++++++--------------- routes/sign-out.tsx | 16 ++++++++++++++++ utils.ts | 27 +++++++++++++++++++++++++++ 7 files changed, 97 insertions(+), 24 deletions(-) create mode 100644 components/Headline.tsx create mode 100644 routes/sign-out.tsx diff --git a/components/Header.tsx b/components/Header.tsx index 5ff16fc..d2915d2 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,11 +1,22 @@ -const links = [ +const loggedOutLinks = [ { href: "/", label: "Home" }, { href: "/sign-in", label: "Sign in" }, { href: "/sign-up", label: "Sign up" }, - { href: "/dashboard", label: "Dashboard" }, ]; -export default function Header() { +const loggedInLinks = [ + { href: "/", label: "Home" }, + { href: "/dashboard", label: "Dashboard" }, + { href: "/sign-out", label: "Sign out" }, +]; + +export interface Props { + loggedIn: boolean; +} + +export default function Header(props: Props) { + const links = props.loggedIn ? loggedInLinks : loggedOutLinks; + return (
diff --git a/components/Headline.tsx b/components/Headline.tsx new file mode 100644 index 0000000..cff9f5b --- /dev/null +++ b/components/Headline.tsx @@ -0,0 +1,7 @@ +export interface Props { + children: string; +} + +export default function Headline(props: Props) { + return

{props.children}

; +} diff --git a/routes/_app.tsx b/routes/_app.tsx index ca605be..120814d 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -1,7 +1,10 @@ import Header from "../components/Header.tsx"; -import { define } from "../utils.ts"; +import { define, isLoggedIn } from "../utils.ts"; + +export default define.page(function App(ctx) { + const Component = ctx.Component; + const loggedIn = isLoggedIn(ctx.req); -export default define.page(function App({ Component }) { return ( @@ -10,7 +13,7 @@ export default define.page(function App({ Component }) { Deno Fresh Dummy -
+
diff --git a/routes/dashboard.tsx b/routes/dashboard.tsx index 23539ac..ed60ea6 100644 --- a/routes/dashboard.tsx +++ b/routes/dashboard.tsx @@ -1,5 +1,23 @@ -import { define } from "../utils.ts"; +import Headline from "../components/Headline.tsx"; +import { define, isLoggedIn } from "../utils.ts"; -export default define.page(function Dashboard(ctx) { - return

Dashboard

; +export const handler = define.handlers({ + GET(ctx) { + console.log("ASDF"); + if (!isLoggedIn(ctx.req)) { + const url = new URL(ctx.req.url); + url.pathname = "/sign-in"; + return Response.redirect(url, 303); + } + + return { data: {} }; + }, +}); + +export default define.page(function Dashboard(_ctx) { + return ( +
+ Dashboard +
+ ); }); diff --git a/routes/sign-in.tsx b/routes/sign-in.tsx index aa302ef..05a338d 100644 --- a/routes/sign-in.tsx +++ b/routes/sign-in.tsx @@ -1,8 +1,7 @@ -import { getCookies, setCookie } from "@std/http/cookie"; import { z } from "zod"; import { backendSignIn } from "../backend/sign-in.ts"; import { SignInForm } from "../components/SignInForm.tsx"; -import { define } from "../utils.ts"; +import { define, isLoggedIn, setAuthCookie } from "../utils.ts"; const loginSchema = z.object({ email: z.string(), @@ -11,13 +10,12 @@ const loginSchema = z.object({ export const handler = define.handlers({ GET(ctx) { - const cookies = getCookies(ctx.req.headers); - const authCookie = cookies["auth"]; - if (authCookie === "ok") { + if (isLoggedIn(ctx.req)) { const url = new URL(ctx.req.url); url.pathname = "/dashboard"; return Response.redirect(url, 303); } + return { data: { email: "", @@ -52,17 +50,10 @@ export const handler = define.handlers({ }; } - const url = new URL(ctx.req.url); const headers = new Headers(); - setCookie(headers, { - name: "auth", - value: "ok", - maxAge: 120, - sameSite: "Lax", - domain: url.hostname, - path: "/", - secure: true, - }); + setAuthCookie(ctx.req, headers); + + const url = new URL(ctx.req.url); url.pathname = "/dashboard"; headers.set("location", url.toString()); return new Response(null, { diff --git a/routes/sign-out.tsx b/routes/sign-out.tsx new file mode 100644 index 0000000..c6b7dfd --- /dev/null +++ b/routes/sign-out.tsx @@ -0,0 +1,16 @@ +import { define, unsetAuthCookie } from "../utils.ts"; + +export const handler = define.handlers({ + GET(ctx) { + const headers = new Headers(); + unsetAuthCookie(headers); + + const url = new URL(ctx.req.url); + url.pathname = "/"; + headers.set("location", url.toString()); + return new Response(null, { + status: 303, + headers, + }); + }, +}); diff --git a/utils.ts b/utils.ts index f404216..4dc5c02 100644 --- a/utils.ts +++ b/utils.ts @@ -1,3 +1,4 @@ +import { deleteCookie, getCookies, setCookie } from "@std/http/cookie"; import { createDefine } from "fresh"; // This specifies the type of "ctx.state" which is used to share @@ -7,3 +8,29 @@ export interface State { } export const define = createDefine(); + +export function setAuthCookie( + req: Request, + headers: Headers, +) { + const url = new URL(req.url); + setCookie(headers, { + name: "auth", + value: "ok", + maxAge: 60 * 60, + sameSite: "Lax", + domain: url.hostname, + path: "/", + secure: true, + }); +} + +export function unsetAuthCookie(headers: Headers) { + deleteCookie(headers, "auth"); +} + +export function isLoggedIn(req: Request): boolean { + const cookies = getCookies(req.headers); + const authCookie = cookies["auth"]; + return authCookie === "ok"; +}