show login error message

src/contexts/UserContext/index.tsx

@@ -6,6 +6,7 @@ import { IRegion, IUser } from '../../types';
 import { toast } from 'react-toastify';
 import UserService from '@/services/user';
 import { useTranslation } from 'react-i18next';
+import { throws } from 'assert';
 
 export type UserContextProps = {
   login: (prop: { email: string; code: string }) => Promise<void>;
@@ -51,10 +52,15 @@ const UserContextProvider = ({ children }: Props) => {
   }, [user]);
 
   const handleLogin = async (props: { email: string; code: string }) => {
-    const response = await AuthService.login(props);
-    setUser(response.data);
-    StorageService.setUser(response.data);
-    StorageService.setAccessToken(response.headers.token || '');
+    try {
+      const response = await AuthService.login(props);
+      setUser(response.data);
+      StorageService.setUser(response.data);
+      StorageService.setAccessToken(response.headers.token || '');
+    } catch (err: any) {
+      console.log({ err });
+      throw err;
+    }
   };
 
   const handleUpdateUser = async (userToUpdate: Partial<IUser & { currentPassword?: string }>) => {

src/pages/Login/index.tsx

@@ -15,10 +15,10 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react';
+import { AxiosError } from 'axios';
 import React, { useContext, useState } from 'react';
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { CloseButton } from 'react-toastify/dist/components';
 
 const defaultValues = {
   email: '',
@@ -46,7 +46,9 @@ const Login: React.FC = () => {
         setShowOTP(true);
       }
     } catch (err: any) {
-      if (showOTP) {
+      if ((err as AxiosError).response?.status === 400) {
+        setError((err as AxiosError<any>).response?.data?.error || 'Error');
+      } else if (showOTP) {
         setError(t('Login.invalid-code') || '');
       } else {
         setError(t('Login.invalid-email') || '');

src/services/index.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import StorageService from './storage/storage.service';
 
 const config = {
@@ -15,17 +15,21 @@ _axios.interceptors.request.use(
     }
     return config;
   },
-  (error) => error,
+  (error) => {
+    console.log({ error });
+    return error;
+  },
 );
 
 _axios.interceptors.response.use(
   (response) => response,
-  (error) => {
+  (error: AxiosError) => {
     if (error.response?.status === 401) {
       StorageService.cleanStorage();
       location.reload();
     }
-    throw new Error(error);
+
+    throw error;
   },
 );