From 3c8093a3d227a5b706976e6be59ca11f7e72beac Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Fri, 26 Apr 2024 18:50:30 -1000
Subject: [PATCH] feat: :sparkles: Implement proper login and logout using UI

---
 app.vue                                       | 27 +++++++
 components/buttons/base.vue                   | 13 +++-
 components/buttons/secondary.vue              |  8 +-
 components/sidebars/navigation.vue            | 78 +++++++++++++++++--
 components/social-elements/notes/header.vue   |  2 +-
 components/social-elements/notes/note.vue     | 25 ++++--
 .../social-elements/notifications/notif.vue   | 58 +++++++-------
 components/social-elements/users/Account.vue  | 36 ++++-----
 components/timelines/Notifications.vue        |  6 +-
 components/timelines/Public.vue               |  2 +-
 composables/AccessToken.ts                    |  8 ++
 composables/Account.ts                        | 13 +++-
 composables/AccountSearch.ts                  | 20 +++--
 composables/AccountTimeline.ts                | 68 ----------------
 composables/AppData.ts                        |  8 ++
 composables/ExtendedDescription.ts            | 12 +--
 composables/Instance.ts                       | 12 +--
 composables/Megalodon.ts                      | 20 ++---
 composables/Note.ts                           | 12 +--
 layouts/app.vue                               |  6 +-
 pages/[username]/index.vue                    | 11 ++-
 pages/local.vue                               |  2 +-
 pages/register/index.vue                      | 19 ++---
 23 files changed, 273 insertions(+), 193 deletions(-)
 create mode 100644 composables/AccessToken.ts
 create mode 100644 composables/AppData.ts

diff --git a/app.vue b/app.vue
index 9f3db8b..b81e7a8 100644
--- a/app.vue
+++ b/app.vue
@@ -13,6 +13,33 @@ useServerSeoMeta({
 
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());
+
+const code = useRequestURL().searchParams.get("code");
+
+if (code) {
+    const client = useMegalodon();
+    const appData = useAppData();
+    const tokenData = useTokenData();
+    if (appData.value) {
+        client.value
+            ?.fetchAccessToken(
+                appData.value.client_id,
+                appData.value.client_secret,
+                code,
+                new URL("/", useRequestURL().origin).toString(),
+            )
+            .then((res) => {
+                tokenData.value = res;
+
+                // Remove code from URL
+                window.history.replaceState(
+                    {},
+                    document.title,
+                    window.location.pathname,
+                );
+            });
+    }
+}
 </script>
 
 <style>
diff --git a/components/buttons/base.vue b/components/buttons/base.vue
index a9f092e..687884f 100644
--- a/components/buttons/base.vue
+++ b/components/buttons/base.vue
@@ -1,6 +1,9 @@
 <template>
-    <button v-bind="$props" type="button"
-        class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm">
+    <button v-bind="$props" type="button" :disabled="loading"
+        :class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
+        <div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
+            <Icon name="tabler:loader-2" class="animate-spin w-5 h-5" />
+        </div>
         <slot />
     </button>
 </template>
@@ -10,7 +13,11 @@ import type { ButtonHTMLAttributes } from "vue";
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
 
-defineProps<Props>();
+defineProps<
+    Props & {
+        loading?: boolean;
+    }
+>();
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/components/buttons/secondary.vue b/components/buttons/secondary.vue
index b7e9104..b95ea07 100644
--- a/components/buttons/secondary.vue
+++ b/components/buttons/secondary.vue
@@ -1,5 +1,5 @@
 <template>
-    <ButtonsBase class="bg-white/10 hover:bg-white/20">
+    <ButtonsBase class="bg-white/10 hover:bg-white/20" :loading="loading">
         <slot />
     </ButtonsBase>
 </template>
@@ -9,7 +9,11 @@ import type { ButtonHTMLAttributes } from "vue";
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
 
-defineProps<Props>();
+defineProps<
+    Props & {
+        loading?: boolean;
+    }
+>();
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 8f0aa78..74c3264 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -21,14 +21,17 @@
         <div class="flex flex-col gap-3 mt-auto">
             <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Account</h3>
-            <NuxtLink href="/about/apps">
-                <ButtonsBase
-                    class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <Icon name="tabler:login" class="shrink-0 text-2xl" />
-                    <span class="pr-28 line-clamp-1">Sign In</span>
-                </ButtonsBase>
-            </NuxtLink>
-            <NuxtLink href="/register">
+            <ButtonsBase v-if="tokenData" @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth"
+                class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
+                <Icon name="tabler:logout" class="shrink-0 text-2xl" />
+                <span class="pr-28 line-clamp-1">Sign Out</span>
+            </ButtonsBase>
+            <ButtonsBase v-else @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth"
+                class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
+                <Icon name="tabler:login" class="shrink-0 text-2xl" />
+                <span class="pr-28 line-clamp-1">Sign In</span>
+            </ButtonsBase>
+            <NuxtLink href="/register" v-if="!tokenData">
                 <ButtonsBase
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
                     <Icon name="tabler:certificate" class="shrink-0 text-2xl" />
@@ -52,4 +55,63 @@ const timelines = ref([
         icon: "tabler:home",
     },
 ]);
