$autx

$autx is a universal API client that automatically handles authentication headers, CSRF tokens (for Sanctum), and error handling for your API requests.

Overview

The $autx composable is a wrapper around ofetch that automatically includes authentication credentials and handles common authentication scenarios:

• Automatic CSRF handling for Sanctum (POST, PUT, PATCH, DELETE requests)
• Automatic Bearer token inclusion for Passport
• Automatic credentials handling (cookies for Sanctum)
• Automatic 401 error handling with logout and app reload
• Type-safe request/response handling

Usage

Basic Request

const data = await $autx('/api/users');

POST Request

const result = await $autx('/api/users', {
  method: 'POST',
  body: {
    name: 'John Doe',
    email: 'john@example.com'
  }
});

PUT Request

const updated = await $autx('/api/users/1', {
  method: 'PUT',
  body: {
    name: 'Jane Doe'
  }
});

DELETE Request

await $autx('/api/users/1', {
  method: 'DELETE'
});

Custom Headers

const data = await $autx('/api/data', {
  headers: {
    'Custom-Header': 'value'
  }
});

Custom Base URL

const data = await $autx('/endpoint', {
  baseURL: 'https://api.example.com'
});

Provider-Specific Behavior

Sanctum Provider

When using the Sanctum provider, $autx automatically:

• Includes CSRF token for POST, PUT, PATCH, DELETE requests
• Sets credentials: 'include' for cookie-based authentication
• Handles 401 errors by logging out and reloading the app

Passport Provider

When using the Passport provider, $autx automatically:

• Includes the Bearer token in the Authorization header
• Handles 401 errors by logging out the current strategy

Error Handling

$autx automatically handles authentication errors:

• 401 Unauthorized: Automatically logs out the user and reloads the app (Sanctum)
• Other errors: Throws a Nuxt error with status code and response data

Custom Error Handling

try {
  const data = await $autx('/api/data');
} catch (error) {
  // Handle error
  console.error(error);
}

Type Safety

$autx is fully typed. You can specify the response type:

interface User {
  id: number;
  name: string;
  email: string;
}

const user = await $autx<User>('/api/user');
// user is typed as User

Options

$autx accepts all ofetch options:

Complete Example

// Create a new user
const newUser = await $autx('/api/users', {
  method: 'POST',
  body: {
    name: 'John Doe',
    email: 'john@example.com',
    password: 'secret123'
  }
});

// Fetch authenticated user
const user = await $autx('/api/user');

// Update user
const updated = await $autx('/api/user', {
  method: 'PUT',
  body: {
    name: 'Jane Doe'
  }
});

// Delete user
await $autx('/api/user', {
  method: 'DELETE'
});

Notes

• $autx requires the auth instance to be available
• For Sanctum, CSRF tokens are automatically fetched and included
• For Passport, Bearer tokens are automatically included from the auth instance
• All requests are logged to console on error for debugging