wip: enhance user experience by refining authorization verification process

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

@@ -0,0 +1,30 @@
+'use client'
+
+import Loading from '@/app/components/base/loading'
+import { useWebAppStore } from '@/context/web-app-context'
+import React, { useEffect, useState } from 'react'
+
+const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
+  const shareCode = useWebAppStore(s => s.shareCode)
+  const webAppAccessMode = useWebAppStore(s => s.webAppAccessMode)
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    (async () => {
+      try {
+        setIsLoading(true)
+      }
+      catch (error) { console.error(error) }
+      finally {
+        setIsLoading(false)
+      }
+    })()
+  }, [webAppAccessMode, shareCode])
+  if (isLoading) {
+    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>
   )
 }
 

web/app/components/share/text-generation/index.tsx

@@ -9,7 +9,7 @@ import {
 import { useBoolean } from 'ahooks'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import TabHeader from '../../base/tab-header'
-import { checkOrSetAccessToken, removeAccessToken } from '../utils'
+import { removeAccessToken } from '../utils'
 import MenuDropdown from './menu-dropdown'
 import RunBatch from './run-batch'
 import ResDownload from './run-batch/res-download'
@@ -376,8 +376,8 @@ const TextGeneration: FC<IMainProps> = ({
   }
 
   const fetchInitData = async () => {
-    if (!isInstalledApp)
-      await checkOrSetAccessToken()
+    // if (!isInstalledApp)
+    //   await checkOrSetAccessToken()
 
     return Promise.all([
       isInstalledApp

web/app/components/share/text-generation/menu-dropdown.tsx

@@ -18,8 +18,8 @@ import {
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import type { SiteInfo } from '@/models/share'
 import cn from '@/utils/classnames'
-import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode } from '@/models/access-control'
+import { useWebAppStore } from '@/context/web-app-context'
 
 type Props = {
   data?: SiteInfo
@@ -32,7 +32,7 @@ const MenuDropdown: FC<Props> = ({
   placement,
   hideLogout,
 }) => {
-  const webAppAccessMode = useGlobalPublicStore(s => s.webAppAccessMode)
+  const webAppAccessMode = useWebAppStore(s => s.webAppAccessMode)
   const router = useRouter()
   const pathname = usePathname()
   const { t } = useTranslation()

web/app/components/share/utils.ts

@@ -10,7 +10,7 @@ export const getInitialTokenV2 = (): Record<string, any> => ({
   version: 2,
 })
 
-export const checkOrSetAccessToken = async (appCode?: string) => {
+export const checkOrSetAccessToken = async (appCode?: string | null) => {
   const sharedToken = appCode || globalThis.location.pathname.split('/').slice(-1)[0]
   const userId = (await getProcessedSystemVariablesFromUrlParams()).user_id
   const accessToken = localStorage.getItem('token') || JSON.stringify(getInitialTokenV2())

web/context/global-public-context.tsx

@@ -7,15 +7,12 @@ import type { SystemFeatures } from '@/types/feature'
 import { defaultSystemFeatures } from '@/types/feature'
 import { getSystemFeatures } from '@/service/common'
 import Loading from '@/app/components/base/loading'
-import { AccessMode } from '@/models/access-control'
 
 type GlobalPublicStore = {
   isGlobalPending: boolean
   setIsGlobalPending: (isPending: boolean) => void
   systemFeatures: SystemFeatures
   setSystemFeatures: (systemFeatures: SystemFeatures) => void
-  webAppAccessMode: AccessMode,
-  setWebAppAccessMode: (webAppAccessMode: AccessMode) => void
 }
 
 export const useGlobalPublicStore = create<GlobalPublicStore>(set => ({
@@ -23,8 +20,6 @@ export const useGlobalPublicStore = create<GlobalPublicStore>(set => ({
   setIsGlobalPending: (isPending: boolean) => set(() => ({ isGlobalPending: isPending })),
   systemFeatures: defaultSystemFeatures,
   setSystemFeatures: (systemFeatures: SystemFeatures) => set(() => ({ systemFeatures })),
-  webAppAccessMode: AccessMode.PUBLIC,
-  setWebAppAccessMode: (webAppAccessMode: AccessMode) => set(() => ({ webAppAccessMode })),
 }))
 
 const GlobalPublicStoreProvider: FC<PropsWithChildren> = ({

web/context/web-app-context.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import Loading from '@/app/components/base/loading'
+import { AccessMode } from '@/models/access-control'
+import { useAppAccessModeByCode } from '@/service/use-share'
+import type { App } from '@/types/app'
+import { usePathname, useSearchParams } from 'next/navigation'
+import type { FC, PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import { useState } from 'react'
+import { create } from 'zustand'
+
+type WebAppStore = {
+  shareCode: string | null
+  updateShareCode: (shareCode: string | null) => void
+  appInfo: App | null
+  updateAppInfo: (appInfo: App | null) => void
+  webAppAccessMode: AccessMode
+  updateWebAppAccessMode: (accessMode: AccessMode) => void
+}
+
+export const useWebAppStore = create<WebAppStore>(set => ({
+  shareCode: null,
+  updateShareCode: (shareCode: string | null) => set(() => ({ shareCode })),
+  appInfo: null,
+  updateAppInfo: (appInfo: App | null) => set(() => ({ appInfo })),
+  webAppAccessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+  updateWebAppAccessMode: (accessMode: AccessMode) => set(() => ({ webAppAccessMode: accessMode })),
+}))
+
+const getShareCodeFromRedirectUrl = (redirectUrl: string | null): string | null => {
+  if (!redirectUrl || redirectUrl.length === 0)
+    return null
+  const url = new URL(`${window.location.origin}${decodeURIComponent(redirectUrl)}`)
+  return url.pathname.split('/').pop() || null
+}
+const getShareCodeFromPathname = (pathname: string): string | null => {
+  const code = pathname.split('/').pop() || null
+  if (code === 'webapp-signin')
+    return null
+  return code
+}
+
+const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
+  const updateWebAppAccessMode = useWebAppStore(state => state.updateWebAppAccessMode)
+  const updateShareCode = useWebAppStore(state => state.updateShareCode)
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const redirectUrlParam = searchParams.get('redirect_url')
+  const [shareCode, setShareCode] = useState<string | null>(null)
+  useEffect(() => {
+    const shareCodeFromRedirect = getShareCodeFromRedirectUrl(redirectUrlParam)
+    const shareCodeFromPathname = getShareCodeFromPathname(pathname)
+    const newShareCode = shareCodeFromRedirect || shareCodeFromPathname
+    setShareCode(newShareCode)
+    updateShareCode(newShareCode)
+  }, [pathname, redirectUrlParam, updateShareCode])
+  const { isFetching, data: accessModeResult } = useAppAccessModeByCode(shareCode)
+  useEffect(() => {
+    if (accessModeResult?.accessMode)
+      updateWebAppAccessMode(accessModeResult.accessMode)
+  }, [accessModeResult, updateWebAppAccessMode])
+  if (isFetching) {
+    return <div className='flex h-full w-full items-center justify-center'>
+      <Loading />
+    </div>
+  }
+  return (
+    <>
+      {children}
+    </>
+  )
+}
+export default WebAppStoreProvider

web/i18n/en-US/login.ts

@@ -105,6 +105,7 @@ const translation = {
   licenseInactive: 'License Inactive',
   licenseInactiveTip: 'The Dify Enterprise license for your workspace is inactive. Please contact your administrator to continue using Dify.',
   webapp: {
+    login: 'Login',
     noLoginMethod: 'Authentication method not configured for web app',
     noLoginMethodTip: 'Please contact the system admin to add an authentication method.',
     disabled: 'Webapp authentication is disabled. Please contact the system admin to enable it. You can try to use the app directly.',

web/i18n/ja-JP/login.ts

@@ -106,6 +106,7 @@ const translation = {
   licenseExpired: 'ライセンスの有効期限が切れています',
   licenseLostTip: 'Dify ライセンスサーバーへの接続に失敗しました。続けて Dify を使用するために管理者に連絡してください。',
   webapp: {
+    login: 'ログイン',
     noLoginMethod: 'Web アプリに対して認証方法が構成されていません',
     noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。',
     disabled: 'Web アプリの認証が無効になっています。システム管理者に連絡して有効にしてください。直接アプリを使用してみてください。',

web/i18n/zh-Hans/login.ts

@@ -106,6 +106,7 @@ const translation = {
   licenseInactive: '许可证未激活',
   licenseInactiveTip: '您所在空间的 Dify Enterprise 许可证尚未激活，请联系管理员以继续使用 Dify。',
   webapp: {
+    login: '登录',
     noLoginMethod: 'Web 应用未配置身份认证方式',
     noLoginMethodTip: '请联系系统管理员添加身份认证方式',
     disabled: 'Web 应用身份认证已禁用，请联系系统管理员启用。您也可以尝试直接使用应用。',

web/service/base.ts

@@ -413,7 +413,7 @@ export const ssePost = async (
 
                 if (data.code === 'unauthorized') {
                   removeAccessToken()
-                  globalThis.location.reload()
+                  requiredWebSSOLogin()
                 }
               }
             })
@@ -507,7 +507,7 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
       } = otherOptionsForBaseFetch
       if (isPublicAPI && code === 'unauthorized') {
         removeAccessToken()
-        globalThis.location.reload()
+        requiredWebSSOLogin()
         return Promise.reject(err)
       }
       if (code === 'init_validate_failed' && IS_CE_EDITION && !silent) {

web/service/use-share.ts

@@ -1,14 +1,22 @@
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { AccessMode } from '@/models/access-control'
 import { useQuery } from '@tanstack/react-query'
 import { getAppAccessModeByAppCode } from './share'
 
 const NAME_SPACE = 'webapp'
 
 export const useAppAccessModeByCode = (code: string | null) => {
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   return useQuery({
     queryKey: [NAME_SPACE, 'appAccessMode', code],
     queryFn: () => {
-      if (!code)
-        return null
+      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'))
 
       return getAppAccessModeByAppCode(code)
     },