jwt auth between frontend and backend

src/pages/LoginPage/LoginPage.js

-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Field, Form, Formik } from 'formik';
 import { useDispatch, useSelector } from 'react-redux';
 import TextField from '../../components/InputFields/TextField';
 import Auth from '../../components/Auth/Auth';
 import AuthCard from '../../components/AuthCards/AuthCard';
-import {
-  clearLoginErrors,
-  fetchUser,
-} from '../../store/actions/login/loginActions';
-import {
-  selectLoginError,
-} from '../../store/selectors/loginSelectors';
-import {
-  FORGOT_PASSWORD_PAGE, HOME_PAGE,
-} from '../../constants/pages';
+import {clearLoginErrors,fetchUser} from '../../store/actions/login/loginActions';
+import {selectLoginError} from '../../store/selectors/loginSelectors';
+import {FORGOT_PASSWORD_PAGE, HOME_PAGE,} from '../../constants/pages';
 import { selectIsLoadingByActionType } from '../../store/selectors/loadingSelectors';
 import { LOGIN_USER_LOADING } from '../../store/actions/login/loginActionConstants';
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
-  const error = useSelector(selectLoginError);
+  const error = useSelector(selectLoginError); 
 
   // When user refreshes page
   // useEffect(() => {
   const isLoading = useSelector(
     selectIsLoadingByActionType(LOGIN_USER_LOADING),
   );
