feat(auth): refactoring and error message

app.vue

@@ -6,11 +6,12 @@
 
 <script setup lang="ts">
 import { invoke } from "@tauri-apps/api/core";
-// @ts-expect-error
-import { AppStatus, type AppState } from "./types.d.ts";
-import { listen } from "@tauri-apps/api/event";
 import { useAppState } from "./composables/app-state.js";
 import { useRouter } from "#vue-router";
+import {
+  initialNavigation,
+  setupHooks,
+} from "./composables/state-navigation.js";
 
 const router = useRouter();
 
@@ -21,36 +22,8 @@ router.beforeEach(async () => {
   state.value = await invoke("fetch_state");
 });
 
-switch (state.value.status) {
-  case AppStatus.NotConfigured:
-    router.push({ path: "/setup" }).then(() => {
-      console.log("Pushed Setup");
-    });
-    break;
-  case AppStatus.SignedOut:
-    router.push("/auth");
-    break;
-  case AppStatus.SignedInNeedsReauth:
-    router.push("/auth/signedout");
-    break;
-  case AppStatus.ServerUnavailable:
-    router.push("/error/serverunavailable");
-    break;
-  default:
-    router.push("/store");
-}
-
-listen("auth/processing", () => {
-  router.push("/auth/processing");
-});
-
-listen("auth/failed", () => {
-  router.push("/auth/failed");
-});
-
-listen("auth/finished", () => {
-  router.push("/store");
-});
+setupHooks();
+initialNavigation(state);
 
 useHead({
   title: "Drop",

composables/state-navigation.ts

@@ -0,0 +1,43 @@
+import { listen } from "@tauri-apps/api/event";
+import { AppStatus, type AppState } from "~/types";
+
+export function setupHooks() {
+  const router = useRouter();
+
+  listen("auth/processing", (event) => {
+    router.push("/auth/processing");
+  });
+
+  listen("auth/failed", (event) => {
+    router.push(
+      `/auth/failed?error=${encodeURIComponent(event.payload as string)}`
+    );
+  });
+
+  listen("auth/finished", (event) => {
+    router.push("/store");
+  });
+}
+
+export function initialNavigation(state: Ref<AppState>) {
+  const router = useRouter();
+
+  switch (state.value.status) {
+    case AppStatus.NotConfigured:
+      router.push({ path: "/setup" }).then(() => {
+        console.log("Pushed Setup");
+      });
+      break;
+    case AppStatus.SignedOut:
+      router.push("/auth");
+      break;
+    case AppStatus.SignedInNeedsReauth:
+      router.push("/auth/signedout");
+      break;
+    case AppStatus.ServerUnavailable:
+      router.push("/error/serverunavailable");
+      break;
+    default:
+      router.push("/store");
+  }
+}

pages/auth/failed.vue

@@ -4,11 +4,12 @@
       <XCircleIcon class="h-12 w-12 text-red-600" aria-hidden="true" />
       <div class="mt-3 text-center sm:mt-5">
         <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
-          Connection failed
+          Authentication failed
         </h1>
         <div class="mt-4">
           <p class="text-sm text-zinc-400 max-w-sm">
-            Drop encountered an error while connecting to your instance.
+            Drop encountered an error while connecting to your instance. Error:
+            {{ message }}
           </p>
         </div>
         <div class="mt-10 flex items-center justify-center gap-x-6">
@@ -24,6 +25,9 @@
 <script setup lang="ts">
 import { XCircleIcon } from "@heroicons/vue/16/solid";
 
+const route = useRoute();
+const message = route.query.error ?? "An unknown error occurred.";
+
 definePageMeta({
   layout: "mini",
 });

src-tauri/src/auth.rs

@@ -141,8 +141,9 @@ pub fn recieve_handshake(app: AppHandle, path: String) {
     app.emit("auth/processing", ()).unwrap();
 
     let handshake_result = recieve_handshake_logic(&app, path);
-    if handshake_result.is_err() {
-        app.emit("auth/failed", ()).unwrap();
+    if let Err(e) = handshake_result {
+        warn!("error with authentication: {}", e);
+        app.emit("auth/failed", e.to_string()).unwrap();
         return;
     }