+
+const loadingAuth = ref(false);
+
+const appData = useAppData();
+const tokenData = useTokenData();
+const client = useMegalodon();
+
+const signIn = async () => {
+    loadingAuth.value = true;
+
+    const output = await client.value?.createApp("Lysand", {
+        scopes: ["read", "write", "follow", "push"],
+        redirect_uris: new URL("/", useRequestURL().origin).toString(),
+        website: useBaseUrl().value,
+    });
+
+    if (!output) {
+        alert("Failed to create app");
+        return;
+    }
+
+    appData.value = output;
+
+    const url = await client.value?.generateAuthUrl(
+        output.client_id,
+        output.client_secret,
+        {
+            scope: ["read", "write", "follow", "push"],
+            redirect_uri: new URL("/", useRequestURL().origin).toString(),
+        },
+    );
+
+    if (!url) {
+        alert("Failed to generate auth URL");
+        return;
+    }
+
+    window.location.href = url;
+};
+
+const signOut = async () => {
+    loadingAuth.value = true;
+
+    if (!appData.value || !tokenData.value) {
+        console.error("No app or token data to sign out");
+        return;
+    }
+
+    // Don't do anything on error, as Lysand doesn't implement the revoke endpoint yet
+    await client.value
+        ?.revokeToken(
+            appData.value.client_id,
+            tokenData.value.access_token,
+            tokenData.value.access_token,
+        )
+        .catch(() => {});
+
+    tokenData.value = null;
+};
 </script>
