feat(i18n): add authentication error handling and localization

megayu · megayu · commit 9b8ee19c189e · 2026-04-10T17:45:55.000+08:00
diff --git a/packages/ui/src/amplify/errors.ts b/packages/ui/src/amplify/errors.ts
@@ -0,0 +1,42 @@
+type AuthErrorLike = {
+  code?: string
+  name?: string
+  message?: string
+}
+
+function getAuthErrorName(error: unknown) {
+  const authError = (error ?? {}) as AuthErrorLike
+  return authError.name || authError.code || ''
+}
+
+export function getAuthErrorMessageKey(error: unknown) {
+  switch (getAuthErrorName(error)) {
+    case 'UserNotFoundException':
+      return 'AUTH_ERROR_USER_NOT_FOUND'
+    case 'NotAuthorizedException':
+      return 'AUTH_ERROR_INVALID_CREDENTIALS'
+    case 'UserNotConfirmedException':
+      return 'AUTH_ERROR_USER_NOT_CONFIRMED'
+    case 'UsernameExistsException':
+      return 'AUTH_ERROR_USERNAME_EXISTS'
+    case 'InvalidPasswordException':
+      return 'PW_POLICY_TIP'
+    case 'CodeMismatchException':
+      return 'AUTH_ERROR_CODE_MISMATCH'
+    case 'ExpiredCodeException':
+      return 'AUTH_ERROR_CODE_EXPIRED'
+    case 'LimitExceededException':
+    case 'TooManyRequestsException':
+      return 'AUTH_ERROR_TOO_MANY_REQUESTS'
+    case 'TooManyFailedAttemptsException':
+      return 'AUTH_ERROR_TOO_MANY_ATTEMPTS'
+    case 'CodeDeliveryFailureException':
+      return 'AUTH_ERROR_CODE_DELIVERY_FAILED'
+    case 'UserAlreadyAuthenticatedException':
+      return 'AUTH_ERROR_ALREADY_AUTHENTICATED'
+    case 'InvalidParameterException':
+      return 'AUTH_ERROR_INVALID_PARAMETER'
+    default:
+      return 'AUTH_ERROR_GENERIC'
+  }
+}
diff --git a/packages/ui/src/amplify/lang.ts b/packages/ui/src/amplify/lang.ts
@@ -37,10 +37,21 @@ export default {
     'Enter your email': 'Enter your email',
     'Invalid Password': 'Invalid Password',
     'Passwords do not match.': 'Passwords do not match.',
-    'Password must be at least 8 characters.': 'Password must be at least 8 characters.',
     'We have sent a numeric verification code to your email address at': 'We have sent a numeric verification code to your email address at',
     'COUNTDOWN_SUFFIX': 's',
     'Unsupported sign-in step:': 'Unsupported sign-in step:',
+    'AUTH_ERROR_GENERIC': 'Authentication failed. Please try again.',
+    'AUTH_ERROR_INVALID_CREDENTIALS': 'Incorrect email or password.',
+    'AUTH_ERROR_USER_NOT_CONFIRMED': 'Your account is not confirmed yet. Please verify it with the code we sent.',
+    'AUTH_ERROR_USERNAME_EXISTS': 'This username is already taken.',
+    'AUTH_ERROR_USER_NOT_FOUND': 'We could not find an account for that email address.',
+    'AUTH_ERROR_CODE_MISMATCH': 'The verification code is incorrect.',
+    'AUTH_ERROR_CODE_EXPIRED': 'The verification code has expired. Please request a new one.',
+    'AUTH_ERROR_TOO_MANY_REQUESTS': 'Too many requests. Please wait a moment and try again.',
+    'AUTH_ERROR_TOO_MANY_ATTEMPTS': 'Too many failed attempts. Please wait a moment and try again.',
+    'AUTH_ERROR_CODE_DELIVERY_FAILED': 'We could not send the verification code. Please try again later.',
+    'AUTH_ERROR_ALREADY_AUTHENTICATED': 'You are already signed in.',
+    'AUTH_ERROR_INVALID_PARAMETER': 'Some information is invalid. Please check your input and try again.',
   },
   'zh-CN': {
     'login': '登录',
@@ -81,10 +92,21 @@ export default {
     'Enter your email': '请输入您的邮箱',
     'Invalid Password': '密码无效',
     'Passwords do not match.': '两次输入的密码不一致。',
-    'Password must be at least 8 characters.': '密码至少需要 8 个字符。',
     'We have sent a numeric verification code to your email address at': '我们已向此邮箱发送数字验证码：',
     'COUNTDOWN_SUFFIX': '秒',
-    'Unsupported sign-in step:': '不支持的登录步骤：'
+    'Unsupported sign-in step:': '不支持的登录步骤：',
+    'AUTH_ERROR_GENERIC': '认证失败，请重试。',
+    'AUTH_ERROR_INVALID_CREDENTIALS': '邮箱或密码错误。',
+    'AUTH_ERROR_USER_NOT_CONFIRMED': '账户尚未完成验证，请使用我们发送的验证码完成验证。',
+    'AUTH_ERROR_USERNAME_EXISTS': '该用户名已被占用。',
+    'AUTH_ERROR_USER_NOT_FOUND': '未找到与该邮箱地址对应的账户。',
+    'AUTH_ERROR_CODE_MISMATCH': '验证码不正确。',
+    'AUTH_ERROR_CODE_EXPIRED': '验证码已过期，请重新获取。',
+    'AUTH_ERROR_TOO_MANY_REQUESTS': '请求过于频繁，请稍后再试。',
+    'AUTH_ERROR_TOO_MANY_ATTEMPTS': '失败次数过多，请稍后再试。',
+    'AUTH_ERROR_CODE_DELIVERY_FAILED': '验证码发送失败，请稍后再试。',
+    'AUTH_ERROR_ALREADY_AUTHENTICATED': '您已登录。',
+    'AUTH_ERROR_INVALID_PARAMETER': '输入信息无效，请检查后重试。'
   },
   'zh-Hant': {
     'login': '登入',
@@ -125,10 +147,21 @@ export default {
     'Enter your email': '請輸入您的電子郵件',
     'Invalid Password': '密碼無效',
     'Passwords do not match.': '兩次輸入的密碼不一致。',
-    'Password must be at least 8 characters.': '密碼至少需要 8 個字元。',
     'We have sent a numeric verification code to your email address at': '我們已向此電子郵件地址發送數字驗證碼：',
     'COUNTDOWN_SUFFIX': '秒',
-    'Unsupported sign-in step:': '不支援的登入步驟：'
+    'Unsupported sign-in step:': '不支援的登入步驟：',
+    'AUTH_ERROR_GENERIC': '驗證失敗，請再試一次。',
+    'AUTH_ERROR_INVALID_CREDENTIALS': '電子郵件或密碼錯誤。',
+    'AUTH_ERROR_USER_NOT_CONFIRMED': '帳戶尚未完成驗證，請使用我們發送的驗證碼完成驗證。',
+    'AUTH_ERROR_USERNAME_EXISTS': '此用戶名已被使用。',
+    'AUTH_ERROR_USER_NOT_FOUND': '找不到與該電子郵件地址對應的帳戶。',
+    'AUTH_ERROR_CODE_MISMATCH': '驗證碼不正確。',
+    'AUTH_ERROR_CODE_EXPIRED': '驗證碼已過期，請重新取得。',
+    'AUTH_ERROR_TOO_MANY_REQUESTS': '請求過於頻繁，請稍後再試。',
+    'AUTH_ERROR_TOO_MANY_ATTEMPTS': '失敗次數過多，請稍後再試。',
+    'AUTH_ERROR_CODE_DELIVERY_FAILED': '無法發送驗證碼，請稍後再試。',
+    'AUTH_ERROR_ALREADY_AUTHENTICATED': '您已登入。',
+    'AUTH_ERROR_INVALID_PARAMETER': '輸入資訊無效，請檢查後再試。'
   },
   'ja': {
     'login': 'ログイン',
@@ -169,9 +202,20 @@ export default {
     'Enter your email': 'メールアドレスを入力してください',
     'Invalid Password': '無効なパスワード',
     'Passwords do not match.': 'パスワードが一致しません。',
-    'Password must be at least 8 characters.': 'パスワードは 8 文字以上である必要があります。',
     'We have sent a numeric verification code to your email address at': '次のメールアドレスに数字の確認コードを送信しました:',
     'COUNTDOWN_SUFFIX': '秒',
-    'Unsupported sign-in step:': '未対応のサインイン手順:'
+    'Unsupported sign-in step:': '未対応のサインイン手順:',
+    'AUTH_ERROR_GENERIC': '認証に失敗しました。もう一度お試しください。',
+    'AUTH_ERROR_INVALID_CREDENTIALS': 'メールアドレスまたはパスワードが正しくありません。',
+    'AUTH_ERROR_USER_NOT_CONFIRMED': 'アカウントの確認がまだ完了していません。送信されたコードで確認してください。',
+    'AUTH_ERROR_USERNAME_EXISTS': 'このユーザー名は既に使用されています。',
+    'AUTH_ERROR_USER_NOT_FOUND': 'そのメールアドレスに対応するアカウントが見つかりません。',
+    'AUTH_ERROR_CODE_MISMATCH': '確認コードが正しくありません。',
+    'AUTH_ERROR_CODE_EXPIRED': '確認コードの有効期限が切れています。新しいコードをリクエストしてください。',
+    'AUTH_ERROR_TOO_MANY_REQUESTS': 'リクエストが多すぎます。しばらく待ってからやり直してください。',
+    'AUTH_ERROR_TOO_MANY_ATTEMPTS': '失敗回数が多すぎます。しばらく待ってからやり直してください。',
+    'AUTH_ERROR_CODE_DELIVERY_FAILED': '確認コードを送信できませんでした。しばらくしてからもう一度お試しください。',
+    'AUTH_ERROR_ALREADY_AUTHENTICATED': 'すでにサインインしています。',
+    'AUTH_ERROR_INVALID_PARAMETER': '入力内容が正しくありません。確認してからやり直してください。'
   }
 }
diff --git a/packages/ui/src/amplify/ui.tsx b/packages/ui/src/amplify/ui.tsx
@@ -9,6 +9,7 @@ import { AuthFormRootContext, t, useAuthFormState } from './core'
 import * as Auth from 'aws-amplify/auth'
 import { Skeleton } from '@/components/ui/skeleton'
 import * as React from 'react'
+import { getAuthErrorMessageKey } from './errors'
 
 function ErrorTip({ error, removeError }: {
   error: string | { variant?: 'warning' | 'destructive', title?: string, message: string | any },
@@ -108,6 +109,10 @@ function validatePasswordPolicy(password: string) {
   }
 }
 
+function getAuthErrorMessage(error: unknown) {
+  return t(getAuthErrorMessageKey(error))
+}
+
 function useCountDown() {
   const [countDownNum, setCountDownNum] = useState<number>(0)
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
@@ -238,7 +243,7 @@ export function LoginForm() {
             throw new Error(`${t('Unsupported sign-in step:')} ${nextStep}`)
         }
       } catch (e) {
-        setErrors({ password: { message: (e as Error).message, title: t('Bad Response.') } })
+        setErrors({ password: { message: getAuthErrorMessage(e), title: t('Bad Response.') } })
         console.error(e)
       } finally {
         setLoading(false)
@@ -349,7 +354,7 @@ export function SignupForm() {
           }
         } catch (e: any) {
           console.error(e)
-          const error = { title: t('Bad Response.'), message: (e as Error).message }
+          const error = { title: t('Bad Response.'), message: getAuthErrorMessage(e) }
           let k = 'confirm_password'
           if (e.name === 'UsernameExistsException') {
             k = 'username'
@@ -434,21 +439,25 @@ export function ResetPasswordForm() {
             setIsSentCode(true)
           } catch (error) {
             console.error('Error sending reset code:', error)
-            setErrors({ email: { message: (error as Error).message, title: t('Bad Response.') } })
+            setErrors({ email: { message: getAuthErrorMessage(error), title: t('Bad Response.') } })
           } finally {
             setLoading(false)
           }
         } else {
           // confirm reset password
-          if ((data.password as string)?.length < 8) {
+          try {
+            validatePasswordPolicy(data.password as string)
+          } catch (error) {
             setErrors({
               password: {
-                message: t('Password must be at least 8 characters.'),
+                message: (error as Error).message,
                 title: t('Invalid Password')
               }
             })
             return
-          } else if (data.password !== data.confirm_password) {
+          }
+
+          if (data.password !== data.confirm_password) {
             setErrors({
               confirm_password: {
                 message: t('Passwords do not match.'),
@@ -469,7 +478,7 @@ export function ResetPasswordForm() {
               setCurrentTab('login')
             } catch (error) {
               console.error('Error confirming reset password:', error)
-              setErrors({ 'confirm_password': { message: (error as Error).message, title: t('Bad Response.') } })
+              setErrors({ 'confirm_password': { message: getAuthErrorMessage(error), title: t('Bad Response.') } })
             } finally {
               setLoading(false)
             }
@@ -490,7 +499,7 @@ export function ResetPasswordForm() {
                 console.debug('[Auth] reset pw code re-sent: ', ret)
               } catch (error) {
                 console.error('Error resending reset code:', error)
-                setErrors({ email: { message: (error as Error).message, title: t('Bad Response.') } })
+                setErrors({ email: { message: getAuthErrorMessage(error), title: t('Bad Response.') } })
               } finally {}
             }} className={'text-sm opacity-70 hover:opacity-90 underline absolute top-3 right-0 select-none'}>
               {t('Resend code')}
@@ -600,7 +609,7 @@ export function ConfirmWithCodeForm(
             console.debug('confirmSignIn: ', ret)
           }
         } catch (e) {
-          setErrors({ code: { message: (e as Error).message, title: t('Bad Response.') } })
+          setErrors({ code: { message: getAuthErrorMessage(e), title: t('Bad Response.') } })
           console.error(e)
         } finally {
           setLoading(false)
@@ -643,7 +652,7 @@ export function ConfirmWithCodeForm(
                 // await Auth.resendSignInCode(props.user)
               }
             } catch (e) {
-              setErrors({ code: { message: (e as Error).message, title: t('Bad Response.') } })
+              setErrors({ code: { message: getAuthErrorMessage(e), title: t('Bad Response.') } })
               setCountDownNum(0)
               console.error(e)
             } finally {}
diff --git a/packages/ui/src/i18n.test.mts b/packages/ui/src/i18n.test.mts
@@ -2,6 +2,7 @@ import test from 'node:test'
 import assert from 'node:assert/strict'
 
 import { setLocale, setNSDicts, setTranslate, translate } from './i18n'
+import { getAuthErrorMessageKey } from './amplify/errors'
 
 test('translate uses the selected locale when the namespace dict contains it', () => {
   setTranslate((locale, dicts, key, ...args) => dicts[locale]?.[key] ?? args[0] ?? key)
@@ -34,3 +35,14 @@ test('translate falls back to English when the current locale dict has no corres
 
   assert.equal(translate('fallback', 'greeting'), 'Hello')
 })
+
+test('getAuthErrorMessageKey maps common Cognito errors to localized keys', () => {
+  assert.equal(getAuthErrorMessageKey({ name: 'NotAuthorizedException' }), 'AUTH_ERROR_INVALID_CREDENTIALS')
+  assert.equal(getAuthErrorMessageKey({ name: 'CodeMismatchException' }), 'AUTH_ERROR_CODE_MISMATCH')
+  assert.equal(getAuthErrorMessageKey({ name: 'InvalidPasswordException' }), 'PW_POLICY_TIP')
+})
+
+test('getAuthErrorMessageKey falls back to a generic localized key for unknown errors', () => {
+  assert.equal(getAuthErrorMessageKey({ name: 'SomethingUnexpected' }), 'AUTH_ERROR_GENERIC')
+  assert.equal(getAuthErrorMessageKey(new Error('plain error')), 'AUTH_ERROR_GENERIC')
+})
