Perf/web app authrozation (#22524)

web/app/(shareLayout)/chat/[token]/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import React from 'react'
 import ChatWithHistoryWrap from '@/app/components/base/chat/chat-with-history'
+import AuthenticatedLayout from '../../components/authenticated-layout'
 
 const Chat = () => {
   return (
-    <ChatWithHistoryWrap />
+    <AuthenticatedLayout>
+      <ChatWithHistoryWrap />
+    </AuthenticatedLayout>
   )
 }
 

web/app/(shareLayout)/chatbot/[token]/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import React from 'react'
 import EmbeddedChatbot from '@/app/components/base/chat/embedded-chatbot'
+import AuthenticatedLayout from '../../components/authenticated-layout'
 
 const Chatbot = () => {
   return (
-    <EmbeddedChatbot />
+    <AuthenticatedLayout>
+      <EmbeddedChatbot />
+    </AuthenticatedLayout>
   )
 }
 

web/app/(shareLayout)/completion/[token]/page.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import Main from '@/app/components/share/text-generation'
+import AuthenticatedLayout from '../../components/authenticated-layout'
 
 const Completion = () => {
   return (
-    <Main />
+    <AuthenticatedLayout>
+      <Main />
+    </AuthenticatedLayout>
   )
 }
 

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import AppUnavailable from '@/app/components/base/app-unavailable'
+import Loading from '@/app/components/base/loading'
+import { removeAccessToken } from '@/app/components/share/utils'
+import { useWebAppStore } from '@/context/web-app-context'
+import { useGetUserCanAccessApp } from '@/service/access-control'
+import { useGetWebAppInfo, useGetWebAppMeta, useGetWebAppParams } from '@/service/use-share'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
+  const { t } = useTranslation()
+  const updateAppInfo = useWebAppStore(s => s.updateAppInfo)
+  const updateAppParams = useWebAppStore(s => s.updateAppParams)
+  const updateWebAppMeta = useWebAppStore(s => s.updateWebAppMeta)
+  const updateUserCanAccessApp = useWebAppStore(s => s.updateUserCanAccessApp)
+  const { isFetching: isFetchingAppParams, data: appParams, error: appParamsError } = useGetWebAppParams()
+  const { isFetching: isFetchingAppInfo, data: appInfo, error: appInfoError } = useGetWebAppInfo()
+  const { isFetching: isFetchingAppMeta, data: appMeta, error: appMetaError } = useGetWebAppMeta()
+  const { data: userCanAccessApp, error: useCanAccessAppError } = useGetUserCanAccessApp({ appId: appInfo?.app_id, isInstalledApp: false })
+
+  useEffect(() => {
+    if (appInfo)
+      updateAppInfo(appInfo)
+    if (appParams)
+      updateAppParams(appParams)
+    if (appMeta)
+      updateWebAppMeta(appMeta)
+    updateUserCanAccessApp(Boolean(userCanAccessApp && userCanAccessApp?.result))
+  }, [appInfo, appMeta, appParams, updateAppInfo, updateAppParams, updateUserCanAccessApp, updateWebAppMeta, userCanAccessApp])
+
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.set('redirect_url', pathname)
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams, pathname])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
+  if (appInfoError) {
+    return <div className='flex h-full items-center justify-center'>
+      <AppUnavailable unknownReason={appInfoError.message} />
+    </div>
+  }
+  if (appParamsError) {
+    return <div className='flex h-full items-center justify-center'>
+      <AppUnavailable unknownReason={appParamsError.message} />
+    </div>
+  }
+  if (appMetaError) {
+    return <div className='flex h-full items-center justify-center'>
+      <AppUnavailable unknownReason={appMetaError.message} />
+    </div>
+  }
+  if (useCanAccessAppError) {
+    return <div className='flex h-full items-center justify-center'>
+      <AppUnavailable unknownReason={useCanAccessAppError.message} />
+    </div>
+  }
+  if (userCanAccessApp && !userCanAccessApp.result) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-2'>
+      <AppUnavailable className='h-auto w-auto' code={403} unknownReason='no permission.' />
+      <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{t('common.userProfile.logout')}</span>
+    </div>
+  }
+  if (isFetchingAppInfo || isFetchingAppParams || isFetchingAppMeta) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
+  return <>{children}</>
+}
+
+export default React.memo(AuthenticatedLayout)

web/app/(shareLayout)/components/splash.tsx

