feat: ✨ Properly show an error when accessing authenticated routes while signed out

components/sidebars/account-switcher.vue

@@ -28,7 +28,7 @@
                         }}</span>
                     </div>
                 </Button>
-                <DropdownMenuItem @click="signIn()">
+                <DropdownMenuItem @click="signInAction">
                     <UserPlus />
                     Add account
                 </DropdownMenuItem>
@@ -78,40 +78,7 @@ import { SidebarMenuButton } from "../ui/sidebar";
 
 const appData = useAppData();
 
-const signIn = async () => {
-    const id = toast.loading("Signing in...");
-
-    const output = await client.value.createApp("Versia", {
-        scopes: ["read", "write", "follow", "push"],
-        redirect_uris: new URL("/", useRequestURL().origin).toString(),
-        website: useBaseUrl().value,
-    });
-
-    if (!output?.data) {
-        toast.dismiss(id);
-        toast.error("Failed to create app");
-        return;
-    }
-
-    appData.value = output.data;
-
-    const url = await client.value.generateAuthUrl(
-        output.data.client_id,
-        output.data.client_secret,
-        {
-            scopes: ["read", "write", "follow", "push"],
-            redirect_uri: new URL("/", useRequestURL().origin).toString(),
-        },
-    );
-
-    if (!url) {
-        toast.dismiss(id);
-        toast.error("Failed to generate auth URL");
-        return;
-    }
-
-    window.location.href = url;
-};
+const signInAction = () => signIn(appData);
 
 const signOut = async (userId?: string) => {
     const id = toast.loading("Signing out...");

layouts/app.vue

@@ -1,7 +1,20 @@
 <template>
     <Sidebar>
         <SquarePattern />
-        <slot />
+        <slot v-if="!route.meta.requiresAuth || identity" />
+        <Card v-else class="shadow-none bg-transparent border-none p-4 max-w-md mx-auto">
+            <CardHeader class="text-center gap-y-4">
+                <CardTitle class="text-">Not signed in</CardTitle>
+                <CardDescription>
+                    This page requires you to be authenticated. Please sign in to continue.
+                </CardDescription>
+            </CardHeader>
+            <CardFooter>
+                <Button variant="secondary" class="w-full" @click="signInAction">
+                    Sign in
+                </Button>
+            </CardFooter>
+        </Card>
     </Sidebar>
     <ComposerDialog />
 </template>
@@ -10,7 +23,17 @@
 import ComposerDialog from "~/components/composer/dialog.vue";
 import SquarePattern from "~/components/graphics/square-pattern.vue";
 import Sidebar from "~/components/sidebars/sidebar.vue";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
 
+const appData = useAppData();
+const signInAction = () => signIn(appData);
 const { n } = useMagicKeys();
 const activeElement = useActiveElement();
 const notUsingInput = computed(
@@ -19,6 +42,8 @@ const notUsingInput = computed(
         activeElement.value?.tagName !== "TEXTAREA",
 );
 
+const route = useRoute();
+
 watchEffect(async () => {
     if (n?.value && notUsingInput.value) {
         // Wait 50ms

utils/auth.ts

@@ -1,5 +1,41 @@
 import type { ApplicationData } from "@versia/client/types";
 import { nanoid } from "nanoid";
+import { toast } from "vue-sonner";
+
+export const signIn = async (appData: Ref<ApplicationData | null>) => {
+    const id = toast.loading("Signing in...");
+
+    const output = await client.value.createApp("Versia", {
+        scopes: ["read", "write", "follow", "push"],
+        redirect_uris: new URL("/", useRequestURL().origin).toString(),
+        website: useBaseUrl().value,
+    });
+
+    if (!output?.data) {
+        toast.dismiss(id);
+        toast.error("Failed to create app");
+        return;
+    }
+
+    appData.value = output.data;
+
+    const url = await client.value.generateAuthUrl(
+        output.data.client_id,
+        output.data.client_secret,
+        {
+            scopes: ["read", "write", "follow", "push"],
+            redirect_uri: new URL("/", useRequestURL().origin).toString(),
+        },
+    );
+
+    if (!url) {
+        toast.dismiss(id);
+        toast.error("Failed to generate auth URL");
+        return;
+    }
+
+    window.location.href = url;
+};
 
 export const signInWithCode = (code: string, appData: ApplicationData) => {
     client.value