better server side signin redirects

this makes it so if a user requests a page (not API route) and isn't
signed in, it automatically redirects them to the sign in page (doesn't
show a flash of the error page)

components/GamePanel.vue

@@ -1,19 +1,46 @@
 <template>
-  <NuxtLink v-if="game" :href="`/store/${game.id}`" class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl">
+    <NuxtLink
-    <img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" />
+        v-if="game"
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-90% to-zinc-800"/>
+        :href="`/store/${game.id}`"
+        class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
+    >
+        <img
+            :src="useObject(game.mCoverId)"
+            class="w-full h-full object-cover"
+        />
+        <div
+            class="absolute inset-0 bg-gradient-to-b from-transparent to-90% to-zinc-800"
+        />
         <div class="absolute bottom-0 left-0 px-2 py-1.5">
-        <h1 class="text-zinc-100 text-sm font-bold font-display">{{ game.mName }}</h1>
+            <h1 class="text-zinc-100 text-sm font-bold font-display">
-        <p class="text-zinc-400 text-xs">{{ game.mShortDescription.split(" ").slice(0, 10).join(" ") }}...</p>
+                {{ game.mName }}
+            </h1>
+            <p class="text-zinc-400 text-xs">
+                {{
+                    game.mShortDescription.split(" ").slice(0, 10).join(" ")
+                }}...
+            </p>
         </div>
     </NuxtLink>
-  <div v-else class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center">
+    <div
-    <p class="text-zinc-700 text-sm font-semibold font-display uppercase">no game</p>
+        v-else
+        class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center"
+    >
+        <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
+            no game
+        </p>
     </div>
 </template>
 
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
 
-const props = defineProps<{ game?: SerializeObject<{ id: string, mCoverId: string, mName: string, mShortDescription: string }> }>();
+const props = defineProps<{
+    game?: SerializeObject<{
+        id: string;
+        mCoverId: string;
+        mName: string;
+        mShortDescription: string;
+    }>;
+}>();
 </script>

error.vue

@@ -18,15 +18,7 @@ useHead({
     title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
 });
 
-const errorCode = props.error?.statusCode;
+console.log(props.error);
-if (errorCode != undefined) {
-    switch (errorCode) {
-        case 403:
-        case 401:
-            if (!user.value) signIn();
-            break;
-    }
-}
 </script>
 
 <template>

pages/store/[id]/index.vue

@@ -23,7 +23,10 @@
                 <div
                     class="col-start-1 md:col-start-4 flex flex-col gap-y-6 items-center"
                 >
-          <img class="w-64 h-auto rounded" :src="useObject(game.mCoverId)" />
+                    <img
+                        class="w-64 h-auto rounded"
+                        :src="useObject(game.mCoverId)"
+                    />
                     <button
                         type="button"
                         class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-xl font-semibold font-display text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
@@ -32,7 +35,9 @@
                         <PlusIcon class="-mr-0.5 h-7 w-7" aria-hidden="true" />
                     </button>
                     <div class="inline-flex items-center gap-x-3">
-            <span class="text-zinc-100 font-semibold">Available on:</span>
+                        <span class="text-zinc-100 font-semibold"
+                            >Available on:</span
+                        >
                         <component
                             v-for="platform in platforms"
                             :is="icons[platform]"
@@ -82,7 +87,7 @@ const gameId = route.params.id.toString();
 const headers = useRequestHeaders(["cookie"]);
 const game = await $fetch<Game & { versions: GameVersion[] }>(
     `/api/v1/games/${gameId}`,
-  { headers }
+    { headers },
 );
 const md = MarkdownIt();
 const descriptionHTML = md.render(game.mDescription);

server/plugins/redirect.ts

@@ -0,0 +1,24 @@
+import { H3Error } from "h3";
+
+export default defineNitroPlugin((nitro) => {
+  nitro.hooks.hook("error", async (error, { event }) => {
+    if (!event) return;
+
+    // Don't handle for API routes
+    if (event.path.startsWith("/api")) return;
+
+    // Make sure it's a web error
+    if (!(error instanceof H3Error)) return;
+
+    switch (error.statusCode) {
+      case 401:
+      case 403:
+        const userId = await event.context.session.getUserId(event);
+        if (userId) break;
+        return sendRedirect(
+          event,
+          `/signin?redirect=${encodeURIComponent(event.path)}`,
+        );
+    }
+  });
+});