feat: avoid reloading the page when changing accounts (#180)

app.vue

@@ -10,13 +10,16 @@ useHead({
   ],
 })
 
+// We want to trigger rerendering the page when account changes
+const key = computed(() => useMasto().instances.config.url || 'default')
+
 // eslint-disable-next-line no-unused-expressions
 isDark.value
 </script>
 
 <template>
   <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
-  <NuxtLayout>
+  <NuxtLayout :key="key">
     <NuxtPage />
   </NuxtLayout>
   <TeleportTarget

composables/client.ts

@@ -1 +1,7 @@
-export const useMasto = () => useNuxtApp().$masto
+import type { MastoClient } from 'masto'
+
+export const useMasto = () => useNuxtApp().$masto.api
+
+export const setMasto = (masto: MastoClient) => {
+  useNuxtApp().$masto?.replace(masto)
+}

composables/users.ts

@@ -27,28 +27,37 @@ export const currentInstance = computed<null | Instance>(() => currentUserId.val
 
 export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
 
-export async function loginTo(user: UserLogin & { account?: AccountCredentials }) {
-  const existing = users.value.find(u => u.server === user.server && u.token === user.token)
-  if (existing) {
-    if (currentUserId.value === existing.account?.id)
-      return null
-    currentUserId.value = user.account?.id
-    await reloadPage()
-    return true
+export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: AccountCredentials }) {
+  if (user) {
+    const existing = users.value.find(u => u.server === user.server && u.token === user.token)
+    if (existing && currentUserId.value !== user.account?.id)
+      currentUserId.value = user.account?.id
   }
 
   const masto = await loginMasto({
-    url: `https://${user.server}`,
-    accessToken: user.token,
+    url: `https://${user?.server || DEFAULT_SERVER}`,
+    accessToken: user?.token,
   })
-  const me = await masto.accounts.verifyCredentials()
-  user.account = me
 
-  users.value.push(user)
-  currentUserId.value = me.id
-  servers.value[me.id] = await masto.instances.fetch()
-  await reloadPage()
-  return true
+  if (user?.token) {
+    try {
+      const me = await masto.accounts.verifyCredentials()
+      user.account = me
+
+      if (!users.value.some(u => u.server === user.server && u.token === user.token))
+        users.value.push(user as UserLogin)
+
+      currentUserId.value = me.id
+      servers.value[me.id] = await masto.instances.fetch()
+    }
+    catch {
+      await signout()
+    }
+  }
+
+  setMasto(masto)
+
+  return masto
 }
 
 export async function signout() {
@@ -72,10 +81,8 @@ export async function signout() {
   // Set currentUserId to next user if available
   currentUserId.value = users.value[0]?.account?.id
 
-  await reloadPage()
-}
+  if (!currentUserId.value)
+    await useRouter().push('/public')
 
-export async function reloadPage(path = '/') {
-  await nextTick()
-  location.pathname = path
+  await loginTo(currentUser.value)
 }

pages/home.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  alias: ['/signin/callback'],
 })
 
+if (useRoute().path === '/signin/callback') {
+  // This only cleans up the URL; page content should stay the same
+  useRouter().push('/home')
+}
+
 const paginator = useMasto().timelines.getHomeIterable()
 </script>
 

pages/signin/callback.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: 'none',
-})
-
-const router = useRouter()
-const { query } = useRoute()
-
-onMounted(async () => {
-  await loginTo(query as any)
-  router.push('/')
-})
-</script>
-
-<template>
-  <div h-full flex>
-    <div ma>
-      Login...
-    </div>
-  </div>
-</template>

plugins/masto.ts

@@ -1,23 +1,22 @@
-import { login } from 'masto'
+import type { MastoClient } from 'masto'
 import { currentUser } from '../composables/users'
-import { DEFAULT_SERVER } from '~/constants'
 
 export default defineNuxtPlugin(async () => {
   try {
-    const accessToken = currentUser.value?.token
+    const { query } = useRoute()
+    const user = typeof query.server === 'string' && typeof query.token === 'string'
+      ? { server: query.server, token: query.token }
+      : currentUser.value
 
     // TODO: improve upstream to make this synchronous (delayed auth)
-    const masto = await login({
-      url: `https://${currentUser.value?.server || DEFAULT_SERVER}`,
-      accessToken,
-    })
-
-    if (accessToken)
-      masto.accounts.verifyCredentials().catch(() => signout())
+    const masto = await loginTo(user) as MastoClient
 
     return {
       provide: {
-        masto,
+        masto: shallowReactive({
+          replace(api: MastoClient) { this.api = api },
+          api: masto,
+        }),
       },
     }
   }