feat: implemented very simple login for testing

src/backend/sign-in.ts

@@ -0,0 +1,7 @@
+export async function backendSignIn(email: string, password: string): Promise<boolean> {
+  // Simulate 1 second fetch
+  return new Promise((resolve) => {
+    const ok = email === '[email protected]' && password === 'asdfasdf'
+    setTimeout(() => resolve(ok), 1000)
+  })
+}

src/components/header.astro

@@ -0,0 +1,39 @@
+---
+import { isLoggedIn } from "../utils/auth";
+
+const loggedIn = isLoggedIn(Astro.cookies)
+---
+
+<div class="navbar bg-base-100 shadow-sm">
+    <div class="flex-1">
+        <a class="btn btn-ghost text-xl">daisyUI</a>
+    </div>
+    <div class="flex-none">
+        <ul class="menu menu-horizontal px-1">
+    {!loggedIn && (
+        <li>
+            <a href="/">Home</a>
+        </li>
+        <li>
+            <a href="/sign-in">Sign in</a>
+        </li> 
+        <li>
+            <a href="/sign-up">Sign up</a>
+        </li>
+    )}
+    {loggedIn && (
+        <li>
+            <a href="/">Home</a>
+        </li>
+        <li>
+            <a href="/dashboard">Dashboard</a>
+        </li>
+        <li>
+            <form method="post" action="/sign-out">
+                <button type="submit">Sign out</button>
+            </form>
+        </li>
+    )}
+    </ul>
+    </div>
+</div>

src/layouts/layout.astro

@@ -1,17 +1,19 @@
 ---
-import "../assets/app.css";
+import '../assets/app.css'
+import Header from '../components/header.astro'
 ---
 
-<html lang="en">
+<html lang='en'>
   <head>
-    <meta charset="utf-8" />
+    <meta charset='utf-8' />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel='icon' href='/favicon.ico' />
-    <meta name="viewport" content="width=device-width" />
+    <meta name='viewport' content='width=device-width' />
-    <meta name="generator" content={Astro.generator} />
+    <meta name='generator' content={Astro.generator} />
     <title>Astro</title>
   </head>
   <body>
+    <Header />
     <slot />
   </body>
 </html>

src/middleware.ts

@@ -0,0 +1,20 @@
+import { defineMiddleware } from 'astro:middleware'
+import { isLoggedIn } from './utils/auth'
+
+const guestUrls = ['/']
+const publicUrls = ['/sign-in', '/sign-up']
+
+export const onRequest = defineMiddleware((context, next) => {
+  const pathname = context.url.pathname.replace(/\/+$/, '') || '/'
+  const loggedIn = isLoggedIn(context.cookies)
+
+  if (guestUrls.includes(pathname)) {
+    return next()
+  }
+
+  if (publicUrls.includes(pathname)) {
+    return loggedIn ? context.redirect('/dashboard', 303) : next()
+  }
+
+  return loggedIn ? next() : context.redirect('/sign-in', 303)
+})

src/pages/dashboard.astro

@@ -0,0 +1,7 @@
+---
+import Layout from '../layouts/layout.astro'
+---
+
+<Layout>
+  <h1>Dashboard</h1>
+</Layout>

src/pages/sign-in.astro

@@ -1,11 +1,17 @@
 ---
+import { backendSignIn } from '../backend/sign-in'
 import LoginForm from '../islands/LoginForm.vue'
 import Layout from '../layouts/layout.astro'
 import { loginSchema } from '../schemas/login'
+import { isLoggedIn, setAuthCookie } from '../utils/auth'
 
 let email = ''
 let error = ''
 
+if (isLoggedIn(Astro.cookies)) {
+  return Astro.redirect('/dashboard', 303)
+}
+
 if (Astro.request.method === 'POST') {
   const formData = await Astro.request.formData()
   const input = {
@@ -20,7 +26,14 @@ if (Astro.request.method === 'POST') {
     error = result.error.issues[0]?.message ?? 'Invalid form data.'
   } else {
     email = result.data.email
-    console.log('POST DATA', result.data)
+
+    const ok = await backendSignIn(email, input.password?.toString() ?? '')
+    if (ok) {
+      setAuthCookie(Astro.cookies)
+      return Astro.redirect('/dashboard', 303)
+    } else {
+      error = 'E-Mail or password wrong'
+    }
   }
 }
 ---

src/pages/sign-out.ts

@@ -0,0 +1,7 @@
+import type { APIRoute } from 'astro'
+import { clearAuthCookie } from '../utils/auth'
+
+export const POST: APIRoute = ({ cookies, redirect }) => {
+  clearAuthCookie(cookies)
+  return redirect('/sign-in', 303)
+}

src/utils/auth.ts

@@ -0,0 +1,24 @@
+import type { AstroCookies } from 'astro'
+
+export function setAuthCookie(cookies: AstroCookies) {
+  cookies.set('auth', 'ok', {
+    maxAge: 60 * 60,
+    sameSite: 'lax',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+  })
+}
+
+export function clearAuthCookie(cookies: AstroCookies) {
+  cookies.delete('auth', { path: '/' })
+}
+
+export function isLoggedIn(cookies: AstroCookies): boolean {
+  const cookie = cookies.get('auth')
+  console.log('cookie', cookie)
+  if (cookie) {
+    return cookie.value == 'ok'
+  }
+  return false
+}