chore: protect pages before i forget (and also auth page changes)

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>

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

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>

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>