feat: authentication

app/middleware/auth.ts

@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession();
+
+  if (!loggedIn.value) {
+    return navigateTo("/auth/sign-in");
+  }
+});

app/pages/auth/sign-in.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { z } from "zod";
+import type { AuthFormField, FormSubmitEvent } from "@nuxt/ui";
+
+definePageMeta({
+  middleware: () => {
+    const { loggedIn } = useUserSession();
+    if (loggedIn.value) return navigateTo("/");
+  },
+});
+
+const fields: AuthFormField[] = [
+  { name: "username", type: "text", label: "Username", required: true },
+  { name: "password", type: "password", label: "Password", required: true },
+];
+
+const schema = z.object({
+  username: z.string({ error: "Required" }),
+  password: z.string({ error: "Required" }),
+});
+
+type Schema = z.output<typeof schema>;
+
+const { fetch: fetchSession } = useUserSession();
+const error = ref<string | null>(null);
+const loading = ref(false);
+
+const onSubmit = async (event: FormSubmitEvent<Schema>) => {
+  error.value = null;
+  loading.value = true;
+  try {
+    await $fetch("/api/auth/sign-in", { method: "POST", body: event.data });
+    await fetchSession();
+    await navigateTo("/");
+  } catch (e) {
+    error.value = getApiError(e);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="flex items-center justify-center min-h-screen">
+    <UPageCard class="w-full max-w-sm">
+      <UAuthForm
+        title="Sign In"
+        :fields="fields"
+        :schema="schema"
+        :loading="loading"
+        @submit="onSubmit"
+      >
+        <template v-if="error" #validation>
+          <UAlert color="error" icon="i-lucide-circle-alert" :title="error" />
+        </template>
+      </UAuthForm>
+    </UPageCard>
+  </div>
+</template>

app/pages/index.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
 import { LazyLinkModal } from "#components";
-import type { InternalApi } from "nitropack/types";
 
-type Link = InternalApi["/api/links"]["get"][number];
+definePageMeta({ middleware: "auth" });
 
 const toast = useToast();
 const overlay = useOverlay();
 
+const { fetch: fetchSession } = useUserSession();
+
+const signOut = async () => {
+  await $fetch("/api/auth/sign-out", { method: "POST" });
+  await fetchSession();
+  await navigateTo("/auth/sign-in");
+};
+
 const { data: links, status, refresh } = useLazyFetch("/api/links", { key: "links", server: false, });
 
 const route = useRoute();
@@ -64,6 +71,11 @@ const deleteLink = async (link: Link) => {
         ]"
         class="px-2"
       />
+      <template #footer>
+        <UButton variant="ghost" icon="i-lucide-log-out" block @click="signOut">
+          Sign out
+        </UButton>
+      </template>
     </UDashboardSidebar>
 
     <UDashboardPanel>