fix(ui): clear access token on unauthorized response

ee/tabby-ui/lib/tabby/auth.tsx

@@ -116,7 +116,7 @@ const logoutAllSessionsMutation = graphql(/* GraphQL */ `
 const AuthProvider: React.FunctionComponent<AuthProviderProps> = ({
   children
 }) => {
-  const initialized = React.useRef(false)
+  const [initialized, setInitialized] = React.useState(false)
   const [authToken] = useLocalStorage<AuthData | undefined>(
     AUTH_TOKEN_KEY,
     undefined
@@ -127,21 +127,20 @@ const AuthProvider: React.FunctionComponent<AuthProviderProps> = ({
   })
 
   React.useEffect(() => {
-    initialized.current = true
     if (authToken?.accessToken && authToken?.refreshToken) {
       dispatch({ type: AuthActionType.SignIn, data: authToken })
     } else {
       dispatch({ type: AuthActionType.SignOut })
     }
+    setInitialized(true)
   }, [])
 
   React.useEffect(() => {
-    if (!initialized.current) return
-
+    if (!initialized) return
     // After being mounted, listen for changes in the access token
     if (authToken?.accessToken && authToken?.refreshToken) {
       dispatch({ type: AuthActionType.Refresh, data: authToken })
-    } else {
+    } else if (!authToken?.accessToken && !authToken?.refreshToken) {
       dispatch({ type: AuthActionType.SignOut })
     }
   }, [authToken])

ee/tabby-ui/lib/tabby/fetcher.ts

@@ -31,6 +31,8 @@ export default async function authEnhancedFetch(
   )
 
   if (response.status === 401) {
+    tokenManager.clearAccessToken()
+
     return tokenManager.refreshToken(doRefreshToken).then(res => {
       return requestWithAuth(url, options)
     })

ee/tabby-ui/lib/tabby/gql.ts

@@ -173,9 +173,14 @@ const client = new Client({
           })
         },
         didAuthError(error, _operation) {
-          return error.graphQLErrors.some(
+          const isUnauthorized = error.graphQLErrors.some(
             e => e?.extensions?.code === 'UNAUTHORIZED'
           )
+          if (isUnauthorized) {
+            tokenManager.clearAccessToken()
+          }
+
+          return isUnauthorized
         },
         willAuthError(operation) {
           // Sync tokens on every operation
@@ -231,6 +236,7 @@ const client = new Client({
               return true
             }
           } else {
+            tokenManager.clearAccessToken()
             return true
           }
         },

ee/tabby-ui/lib/tabby/token-management.ts

@@ -48,6 +48,17 @@ const isTokenRecentlyIssued = (iat: number | undefined): boolean => {
 }
 
 class TokenManager {
+  clearAccessToken() {
+    let authToken = getAuthToken()
+    if (authToken) {
+      // remove accessToken only, keep the refreshToken
+      saveAuthToken({
+        ...authToken,
+        accessToken: ''
+      })
+    }
+  }
+
   async refreshToken(doRefreshToken: () => Promise<AuthData | undefined>) {
     try {
       if (typeof navigator?.locks === 'undefined') {
@@ -59,7 +70,8 @@ class TokenManager {
 
       await navigator.locks.request(AUTH_LOCK_KEY, async () => {
         const authToken = getAuthToken()
-        const accessToken = getAuthToken()?.accessToken
+        const accessToken = authToken?.accessToken
+        const refreshToken = authToken?.refreshToken
 
         let newAuthToken: AuthData | undefined
 
@@ -70,6 +82,8 @@ class TokenManager {
           } else {
             newAuthToken = await doRefreshToken()
           }
+        } else if (refreshToken) {
+          newAuthToken = await doRefreshToken()
         }
 
         if (newAuthToken) {