@@ -0,0 +1,80 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import { useCallback } from 'react'
+import { useWebAppStore } from '@/context/web-app-context'
+import { useRouter, useSearchParams } from 'next/navigation'
+import AppUnavailable from '@/app/components/base/app-unavailable'
+import { checkOrSetAccessToken, removeAccessToken, setAccessToken } from '@/app/components/share/utils'
+import { useTranslation } from 'react-i18next'
+import { fetchAccessToken } from '@/service/share'
+import Loading from '@/app/components/base/loading'
+import { AccessMode } from '@/models/access-control'
+
+const Splash: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  const shareCode = useWebAppStore(s => s.shareCode)
+  const webAppAccessMode = useWebAppStore(s => s.webAppAccessMode)
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const redirectUrl = searchParams.get('redirect_url')
+  const tokenFromUrl = searchParams.get('web_sso_token')
+  const message = searchParams.get('message')
+  const code = searchParams.get('code')
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.delete('code')
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
+  useEffect(() => {
+    (async () => {
+      if (message)
+        return
+      if (shareCode && tokenFromUrl && redirectUrl) {
+        localStorage.setItem('webapp_access_token', tokenFromUrl)
+        const tokenResp = await fetchAccessToken({ appCode: shareCode, webAppAccessToken: tokenFromUrl })
+        await setAccessToken(shareCode, tokenResp.access_token)
+        router.replace(decodeURIComponent(redirectUrl))
+        return
+      }
+      if (shareCode && redirectUrl && localStorage.getItem('webapp_access_token')) {
+        const tokenResp = await fetchAccessToken({ appCode: shareCode, webAppAccessToken: localStorage.getItem('webapp_access_token') })
+        await setAccessToken(shareCode, tokenResp.access_token)
+        router.replace(decodeURIComponent(redirectUrl))
+        return
+      }
+      if (webAppAccessMode === AccessMode.PUBLIC && redirectUrl) {
+        await checkOrSetAccessToken(shareCode)
+        router.replace(decodeURIComponent(redirectUrl))
+      }
+    })()
+  }, [shareCode, redirectUrl, router, tokenFromUrl, message, webAppAccessMode])
+
+  if (message) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-4'>
+      <AppUnavailable className='h-auto w-auto' code={code || t('share.common.appUnavailable')} unknownReason={message} />
+      <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{code === '403' ? t('common.userProfile.logout') : t('share.login.backToHome')}</span>
+    </div>
+  }
+  if (tokenFromUrl) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
+  if (webAppAccessMode === AccessMode.PUBLIC && redirectUrl) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
+  return <>{children}</>
+}
+
+export default Splash

web/app/(shareLayout)/layout.tsx

@@ -1,54 +1,15 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import type { FC } from 'react'
-import { usePathname, useSearchParams } from 'next/navigation'
-import Loading from '../components/base/loading'
-import { useGlobalPublicStore } from '@/context/global-public-context'
-import { AccessMode } from '@/models/access-control'
-import { getAppAccessModeByAppCode } from '@/service/share'
+import type { FC, PropsWithChildren } from 'react'
+import WebAppStoreProvider from '@/context/web-app-context'
+import Splash from './components/splash'
 
-const Layout: FC<{
-  children: React.ReactNode
-}> = ({ children }) => {
-  const isGlobalPending = useGlobalPublicStore(s => s.isGlobalPending)
-  const setWebAppAccessMode = useGlobalPublicStore(s => s.setWebAppAccessMode)
-  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const redirectUrl = searchParams.get('redirect_url')
-  const [isLoading, setIsLoading] = useState(true)
-  useEffect(() => {
-    (async () => {
-      if (!isGlobalPending && !systemFeatures.webapp_auth.enabled) {
-        setIsLoading(false)
-        return
-      }
-
-      let appCode: string | null = null
-      if (redirectUrl) {
-        const url = new URL(`${window.location.origin}${decodeURIComponent(redirectUrl)}`)
-        appCode = url.pathname.split('/').pop() || null
-      }
-      else {
-        appCode = pathname.split('/').pop() || null
-      }
-
-      if (!appCode)
-        return
-      setIsLoading(true)
-      const ret = await getAppAccessModeByAppCode(appCode)
-      setWebAppAccessMode(ret?.accessMode || AccessMode.PUBLIC)
-      setIsLoading(false)
-    })()
-  }, [pathname, redirectUrl, setWebAppAccessMode, isGlobalPending, systemFeatures.webapp_auth.enabled])
-  if (isLoading || isGlobalPending) {
-    return <div className='flex h-full w-full items-center justify-center'>
-      <Loading />
-    </div>
-  }
+const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
-      {children}
+      <WebAppStoreProvider>
+        <Splash>
+          {children}
+        </Splash>
+      </WebAppStoreProvider>
     </div>
   )
 }

web/app/(shareLayout)/webapp-signin/layout.tsx

@@ -3,10 +3,13 @@
 import cn from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
+import type { PropsWithChildren } from 'react'
+import { useTranslation } from 'react-i18next'
 
