diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index 39685d4bd7..a7561a1b6f 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -11,6 +11,7 @@ import { setAccessToken } from '@/app/components/share/utils'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { SSOProtocol } from '@/types/feature'
 import Loading from '@/app/components/base/loading'
+import AppUnavailable from '@/app/components/base/app-unavailable'
 
 const WebSSOForm: FC = () => {
   const { t } = useTranslation()
@@ -48,7 +49,7 @@ const WebSSOForm: FC = () => {
     router.push(redirectUrl)
   }, [getAppCodeFromRedirectUrl, redirectUrl, router, tokenFromUrl])
 
-  const handleSSOLogin = async () => {
+  const handleSSOLogin = useCallback(async () => {
     const appCode = getAppCodeFromRedirectUrl()
     if (!appCode || !redirectUrl) {
       showErrorToast('redirect url or app code is invalid.')
@@ -74,7 +75,7 @@ const WebSSOForm: FC = () => {
       default:
         showErrorToast('SSO protocol is not supported.')
     }
-  }
+  }, [getAppCodeFromRedirectUrl, redirectUrl, router, systemFeatures.webapp_auth.sso_config.protocol])
 
   useEffect(() => {
     const init = async () => {
@@ -83,20 +84,26 @@ const WebSSOForm: FC = () => {
         return
       }
 
-      if (!tokenFromUrl)
+      if (!tokenFromUrl) {
+        await handleSSOLogin()
         return
+      }
 
       await processTokenAndRedirect()
     }
 
     init()
-  }, [message, processTokenAndRedirect, tokenFromUrl])
+  }, [message, processTokenAndRedirect, tokenFromUrl, handleSSOLogin])
   if (tokenFromUrl)
     return <div className='flex items-center justify-center h-full'><Loading /></div>
+  if (message) {
+    return <div className='flex items-center justify-center h-full'>
+      <AppUnavailable code={'App Unavailable'} unknownReason={message} />
+    </div>
+  }
 
   if (systemFeatures.webapp_auth.enabled) {
     if (systemFeatures.webapp_auth.allow_sso) {
-      handleSSOLogin()
       return (
         <div className="flex items-center justify-center h-full">
           <div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index ea20464b1b..5d3d857ed3 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 type IAppUnavailableProps = {
-  code?: number
+  code?: number | string
   isUnknownReason?: boolean
   unknownReason?: string
 }
diff --git a/web/service/base.ts b/web/service/base.ts
index b6c006842b..90da2bd188 100644
--- a/web/service/base.ts
+++ b/web/service/base.ts
@@ -122,8 +122,8 @@ function unicodeToChar(text: string) {
   })
 }
 
-function requiredWebSSOLogin() {
-  globalThis.location.href = `/webapp-signin?redirect_url=${globalThis.location.pathname}`
+function requiredWebSSOLogin(message?: string) {
+  globalThis.location.href = `/webapp-signin?redirect_url=${globalThis.location.pathname}&message=${message}`
 }
 
 function getAccessToken(isPublicAPI?: boolean) {
@@ -512,15 +512,9 @@ export const ssePost = (
           }).catch(() => {
             res.json().then((data: any) => {
               if (isPublicAPI) {
-                if (data.code === 'web_app_access_denied') {
-                  Toast.notify({
-                    type: 'error',
-                    message: data.message,
-                  })
-                  setTimeout(() => {
-                    requiredWebSSOLogin()
-                  }, 1500)
-                }
+                if (data.code === 'web_app_access_denied')
+                  requiredWebSSOLogin(data.message)
+
                 if (data.code === 'web_sso_auth_required')
                   requiredWebSSOLogin()
 
@@ -576,13 +570,7 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
       const { code, message } = errRespData
       // webapp sso
       if (code === 'web_app_access_denied') {
-        Toast.notify({
-          type: 'error',
-          message,
-        })
-        setTimeout(() => {
-          requiredWebSSOLogin()
-        }, 1500)
+        requiredWebSSOLogin(message)
         return Promise.reject(err)
       }
       if (code === 'web_sso_auth_required') {