fix: 🚑 Fix errors when logging in with incorrect credentials

app.vue

@@ -42,15 +42,19 @@ if (code) {
     }
 }
 
-watch(tokenData, async () => {
+watch(
+    tokenData,
+    async () => {
         if (tokenData.value && !me.value) {
-        const response = await client.value?.verifyAccountCredentials()
+            const response = await client.value?.verifyAccountCredentials();
 
             if (response?.data) {
                 me.value = response.data;
             }
         }
-}, { immediate: true })
+    },
+    { immediate: true },
+);
 </script>
 
 <style>

composables/OAuthProviders.ts

@@ -1,4 +1,5 @@
 export const useOAuthProviders = async () => {
+    if (process.server) return ref([]);
     const providers = await fetch(
         new URL("/oauth/providers", useBaseUrl().value),
     ).then((d) => d.json());

pages/[username]/[uuid].vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 definePageMeta({
     layout: "app",
-})
+});
 
 const route = useRoute();
 const client = useMegalodon();

pages/oauth/authorize.vue

@@ -1,10 +1,13 @@
 <template>
-    <ClientOnly>
     <div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8">
         <img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
             alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
         <div v-if="validUrlParameters"
             class="mt-10 sm:mx-auto w-full sm:max-w-md md:bg-dark-900 px-10 py-10 rounded md:ring-1 md:ring-white/10">
+            <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
+                <h2 class="font-bold text-lg">An error occured</h2>
+                <span class="text-sm">{{ error_description }}</span>
+            </div>
             <VeeForm class="space-y-6" method="POST" :validation-schema="schema"
                 :action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
 
@@ -76,12 +79,10 @@
             </p>
         </div>
     </div>
-    </ClientOnly>
 </template>
 
 <script setup lang="ts">
 import { toTypedSchema } from "@vee-validate/zod";
-import { useRoute } from "vue-router";
 import { z } from "zod";
 import LoginInput from "../../components/LoginInput.vue";
 
@@ -92,14 +93,15 @@ const schema = toTypedSchema(
     }),
 );
 
-const query = useRoute().query;
-
-const redirect_uri = query.redirect_uri;
-const response_type = query.response_type;
-const client_id = query.client_id;
-const scope = query.scope;
-const error = decodeURIComponent(query.error as string);
-const error_description = decodeURIComponent(query.error_description as string);
+const query = new URLSearchParams(
+    window?.location.search ?? useRequestURL().search,
+);
+const redirect_uri = query.get("redirect_uri");
+const response_type = query.get("response_type");
+const client_id = query.get("client_id");
+const scope = query.get("scope");
+const error = query.get("error");
+const error_description = query.get("error_description");
 
 const validUrlParameters = redirect_uri && response_type && client_id && scope;