Show signin and signup errors on form

src/components/dialog/content/SignInContent.vue

@@ -32,12 +32,16 @@
       </Message>
 
       <!-- Form -->
-      <SignInForm v-if="isSignIn" @submit="signInWithEmail" />
+      <SignInForm
+        v-if="isSignIn"
+        :auth-error="authError"
+        @submit="signInWithEmail"
+      />
       <template v-else>
         <Message v-if="userIsInChina" severity="warn" class="mb-4">
           {{ t('auth.signup.regionRestrictionChina') }}
         </Message>
-        <SignUpForm v-else @submit="signUpWithEmail" />
+        <SignUpForm v-else :auth-error="authError" @submit="signUpWithEmail" />
       </template>
 
       <!-- Divider -->
@@ -164,32 +168,62 @@ const authActions = useFirebaseAuthActions()
 const isSecureContext = window.isSecureContext
 const isSignIn = ref(true)
 const showApiKeyForm = ref(false)
+const authError = ref('')
 
 const toggleState = () => {
   isSignIn.value = !isSignIn.value
   showApiKeyForm.value = false
+  authError.value = ''
+}
+
+// Custom error handler for inline display
+const inlineErrorHandler = (error: unknown) => {
+  // Set inline error
+  if (error instanceof Error) {
+    authError.value = error.message || t('g.unknownError')
+  } else {
+    authError.value = t('g.unknownError')
+  }
+  // Also show toast (original behavior)
+  authActions.reportError(error)
 }
 
 const signInWithGoogle = async () => {
-  if (await authActions.signInWithGoogle()) {
+  authError.value = ''
+  if (await authActions.signInWithGoogle(inlineErrorHandler)()) {
     onSuccess()
   }
 }
 
 const signInWithGithub = async () => {
-  if (await authActions.signInWithGithub()) {
+  authError.value = ''
+  if (await authActions.signInWithGithub(inlineErrorHandler)()) {
     onSuccess()
   }
 }
 
 const signInWithEmail = async (values: SignInData) => {
-  if (await authActions.signInWithEmail(values.email, values.password)) {
+  authError.value = ''
+  if (
+    await authActions.signInWithEmail(
+      values.email,
+      values.password,
+      inlineErrorHandler
+    )()
+  ) {
     onSuccess()
   }
 }
 
 const signUpWithEmail = async (values: SignUpData) => {
-  if (await authActions.signUpWithEmail(values.email, values.password)) {
+  authError.value = ''
+  if (
+    await authActions.signUpWithEmail(
+      values.email,
+      values.password,
+      inlineErrorHandler
+    )()
+  ) {
     onSuccess()
   }
 }

src/components/dialog/content/signin/SignInForm.vue

@@ -59,6 +59,11 @@
       }}</small>
     </div>
 
+    <!-- Auth Error Message -->
+    <Message v-if="authError" severity="error">
+      {{ authError }}
+    </Message>
+
     <!-- Submit Button -->
     <ProgressSpinner v-if="loading" class="w-8 h-8" />
     <Button
@@ -75,6 +80,7 @@ import { Form, FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
 import Password from 'primevue/password'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
@@ -92,6 +98,10 @@ const toast = useToast()
 
 const { t } = useI18n()
 
+defineProps<{
+  authError?: string
+}>()
+
 const emit = defineEmits<{
   submit: [values: SignInData]
 }>()

src/components/dialog/content/signin/SignUpForm.vue

@@ -49,6 +49,11 @@
       }}</small>
     </FormField>
 
+    <!-- Auth Error Message -->
+    <Message v-if="authError" severity="error">
+      {{ authError }}
+    </Message>
+
     <!-- Submit Button -->
     <Button
       type="submit"
@@ -64,6 +69,7 @@ import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
 import { useI18n } from 'vue-i18n'
 
 import { type SignUpData, signUpSchema } from '@/schemas/signInSchema'
@@ -72,6 +78,10 @@ import PasswordFields from './PasswordFields.vue'
 
 const { t } = useI18n()
 
+defineProps<{
+  authError?: string
+}>()
+
 const emit = defineEmits<{
   submit: [values: SignUpData]
 }>()

src/composables/auth/useFirebaseAuthActions.ts

@@ -100,27 +100,33 @@ export const useFirebaseAuthActions = () => {
     return await authStore.fetchBalance()
   }, reportError)
 
-  const signInWithGoogle = wrapWithErrorHandlingAsync(async () => {
+  const signInWithGoogle = (errorHandler = reportError) =>
-    return await authStore.loginWithGoogle()
+    wrapWithErrorHandlingAsync(async () => {
-  }, reportError)
+      return await authStore.loginWithGoogle()
+    }, errorHandler)
 
-  const signInWithGithub = wrapWithErrorHandlingAsync(async () => {
+  const signInWithGithub = (errorHandler = reportError) =>
-    return await authStore.loginWithGithub()
+    wrapWithErrorHandlingAsync(async () => {
-  }, reportError)
+      return await authStore.loginWithGithub()
+    }, errorHandler)
 
-  const signInWithEmail = wrapWithErrorHandlingAsync(
+  const signInWithEmail = (
-    async (email: string, password: string) => {
+    email: string,
+    password: string,
+    errorHandler = reportError
+  ) =>
+    wrapWithErrorHandlingAsync(async () => {
       return await authStore.login(email, password)
-    },
+    }, errorHandler)
-    reportError
-  )
 
-  const signUpWithEmail = wrapWithErrorHandlingAsync(
+  const signUpWithEmail = (
-    async (email: string, password: string) => {
+    email: string,
+    password: string,
+    errorHandler = reportError
+  ) =>
+    wrapWithErrorHandlingAsync(async () => {
       return await authStore.register(email, password)
-    },
+    }, errorHandler)
-    reportError
-  )
 
   const updatePassword = wrapWithErrorHandlingAsync(
     async (newPassword: string) => {
@@ -146,6 +152,7 @@ export const useFirebaseAuthActions = () => {
     signInWithEmail,
     signUpWithEmail,
     updatePassword,
-    accessError
+    accessError,
+    reportError
   }
 }