-export default function SignInLayout({ children }: any) {
-  const { systemFeatures } = useGlobalPublicStore()
-  useDocumentTitle('')
+export default function SignInLayout({ children }: PropsWithChildren) {
+  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  useDocumentTitle(t('login.webapp.login'))
   return <>
     <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
       <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>

web/app/(shareLayout)/webapp-signin/normalForm.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -1,36 +1,30 @@
 'use client'
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
-import { removeAccessToken, setAccessToken } from '@/app/components/share/utils'
+import { removeAccessToken } from '@/app/components/share/utils'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import Loading from '@/app/components/base/loading'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import NormalForm from './normalForm'
 import { AccessMode } from '@/models/access-control'
 import ExternalMemberSsoAuth from './components/external-member-sso-auth'
-import { fetchAccessToken } from '@/service/share'
+import { useWebAppStore } from '@/context/web-app-context'
 
 const WebSSOForm: FC = () => {
   const { t } = useTranslation()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
-  const webAppAccessMode = useGlobalPublicStore(s => s.webAppAccessMode)
+  const webAppAccessMode = useWebAppStore(s => s.webAppAccessMode)
   const searchParams = useSearchParams()
   const router = useRouter()
 
   const redirectUrl = searchParams.get('redirect_url')
-  const tokenFromUrl = searchParams.get('web_sso_token')
-  const message = searchParams.get('message')
-  const code = searchParams.get('code')
 
   const getSigninUrl = useCallback(() => {
-    const params = new URLSearchParams(searchParams)
-    params.delete('message')
-    params.delete('code')
+    const params = new URLSearchParams()
+    params.append('redirect_url', redirectUrl || '')
     return `/webapp-signin?${params.toString()}`
-  }, [searchParams])
+  }, [redirectUrl])
 
   const backToHome = useCallback(() => {
     removeAccessToken()
@@ -38,73 +32,12 @@ const WebSSOForm: FC = () => {
     router.replace(url)
   }, [getSigninUrl, router])
 
-  const showErrorToast = (msg: string) => {
-    Toast.notify({
-      type: 'error',
-      message: msg,
-    })
-  }
-
-  const getAppCodeFromRedirectUrl = useCallback(() => {
-    if (!redirectUrl)
-      return null
-    const url = new URL(`${window.location.origin}${decodeURIComponent(redirectUrl)}`)
-    const appCode = url.pathname.split('/').pop()
-    if (!appCode)
-      return null
-
-    return appCode
-  }, [redirectUrl])
-
-  useEffect(() => {
-    (async () => {
-      if (message)
-        return
-
-      const appCode = getAppCodeFromRedirectUrl()
-      if (appCode && tokenFromUrl && redirectUrl) {
-        localStorage.setItem('webapp_access_token', tokenFromUrl)
-        const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: tokenFromUrl })
-        await setAccessToken(appCode, tokenResp.access_token)
-        router.replace(decodeURIComponent(redirectUrl))
-        return
-      }
-      if (appCode && redirectUrl && localStorage.getItem('webapp_access_token')) {
-        const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: localStorage.getItem('webapp_access_token') })
-        await setAccessToken(appCode, tokenResp.access_token)
-        router.replace(decodeURIComponent(redirectUrl))
-      }
-    })()
-  }, [getAppCodeFromRedirectUrl, redirectUrl, router, tokenFromUrl, message])
-
-  useEffect(() => {
-    if (webAppAccessMode && webAppAccessMode === AccessMode.PUBLIC && redirectUrl)
-      router.replace(decodeURIComponent(redirectUrl))
-  }, [webAppAccessMode, router, redirectUrl])
-
-  if (tokenFromUrl) {
-    return <div className='flex h-full items-center justify-center'>
-      <Loading />
-    </div>
-  }
-
-  if (message) {
-    return <div className='flex h-full flex-col items-center justify-center gap-y-4'>
-      <AppUnavailable className='h-auto w-auto' code={code || t('share.common.appUnavailable')} unknownReason={message} />
-      <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{code === '403' ? t('common.userProfile.logout') : t('share.login.backToHome')}</span>
-    </div>
-  }
   if (!redirectUrl) {
-    showErrorToast('redirect url is invalid.')
     return <div className='flex h-full items-center justify-center'>
       <AppUnavailable code={t('share.common.appUnavailable')} unknownReason='redirect url is invalid.' />
     </div>
   }
-  if (webAppAccessMode && webAppAccessMode === AccessMode.PUBLIC) {
-    return <div className='flex h-full items-center justify-center'>
-      <Loading />
-    </div>
-  }
+
   if (!systemFeatures.webapp_auth.enabled) {
     return <div className="flex h-full items-center justify-center">
       <p className='system-xs-regular text-text-tertiary'>{t('login.webapp.disabled')}</p>

web/app/(shareLayout)/workflow/[token]/page.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 
 import Main from '@/app/components/share/text-generation'
+import AuthenticatedLayout from '../../components/authenticated-layout'
 
 const Workflow = () => {
   return (
-    <Main isWorkflow />
+    <AuthenticatedLayout>
+      <Main isWorkflow />
+    </AuthenticatedLayout>
   )
 }