Login should work now!

lib/bigcommerce/api/customers/handlers/login.ts

@@ -1,6 +1,9 @@
+import { FetcherError } from '@lib/commerce/utils/errors'
 import login from '../../operations/login'
 import type { LoginHandlers } from '../login'
 
+const invalidCredentials = /invalid credentials/i
+
 const loginHandler: LoginHandlers['login'] = async ({
   res,
   body: { email, password },
@@ -17,7 +20,28 @@ const loginHandler: LoginHandlers['login'] = async ({
   // Passwords must be at least 7 characters and contain both alphabetic
   // and numeric characters.
 
-  await login({ variables: { email, password }, config, res })
+  try {
+    await login({ variables: { email, password }, config, res })
+  } catch (error) {
+    // Check if the email and password didn't match an existing account
+    if (
+      error instanceof FetcherError &&
+      invalidCredentials.test(error.message)
+    ) {
+      return res.status(401).json({
+        data: null,
+        errors: [
+          {
+            message:
+              'Cannot find an account that matches the provided credentials',
+            code: 'invalid_credentials',
+          },
+        ],
+      })
+    }
+
+    throw error
+  }
 
   res.status(200).json({ data: null })
 }

lib/bigcommerce/api/utils/fetch-graphql-api.ts

@@ -1,3 +1,4 @@
+import { FetcherError } from '@lib/commerce/utils/errors'
 import type { GraphQLFetcher } from 'lib/commerce/api'
 import { getConfig } from '..'
 import log from '@lib/logger'
@@ -25,8 +26,10 @@ const fetchGraphqlApi: GraphQLFetcher = async (
 
   const json = await res.json()
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch BigCommerce API')
+    throw new FetcherError({
+      errors: json.errors ?? [{ message: 'Failed to fetch Bigcommerce API' }],
+      status: res.status,
+    })
   }
 
   return { data: json.data, res }

pages/login.tsx

@@ -1,9 +1,11 @@
 import useSignup from '@lib/bigcommerce/use-signup'
 import { Layout } from '@components/core'
 import { Logo, Modal, Button } from '@components/ui'
+import useLogin from '@lib/bigcommerce/use-login'
 
 export default function Login() {
   const signup = useSignup()
+  const login = useLogin()
   // TODO: use this method. It can take more than 5 seconds to do a signup
   const handleSignup = async () => {
     // TODO: validate the password and email before calling the signup
@@ -21,6 +23,25 @@ export default function Login() {
       if (error.code === 'duplicated_email') {
         // TODO: handle duplicated email
       }
+      // Show a generic error saying that something bad happened, try again later
+    }
+  }
+
+  const handleLogin = async () => {
+    // TODO: validate the password and email before calling the signup
+    // Passwords must be at least 7 characters and contain both alphabetic
+    // and numeric characters.
+    try {
+      await login({
+        email: 'luis@vercel.com',
+        // This is an invalid password so it will throw the "invalid_credentials" error
+        password: 'luis1234', // will work with `luis123`
+      })
+    } catch (error) {
+      if (error.code === 'invalid_credentials') {
+        // The email and password didn't match an existing account
+      }
+      // Show a generic error saying that something bad happened, try again later
     }
   }