\ No newline at end of file
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index ea19486..25908a9 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Status } from '~/types/mastodon/status';
+import type { Status } from "~/types/mastodon/status";
 
 const props = defineProps<{
     note?: Status;
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index f5617d4..94fa0b4 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -91,19 +91,30 @@ const props = defineProps<{
 
 // Handle reblogs
 const note = computed(() => props.note?.reblog ?? props.note);
-const noteClosed = ref(note.value?.sensitive || !!note.value?.spoiler_text || false);
+const noteClosed = ref(
+    note.value?.sensitive || !!note.value?.spoiler_text || false,
+);
 
 const { copy } = useClipboard();
 const client = useMegalodon();
-const mentions = await useResolveMentions(note.value?.mentions ?? [], client);
-const eventualReblogAccountName = props.note?.reblog ? (useParsedContent(props.note?.account.display_name, props.note?.account.emojis, mentions.value)).value : null;
+const mentions = await useResolveMentions(
+    note.value?.mentions ?? [],
+    client.value,
+);
+const eventualReblogAccountName = props.note?.reblog
+    ? useParsedContent(
+          props.note?.account.display_name,
+          props.note?.account.emojis,
+          mentions.value,
+      ).value
+    : null;
 const content =
     note.value && process.client
         ? useParsedContent(
-            note.value.content,
-            note.value.emojis,
-            mentions.value,
-        )
+              note.value.content,
+              note.value.emojis,
+              mentions.value,
+          )
         : "";
 const numberFormat = (number = 0) =>
     new Intl.NumberFormat(undefined, {
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index 1926d8d..e40f829 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -20,48 +20,52 @@
 </template>
 
 <script lang="ts" setup>
-import type { Notification } from '~/types/mastodon/notification';
+import type { Notification } from "~/types/mastodon/notification";
 
 const props = defineProps<{
     notification?: Notification;
 }>();
 
-const accountName = useParsedContent(props.notification?.account?.display_name ?? '', props.notification?.account?.emojis ?? [], []);
+const accountName = useParsedContent(
+    props.notification?.account?.display_name ?? "",
+    props.notification?.account?.emojis ?? [],
+    [],
+);
 const text = computed(() => {
-    if (!props.notification) return '';
+    if (!props.notification) return "";
 
     switch (props.notification.type) {
-        case 'mention':
-            return 'mentioned you';
-        case 'reblog':
-            return 'reblogged your note';
-        case 'favourite':
-            return 'liked your note';
-        case 'follow':
-            return 'followed you';
-        case 'follow_request':
-            return 'requested to follow you';
+        case "mention":
+            return "mentioned you";
+        case "reblog":
+            return "reblogged your note";
+        case "favourite":
+            return "liked your note";
+        case "follow":
+            return "followed you";
+        case "follow_request":
+            return "requested to follow you";
         default:
-            console.error('Unknown notification type', props.notification.type)
-            return '';
+            console.error("Unknown notification type", props.notification.type);
+            return "";
     }
 });
 const icon = computed(() => {
-    if (!props.notification) return '';
+    if (!props.notification) return "";
 
     switch (props.notification.type) {
-        case 'mention':
-            return 'tabler:at';
-        case 'reblog':
-            return 'tabler:repeat';
-        case 'favourite':
-            return 'tabler:heart';
-        case 'follow':
-            return 'tabler:plus';
-        case 'follow_request':
-            return 'tabler:plus';
+        case "mention":
+            return "tabler:at";
+        case "reblog":
+            return "tabler:repeat";
+        case "favourite":
+            return "tabler:heart";
+        case "follow":
+            return "tabler:plus";
+        case "follow_request":
+            return "tabler:plus";
         default:
-            return '';
+            return "";
     }
 });
 </script>
\ No newline at end of file
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 2646822..2603e09 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -115,29 +115,27 @@ watch(
     skeleton,
     async () => {
         if (skeleton.value) return;
-        parsedNote.value = (
+        parsedNote.value =
             useParsedContent(
                 props.account?.note ?? "",
                 props.account?.emojis ?? [],
                 [],
-            )
-        ).value ?? "";
-        parsedFields.value = props.account?.fields.map((field) => ({
-            name: (
-                useParsedContent(
-                    field.name,
-                    props.account?.emojis ?? [],
-                    [],
-                )
-            ).value ?? "",
-            value: (
-                useParsedContent(
-                    field.value,
-                    props.account?.emojis ?? [],
-                    [],
-                )
-            ).value ?? "",
-        })) ?? [];
+            ).value ?? "";
+        parsedFields.value =
+            props.account?.fields.map((field) => ({
+                name:
+                    useParsedContent(
+                        field.name,
+                        props.account?.emojis ?? [],
+                        [],
+                    ).value ?? "",
+                value:
+                    useParsedContent(
+                        field.value,
+                        props.account?.emojis ?? [],
+                        [],
+                    ).value ?? "",
+            })) ?? [];
     },
     {
         immediate: true,
diff --git a/components/timelines/Notifications.vue b/components/timelines/Notifications.vue
index 788fcae..2c94282 100644
--- a/components/timelines/Notifications.vue
+++ b/components/timelines/Notifications.vue
@@ -14,15 +14,15 @@
 </template>
 
 <script lang="ts" setup>
-const access_token = useLocalStorage("lysand:access_token", null);
-const client = useMegalodon(access_token);
+const tokenData = useTokenData();
+const client = useMegalodon(tokenData);
 
 const isLoading = ref(true);
 
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = useNotificationTimeline(
-    client,
+    client.value,
     timelineParameters,
 );
 const skeleton = ref<HTMLSpanElement | null>(null);
diff --git a/components/timelines/Public.vue b/components/timelines/Public.vue
index 6724e73..255d682 100644
--- a/components/timelines/Public.vue
+++ b/components/timelines/Public.vue
@@ -21,7 +21,7 @@ const isLoading = ref(true);
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = usePublicTimeline(
-    client,
+    client.value,
     timelineParameters,
 );
 const skeleton = ref<HTMLSpanElement | null>(null);
diff --git a/composables/AccessToken.ts b/composables/AccessToken.ts
new file mode 100644
index 0000000..8b3c911
--- /dev/null
+++ b/composables/AccessToken.ts
@@ -0,0 +1,8 @@
+import { StorageSerializers } from "@vueuse/core";
+import type { OAuth } from "megalodon";
+
+export const useTokenData = () => {
+    return useLocalStorage<OAuth.TokenData | null>("lysand:token_data", null, {
+        serializer: StorageSerializers.object,
+    });
+};
diff --git a/composables/Account.ts b/composables/Account.ts
index 9bff41d..d32f1b8 100644
--- a/composables/Account.ts
+++ b/composables/Account.ts
@@ -1,16 +1,21 @@
 import type { Mastodon } from "megalodon";
 import type { Account } from "~/types/mastodon/account";
 
-export const useAccount = (client: Mastodon | null, accountId: string) => {
+export const useAccount = (
+    client: MaybeRef<Mastodon | null>,
+    accountId: string,
+) => {
     if (!client) {
         return ref(null as Account | null);
     }
 
     const output = ref(null as Account | null);
 
-    client.getAccount(accountId).then((res) => {
-        output.value = res.data;
-    });
+    ref(client)
+        .value?.getAccount(accountId)
+        .then((res) => {
+            output.value = res.data;
+        });
 
     return output;
 };
diff --git a/composables/AccountSearch.ts b/composables/AccountSearch.ts
index 8745e09..aaa2724 100644
--- a/composables/AccountSearch.ts
+++ b/composables/AccountSearch.ts
@@ -1,13 +1,19 @@
 import type { Mastodon } from "megalodon";
+import type { Account } from "~/types/mastodon/account";
 
-export const useAccountSearch = async (client: Mastodon | null, q: string) => {
-    if (!client) {
-        return null;
-    }
+export const useAccountSearch = (
+    client: MaybeRef<Mastodon | null>,
+    q: string,
+): Ref<Account[] | null> => {
+    const output = ref(null as Account[] | null);
 
-    return (
-        await client.searchAccount(q, {
+    ref(client)
+        .value?.searchAccount(q, {
             resolve: true,
         })
-    ).data;
+        .then((res) => {
+            output.value = res.data;
+        });
+
+    return output;
 };
diff --git a/composables/AccountTimeline.ts b/composables/AccountTimeline.ts
index 08f38ef..1e3e2be 100644
--- a/composables/AccountTimeline.ts
+++ b/composables/AccountTimeline.ts
@@ -29,72 +29,4 @@ export const useAccountTimeline = (
             }),
         options,
     );
-    /* if (!client) {
-        return {
-            timeline: ref([]),
-            loadNext: async () => {},
-            loadPrev: async () => {},
-        };
-    }
-
-    const fetchedNotes = ref<Status[]>([]);
-    const fetchedNoteIds = new Set<string>();
-    let nextMaxId: string | undefined = undefined;
-    let prevMinId: string | undefined = undefined;
-
-    const loadNext = async () => {
-        const response = await client.getAccountStatuses(ref(id).value ?? "", {
-            only_media: false,
-            ...ref(options).value,
-            max_id: nextMaxId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
-
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
-            nextMaxId = newNotes[newNotes.length - 1].id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            nextMaxId = undefined;
-        }
-    };
-
-    const loadPrev = async () => {
-        const response = await client.getAccountStatuses(ref(id).value ?? "", {
-            only_media: false,
-            ...ref(options).value,
-            min_id: prevMinId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
-
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
-            prevMinId = newNotes[0].id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            prevMinId = undefined;
-        }
-    };
-
-    watch(
-        [() => ref(id).value, () => ref(options).value],
-        async ([id, { max_id, min_id }]) => {
-            nextMaxId = max_id;
-            prevMinId = min_id;
-            id && (await loadNext());
-        },
-        { immediate: true },
-    );
-
-    return { timeline: fetchedNotes, loadNext, loadPrev }; */
 };
diff --git a/composables/AppData.ts b/composables/AppData.ts
new file mode 100644
index 0000000..ce4fbed
--- /dev/null
+++ b/composables/AppData.ts
@@ -0,0 +1,8 @@
+import { StorageSerializers } from "@vueuse/core";
+import type { OAuth } from "megalodon";
+
+export const useAppData = () => {
+    return useLocalStorage<OAuth.AppData | null>("lysand:app_data", null, {
+        serializer: StorageSerializers.object,
+    });
+};
diff --git a/composables/ExtendedDescription.ts b/composables/ExtendedDescription.ts
index 1f69d50..b6931c0 100644
--- a/composables/ExtendedDescription.ts
+++ b/composables/ExtendedDescription.ts
@@ -5,16 +5,18 @@ type ExtendedDescription = {
     content: string;
 };
 
-export const useExtendedDescription = (client: Mastodon | null) => {
-    if (!client) {
+export const useExtendedDescription = (client: MaybeRef<Mastodon | null>) => {
+    if (!ref(client).value) {
         return ref(null as ExtendedDescription | null);
     }
 
     const output = ref(null as ExtendedDescription | null);
 
-    client.client.get("/api/v1/instance/extended_description").then((res) => {
-        output.value = res.data;
-    });
+    ref(client)
+        .value?.client.get("/api/v1/instance/extended_description")
+        .then((res) => {
+            output.value = res.data;
+        });
 
     return output;
 };
diff --git a/composables/Instance.ts b/composables/Instance.ts
index a669607..4e19e0c 100644
--- a/composables/Instance.ts
+++ b/composables/Instance.ts
@@ -6,16 +6,18 @@ type InstanceWithExtra = Instance & {
     lysand_version?: string;
 };
 
-export const useInstance = (client: Mastodon | null) => {
-    if (!client) {
+export const useInstance = (client: MaybeRef<Mastodon | null>) => {
+    if (!ref(client).value) {
         return ref(null as InstanceWithExtra | null);
     }
 
     const output = ref(null as InstanceWithExtra | null);
 
-    client.getInstance().then((res) => {
-        output.value = res.data;
-    });
+    ref(client)
+        .value?.getInstance()
+        .then((res) => {
+            output.value = res.data;
+        });
 
     return output;
 };
diff --git a/composables/Megalodon.ts b/composables/Megalodon.ts
index 44c4de9..dff794b 100644
--- a/composables/Megalodon.ts
+++ b/composables/Megalodon.ts
@@ -1,16 +1,18 @@
-import { Mastodon } from "megalodon";
+import { Mastodon, type OAuth } from "megalodon";
 
 export const useMegalodon = (
-    accessToken?: MaybeRef<string | null | undefined>,
+    tokenData?: MaybeRef<OAuth.TokenData | null>,
     disableOnServer = false,
-) => {
+): Ref<Mastodon | null> => {
     if (disableOnServer && process.server) {
-        return null;
+        return ref(null);
     }
 
-    const baseUrl = useBaseUrl().value;
-
-    const client = new Mastodon(baseUrl, ref(accessToken).value);
-
-    return client;
+    return computed(
+        () =>
+            new Mastodon(
+                useBaseUrl().value,
+                ref(tokenData).value?.access_token,
+            ),
+    );
 };
diff --git a/composables/Note.ts b/composables/Note.ts
index 97a7ef3..5fbe882 100644
--- a/composables/Note.ts
+++ b/composables/Note.ts
@@ -1,16 +1,18 @@
 import type { Mastodon } from "megalodon";
 import type { Status } from "~/types/mastodon/status";
 
-export const useNote = (client: Mastodon | null, noteId: string) => {
-    if (!client) {
+export const useNote = (client: MaybeRef<Mastodon | null>, noteId: string) => {
+    if (!ref(client).value) {
         return ref(null as Status | null);
     }
 
     const output = ref(null as Status | null);
 
-    client.getStatus(noteId).then((res) => {
-        output.value = res.data;
-    });
+    ref(client)
+        .value?.getStatus(noteId)
+        .then((res) => {
+            output.value = res.data;
+        });
 
     return output;
 };
diff --git a/layouts/app.vue b/layouts/app.vue
index 5dc1bd8..f5b9249 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -5,7 +5,7 @@
             <aside
                 class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col gap-10">
                 <ClientOnly>
-                    <div class="grow p-10" v-if="!accessToken">
+                    <div class="grow p-10" v-if="!tokenData">
                         <button type="button"
                             class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
                             <Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
@@ -58,8 +58,8 @@
 <script setup lang="ts">
 import { convert } from "html-to-text";
 
-const accessToken = useLocalStorage("lysand:access_token", "");
-const client = useMegalodon(accessToken);
+const tokenData = useTokenData();
+const client = useMegalodon(tokenData);
 const instance = useInstance(client);
 const description = useExtendedDescription(client);
 
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index 1662206..024e42c 100644
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@@ -38,14 +38,13 @@ const route = useRoute();
 const client = useMegalodon(undefined, true);
 const username = (route.params.username as string).replace("@", "");
 
-const account: Ref<Account | null> = ref(null);
+const accounts = useAccountSearch(client, username);
+const account = computed<Account | null>(
+    () => accounts.value?.find((account) => account.acct === username) ?? null,
+);
 const accountId = computed(() => account.value?.id ?? null);
 
 onMounted(async () => {
-    const accounts = await useAccountSearch(client, username);
-    account.value =
-        (await accounts?.find((account) => account.acct === username)) ?? null;
-
     useIntersectionObserver(skeleton, async (entries) => {
         if (
             entries[0].isIntersecting &&
@@ -70,7 +69,7 @@ const isLoadingTimeline = ref(true);
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = useAccountTimeline(
-    client,
+    client.value,
     accountId,
     timelineParameters,
 );
diff --git a/pages/local.vue b/pages/local.vue
index 46e8389..e8320a2 100644
--- a/pages/local.vue
+++ b/pages/local.vue
@@ -23,7 +23,7 @@ const isLoading = ref(true);
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = useLocalTimeline(
-    client,
+    client.value,
     timelineParameters,
 );
 const skeleton = ref<HTMLSpanElement | null>(null);
diff --git a/pages/register/index.vue b/pages/register/index.vue
index 66f2748..15d828a 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -69,7 +69,7 @@
                 </VeeField>
 
                 <ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
-            "Register" }}</ButtonsPrimary>
+                    "Register" }}</ButtonsPrimary>
             </VeeForm>
         </div>
         <div v-else>
@@ -133,14 +133,15 @@ const register = (result: {
     reason: string;
 }) => {
     isLoading.value = true;
-    client?.registerAccount(
-        result.username,
-        result.email,
-        result.password,
-        true,
-        "en",
-        result.reason || "Empty reason",
-    )
+    ref(client)
+        .value?.registerAccount(
+            result.username,
+            result.email,
+            result.password,
+            true,
+            "en",
+            result.reason || "Empty reason",
+        )
         .then(async (res) => {
             navigateTo("/register/success");
         })