-  const handleApiResponseSuccess =()=>{
+
+  const handleApiResponseSuccess = () => {
     history.push({
       pathname: HOME_PAGE,
       state: {
       },
     });
   }
+
   const handleSubmit = (values) => {
-      // destructure value as username.
-      const { username: Username } = values;
-      const { password: Password } = values;
+      const { username,password } = values;
       dispatch(clearLoginErrors());
       dispatch(
         fetchUser({
-          Username,
-          Password,
-          handleApiResponseSuccess
+          username,
+          password,
+          handleApiResponseSuccess,
         },
         ),
       );
 
   return (
     <Auth>
+      {isError && <p>Error</p>}
     <AuthCard
       title="Log In"
       isLoading={isLoading}

src/request/apiEndpoints.js

 export default {
-  accounts: {
-    get: 'accounts/{accountUid}',
-    getCurrentUserPermissions:
-      'accounts/{currentAccountUid}/users/{currentUserUid}/permissions',
-    getAddresses: 'accounts/{accountUid}/addresses',
-    updateAddress: 'account/{accountUid}/addresses/{addressUid}',
-    deleteAddress: 'accounts/{accountUid}/addresses/{addressUid}',
-    getUsers: 'accounts/{accountUid}/users',
-    createUser: 'accounts/{accountUid}/users',
-    updateUser: 'account/{accountUid}/users/{userUid}?actionType={actionType}',
-    deleteUser: 'accounts/{accountUid}/users/{userUid}',
-    getSettings: 'accounts/{accountUid}/settings',
-    getIraSettings: 'accounts/{accountUid}/iraSettings',
-    getSettingsRegistration: 'application/settings',
-    agreement: 'accounts/agreement',
-  },
   authentications: {
-    getUsernames: 'authenticate/usernames',
-    login: 'authenticate',
-    getUserSecurityQuestion: 'users/username/securityquestion',
-    confirmSecurityQuestion: 'authenticate/confirm',
-    confirmForgotPassword: 'users/passwords/reset_token',
-    resetPassword: 'users/passwords',
-    refreshToken: '/authenticate/refresh',
-    generateToken: '/authenticate/generate',
-    authenticate:
-      '/authenticate?fp={fp}&offer={offer}&landingPageUrl={landingPageUrl}&registrationFlowType={registrationFlowType}',
-    confirmAuthentication:
-      '/authenticate/confirm?fp={fp}&offer={offer}&landingPageUrl={landingPageUrl}&registrationFlowType={registrationFlowType}',
-  },
-  bankAccounts: {
-    get: 'accounts/{accountUid}/bankaccounts',
-    getBankAccount:
-      'accounts/{accountUid}/bankaccounts/{bankAccountUid}?type={type}',
-    getBankAccountsByType:
-      'accounts/{accountUid}/bankaccounts?type={type}&active=true',
-    getBankDetailsByRoutingNumber: 'banks/{routingNumber}',
-    newAccount: 'accounts/{accountUid}/bankaccounts',
-    deleteAccount:
-      'accounts/{accountUid}/bankaccounts/{bankAccountUid}?type={type}',
-    verify: '/accounts/{accountUid}/bankaccountverification/{bankAccountUid}',
-    postBankAccountRegistration: '/accounts/{applicationUid}/bankaccounts',
-    getRegistration: 'banks/{applicationUid}/bankaccounts',
-  },
-  documents: {
-    getDocuments: 'accounts/{accountUid}/documents?year={year}',
-    getDocument: 'accounts/{accountUid}/documents/{documentType}',
-  },
-  countries: '/countries',
-  metalStream: {
-    getMetalStreamSettings: 'accounts/{accountUid}/metalstream',
-    getMetalStreamFundings: 'applications/{applicationUid}/metalStreamFunding',
-  },
-  orders: {
-    buyForStorage: '/accounts/{accountUid}/orders/buyForStorage',
-    buyForDelivery: '/accounts/{accountUid}/orders/buyForDelivery',
-    verifyBuyForDelivery: '/accounts/{accountUid}/orders/buyForDelivery/verify',
-    sellFromStorage: '/accounts/{accountUid}/orders/sellFromStorage',
-    fractionalConversion: '/accounts/{accountUid}/orders/fractionalConversion',
-    deliverFromStorageVerify:
-      '/accounts/{accountUid}/orders/deliverFromStorage/verify',
-    deliverFromStorage: '/accounts/{accountUid}/orders/deliverFromStorage',
-    iraCashDistribution: '/accounts/{accountUid}/orders/iraCashDistribution',
-    iraCashTransfer: '/accounts/{accountUid}/orders/iraCashTransfer',
-    iraFeeWithdrawal: 'accounts/{accountUid}/orders/iraFeeWithdrawal',
-    achDeposit: 'accounts/{accountUid}/orders/achDeposit',
-    wireWithdrawal: '/accounts/{accountUid}/orders/wireWithdrawal',
-    checkWithdrawal: '/accounts/{accountUid}/orders/checkWithdrawal',
-  },
-  portfolio: {
-    getPortfolioValuations: 'accounts/{accountUid}/portfolio/valuations',
-    getPortfolioMetalPrices: 'marketprices',
-    getPortfolioHoldings:
-      'accounts/{accountUid}/portfolio/products?valuation=true',
-    getPortfolioProductCodes: '/accounts/{accountUid}/portfolio/productcodes',
-    getPortfolioBalances: '/accounts/{accountUid}/portfolio/balances',
-    getPortfolioProductBySymbol:
-      '/accounts/{accountUid}/portfolio/products/{symbol}',
-    getPortfolioTransactions: '/accounts/{accountUid}/transactions',
-    getPortfolioSingleTransaction:
-      '/accounts/{accountUid}/transactions/{transactionUid}',
-    getProductPortoflioTransactions: 'accounts/{accountUid}/transactions',
-    getRecentPortfolioTransactions:
-      'accounts/{accountUid}/transactions?content=Recent',
-    getFinancialPortfolioTransactions: 'accounts/{accountUid}/transactions',
-    getFinancialPortfolioPendingTransactions:
-      'accounts/{accountUid}/transactions/fundinghistory',
-    patchFinancialPortfolioPendingTransactions:
-      '/accounts/{accountUid}/transactions/fundinghistory/{depositKey}',
-  },
-  products: {
-    getPrices: '/accounts/{accountUid}/products/prices',
-    prices: 'accounts/{accountUid}/products/prices?side={side}',
-    tiers:
-      '/accounts/{accountUid}/products/prices/{symbol}/tiers?side={side}&location={location}',
-    symbolPrices: '/accounts/{accountUid}/products/{symbol}/prices?side={side}',
-    getPricesRegistration: 'applications/{applicationUid}/products/prices',
-  },
-  settings: {
-    get: 'settings',
-  },
-  taxForms: {
-    getTaxForms: 'settings/taxForms/{applicationType}',
-  },
-  users: {
-    getAccounts: '/users/{userUid}/accounts',
-    getRegistrationAccounts: '/users/{userUid}/accounts',
-    updateUser: '/users/{userUid}?updateUserActionType={actionType}',
-    updateUserPassword: '/users/{userUid}/passwords',
-    logout: '/users/{userUid}/logout',
-    getUsernames: '/users/email',
-    createUser:
-      '/users?fp={fp}&offer={offer}&landingPageUrl={landingPageUrl}&registrationFlowType={registrationFlowType}',
-    updateUserRegistration: '/users/{userUid}',
-    invite: '/users/invite',
-  },
-  applications: {
-    application: '/applications/{applicationUid}',
-    addPerson: '/applications/{applicationUid}/persons',
-    updatePerson: '/applications/{applicationUid}/persons/{personUid}',
-    addPersonWithGiftState:
-      '/applications/{applicationUid}/UTMA/persons?giftState={giftState}',
-    updatePersonWithGiftState:
-      '/applications/{applicationUid}/UTMA/persons/{personUid}?giftState={giftState}',
-    addPersonWithCompanyName:
-      '/applications/{applicationUid}/IRA/persons?companyName={companyName}',
-    updatePersonWithCompanyName:
-      '/applications/{applicationUid}/IRA/persons/{personUid}?companyName={companyName}',
-    submitLegalEntity: '/applications/{applicationUid}/legalEntities',
-    updateLegalEntity:
-      '/applications/{applicationUid}/legalEntities/{personUid}',
-    postNonIraFunding: '/applications/{applicationUid}/funding',
-    postIraFunding: '/applications/{applicationUid}/iraFunding',
-    postMSFunding: '/applications/{applicationUid}/metalStreamFunding',
-    consent: '/applications/{applicationUid}/consents',
-    updateConsent: `/applications/{applicationUid}/consents/{agreementConsentUid}`,
-    submitMetalStreamRegistration:
-      '/applications/{applicationUid}/metalStreamFunding',
-  },
-  common: {
-    getCountries: '/countries/',
-    getTaxForms: '/taxForms/',
-    getContributionYears: 'contributionYears',
-    getCountryStates: '/countries/{iso3CountryCode}/states/',
-    getSecurityQuestions: '/registration/securityQuestions/',
-    getPortalSecurityQuestions: '/securityQuestions',
-  },
-  plaid: {
-    getToken: '/bankaccounts/createplaidlinktoken',
-  },
-  affiliate: {
-    setCookie: '/affiliate/picture',
-    setFingerprint: '/affiliate/fingerprint',
+    login: 'http://localhost:26081/v1/users/authenticate',
   },
 };

src/store/saga/loginSaga.js

     }
   } catch (e) {
     if (e.response && e.response.data) {
-      if (payload.handleApiResponseSuccess) {
-        yield call(payload.handleApiResponseSuccess);
-      }
+      // if (payload.handleApiResponseFailed) {
+      //   yield call(payload.handleApiResponseFailed);
+      // }
       const errorMessage = yield call(rejectErrorCodeHelper, e);
       yield put(fetchUserError(errorMessage));
     }