fix: login security issue frontend (#25571)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx

         <Input id='email' type="email" value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
       </div>
       <div className='mt-3'>
-        <Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>
+        <Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.signup.verifyMail')}</Button>
       </div>
     </div>
   </form>

web/app/reset-password/page.tsx

         params.set('email', encodeURIComponent(email))
         router.push(`/reset-password/check-code?${params.toString()}`)
       }
-      else if (res.code === 'account_not_found') {
-        Toast.notify({
-          type: 'error',
-          message: t('login.error.registrationNotAllowed'),
-        })
-      }
       else {
         Toast.notify({
           type: 'error',

web/app/signin/components/mail-and-code-auth.tsx

         <Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
       </div>
       <div className='mt-3'>
-        <Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>
+        <Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.signup.verifyMail')}</Button>
       </div>
     </div>
   </form>

web/app/signin/components/mail-and-password-auth.tsx

       Toast.notify({ type: 'error', message: t('login.error.passwordEmpty') })
       return
     }
-    if (!passwordRegex.test(password)) {
-      Toast.notify({
-        type: 'error',
-        message: t('login.error.passwordInvalid'),
-      })
-      return
-    }
+
     try {
       setIsLoading(true)
       const loginData: Record<string, any> = {
           router.replace(redirectUrl || '/apps')
         }
       }
-      else if (res.code === 'account_not_found') {
-        if (allowRegistration) {
-          const params = new URLSearchParams()
-          params.append('email', encodeURIComponent(email))
-          params.append('token', encodeURIComponent(res.data))
-          router.replace(`/reset-password/check-code?${params.toString()}`)
-        }
-        else {
-          Toast.notify({
-            type: 'error',
-            message: t('login.error.registrationNotAllowed'),
-          })
-        }
+      else if (res.code === 'authentication_failed') {
+        Toast.notify({
+          type: 'error',
+          message: t('login.error.invalidEmailOrPassword'),
+        })
       }
       else {
         Toast.notify({

web/app/signin/normal-form.tsx

 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { resolvePostLoginRedirect } from './utils/post-login-redirect'
+import Split from './split'
 
 const NormalForm = () => {
   const { t } = useTranslation()
                   <span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
                 </div>}
               </>}
+              <Split className='mb-5 mt-4' />
             </>
           }
+
+          {systemFeatures.is_allow_register && authType === 'password' && (
+            <div className='mb-3 text-[13px] font-medium leading-4 text-text-secondary'>
+              <span>{t('login.signup.noAccount')}</span>
+              <Link
+                className='text-text-accent'
+                href='/signup'
+              >{t('login.signup.signUp')}</Link>
+            </div>
+          )}
           {allMethodsAreDisabled && <>
             <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
               <div className='shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
               >{t('login.setAdminAccount')}</Link>
             </div>}
           </>}
-
         </div>
       </div>
     </>

web/app/signin/split.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+}
+
+const Split: FC<Props> = ({
+  className,
+}) => {
+  return (
+    <div
+      className={cn('h-px w-[400px] bg-[linear-gradient(90deg,rgba(255,255,255,0.01)_0%,rgba(16,24,40,0.08)_50.5%,rgba(255,255,255,0.01)_100%)]', className)}>
+    </div>
+  )
+}
+export default React.memo(Split)

web/app/signup/check-code/page.tsx

+'use client'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Countdown from '@/app/components/signin/countdown'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import I18NContext from '@/context/i18n'
+import type { MailSendResponse, MailValidityResponse } from '@/service/use-common'
+import { useMailValidity, useSendMail } from '@/service/use-common'
+
+export default function CheckCode() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const email = decodeURIComponent(searchParams.get('email') as string)
+  const [token, setToken] = useState(decodeURIComponent(searchParams.get('token') as string))
+  const [code, setVerifyCode] = useState('')
+  const [loading, setIsLoading] = useState(false)
+  const { locale } = useContext(I18NContext)
+  const { mutateAsync: submitMail } = useSendMail()
+  const { mutateAsync: verifyCode } = useMailValidity()
+
+  const verify = async () => {
+    try {
+      if (!code.trim()) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.emptyCode'),
+        })
+        return
+      }
+      if (!/\d{6}/.test(code)) {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.invalidCode'),
+        })
+        return
+      }
+      setIsLoading(true)
+      const res = await verifyCode({ email, code, token })
+      console.log(res)
+      if ((res as MailValidityResponse).is_valid) {
+        const params = new URLSearchParams(searchParams)
+        params.set('token', encodeURIComponent((res as MailValidityResponse).token))
+        router.push(`/signup/set-password?${params.toString()}`)
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: t('login.checkCode.invalidCode'),
+        })
+      }
+    }
+    catch (error) { console.error(error) }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  const resendCode = async () => {
+    try {
+      const res = await submitMail({ email, language: locale })
+      if ((res as MailSendResponse).result === 'success') {
+        const params = new URLSearchParams(searchParams)
+        const newToken = (res as MailSendResponse)?.data
+        params.set('token', encodeURIComponent(newToken))
+        setToken(newToken)
+        router.replace(`/signup/check-code?${params.toString()}`)
+      }
+    }
+    catch (error) { console.error(error) }
+  }
+
+  return <div className='flex flex-col gap-3'>
+    <div className='inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg'>
+      <RiMailSendFill className='h-6 w-6 text-2xl text-text-accent-light-mode-only' />
+    </div>
+    <div className='pb-4 pt-2'>
+      <h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
+      <p className='body-md-regular mt-2 text-text-secondary'>
+        <span>
+          {t('login.checkCode.tipsPrefix')}
+          <strong>{email}</strong>
+        </span>
+        <br />
+        {t('login.checkCode.validTime')}
+      </p>
+    </div>
+
+    <form action="">
+      <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
+      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
+      <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
+      <Countdown onResend={resendCode} />
+    </form>
+    <div className='py-2'>
+      <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
+    </div>
+    <div onClick={() => router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
+      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+        <RiArrowLeftLine size={12} />
+      </div>
+      <span className='system-xs-regular ml-2'>{t('login.back')}</span>
+    </div>
+  </div>
+}

