Axios

Overview Modern web development often requires a clean separation between the data layer and the presentation layer. Connecting Remix to a Laravel REST API allows you to utilize the powerful server-side rendering (SSR) capabilities of React while keeping your business logic within a robust PHP backend. This approach moves authentication logic to the server, enhancing security by keeping sensitive tokens out of the client's reach. Prerequisites To follow this guide, you should have a solid grasp of JavaScript and React. You will also need Node.js installed and a functioning Laravel API. Familiarity with environment variables and HTTP requests is essential. Key Libraries & Tools * **Axios:** A promise-based HTTP client used to perform requests to the API. * **dotenv:** Loads configuration variables from a `.env` file. * **Tailwind CSS:** A utility-first CSS framework for rapid UI development. * **Laravel Sanctum:** Provides the token-based authentication system on the backend. Code Walkthrough Configuring the Server-Side Axios Instance Create `services/axios.server.js` to centralize your API requests. This ensures every request uses the correct base URL and handles errors globally. ```javascript import axios from "axios"; const api = axios.create({ baseURL: process.env.API_HOST, headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); api.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { throw redirect("/login"); } return Promise.reject(error); } ); export default api; ``` Secure Session Management Instead of storing tokens in `localStorage`, we use encrypted cookies. This mitigates Cross-Site Scripting (XSS) risks. In `services/oauth.server.js`, we initialize the cookie storage. ```javascript import { createCookieSessionStorage } from "@remix-run/node"; export const storage = createCookieSessionStorage({ cookie: { name: "_session", secure: process.env.NODE_ENV === "production", secrets: [process.env.SESSION_SECRET], sameSite: "lax", path: "/", maxAge: 60 * 60 * 24 * 30, httpOnly: true, }, }); ``` Syntax Notes Remix uses **loaders** for GET requests and **actions** for mutations. By throwing a `redirect()` object within an interceptor, you can halt the execution flow and force the browser to a new URL, a pattern that simplifies authentication checks across multiple routes. Practical Examples This architecture is ideal for high-security applications like dashboards or booking systems. By fetching data in the loader, Remix populates the page before it reaches the user, improving SEO and perceived performance. Tips & Gotchas Always include the `Accept: application/json` header. Without it, Laravel might return HTML error pages instead of JSON during a failure. Remember that `httpOnly` cookies cannot be accessed by client-side scripts, so all token logic must reside in your server-side files.