use axios_client

src/pages/Authentication/ForgotPassword.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { Button, Col, Container } from "react-bootstrap";
 import { Form, Formik, FormikHelpers } from "formik";
 import FormInput from "../../components/Form/FormInput";
-import axios, { AxiosError } from "axios";
 import { alertActions } from "../../store/slices/alertSlice";
 import { useDispatch } from "react-redux";
-import { API_BASE_URL } from "../../constants/Api";
 import * as Yup from "yup";
+import { AxiosError } from "axios";
+import axiosClient from "../../utils/axios_client";
 
 interface IForgotPasswordFormValues {
   email: string;
@@ -24,7 +24,7 @@ const ForgotPassword = () => {
     submitProps: FormikHelpers<IForgotPasswordFormValues>
   ) => {
     try {
-      await axios.post(`${API_BASE_URL}/password_resets`, { email: values.email });
+      await axiosClient.post(`/password_resets`, { email: values.email });
       dispatch(
         alertActions.showAlert({
           variant: "success",

src/pages/Authentication/ResetPassword.tsx

@@ -3,11 +3,11 @@ import { Button, Col, Container } from "react-bootstrap";
 import { Form, Formik, FormikHelpers } from "formik";
 import FormInput from "../../components/Form/FormInput";
 import { useLocation, useNavigate } from "react-router-dom";
-import axios, { AxiosError } from "axios";
 import { alertActions } from "../../store/slices/alertSlice";
 import { useDispatch } from "react-redux";
-import { API_BASE_URL } from "../../constants/Api";
 import * as Yup from "yup";
+import { AxiosError } from "axios";
+import axiosClient from "../../utils/axios_client";
 
 interface IResetPasswordFormValues {
   password: string;
@@ -49,7 +49,7 @@ const ResetPassword = () => {
   ) => {
     try {
       // Send password reset request to the backend
-      await axios.put(`${API_BASE_URL}/password_resets/${token}`, {
+      await axiosClient.put(`/password_resets/${token}`, {
         user: { password: values.password },
       });
       dispatch(

src/utils/axios_client.ts

@@ -14,14 +14,22 @@ const axiosClient = axios.create({
   },
 });
 
-axiosClient.interceptors.request.use((config) => {
-  const token = getAuthToken();
-  if (token && token !== "EXPIRED") {
-    config.headers["Authorization"] = `Bearer ${token}`;
+axiosClient.interceptors.request.use(
+  (config) => {
+    const token = getAuthToken();
+
+    // Attach the token only if it exists and is valid
+    if (token && token !== "EXPIRED") {
+      config.headers["Authorization"] = `Bearer ${token}`;
+    }
+
+    // Always return the config, not all routes need an Authorization header, this is the APIs responsibility.
     return config;
+  },
+  (error) => {
+    return Promise.reject(error);
   }
-  return Promise.reject("Authentication token not found! Please login again.");
-});
+);
 
 // Add response interceptor for debugging
 axiosClient.interceptors.response.use(