web/app/signup/components/input-mail.tsx

+'use client'
+import { noop } from 'lodash'
+import Input from '@/app/components/base/input'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { useCallback, useState } from 'react'
+import Button from '@/app/components/base/button'
+import { emailRegex } from '@/config'
+import Toast from '@/app/components/base/toast'
+import type { MailSendResponse } from '@/service/use-common'
+import { useSendMail } from '@/service/use-common'
+import I18n from '@/context/i18n'
+import Split from '@/app/signin/split'
+import Link from 'next/link'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+type Props = {
+  onSuccess: (email: string, payload: string) => void
+}
+export default function Form({
+  onSuccess,
+}: Props) {
+  const { t } = useTranslation()
+  const [email, setEmail] = useState('')
+  const { locale } = useContext(I18n)
+  const { systemFeatures } = useGlobalPublicStore()
+
+  const { mutateAsync: submitMail, isPending } = useSendMail()
+
+  const handleSubmit = useCallback(async () => {
+    if (!email) {
+      Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+      return
+    }
+    if (!emailRegex.test(email)) {
+      Toast.notify({
+        type: 'error',
+        message: t('login.error.emailInValid'),
+      })
+      return
+    }
+    const res = await submitMail({ email, language: locale })
+    if((res as MailSendResponse).result === 'success')
+      onSuccess(email, (res as MailSendResponse).data)
+  }, [email, locale, submitMail, t])
+
+  return <form onSubmit={noop}>
+    <div className='mb-3'>
+      <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        {t('login.email')}
+      </label>
+      <div className="mt-1">
+        <Input
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          id="email"
+          type="email"
+          autoComplete="email"
+          placeholder={t('login.emailPlaceholder') || ''}
+          tabIndex={1}
+        />
+      </div>
+    </div>
+    <div className='mb-2'>
+      <Button
+        tabIndex={2}
+        variant='primary'
+        onClick={handleSubmit}
+        disabled={isPending || !email}
+        className="w-full"
+      >{t('login.signup.verifyMail')}</Button>
+    </div>
+    <Split className='mb-5 mt-4' />
+
+    <div className='text-[13px] font-medium leading-4 text-text-secondary'>
+      <span>{t('login.signup.haveAccount')}</span>
+      <Link
+        className='text-text-accent'
+        href='/signin'
+      >{t('login.signup.signIn')}</Link>
+    </div>
+
+    {!systemFeatures.branding.enabled && <>
+      <div className="system-xs-regular mt-3 block w-full text-text-tertiary">
+        {t('login.tosDesc')}
+              &nbsp;
+        <Link
+          className='system-xs-medium text-text-secondary hover:underline'
+          target='_blank' rel='noopener noreferrer'
+          href='https://dify.ai/terms'
+        >{t('login.tos')}</Link>
+              &nbsp;&&nbsp;
+        <Link
+          className='system-xs-medium text-text-secondary hover:underline'
+          target='_blank' rel='noopener noreferrer'
+          href='https://dify.ai/privacy'
+        >{t('login.pp')}</Link>
+      </div>
+    </>}
+
+  </form>
+}

web/app/signup/layout.tsx

+'use client'
+import Header from '@/app/signin/_header'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function RegisterLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle('')
+  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 items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <Header />
+        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
+          <div className='flex flex-col md:w-[400px]'>
+            {children}
+          </div>
+        </div>
+        {systemFeatures.branding.enabled === false && <div className='system-xs-regular px-8 py-6 text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>}
+      </div>
+    </div>
+  </>
+}

