remix-axios-auth

A lightweight utility for handling Axios requests with authentication tokens stored in cookies in Remix applications. This package simplifies the process of including authentication tokens in request headers for Axios calls.

Installation

To install remix-axios-auth, use npm or yarn:

npm install remix-axios-auth

yarn add remix-axios-auth

Environment Configuration

To configure the environment variables for your application, create a .env file in your project root:

# .env
VITE_BASE_URL=https://your-api-endpoint.com

Note: Make sure to add .env* files to your .gitignore to keep sensitive information secure.

Usage

Creating a Centralized Endpoint Configuration

For better code organization and reusability, you can create a dedicated endpoint file:

// app/utils/endpoint.ts
import { getClientEndPoint, getServerEndPoint } from "remix-axios-auth";

export const getEndpoint = (request?: Request) => {
  if (request) {
    return getServerEndPoint(request, {
      baseURL: import.meta.env.VITE_BASE_URL,
    });
  }
  return getClientEndPoint({
    baseURL: import.meta.env.VITE_BASE_URL,
  });
};

Server-Side Example (Loader)

You can use getServerEndPoint in a Remix loader to make requests with authentication from server-side cookies.

// In loaders

import { ClientLoaderFunctionArgs } from "@remix-run/react";

export const loader = async ({ request }: ClientLoaderFunctionArgs) => {
  const { endpoint } = getEndpoint(request);
  return await endpoint.get("/data");
};

In this example, the token is fetched from the cookies set by the browser, and the request is made with the Authorization header.

Client-Side Example (React Component)

For client-side requests, use getClientEndPoint to add the token from cookies to the request. You can optionally provide a base URL when initializing the endpoint.

const { endpoint } = getEndpoint();

useEffect(() => {
  const getData = async () => {
    try {
      const { data } = await endpoint.get("/workspace");
      setData(data);
    } catch (error) {
      setError((error as AxiosError).message);
    } finally {
      setIsLoading(false);
    }
  };

  getData();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

This will ensure the token is attached to requests made from the client-side.

// In loaders
export const loader = async ({ request }) => {
  const { endpoint } = getEndpoint(request);
  return await endpoint.get("/data");
};

// In components
export default function Component() {
  const { endpoint } = getEndpoint();
  // Use endpoint for API calls
}