refactoring: authentication with react-query.

2026-02-16 21:00:31 +00:00 · 2021-02-20 15:33:20 +02:00
parent 8f680e2068
commit a079f711d4
57 changed files with 1629 additions and 1290 deletions
--- a/client/src/hooks/query/accounts.js
+++ b/client/src/hooks/query/accounts.js
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';

 // Transform the account.
 const transformAccount = (response) => {
@@ -11,9 +11,11 @@ const transformAccount = (response) => {
 * Retrieve accounts list.
 */
 export function useAccounts(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['ACCOUNTS', query],
-    () => ApiService.get('accounts', { params: query }),
+    () => apiRequest.get('accounts', { params: query }),
    {
      select: (response) => {
        return response.data.accounts;
@@ -32,9 +34,11 @@ export function useAccounts(query, props) {
 * @param {number} id -
 */
 export function useAccount(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['ACCOUNT', id],
-    () => ApiService.get(`accounts/${id}`).then(transformAccount),
+    () => apiRequest.get(`accounts/${id}`).then(transformAccount),
    props,
  );
  return {
@@ -47,9 +51,11 @@ export function useAccount(id, props) {
 * Retrieve accounts types list.
 */
 export function useAccountsTypes(props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['ACCOUNTS_TYPES'],
-    () => ApiService.get('account_types'),
+    () => apiRequest.get('account_types'),
    {
      select: (res) => res.data.account_types,
      ...props,
@@ -66,8 +72,9 @@ export function useAccountsTypes(props) {
 */
 export function useCreateAccount(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('accounts', values), {
+  return useMutation((values) => apiRequest.post('accounts', values), {
    onSuccess: () => {
      client.invalidateQueries('ACCOUNTS');
    },
@@ -80,9 +87,10 @@ export function useCreateAccount(props) {
 */
 export function useEditAccount(props) {
  const query = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id,values]) => ApiService.post(`accounts/${id}`, values),
+    ([id, values]) => apiRequest.post(`accounts/${id}`, values),
    {
      onSuccess: () => {
        query.invalidateQueries('ACCOUNTS');
@@ -97,8 +105,9 @@ export function useEditAccount(props) {
 */
 export function useDeleteAccount(props) {
  const query = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`accounts/${id}`), {
+  return useMutation((id) => apiRequest.delete(`accounts/${id}`), {
    onSuccess: () => {
      query.invalidateQueries('ACCOUNTS');
    },
@@ -111,8 +120,9 @@ export function useDeleteAccount(props) {
 */
 export function useActivateAccount(props) {
  const query = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`accounts/${id}/activate`), {
+  return useMutation((id) => apiRequest.post(`accounts/${id}/activate`), {
    onSuccess: () => {
      query.invalidateQueries('ACCOUNTS');
    },
@@ -125,8 +135,9 @@ export function useActivateAccount(props) {
 */
 export function useInactivateAccount(props) {
  const query = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`accounts/${id}/inactivate`), {
+  return useMutation((id) => apiRequest.post(`accounts/${id}/inactivate`), {
    onSuccess: () => {
      query.invalidateQueries('ACCOUNTS');
    },
--- a/client/src/hooks/query/authentication.js
+++ b/client/src/hooks/query/authentication.js
@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { useMutation } from 'react-query';
+import useApiRequest from '../useRequest';
+import { useAuthActions } from '../state';
+
+/**
+ * Authentication login.
+ */
+export const useAuthLogin = (props) => {
+  const { setLogin } = useAuthActions();
+  const apiRequest = useApiRequest();
+
+  const states = useMutation(
+    (values) => apiRequest.post('auth/login', values),
+    {
+      select: (res) => res.data,
+      ...props
+    }
+  );
+  const { isSuccess, data: response } = states;
+
+  useEffect(() => {
+    if (isSuccess) { setLogin(response.data); }
+  }, [isSuccess, response, setLogin]);
+
+  return states;
+};
+
+/**
+ * Authentication register.
+ */
+export const useAuthRegister = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('auth/register', values),
+    props,
+  )
+};
+
+/**
+ * Authentication send reset password.
+ */
+export const useAuthSendResetPassword = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (email) => apiRequest.post('auth/send_reset_password', email),
+    props
+  );
+}
+
+/**
+ * Authentication reset password.
+ */
+export const useAuthResetPassword = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([token, values]) => apiRequest.post(`auth/reset/${token}`, values),
+    props,
+  )
+}
--- a/client/src/hooks/query/bills.js
+++ b/client/src/hooks/query/bills.js
@@ -1,15 +1,16 @@
 import { useQueryClient, useQuery, useMutation } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 /**
 * Creates a new sale invoice.
 */
 export function useCreateBill(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('purchases/bills', values), {
+  return useMutation((values) => apiRequest.post('purchases/bills', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('BILLS');
      queryClient.invalidateQueries('BILL');
@@ -23,9 +24,10 @@ export function useCreateBill(props) {
 */
 export function useEditBill(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`purchases/bills/${id}`, values),
+    ([id, values]) => apiRequest.post(`purchases/bills/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('BILLS');
@@ -41,8 +43,9 @@ export function useEditBill(props) {
 */
 export function useDeleteBill(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`purchases/bills/${id}`), {
+  return useMutation((id) => apiRequest.delete(`purchases/bills/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('BILLS');
      queryClient.invalidateQueries('BILL');
@@ -55,10 +58,12 @@ export function useDeleteBill(props) {
 * Retrieve sale invoices list with pagination meta.
 */
 export function useBills(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['BILLS', query],
    () =>
-      ApiService.get('purchases/bills', { params: query }),
+      apiRequest.get('purchases/bills', { params: query }),
    {
      select: (response) => ({
        bills: response.data.bills,
@@ -88,9 +93,11 @@ export function useBills(query, props) {
 * @param {number} id - Bill id.
 */
 export function useBill(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['BILL', id],
-    () => ApiService.get(`/purchases/bills/${id}`),
+    () => apiRequest.get(`/purchases/bills/${id}`),
    {
      select: (res) => res.data.bill,
      ...props,
@@ -108,9 +115,10 @@ export function useBill(id, props) {
 */
 export function useOpenBill(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`purchases/bills/${id}/open`),
+    (id) => apiRequest.delete(`purchases/bills/${id}/open`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('BILLS');
@@ -125,10 +133,12 @@ export function useOpenBill(props) {
 * @param {number} vendorId -
 */
 export function useDueBills(vendorId, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['BILLS_DUE', vendorId],
    () =>
-      ApiService.get(`purchases/bills/due`, {
+      apiRequest.get(`purchases/bills/due`, {
        params: { vendor_id: vendorId },
      }),
    {
--- a/client/src/hooks/query/currencies.js
+++ b/client/src/hooks/query/currencies.js
@@ -1,22 +1,20 @@
 import { useMutation, useQueryClient, useQuery } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';

 /**
 * Create a new currency.
 */
 export function useCreateCurrency(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation(
-    (values) => ApiService.post('currencies', values),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries('CURRENCIES');
-      },
-      ...props,
-    }
-  );
+  return useMutation((values) => apiRequest.post('currencies', values), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('CURRENCIES');
+    },
+    ...props,
+  });
 }

 /**
@@ -24,15 +22,17 @@ export function useCreateCurrency(props) {
 */
 export function useEditCurrency(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation(([currencyCode, values]) =>
-    ApiService.post(`currencies/${currencyCode}`, values),
+  return useMutation(
+    ([currencyCode, values]) =>
+      apiRequest.post(`currencies/${currencyCode}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('CURRENCIES');
      },
      ...props,
-    }
+    },
  );
 }

@@ -41,15 +41,16 @@ export function useEditCurrency(props) {
 */
 export function useDeleteCurrency(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((currencyCode) =>
-    ApiService.delete(`currencies/${currencyCode}`),
+  return useMutation(
+    (currencyCode) => apiRequest.delete(`currencies/${currencyCode}`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('CURRENCIES');
      },
-      ...props
-    }
+      ...props,
+    },
  );
 }

@@ -57,14 +58,16 @@ export function useDeleteCurrency(props) {
 * Retrieve the currencies list.
 */
 export function useCurrencies(props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['CURRENCIES'],
-    () => ApiService.get('currencies').then(res => res.data.currencies),
+    () => apiRequest.get('currencies').then((res) => res.data.currencies),
    props,
  );

  return {
    ...states,
    data: defaultTo(states.data, []),
-  }
+  };
 }
--- a/client/src/hooks/query/customers.js
+++ b/client/src/hooks/query/customers.js
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 const defaultPagination = {
  pageSize: 12,
@@ -13,9 +13,11 @@ const defaultPagination = {
 * Retrieve customers list with pagination meta.
 */
 export function useCustomers(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['CUSTOMERS', query],
-    () => ApiService.get(`customers`, { params: query }),
+    () => apiRequest.get(`customers`, { params: query }),
    {
      select: (response) => ({
        customers: response.data.customers,
@@ -42,9 +44,10 @@ export function useCustomers(query, props) {
 */
 export function useEditCustomer(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`customers/${id}`, values),
+    ([id, values]) => apiRequest.post(`customers/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('CUSTOMERS');
@@ -60,9 +63,10 @@ export function useEditCustomer(props) {
 */
 export function useDeleteCustomer(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`customers/${id}`),
+    (id) => apiRequest.delete(`customers/${id}`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('CUSTOMERS');
@@ -78,9 +82,10 @@ export function useDeleteCustomer(props) {
 */
 export function useCreateCustomer(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (values) => ApiService.post('customers', values),
+    (values) => apiRequest.post('customers', values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('CUSTOMERS');
@@ -94,9 +99,12 @@ export function useCreateCustomer(props) {
 * Retrieve the customer details.
 */
 export function useCustomer(id, props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['CUSTOMER', id],
-    () => ApiService.get(`customers/${id}`),
+    () => apiRequest.get(`customers/${id}`),
    {
      select: (res) => res.data.customer,
      ...props
--- a/client/src/hooks/query/estimates.js
+++ b/client/src/hooks/query/estimates.js
@@ -1,6 +1,6 @@
 import { useQueryClient, useQuery, useMutation } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';
 import { transformPagination } from 'utils';

 /**
@@ -8,8 +8,9 @@ import { transformPagination } from 'utils';
 */
 export function useCreateEstimate(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('sales/estimates', values), {
+  return useMutation((values) => apiRequest.post('sales/estimates', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('SALE_ESTIMATES');
    },
@@ -22,9 +23,10 @@ export function useCreateEstimate(props) {
 */
 export function useEditEstimate(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`sales/estimates/${id}`, values),
+    ([id, values]) => apiRequest.post(`sales/estimates/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('SALE_ESTIMATES');
@@ -38,9 +40,11 @@ export function useEditEstimate(props) {
 * Retrieve sale estimate details.
 */
 export function useEstimate(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_ESTIMATE', id],
-    () => ApiService.get(`sales/estimates/${id}`),
+    () => apiRequest.get(`sales/estimates/${id}`),
    {
      select: (res) => res.data.estimate,
      ...props,
@@ -57,9 +61,11 @@ export function useEstimate(id, props) {
 * Retrieve sale invoices list with pagination meta.
 */
 export function useEstimates(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_ESTIMATES', query],
-    () => ApiService.get('sales/estimates', { params: query }),
+    () => apiRequest.get('sales/estimates', { params: query }),
    {
      select: (res) => ({
        estimates: res.data.sales_estimates,
@@ -89,8 +95,9 @@ export function useEstimates(query, props) {
 */
 export function useDeleteEstimate(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`sales/estimates/${id}`), {
+  return useMutation((id) => apiRequest.delete(`sales/estimates/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('SALE_ESTIMATES');
    },
@@ -103,9 +110,10 @@ export function useDeleteEstimate(props) {
 */
 export function useDeliverEstimate(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.post(`sales/estimates/${id}/deliver`),
+    (id) => apiRequest.post(`sales/estimates/${id}/deliver`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('SALE_ESTIMATES');
@@ -120,9 +128,10 @@ export function useDeliverEstimate(props) {
 */
 export function useApproveEstimate(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.post(`sales/estimates/${id}/approve`),
+    (id) => apiRequest.post(`sales/estimates/${id}/approve`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('SALE_ESTIMATES');
@@ -137,9 +146,10 @@ export function useApproveEstimate(props) {
 */
 export function useRejectEstimate(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.post(`sales/estimates/${id}/reject`),
+    (id) => apiRequest.post(`sales/estimates/${id}/reject`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('SALE_ESTIMATES');
--- a/client/src/hooks/query/expenses.js
+++ b/client/src/hooks/query/expenses.js
@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';
 import { transformPagination } from 'utils';

 const defaultPagination = {
@@ -13,9 +13,11 @@ const defaultPagination = {
 * Retrieve the expenses list.
 */
 export function useExpenses(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['EXPENSES', query],
-    () => ApiService.get(`expenses`, { params: { ...query } }),
+    () => apiRequest.get(`expenses`, { params: { ...query } }),
    {
      select: (response) => ({
        expenses: response.data.expenses,
@@ -41,10 +43,16 @@ export function useExpenses(query, props) {
 * @param {number} id - Expense id.
 */
 export function useExpense(id, props) {
-  const states = useQuery(['EXPENSE', id], () => ApiService.get(`expenses/${id}`), {
-    select: (res) => res.data.expense,
-    ...props,
-  });
+  const apiRequest = useApiRequest();
+
+  const states = useQuery(
+    ['EXPENSE', id],
+    () => apiRequest.get(`expenses/${id}`),
+    {
+      select: (res) => res.data.expense,
+      ...props,
+    },
+  );

  return {
    ...states,
@@ -56,9 +64,10 @@ export function useExpense(id, props) {
 * Deletes the given expense.
 */
 export function useDeleteExpense(props) {
+  const apiRequest = useApiRequest();
  const queryClient = useQueryClient();

-  return useMutation((id) => ApiService.delete(`expenses/${id}`), {
+  return useMutation((id) => apiRequest.delete(`expenses/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('EXPENSES');
      queryClient.invalidateQueries('EXPENSE');
@@ -72,9 +81,10 @@ export function useDeleteExpense(props) {
 */
 export function useEditExpense(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`expenses/${id}`, values),
+    ([id, values]) => apiRequest.post(`expenses/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('EXPENSES');
@@ -90,8 +100,9 @@ export function useEditExpense(props) {
 */
 export function useCreateExpense(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('expenses', values), {
+  return useMutation((values) => apiRequest.post('expenses', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('EXPENSES');
      queryClient.invalidateQueries('EXPENSE');
@@ -105,12 +116,13 @@ export function useCreateExpense(props) {
 */
 export function usePublishExpense(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`expenses/${id}/publish`), {
+  return useMutation((id) => apiRequest.post(`expenses/${id}/publish`), {
    onSuccess: () => {
      queryClient.invalidateQueries('EXPENSES');
      queryClient.invalidateQueries('EXPENSE');
    },
    ...props,
  });
-}
+}
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -1,6 +1,5 @@
 import { useQuery } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
 import {
  trialBalanceSheetReducer,
  balanceSheetRowsReducer,
@@ -8,15 +7,18 @@ import {
  generalLedgerTableRowsReducer,
  journalTableRowsReducer,
 } from 'containers/FinancialStatements/reducers';
+import useApiRequest from '../useRequest';
 
 /**
 * Retrieve balance sheet.
 */
 export function useBalanceSheet(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['FINANCIAL-REPORT', 'BALANCE-SHEET', query],
    () =>
-      ApiService.get('/financial_statements/balance_sheet', {
+      apiRequest.get('/financial_statements/balance_sheet', {
        params: query,
      }),
    {
@@ -43,10 +45,12 @@ export function useBalanceSheet(query, props) {
 * Retrieve trial balance sheet.
 */
 export function useTrialBalanceSheet(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['FINANCIAL-REPORT', 'TRIAL-BALANCE-SHEET', query],
    () =>
-      ApiService.get('/financial_statements/trial_balance_sheet', {
+      apiRequest.get('/financial_statements/trial_balance_sheet', {
        params: query,
      }),
    {
@@ -72,10 +76,12 @@ export function useTrialBalanceSheet(query, props) {
 * Retrieve profit/loss (P&L) sheet.
 */
 export function useProfitLossSheet(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['FINANCIAL-REPORT', 'PROFIT-LOSS-SHEET', query],
    () =>
-      ApiService.get('/financial_statements/profit_loss_sheet', {
+      apiRequest.get('/financial_statements/profit_loss_sheet', {
        params: query,
      }),
    {
@@ -101,10 +107,12 @@ export function useProfitLossSheet(query, props) {
 * Retrieve general ledger (GL) sheet.
 */
 export function useGeneralLedgerSheet(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['FINANCIAL-REPORT', 'GENERAL-LEDGER', query],
    () =>
-      ApiService.get('/financial_statements/general_ledger', {
+      apiRequest.get('/financial_statements/general_ledger', {
        params: query,
      }),
    {
@@ -130,10 +138,12 @@ export function useGeneralLedgerSheet(query, props) {
 * Retrieve journal sheet.
 */
 export function useJournalSheet(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['FINANCIAL-REPORT', 'JOURNAL', query],
    () =>
-      ApiService.get('/financial_statements/journal', { params: query }),
+      apiRequest.get('/financial_statements/journal', { params: query }),
    {
      select: (res) => ({
        tableRows: journalTableRowsReducer(res.data.data),
@@ -157,10 +167,12 @@ export function useJournalSheet(query, props) {
 * Retrieve AR aging summary report.
 */
 export function useARAgingSummaryReport(query, props) {
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['FINANCIAL-REPORT', 'AR-AGING-SUMMARY', query],
    () =>
-      ApiService.get('/financial_statements/receivable_aging_summary', {
+      apiRequest.get('/financial_statements/receivable_aging_summary', {
        params: query,
      }),
    props,
--- a/client/src/hooks/query/index.js
+++ b/client/src/hooks/query/index.js
@@ -1,4 +1,4 @@
-
+export * from './authentication';
 export * from './accounts';
 export * from './views';
 export * from './items';
@@ -17,4 +17,5 @@ export * from './receipts';
 export * from './paymentReceives';
 export * from './paymentMades';
 export * from './settings';
-export * from './users';
+export * from './users';
+export * from './invite';
--- a/client/src/hooks/query/inventoryAdjustments.js
+++ b/client/src/hooks/query/inventoryAdjustments.js
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 const invalidateQueries = (queryClient) => {
  queryClient.invalidateQueries('INVENTORY_ADJUSTMENTS');
@@ -15,9 +15,10 @@ const invalidateQueries = (queryClient) => {
 */
 export function useCreateInventoryAdjustment(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (values) => ApiService.post('inventory_adjustments/quick', values),
+    (values) => apiRequest.post('inventory_adjustments/quick', values),
    {
      onSuccess: () => {
        invalidateQueries(queryClient)
@@ -32,9 +33,10 @@ export function useCreateInventoryAdjustment(props) {
 */
 export function useDeleteInventoryAdjustment(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`inventory_adjustments/${id}`),
+    (id) => apiRequest.delete(`inventory_adjustments/${id}`),
    {
      onSuccess: () => {
        invalidateQueries(queryClient)
@@ -55,9 +57,11 @@ const inventoryAdjustmentsTransformer = (response) => {
 * Retrieve inventory adjustment list with pagination meta.
 */
 export function useInventoryAdjustments(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['INVENTORY_ADJUSTMENTS', query],
-    () => ApiService.get('inventory_adjustments', { params: query })  
+    () => apiRequest.get('inventory_adjustments', { params: query })  
      .then(inventoryAdjustmentsTransformer),
    props,
  );
--- a/client/src/hooks/query/invite.js
+++ b/client/src/hooks/query/invite.js
@@ -0,0 +1,31 @@
+import { useMutation, useQuery } from 'react-query';
+import useApiRequest from '../useRequest';
+
+/**
+ * Authentication invite accept.
+ */
+export const useAuthInviteAccept = (props) => {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([values, token]) => apiRequest.post(`invite/accept/${token}`, values),
+    props,
+  )
+}
+
+/**
+ * Retrieve the invite meta by the given token.
+ * @param {string} token - Token.
+ */
+export const useInviteMetaByToken = (token, props) => {
+  const apiRequest = useApiRequest();
+
+  return useQuery(
+    ['INVITE_META', token],
+    () => apiRequest.get(`invite/invited/${token}`),
+    {
+      select: (res) => res.data,
+      ...props
+    }
+  );
+}
--- a/client/src/hooks/query/invoices.js
+++ b/client/src/hooks/query/invoices.js
@@ -1,15 +1,16 @@
 import { defaultTo } from 'lodash';
 import { useQueryClient, useQuery, useMutation } from 'react-query';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 /**
 * Creates a new sale invoice.
 */
 export function useCreateInvoice(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('sales/invoices', values), {
+  return useMutation((values) => apiRequest.post('sales/invoices', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('SALE_INVOICES');
    },
@@ -22,9 +23,10 @@ export function useCreateInvoice(props) {
 */
 export function useEditInvoice(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`sales/invoices/${id}`, values),
+    ([id, values]) => apiRequest.post(`sales/invoices/${id}`, values),
    {
      onSuccess: (res, id) => {
        queryClient.invalidateQueries('SALE_INVOICES');
@@ -40,8 +42,9 @@ export function useEditInvoice(props) {
 */
 export function useDeleteInvoice(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`sales/invoices/${id}`), {
+  return useMutation((id) => apiRequest.delete(`sales/invoices/${id}`), {
    onSuccess: (res, id) => {
      queryClient.invalidateQueries('SALE_INVOICES');
      queryClient.invalidateQueries(['SALE_INVOICE', id]);
@@ -54,9 +57,11 @@ export function useDeleteInvoice(props) {
 * Retrieve sale invoices list with pagination meta.
 */
 export function useInvoices(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_INVOICES', query],
-    () => ApiService.get('sales/invoices', { params: query }),
+    () => apiRequest.get('sales/invoices', { params: query }),
    {
      select: (res) => ({
        invoices: res.data.sales_invoices,
@@ -86,8 +91,9 @@ export function useInvoices(query, props) {
 */
 export function useDeliverInvoice(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`sales/invoices/${id}/deliver`), {
+  return useMutation((id) => apiRequest.post(`sales/invoices/${id}/deliver`), {
    onSuccess: (res, id) => {
      queryClient.invalidateQueries('SALE_INVOICES');
      queryClient.invalidateQueries(['SALE_INVOICE', id]);
@@ -100,9 +106,11 @@ export function useDeliverInvoice(props) {
 * Retrieve the sale invoice details.
 */
 export function useInvoice(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_INVOICE', id],
-    () => ApiService.get(`sales/invoices/${id}`),
+    () => apiRequest.get(`sales/invoices/${id}`),
    {
      select: (res) => res.data.sale_invoice,
      ...props,
@@ -120,10 +128,12 @@ export function useInvoice(id, props) {
 * @param {number} customerId - Customer id.
 */
 export function useDueInvoices(customerId, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_INVOICE_DUE', customerId],
    () =>
-      ApiService.get(`sales/invoices/payable`, {
+      apiRequest.get(`sales/invoices/payable`, {
        params: { customer_id: customerId },
      }),
    {
--- a/client/src/hooks/query/items.js
+++ b/client/src/hooks/query/items.js
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
 import { transformPagination, transformResponse } from 'utils';
+import useApiRequest from '../useRequest';

 const defaultPagination = {
  pageSize: 12,
@@ -14,8 +14,9 @@ const defaultPagination = {
 */
 export function useCreateItem(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('items', values), {
+  return useMutation((values) => apiRequest.post('items', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS');
      queryClient.invalidateQueries('ITEMS_CATEGORIES');
@@ -29,8 +30,9 @@ export function useCreateItem(props) {
 */
 export function useEditItem(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation(([id, values]) => ApiService.post(`items/${id}`, values), {
+  return useMutation(([id, values]) => apiRequest.post(`items/${id}`, values), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS');
      queryClient.invalidateQueries('ITEM');
@@ -45,8 +47,9 @@ export function useEditItem(props) {
 */
 export function useDeleteItem(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`items/${id}`), {
+  return useMutation((id) => apiRequest.delete(`items/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS');
      queryClient.invalidateQueries('ITEM');
@@ -71,10 +74,12 @@ const transformItemsResponse = (response) => {
 * Retrieves items list.
 */
 export function useItems(query, props) {
+  const apiRequest = useApiRequest();
+
  const result = useQuery(
    ['ITEMS', query],
    () =>
-      ApiService.get(`items`, { params: query }).then(transformItemsResponse),
+      apiRequest.get(`items`, { params: query }).then(transformItemsResponse),
    props,
  );

@@ -93,9 +98,11 @@ export function useItems(query, props) {
 * @param {number} id - Item id.
 */
 export function useItem(id, props) {
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['ITEM', id],
-    () => ApiService.get(`items/${id}`).then((response) => response.data.item),
+    () => apiRequest.get(`items/${id}`).then((response) => response.data.item),
    props,
  );
 }
@@ -105,8 +112,9 @@ export function useItem(id, props) {
 */
 export function useActivateItem(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`items/${id}/activate`), {
+  return useMutation((id) => apiRequest.post(`items/${id}/activate`), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS');
      queryClient.invalidateQueries('ITEM');
@@ -120,8 +128,9 @@ export function useActivateItem(props) {
 */
 export function useInactivateItem(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`items/${id}/inactivate`), {
+  return useMutation((id) => apiRequest.post(`items/${id}/inactivate`), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS');
      queryClient.invalidateQueries('ITEM');
--- a/client/src/hooks/query/itemsCategories.js
+++ b/client/src/hooks/query/itemsCategories.js
@@ -1,14 +1,15 @@
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';

 /**
 * Creates a new item category.
 */
 export function useCreateItemCategory(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('item_categories', values), {
+  return useMutation((values) => apiRequest.post('item_categories', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS_CATEGORIES');
    },
@@ -21,9 +22,10 @@ export function useCreateItemCategory(props) {
 */
 export function useEditItemCategory(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`item_categories/${id}`, values),
+    ([id, values]) => apiRequest.post(`item_categories/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('ITEMS_CATEGORIES');
@@ -39,8 +41,9 @@ export function useEditItemCategory(props) {
 */
 export function useDeleteItemCategory(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`item_categories/${id}`), {
+  return useMutation((id) => apiRequest.delete(`item_categories/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('ITEMS_CATEGORIES');
      queryClient.invalidateQueries('ITEMS');
@@ -61,10 +64,12 @@ const transformItemsCategories = (response) => {
 * Retrieve the items categories.
 */
 export function useItemsCategories(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['ITEMS_CATEGORIES', query],
    () =>
-      ApiService.get(`item_categories`, { params: query }).then(
+      apiRequest.get(`item_categories`, { params: query }).then(
        transformItemsCategories,
      ),
    props,
@@ -84,10 +89,12 @@ export function useItemsCategories(query, props) {
 * @param {number} id - Item category.
 */
 export function useItemCategory(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['ITEMS_CATEGORY', id],
    () =>
-      ApiService.get(`item_categories/${id}`).then((res) => res.data.category),
+      apiRequest.get(`item_categories/${id}`).then((res) => res.data.category),
    props,
  );

--- a/client/src/hooks/query/manualJournals.js
+++ b/client/src/hooks/query/manualJournals.js
@@ -1,16 +1,17 @@
 import { defaultTo } from 'lodash';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 /**
 * Creates a new manual journal.
 */
 export function useCreateJournal(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (values) => ApiService.post('manual-journals', values),
+    (values) => apiRequest.post('manual-journals', values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('JOURNALS');
@@ -25,9 +26,10 @@ export function useCreateJournal(props) {
 */
 export function useEditJournal(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`manual-journals/${id}`, values),
+    ([id, values]) => apiRequest.post(`manual-journals/${id}`, values),
    {
      onSuccess: (res, [id]) => {
        queryClient.invalidateQueries('JOURNALS');
@@ -43,9 +45,10 @@ export function useEditJournal(props) {
 */
 export function useDeleteJournal(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`manual-journals/${id}`),
+    (id) => apiRequest.delete(`manual-journals/${id}`),
    {
      onSuccess: (res, id) => {
        queryClient.invalidateQueries('JOURNALS');
@@ -61,9 +64,10 @@ export function useDeleteJournal(props) {
 */
 export function usePublishJournal(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.post(`manual-journals/${id}/publish`),
+    (id) => apiRequest.post(`manual-journals/${id}/publish`),
    {
      onSuccess: (res, id) => {
        queryClient.invalidateQueries('JOURNALS');
@@ -78,9 +82,11 @@ export function usePublishJournal(props) {
 * Retrieve the manual journals with pagination meta.
 */
 export function useJournals(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['JOURNALS', query],
-    () => ApiService.get('manual-journals', { params: query }),
+    () => apiRequest.get('manual-journals', { params: query }),
    {
      select: (response) => ({
        manualJournals: response.data.manual_journals,
@@ -105,9 +111,11 @@ export function useJournals(query, props) {
 * Retrieve the manual journal details.
 */
 export function useJournal(id, props) {
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['JOURNAL', id],
-    () => ApiService.get(`manual-journals/${id}`),
+    () => apiRequest.get(`manual-journals/${id}`),
    {
      select: (res) => res.data.manual_journal,
      ...props,
--- a/client/src/hooks/query/paymentMades.js
+++ b/client/src/hooks/query/paymentMades.js
@@ -1,15 +1,17 @@
 import { defaultTo } from 'lodash';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 /**
 * Retrieve payment mades list.
 */
 export function usePaymentMades(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['PAYMENT_MADES', query],
-    () => ApiService.get('purchases/bill_payments', { params: query }),
+    () => apiRequest.get('purchases/bill_payments', { params: query }),
    {
      select: (res) => ({
        paymentMades: res.data.bill_payments,
@@ -35,9 +37,10 @@ export function usePaymentMades(query, props) {
 */
 export function useCreatePaymentMade(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (values) => ApiService.post('purchases/bill_payments', values),
+    (values) => apiRequest.post('purchases/bill_payments', values),
    {
      onSuccess: () => {
        client.invalidateQueries('PAYMENT_MADES');
@@ -52,9 +55,10 @@ export function useCreatePaymentMade(props) {
 */
 export function useEditPaymentMade(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`purchases/bill_payments/${id}`, values),
+    ([id, values]) => apiRequest.post(`purchases/bill_payments/${id}`, values),
    {
      onSuccess: (res, [id, values]) => {
        client.invalidateQueries('PAYMENT_MADES');
@@ -70,9 +74,10 @@ export function useEditPaymentMade(props) {
 */
 export function useDeletePaymentMade(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`purchases/bill_payments/${id}`),
+    (id) => apiRequest.delete(`purchases/bill_payments/${id}`),
    {
      onSuccess: (res, id) => {
        client.invalidateQueries('PAYMENT_MADES');
@@ -87,9 +92,11 @@ export function useDeletePaymentMade(props) {
 * Retrieve specific payment made.
 */
 export function usePaymentMade(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['PAYMENT_MADE', id],
-    () => ApiService.get(`purchases/bill_payments/${id}`),
+    () => apiRequest.get(`purchases/bill_payments/${id}`),
    {
      select: res => ({
        paymentMade: res.data.bill_payment,
--- a/client/src/hooks/query/paymentReceives.js
+++ b/client/src/hooks/query/paymentReceives.js
@@ -1,15 +1,17 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';
 import { transformPagination, saveInvoke } from 'utils';

 /**
 * Retrieve accounts list.
 */
 export function usePaymentReceives(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['PAYMENT_RECEIVES', query],
-    () => ApiService.get('sales/payment_receives', { params: query }),
+    () => apiRequest.get('sales/payment_receives', { params: query }),
    {
      select: (res) => ({
        paymentReceives: res.data.payment_receives,
@@ -39,9 +41,10 @@ export function usePaymentReceives(query, props) {
 */
 export function useCreatePaymentReceive(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (values) => ApiService.post('sales/payment_receives', values),
+    (values) => apiRequest.post('sales/payment_receives', values),
    {
      onSuccess: (data, values) => {
        client.invalidateQueries('PAYMENT_RECEIVES');
@@ -61,9 +64,10 @@ export function useCreatePaymentReceive(props) {
 */
 export function useEditPaymentReceive(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`sales/payment_receives/${id}`, values),
+    ([id, values]) => apiRequest.post(`sales/payment_receives/${id}`, values),
    {
      onSuccess: (data) => {
        client.invalidateQueries('PAYMENT_RECEIVES');
@@ -83,9 +87,10 @@ export function useEditPaymentReceive(props) {
 */
 export function useDeletePaymentReceive(props) {
  const client = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`sales/payment_receives/${id}`),
+    (id) => apiRequest.delete(`sales/payment_receives/${id}`),
    {
      onSuccess: (data, [id]) => {
        client.invalidateQueries('PAYMENT_RECEIVES');
@@ -105,9 +110,11 @@ export function useDeletePaymentReceive(props) {
 * @param {number} id - Payment receive.
 */
 export function usePaymentReceive(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['PAYMENT_RECEIVE', id],
-    () => ApiService.get(`sales/payment_receives/${id}`),
+    () => apiRequest.get(`sales/payment_receives/${id}`),
    {
      select: (res) => ({
        paymentReceive: res.data.payment_receive,
@@ -132,9 +139,11 @@ export function usePaymentReceive(id, props) {
 * @param {number} id - Payment receive id.
 */
 export function usePaymentReceiveEditPage(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['PAYMENT_RECEIVE_EDIT_PAGE', id],
-    () => ApiService.get(`sales/payment_receives/${id}/edit-page`),
+    () => apiRequest.get(`sales/payment_receives/${id}/edit-page`),
    {
      select: (res) => ({
        paymentReceive: res.data.payment_receive,
--- a/client/src/hooks/query/receipts.js
+++ b/client/src/hooks/query/receipts.js
@@ -1,6 +1,6 @@
 import { useQueryClient, useQuery, useMutation } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';
 import { transformPagination } from 'utils';

 /**
@@ -8,8 +8,9 @@ import { transformPagination } from 'utils';
 */
 export function useCreateReceipt(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((values) => ApiService.post('sales/receipts', values), {
+  return useMutation((values) => apiRequest.post('sales/receipts', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('SALE_RECEIPTS');
    },
@@ -22,9 +23,10 @@ export function useCreateReceipt(props) {
 */
 export function useEditReceipt(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`sales/receipts/${id}`, values),
+    ([id, values]) => apiRequest.post(`sales/receipts/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('SALE_RECEIPTS');
@@ -39,8 +41,9 @@ export function useEditReceipt(props) {
 */
 export function useDeleteReceipt(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`sales/receipts/${id}`), {
+  return useMutation((id) => apiRequest.delete(`sales/receipts/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('SALE_RECEIPTS');
    },
@@ -53,8 +56,9 @@ export function useDeleteReceipt(props) {
 */
 export function useCloseReceipt(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.post(`sales/receipts/${id}/close`), {
+  return useMutation((id) => apiRequest.post(`sales/receipts/${id}/close`), {
    onSuccess: () => {
      queryClient.invalidateQueries('SALE_RECEIPTS');
    },
@@ -66,9 +70,11 @@ export function useCloseReceipt(props) {
 * Retrieve sale invoices list with pagination meta.
 */
 export function useReceipts(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_RECEIPTS', query],
-    () => ApiService.get('sales/receipts', { params: query }),
+    () => apiRequest.get('sales/receipts', { params: query }),
    {
      select: (response) => ({
        receipts: response.data.sale_receipts,
@@ -97,9 +103,11 @@ export function useReceipts(query, props) {
 * Retrieve sale invoices list with pagination meta.
 */
 export function useReceipt(id, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['SALE_RECEIPT', id],
-    () => ApiService.get(`sales/receipts/${id}`),
+    () => apiRequest.get(`sales/receipts/${id}`),
    {
      select: (res) => res.data.sale_receipt,
      ...props,
--- a/client/src/hooks/query/settings.js
+++ b/client/src/hooks/query/settings.js
@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { useDispatch } from 'react-redux';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';
 import t from 'store/types';

 /**
@@ -8,13 +8,14 @@ import t from 'store/types';
 */
 export function useSettings(query, props) {
  const dispatch = useDispatch();
+  const apiRequest = useApiRequest();

  const settings = useQuery(
    ['SETTINGS', query],
    async () => {
      const {
        data: { settings },
-      } = await ApiService.get('settings', { params: query });
+      } = await apiRequest.get('settings', { params: query });

      return settings;
    },
@@ -35,8 +36,9 @@ export function useSettings(query, props) {
 */
 export function useSaveSettings(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((settings) => ApiService.post('settings', settings), {
+  return useMutation((settings) => apiRequest.post('settings', settings), {
    onSuccess: () => {
      queryClient.invalidateQueries('SETTINGS');
    },
--- a/client/src/hooks/query/users.js
+++ b/client/src/hooks/query/users.js
@@ -1,13 +1,16 @@
 import { useMutation, useQueryClient, useQuery } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
+import useApiRequest from '../useRequest';
+

 /**
 * Create a new invite user.
 */
 export function useCreateInviteUser(props) {
  const queryClient = useQueryClient();
-  return useMutation((values) => ApiService.post('invite/send', values), {
+  const apiRequest = useApiRequest();
+
+  return useMutation((values) => apiRequest.post('invite/send', values), {
    onSuccess: () => {
      queryClient.invalidateQueries('USERS');
    },
@@ -21,8 +24,9 @@ export function useCreateInviteUser(props) {
 */
 export function useEditUser(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation(([id, values]) => ApiService.post(`users/${id}`, values), {
+  return useMutation(([id, values]) => apiRequest.post(`users/${id}`, values), {
    onSuccess: () => {
      queryClient.invalidateQueries('USERS');
    },
@@ -35,8 +39,9 @@ export function useEditUser(props) {
 */
 export function useDeleteUser(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

-  return useMutation((id) => ApiService.delete(`users/${id}`), {
+  return useMutation((id) => apiRequest.delete(`users/${id}`), {
    onSuccess: () => {
      queryClient.invalidateQueries('USERS');
      queryClient.invalidateQueries('USER');
@@ -49,9 +54,11 @@ export function useDeleteUser(props) {
 * Retrieves users list.
 */
 export function useUsers(props) {
+  const apiRequest = useApiRequest();
+
  const result = useQuery(
    ['USERS'],
-    () => ApiService.get(`USERS`).then((response) => response.data.users),
+    () => apiRequest.get(`USERS`).then((response) => response.data.users),
    props,
  );

@@ -65,9 +72,11 @@ export function useUsers(props) {
 * Retrieve details of the given user.
 */
 export function useUser(id, props) {
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['USER', id],
-    () => ApiService.get(`users/${id}`).then((response) => response.data.item),
+    () => apiRequest.get(`users/${id}`).then((response) => response.data.item),
    props,
  );
 }
--- a/client/src/hooks/query/vendors.js
+++ b/client/src/hooks/query/vendors.js
@@ -1,15 +1,17 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from 'services/ApiService';
 import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';

 /**
 * Retrieve vendors list.
 */
 export function useVendors(query, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['VENDORS', query],
-    () => ApiService.get(`vendors`, { params: query }),
+    () => apiRequest.get(`vendors`, { params: query }),
    {
      select: (res) => ({
        vendors: res.data.vendors,
@@ -35,9 +37,10 @@ export function useVendors(query, props) {
 */
 export function useEditVendor(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    ([id, values]) => ApiService.post(`vendors/${id}`, values),
+    ([id, values]) => apiRequest.post(`vendors/${id}`, values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('VENDORS');
@@ -53,9 +56,10 @@ export function useEditVendor(props) {
 */
 export function useDeleteVendor(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (id) => ApiService.delete(`vendors/${id}`),
+    (id) => apiRequest.delete(`vendors/${id}`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('VENDORS');
@@ -70,9 +74,10 @@ export function useDeleteVendor(props) {
 */
 export function useCreateVendor(props) {
  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();

  return useMutation(
-    (values) => ApiService.post('vendors', values),
+    (values) => apiRequest.post('vendors', values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('VENDORS');
@@ -86,9 +91,11 @@ export function useCreateVendor(props) {
 * Retrieve vendor details.
 */
 export function useVendor(id, props) {
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['VENDOR', id],
-    () => ApiService.get(`vendors/${id}`),
+    () => apiRequest.get(`vendors/${id}`),
    {
      select: (res) => res.data.vendor,
      ...props
--- a/client/src/hooks/query/views.js
+++ b/client/src/hooks/query/views.js
@@ -1,26 +1,13 @@
 import { useQuery } from 'react-query';
 import { defaultTo } from 'lodash';
-import ApiService from "services/ApiService";
-// export function useSaveView(values) {
-//   return ApiService.post('views', form);
-// }
-
-// export function useEditView(values, id) {
-//   return ApiService.post(`views/${id}`, values);
-// }
-
-// export function useDeleteView(id) {
-//   return ApiService.delete(`views/${id}`);
-// }
-
-// export function useView(id) {
-//   return useQuery(['VIEW', id], () => ApiService.get(`views/${id}`)
-// }
+import useApiRequest from '../useRequest';

 export function useResourceViews(resourceSlug) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['RESOURCE_VIEW', resourceSlug],
-    () => ApiService.get(`views/resource/${resourceSlug}`)
+    () => apiRequest.get(`views/resource/${resourceSlug}`)
      .then((response) => response.data.views),
  );

@@ -32,9 +19,11 @@ export function useResourceViews(resourceSlug) {
 

 export function useResourceColumns(resourceSlug) {
+  const apiRequest = useApiRequest();
+
  return useQuery(
    ['RESOURCE_COLUMNS', resourceSlug],
-    () => ApiService.get(`resources/${resourceSlug}/columns`),
+    () => apiRequest.get(`resources/${resourceSlug}/columns`),
    {
      initialData: [],
    },
@@ -42,9 +31,11 @@ export function useResourceColumns(resourceSlug) {
 }
 
 export function useResourceFields(resourceSlug, props) {
+  const apiRequest = useApiRequest();
+
  const states = useQuery(
    ['RESOURCE_FIELDS', resourceSlug], 
-    () => ApiService.get(`resources/${resourceSlug}/fields`)
+    () => apiRequest.get(`resources/${resourceSlug}/fields`)
      .then((res) => res.data.resource_fields),
    props
  );
--- a/client/src/hooks/state/authentication.js
+++ b/client/src/hooks/state/authentication.js
@@ -0,0 +1,41 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback } from 'react';
+import { isAuthenticated } from 'store/authentication/authentication.reducer';
+import { setLogin, setLogout } from 'store/authentication/authentication.actions';
+
+export const useAuthActions = () => {
+  const dispatch = useDispatch();
+
+  return {
+    setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]),
+    setLogout: useCallback(() => dispatch(setLogout()), [dispatch]),
+  };
+};
+
+/**
+ * Retrieve whether the user is authenticated.
+ */
+export const useIsAuthenticated = () => {
+  return useSelector(isAuthenticated);
+};
+
+/**
+ * Retrieve the authentication token.
+ */
+export const useAuthToken = () => {
+  return useSelector((state) => state.authentication.token);
+};
+
+/**
+ * Retrieve the authentication user.
+ */
+export const useAuthUser = () => {
+  return useSelector((state) => state.authentication.user);
+};
+
+/**
+ * Retrieve the authenticated organization id.
+ */
+export const useAuthOrganizationId = () => {
+  return useSelector((state) => state.authentication.organization);
+};
--- a/client/src/hooks/state/globalErrors.js
+++ b/client/src/hooks/state/globalErrors.js
@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { useSelector, useDispatch } from "react-redux";
+import { setGlobalErrors } from 'store/globalErrors/globalErrors.actions';
+
+export const useSetGlobalErrors = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((errors) => {
+    dispatch(setGlobalErrors(errors));
+  }, [dispatch]);
+};
+
+export const useGlobalErrors = () => {
+  const globalErrors = useSelector(state => state.globalErrors.data);
+
+  return { globalErrors };
+}
--- a/client/src/hooks/state/index.js
+++ b/client/src/hooks/state/index.js
@@ -1 +1,3 @@
-export * from './dashboard';
+export * from './dashboard';
+export * from './authentication';
+export * from './globalErrors';
--- a/client/src/hooks/useRequest.js
+++ b/client/src/hooks/useRequest.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import axios from 'axios';
+import {
+  useAuthActions,
+  useAuthOrganizationId,
+  useSetGlobalErrors,
+  useAuthToken,
+} from './state';
+
+export default function useApiRequest() {
+  const setGlobalErrors = useSetGlobalErrors();
+  const { setLogout } = useAuthActions();
+
+  // Authentication token.
+  const token = useAuthToken();
+
+  // Authentication organization id.
+  const organizationId = useAuthOrganizationId();
+
+  const http = React.useMemo(() => {
+    axios.create();
+
+    // Request interceptors.
+    axios.interceptors.request.use(
+      (request) => {
+        const locale = 'en';
+
+        if (token) {
+          request.headers.common['x-access-token'] = token;
+        }
+        if (organizationId) {
+          request.headers.common['organization-id'] = organizationId;
+        }
+        if (locale) {
+          request.headers.common['Accept-Language'] = locale;
+        }
+        return request;
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    );
+
+    // Response interceptors.
+    axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        const { status } = error.response;
+
+        if (status >= 500) {
+          setGlobalErrors({ something_wrong: true });
+        }
+        if (status === 401) {
+          setGlobalErrors({ session_expired: true });
+          setLogout();
+        }
+        return Promise.reject(error);
+      },
+    );
+
+    return axios;
+  }, [token, organizationId, setGlobalErrors, setLogout]);
+
+  return {
+    get(resource, params) {
+      return http.get(`/api/${resource}`, params);
+    },
+
+    post(resource, params, config) {
+      return http.post(`/api/${resource}`, params, config);
+    },
+
+    update(resource, slug, params) {
+      return http.put(`/api/${resource}/${slug}`, params);
+    },
+
+    put(resource, params) {
+      return http.put(`/api/${resource}`, params);
+    },
+
+    delete(resource, params) {
+      return http.delete(`/api/${resource}`, params);
+    },
+  };
+}