Fix/web app auth error (#24637)

web/app/components/share/utils.ts

@@ -32,6 +32,7 @@ export const checkOrSetAccessToken = async (appCode?: string | null) => {
       [userId || 'DEFAULT']: res.access_token,
     }
     localStorage.setItem('token', JSON.stringify(accessTokenJson))
+    localStorage.removeItem(CONVERSATION_ID_INFO)
   }
 }
 

web/context/web-app-context.tsx

@@ -11,6 +11,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { useEffect } from 'react'
 import { useState } from 'react'
 import { create } from 'zustand'
+import { useGlobalPublicStore } from './global-public-context'
 
 type WebAppStore = {
   shareCode: string | null
@@ -56,6 +57,7 @@ const getShareCodeFromPathname = (pathname: string): string | null => {
 }
 
 const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
+  const isGlobalPending = useGlobalPublicStore(s => s.isGlobalPending)
   const updateWebAppAccessMode = useWebAppStore(state => state.updateWebAppAccessMode)
   const updateShareCode = useWebAppStore(state => state.updateShareCode)
   const pathname = usePathname()
@@ -69,7 +71,7 @@ const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
   }, [shareCode, updateShareCode])
 
   const { isFetching, data: accessModeResult } = useGetWebAppAccessModeByCode(shareCode)
-  const [isFetchingAccessToken, setIsFetchingAccessToken] = useState(false)
+  const [isFetchingAccessToken, setIsFetchingAccessToken] = useState(true)
 
   useEffect(() => {
     if (accessModeResult?.accessMode) {
@@ -86,7 +88,7 @@ const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
     }
   }, [accessModeResult, updateWebAppAccessMode, shareCode])
 
-  if (isFetching || isFetchingAccessToken) {
+  if (isGlobalPending || isFetching || isFetchingAccessToken) {
     return <div className='flex h-full w-full items-center justify-center'>
       <Loading />
     </div>

web/service/base.ts

@@ -398,9 +398,7 @@ export const ssePost = async (
     .then((res) => {
       if (!/^[23]\d{2}$/.test(String(res.status))) {
         if (res.status === 401) {
-          refreshAccessTokenOrRelogin(TIME_OUT).then(() => {
-            ssePost(url, fetchOptions, otherOptions)
-          }).catch(() => {
+          if (isPublicAPI) {
             res.json().then((data: any) => {
               if (isPublicAPI) {
                 if (data.code === 'web_app_access_denied')
@@ -417,8 +415,15 @@ export const ssePost = async (
                 }
               }
             })
+          }
+          else {
+            refreshAccessTokenOrRelogin(TIME_OUT).then(() => {
+              ssePost(url, fetchOptions, otherOptions)
+            }).catch((err) => {
+              console.error(err)
             })
           }
+        }
         else {
           res.json().then((data) => {
             Toast.notify({ type: 'error', message: data.message || 'Server Error' })

web/service/use-share.ts

@@ -1,20 +1,12 @@
-import { useGlobalPublicStore } from '@/context/global-public-context'
-import { AccessMode } from '@/models/access-control'
 import { useQuery } from '@tanstack/react-query'
 import { fetchAppInfo, fetchAppMeta, fetchAppParams, getAppAccessModeByAppCode } from './share'
 
 const NAME_SPACE = 'webapp'
 
 export const useGetWebAppAccessModeByCode = (code: string | null) => {
-  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   return useQuery({
     queryKey: [NAME_SPACE, 'appAccessMode', code],
     queryFn: () => {
-      if (systemFeatures.webapp_auth.enabled === false) {
-        return {
-          accessMode: AccessMode.PUBLIC,
-        }
-      }
       if (!code || code.length === 0)
         return Promise.reject(new Error('App code is required to get access mode'))