From 610a0446a562681e2f44e5e5261c8b455058e23b Mon Sep 17 00:00:00 2001
From: Izan <66965250+SrIzan10@users.noreply.github.com>
Date: Sat, 10 Jan 2026 00:38:49 +0100
Subject: [PATCH] chore: protect pages before i forget (and also auth page
 changes)

---
 app/components/app/SignInDialog.vue | 26 ++++++--------------------
 app/middleware/auth.global.ts       | 14 ++++++++++++++
 app/pages/sign-in/[...slug].vue     |  5 +++++
 app/pages/sign-up/[...slug].vue     |  5 +++++
 4 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 app/middleware/auth.global.ts
 create mode 100644 app/pages/sign-in/[...slug].vue
 create mode 100644 app/pages/sign-up/[...slug].vue

diff --git a/app/components/app/SignInDialog.vue b/app/components/app/SignInDialog.vue
index 209a556..5f3c98c 100644
--- a/app/components/app/SignInDialog.vue
+++ b/app/components/app/SignInDialog.vue
@@ -1,26 +1,12 @@
 <script setup lang="ts">
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
 import { LogIn } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
 </script>
 
 <template>
-  <Dialog>
-    <DialogTrigger>
-      <Button size="icon">
-        <LogIn />
-      </Button>
-    </DialogTrigger>
-    <DialogContent>
-      <SignIn />
-    </DialogContent>
-  </Dialog>
+  <NuxtLink to="/sign-in">
+    <Button size="icon">
+      <LogIn />
+    </Button>
+  </NuxtLink>
 </template>
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
new file mode 100644
index 0000000..99ac7dc
--- /dev/null
+++ b/app/middleware/auth.global.ts
@@ -0,0 +1,14 @@
+// source: https://clerk.com/docs/guides/secure/protect-pages
+// Define the routes you want to protect with `createRouteMatcher()`
+const isProtectedRoute = createRouteMatcher(["/presets(.*)", "/stream(.*)"]);
+
+export default defineNuxtRouteMiddleware((to) => {
+  // Use the `useAuth()` composable to access the `isSignedIn` property
+  const { isSignedIn } = useAuth();
+
+  // Check if the user is not signed in and is trying to access a protected route
+  // If so, redirect them to the sign-in page
+  if (!isSignedIn.value && isProtectedRoute(to)) {
+    return navigateTo("/sign-in");
+  }
+});
diff --git a/app/pages/sign-in/[...slug].vue b/app/pages/sign-in/[...slug].vue
new file mode 100644
index 0000000..ee848ec
--- /dev/null
+++ b/app/pages/sign-in/[...slug].vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex h-full w-full items-center justify-center">
+    <SignIn routing ="path" path="/sign-in" />
+  </div>
+</template>
diff --git a/app/pages/sign-up/[...slug].vue b/app/pages/sign-up/[...slug].vue
new file mode 100644
index 0000000..1fc2573
--- /dev/null
+++ b/app/pages/sign-up/[...slug].vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex h-full w-full items-center justify-center">
+    <SignUp routing="path" path="/sign-up" />
+  </div>
+</template>