Show form error if login credentials are incorrect (#190)

* fix: show form error if login credentials are incorrect * fix: have sign up emit errors as well
stripe · Oct 23, 2024 · 6bed31d · 6bed31d
1 parent e4f5e97
commit 6bed31d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/app/(auth)/login/form.tsx b/app/(auth)/login/form.tsx
@@ -36,15 +36,26 @@ export default function LoginForm() {
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
     try {
-      await signIn('login', {
+      const result = await signIn('login', {
         email: values.email,
         password: values.password,
         redirect: false,
       });
 
-      router.push('/home');
+      if (result?.error) {
+        form.setError('root', {
+          type: 'manual',
+          message: 'Invalid email or password. Please try again.',
+        });
+      } else if (result?.ok) {
+        router.push('/home');
+      }
     } catch (error: any) {
       console.error('An error occurred when signing in', error);
+      form.setError('root', {
+        type: 'manual',
+        message: 'An unexpected error occurred. Please try again.',
+      });
     }
   };
 
@@ -108,6 +119,11 @@ export default function LoginForm() {
             </>
           )}
         </Button>
+        {form.formState.errors.root && (
+          <p className="text-sm text-red-500">
+            {form.formState.errors.root.message}
+          </p>
+        )}
       </form>
     </Form>
   );

diff --git a/app/(auth)/signup/form.tsx b/app/(auth)/signup/form.tsx
@@ -36,13 +36,21 @@ export default function SignupForm() {
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
     try {
-      await signIn('signup', {
+      const result = await signIn('signup', {
         email: values.email,
         password: values.password,
         redirect: false,
       });
 
-      router.push('/business');
+      if (result?.error) {
+        // Just assume the error is because the email is already in use
+        form.setError('root', {
+          type: 'manual',
+          message: 'The email is already in use.',
+        });
+      } else if (result?.ok) {
+        router.push('/business');
+      }
     } catch (error: any) {
       console.error('An error occurred when signing in', error);
     }
@@ -106,6 +114,11 @@ export default function SignupForm() {
             </div>
           )}
         </Button>
+        {form.formState.errors.root && (
+          <p className="text-sm text-red-500">
+            {form.formState.errors.root.message}
+          </p>
+        )}
       </form>
     </Form>
   );