web/app/signup/page.tsx

+'use client'
+import { useCallback } from 'react'
+import MailForm from './components/input-mail'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+
+const Signup = () => {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { t } = useTranslation()
+
+  const handleInputMailSubmitted = useCallback((email: string, result: string) => {
+    const params = new URLSearchParams(searchParams)
+    params.set('token', encodeURIComponent(result))
+    params.set('email', encodeURIComponent(email))
+    router.push(`/signup/check-code?${params.toString()}`)
+  }, [router, searchParams])
+
+  return (
+    <div className="mx-auto mt-8 w-full">
+      <div className="mx-auto mb-10 w-full">
+        <h2 className="title-4xl-semi-bold text-text-primary">{t('login.signup.createAccount')}</h2>
+        <p className='body-md-regular mt-2 text-text-tertiary'>{t('login.signup.welcome')}</p>
+      </div>
+      <MailForm onSuccess={handleInputMailSubmitted} />
+    </div>
+  )
+}
+
+export default Signup

web/app/signup/set-password/page.tsx

+'use client'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import cn from 'classnames'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import Input from '@/app/components/base/input'
+import { validPassword } from '@/config'
+import type { MailRegisterResponse } from '@/service/use-common'
+import { useMailRegister } from '@/service/use-common'
+
+const ChangePasswordForm = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = decodeURIComponent(searchParams.get('token') || '')
+
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const { mutateAsync: register, isPending } = useMailRegister()
+
+  const showErrorMessage = useCallback((message: string) => {
+    Toast.notify({
+      type: 'error',
+      message,
+    })
+  }, [])
+
+  const valid = useCallback(() => {
+    if (!password.trim()) {
+      showErrorMessage(t('login.error.passwordEmpty'))
+      return false
+    }
+    if (!validPassword.test(password)) {
+      showErrorMessage(t('login.error.passwordInvalid'))
+      return false
+    }
+    if (password !== confirmPassword) {
+      showErrorMessage(t('common.account.notEqual'))
+      return false
+    }
+    return true
+  }, [password, confirmPassword, showErrorMessage, t])
+
+  const handleSubmit = useCallback(async () => {
+    if (!valid())
+      return
+    try {
+      const res = await register({
+        token,
+        new_password: password,
+        password_confirm: confirmPassword,
+      })
+      const { result, data } = res as MailRegisterResponse
+      if (result === 'success') {
+        Toast.notify({
+          type: 'success',
+          message: t('common.api.actionSuccess'),
+        })
+        localStorage.setItem('console_token', data.access_token)
+        localStorage.setItem('refresh_token', data.refresh_token)
+        router.replace('/apps')
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }, [password, token, valid, confirmPassword, register])
+
+  return (
+    <div className={
+      cn(
+        'flex w-full grow flex-col items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      <div className='flex flex-col md:w-[400px]'>
+        <div className="mx-auto w-full">
+          <h2 className="title-4xl-semi-bold text-text-primary">
+            {t('login.changePassword')}
+          </h2>
+          <p className='body-md-regular mt-2 text-text-secondary'>
+            {t('login.changePasswordTip')}
+          </p>
+        </div>
+
+        <div className="mx-auto mt-6 w-full">
+          <div>
+            {/* Password */}
+            <div className='mb-5'>
+              <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                {t('common.account.newPassword')}
+              </label>
+              <div className='relative mt-1'>
+                <Input
+                  id="password"
+                  type='password'
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder={t('login.passwordPlaceholder') || ''}
+                />
+
+              </div>
+              <div className='body-xs-regular mt-1 text-text-secondary'>{t('login.error.passwordInvalid')}</div>
+            </div>
+            {/* Confirm Password */}
+            <div className='mb-5'>
+              <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                {t('common.account.confirmPassword')}
+              </label>
+              <div className='relative mt-1'>
+                <Input
+                  id="confirmPassword"
+                  type='password'
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                />
+              </div>
+            </div>
+            <div>
+              <Button
+                variant='primary'
+                className='w-full'
+                onClick={handleSubmit}
+                disabled={isPending || !password || !confirmPassword}
+              >
+                {t('login.changePasswordBtn')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChangePasswordForm

web/i18n/en-US/login.ts

 const translation = {
-  pageTitle: 'Hey, let\'s get started!',
-  welcome: '👋 Welcome to Dify, please log in to continue.',
+  pageTitle: 'Log in to Dify',
+  welcome: '👋 Welcome! Please log in to get started.',
   email: 'Email address',
   emailPlaceholder: 'Your email',
   password: 'Password',
     passwordLengthInValid: 'Password must be at least 8 characters',
     passwordInvalid: 'Password must contain letters and numbers, and the length must be greater than 8',
     registrationNotAllowed: 'Account not found. Please contact the system admin to register.',
+    invalidEmailOrPassword: 'Invalid email or password.',
   },
   license: {
     tip: 'Before starting Dify Community Edition, read the GitHub',
     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.',
   },
+  signup: {
+    noAccount: 'Don’t have an account? ',
+    signUp: 'Sign Up',
+    createAccount: 'Create your account',
+    welcome: '👋 Welcome! Please fill in the details to get started.',
+    verifyMail: 'Continue with verification code',
+    haveAccount: 'Already have an account? ',
+    signIn: 'Sign In',
+  },
 }
 
 export default translation

web/i18n/ja-JP/login.ts

 const translation = {
-  pageTitle: 'はじめましょう！👋',
-  welcome: 'Dify へようこそ。続行するにはログインしてください。',
+  pageTitle: 'Dify にログイン',
+  welcome: '👋 ようこそ！まずはログインしてご利用ください。',
   email: 'メールアドレス',
   emailPlaceholder: 'メールアドレスを入力してください',
   password: 'パスワード',
   withSSO: 'SSO を続行する',
   noLoginMethod: '認証方法が構成されていません',
   backToLogin: 'ログインに戻る',
-  continueWithCode: 'コードで続行',
+  continueWithCode: '認証コードで続行',
   noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。',
   usePassword: 'パスワードを使用',
   sendVerificationCode: '確認コードの送信',
     noLoginMethodTip: 'システム管理者に連絡して、認証方法を追加してください。',
     disabled: 'Web アプリの認証が無効になっています。システム管理者に連絡して有効にしてください。直接アプリを使用してみてください。',
   },
+  signup: {
+    noAccount: 'アカウントをお持ちでないですか？',
+    signUp: '新規登録',
+    createAccount: 'アカウントを作成',
+    welcome: '👋 ようこそ！ご利用を始めるために必要な情報をご入力ください。',
+    verifyMail: '認証コードで続行',
+    haveAccount: 'すでにアカウントをお持ちですか？',
+    signIn: 'ログインはこちら',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/login.ts

 const translation = {
-  pageTitle: '嗨，近来可好',
-  welcome: '👋 欢迎来到 Dify, 登录以继续',
+  pageTitle: '登录 Dify',
+  welcome: '👋 欢迎！请登录以开始使用。',
   email: '邮箱',
   emailPlaceholder: '输入邮箱地址',
   password: '密码',
     passwordInvalid: '密码必须包含字母和数字，且长度不小于 8 位',
     passwordLengthInValid: '密码必须至少为 8 个字符',
     registrationNotAllowed: '账户不存在，请联系系统管理员注册账户',
+    invalidEmailOrPassword: '邮箱或密码错误',
   },
   license: {
     tip: '启动 Dify 社区版之前，请阅读 GitHub 上的',
     noLoginMethodTip: '请联系系统管理员添加身份认证方式',
     disabled: 'Web 应用身份认证已禁用，请联系系统管理员启用。您也可以尝试直接使用应用。',
   },
+  signup: {
+    noAccount: '没有账户？',
+    signUp: '立即注册',
+    createAccount: '创建您的账户',
+    welcome: '👋 欢迎！请填写信息以开始使用。',
+    verifyMail: '发送验证码',
+    haveAccount: '已有账户？',
+    signIn: '立即登录',
+  },
 }
 
 export default translation

web/service/base.ts

       return resp
     const errResp: Response = err as any
     if (errResp.status === 401) {
+      if(/\/login/.test(url)) {
+        const clonedResponse = errResp.clone()
+        const bodyJson = await clonedResponse.json() as Promise<ResponseError>
+        return bodyJson
+      }
+
       const [parseErr, errRespData] = await asyncRunSafe<ResponseError>(errResp.json())
       const loginUrl = `${globalThis.location.origin}${basePath}/signin`
       if (parseErr) {

web/service/use-common.ts

     },
   })
 }
+
+export type MailSendResponse = { data: string, result: string }
+export const useSendMail = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'mail-send'],
+    mutationFn: (body: { email: string, language: string }) => {
+      return post<MailSendResponse>('/email-register/send-email', { body })
+    },
+  })
+}
+
+export type MailValidityResponse = { is_valid: boolean, token: string }
+
+export const useMailValidity = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'mail-validity'],
+    mutationFn: (body: { email: string, code: string, token: string }) => {
+      return post<MailValidityResponse>('/email-register/validity', { body })
+    },
+  })
+}
+
+export type MailRegisterResponse = { result: string, data: { access_token: string, refresh_token: string } }
+
+export const useMailRegister = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'mail-register'],
+    mutationFn: (body: { token: string, new_password: string, password_confirm: string }) => {
+      return post<MailRegisterResponse>('/email-register', { body })
+    },
+  })
+}