💡[Feature]: Implement Axios interceptor for automatic authentication headers and request handling

[rushiii3]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

Currently, API requests across the frontend manually attach authentication headers when making requests. This leads to repetitive code and increases the chance of inconsistencies.

Example of the current pattern:

const { data: categoryData } = await axios.get(
  `${PROD_URL + ARTICLE_TAGS_API}`,
  {
    headers: {
      Authorization: `Bearer ${user_token}`,
    },
  }
);

Since authentication headers are required for most API requests, repeating this logic across multiple files creates unnecessary boilerplate and makes maintenance harder.

I propose introducing a centralized Axios instance with request interceptors so authentication headers are automatically attached to every request.

This would simplify API calls and create a cleaner and more maintainable architecture.

This feature would be implemented using **Axios interceptors.

---

Proposed Implementation

Create a centralized API client.

Example structure:

/lib
  axios.ts

Axios instance with interceptor:

import axios from "axios";

const api = axios.create({
  baseURL: PROD_URL,
});

api.interceptors.request.use((config) => {
  const token = getUserToken(); // retrieve from storage or auth context

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

export default api;

Usage across the application becomes much simpler:

const { data } = await api.get(ARTICLE_TAGS_API);

This removes the need to manually add authentication headers for every request.

Use Case

Many frontend features require authenticated API calls such as:

• fetching user data
• retrieving categories or tags
• creating or updating resources
• managing account settings

Without interceptors, developers must manually add headers for each request, which:

• increases repetitive code
• increases the risk of missing authentication headers
• makes future changes harder (e.g., changing token handling)

Using **Axios interceptors ensures that authentication logic is centralized and automatically applied to all requests.

Benefits

Implementing Axios interceptors would provide several advantages:

• Reduces repetitive code across the frontend
• Centralizes authentication logic
• Simplifies API request syntax
• Improves maintainability
• Ensures consistent request configuration
• Makes future changes easier (e.g., token refresh logic)

This change would significantly improve the frontend architecture by standardizing how API requests are handled.

Add ScreenShots

No response

Priority

Medium

Record

• I have read the Contributing Guidelines
• I'm a GSSOC'24 contributor
• I'm a IEEE IGDTUW contributor
• I want to work on this issue

[github-actions]

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! 😊

[SB2318]

Yeah, I am working on this.

[SB2318]

Thanks @rushiii3 for your time. 😇