Log out if authentication error happens during timeline reload

CHANGELOG.md

@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Fixed text overflow in post subheader.
 - Prevent display name from shrinking too much in post header.
+- Log out if authentication error happens during timeline reload.
 
 ## [1.15.0] - 2023-02-27
 

src/api/notifications.ts

@@ -1,6 +1,6 @@
 import { BACKEND_URL } from "@/constants"
 
-import { PAGE_SIZE, http } from "./common"
+import { handleResponse, http, PAGE_SIZE } from "./common"
 import { Post } from "./posts"
 import { Profile } from "./users"
 
@@ -23,9 +23,6 @@ export async function getNotifications(
     queryParams,
     authToken,
   })
-  const data = await response.json()
-  if (response.status !== 200) {
-    throw new Error(data.error_description)
-  }
+  const data = await handleResponse(response)
   return data
 }

src/api/users.ts

@@ -2,7 +2,7 @@ import { RouteLocationRaw } from "vue-router"
 
 import { BACKEND_URL } from "@/constants"
 import { createDidFromEthereumAddress } from "@/utils/did"
-import { PAGE_SIZE, http } from "./common"
+import { handleResponse, http, PAGE_SIZE } from "./common"
 import { CustomEmoji } from "./emojis"
 
 export const EXTRA_FIELD_COUNT_MAX = 10
@@ -199,13 +199,10 @@ export async function revokeAccessToken(
   }
 }
 
-export async function getCurrentUser(authToken: string): Promise<User | null> {
+export async function getCurrentUser(authToken: string): Promise<User> {
   const url = `${BACKEND_URL}/api/v1/accounts/verify_credentials`
   const response = await http(url, { authToken })
-  if (response.status !== 200) {
-    return null
-  }
-  const data = await response.json()
+  const data = await handleResponse(response)
   return data
 }
 

src/components/SidebarLayout.vue

@@ -55,7 +55,16 @@ const emit = defineEmits<{(event: "reload-home"): void}>()
 
 function showHomeTimeline() {
   if (route.name === "home") {
+    try {
       loadNotifications(ensureAuthToken())
+    } catch (error: any) {
+      if (error.message === "access token is invalid") {
+        router.push({ name: "landing-page" })
+        return
+      } else {
+        throw error
+      }
+    }
     emit("reload-home")
   } else {
     router.push({ name: "home" })

src/store/notifications.ts

@@ -9,10 +9,10 @@ const lastReadId = ref<string | null>(null)
 export function useNotifications() {
 
   async function loadNotifications(authToken: string): Promise<void> {
-    const notifications_ = await getNotifications(authToken)
+    const items = await getNotifications(authToken)
     const marker = await getNotificationMarker(authToken)
     // Don't update reactive object until marker is loaded
-    notifications.value = notifications_
+    notifications.value = items
     if (marker) {
       lastReadId.value = marker.last_read_id
     }

src/store/user.ts

@@ -42,9 +42,11 @@ export function useCurrentUser() {
       const token = localStorage.getItem(AUTH_TOKEN_STORAGE_KEY)
       if (token) {
         authToken.value = token
+        try {
           currentUser.value = await getCurrentUser(token)
-        if (currentUser.value === null) {
+        } catch (error: any) {
           // Failed to get current user, removing invalid token
+          currentUser.value = null
           clearAuthToken()
         }
       }