dify

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

@@ -0,0 +1,85 @@
+'use client'
+
+import AppUnavailable from '@/app/components/base/app-unavailable'
+import Loading from '@/app/components/base/loading'
+import { useWebAppStore } from '@/context/web-app-context'
+import { useGetUserCanAccessApp } from '@/service/access-control'
+import { useGetWebAppInfo, useGetWebAppMeta, useGetWebAppParams } from '@/service/use-share'
+import { webAppLogout } from '@/service/webapp-auth'
+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 shareCode = useWebAppStore(s => s.shareCode)
+  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(async () => {
+    await webAppLogout(shareCode!)
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router, webAppLogout, shareCode])
+
+  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)

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

@@ -0,0 +1,110 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import { useEffect, useState } 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 { useTranslation } from 'react-i18next'
+import { webAppLoginStatus, webAppLogout } from '@/service/webapp-auth'
+import { fetchAccessToken } from '@/service/share'
+import Loading from '@/app/components/base/loading'
+import { setWebAppAccessToken, setWebAppPassport } from '@/service/webapp-auth'
+
+const Splash: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  const shareCode = useWebAppStore(s => s.shareCode)
+  const webAppAccessMode = useWebAppStore(s => s.webAppAccessMode)
+  const embeddedUserId = useWebAppStore(s => s.embeddedUserId)
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const redirectUrl = searchParams.get('redirect_url')
+  const message = searchParams.get('message')
+  const code = searchParams.get('code')
+  const tokenFromUrl = searchParams.get('web_sso_token')
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.delete('code')
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams])
+
+  const backToHome = useCallback(async () => {
+    await webAppLogout(shareCode!)
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router, webAppLogout, shareCode])
+
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    if (message) {
+      setIsLoading(false)
+      return
+    }
+
+    if(tokenFromUrl)
+      setWebAppAccessToken(tokenFromUrl)
+
+    const redirectOrFinish = () => {
+      if (redirectUrl)
+        router.replace(decodeURIComponent(redirectUrl))
+      else
+        setIsLoading(false)
+    }
+
+    const proceedToAuth = () => {
+      setIsLoading(false)
+    }
+
+    (async () => {
+      // if access mode is public, user login is always true, but the app login(passport) may be expired
+      const { userLoggedIn, appLoggedIn } = await webAppLoginStatus(shareCode!, embeddedUserId || undefined)
+      if (userLoggedIn && appLoggedIn) {
+        redirectOrFinish()
+      }
+      else if (!userLoggedIn && !appLoggedIn) {
+        proceedToAuth()
+      }
+      else if (!userLoggedIn && appLoggedIn) {
+        redirectOrFinish()
+      }
+      else if (userLoggedIn && !appLoggedIn) {
+        try {
+          const { access_token } = await fetchAccessToken({
+            appCode: shareCode!,
+            userId: embeddedUserId || undefined,
+          })
+          setWebAppPassport(shareCode!, access_token)
+          redirectOrFinish()
+        }
+        catch {
+          await webAppLogout(shareCode!)
+          proceedToAuth()
+        }
+      }
+    })()
+  }, [
+    shareCode,
+    redirectUrl,
+    router,
+    message,
+    webAppAccessMode,
+    tokenFromUrl,
+    embeddedUserId])
+
+  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 (isLoading) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
+  return <>{children}</>
+}
+
+export default Splash