feat: working login and logged out

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 (
     <div class="navbar bg-base-100 shadow-sm">
       <div class="flex-1">

components/Headline.tsx

@@ -0,0 +1,7 @@
+export interface Props {
+  children: string;
+}
+
+export default function Headline(props: Props) {
+  return <h1 class="text-2xl font-bold">{props.children}</h1>;
+}

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 (
     <html data-theme="light">
       <head>
@@ -10,7 +13,7 @@ export default define.page(function App({ Component }) {
         <title>Deno Fresh Dummy</title>
       </head>
       <body>
-        <Header />
+        <Header loggedIn={loggedIn} />
         <Component />
       </body>
     </html>

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) {
+export const handler = define.handlers({
-  return <h1>Dashboard</h1>;
+  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<typeof handler>(function Dashboard(_ctx) {
+  return (
+    <div class="container mx-auto p-4">
+      <Headline>Dashboard</Headline>
+    </div>
+  );
 });

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);
+    if (isLoggedIn(ctx.req)) {
-    const authCookie = cookies["auth"];
-    if (authCookie === "ok") {
       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, {
+    setAuthCookie(ctx.req, headers);
-      name: "auth",
+
-      value: "ok",
+    const url = new URL(ctx.req.url);
-      maxAge: 120,
-      sameSite: "Lax",
-      domain: url.hostname,
-      path: "/",
-      secure: true,
-    });
     url.pathname = "/dashboard";
     headers.set("location", url.toString());
     return new Response(null, {

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,
+    });
+  },
+});

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<State>();
+
+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";
+}