### Using Authentication Context with useAuth Hook

Source: https://github.com/dodopayments/dodopayments-raycast/blob/main/CONTRIBUTING.md

Demonstrates how to use the `useAuth` hook from the Authentication Context to access authentication state (config, isAuthenticated, isLoading, error), and authenticated API fetch functions. It shows an example of making an authenticated API call and handling potential errors.

```typescript
import { useAuth } from "./contexts/AuthContext";

function MyComponent() {
  const {
    config,           // Current auth configuration
    isAuthenticated,  // Boolean auth status
    isLoading,        // Loading state
    error,            // Error message if any
    authenticatedFetch, // Pre-configured fetch function
    refreshAuth       // Function to reload auth
  } = useAuth();

  const fetchData = async () => {
    try {
      const response = await authenticatedFetch("/api/endpoint");
      const data = await response.json();
      return data;
    } catch (error) {
      console.error("API call failed:", error);
    }
  };

  return <div>Current mode: {config?.mode}</div>;
}
```

--------------------------------

### Authentication Context Interface (TypeScript)

Source: https://github.com/dodopayments/dodopayments-raycast/blob/main/AUTHENTICATION.md

Defines the structure for the Authentication Context, outlining the properties and methods available for managing authentication state, including configuration, status, loading state, errors, and authenticated fetch functionality.

```typescript
interface AuthContextType {
  config: AuthConfig | null; // Current auth configuration
  isAuthenticated: boolean; // Authentication status
  isLoading: boolean; // Loading state
  error: string | null; // Error message if any
  refreshAuth: () => void; // Reload authentication
  authenticatedFetch: (endpoint, options) => Promise<Response>; // Pre-configured fetch
}
```

--------------------------------

### Basic Usage with Auth Context Hook (TypeScript)

Source: https://github.com/dodopayments/dodopayments-raycast/blob/main/AUTHENTICATION.md

Demonstrates how to consume the Authentication Context in a React component using the `useAuth` hook. It shows how to access the authentication configuration and use the `authenticatedFetch` function to make API calls, with a check for authentication status.

```typescript
import { useAuth } from "./contexts/AuthContext";

function MyComponent() {
  const { config, authenticatedFetch, isAuthenticated } = useAuth();

  const fetchData = async () => {
    if (!isAuthenticated) return;

    const response = await authenticatedFetch("/api/endpoint");
    const data = await response.json();
    return data;
  };

  return <div>Mode: {config?.mode}</div>;
}
```

--------------------------------

### Applying Authentication Higher-Order Components (HOCs)

Source: https://github.com/dodopayments/dodopayments-raycast/blob/main/CONTRIBUTING.md

Shows how to wrap a React component with `withAuth` and `withAuthGuard` HOCs for automatic authentication handling. `withAuth` provides the authentication context, and `withAuthGuard` ensures the component is only rendered when authenticated, displaying an error UI otherwise.

```typescript
import { withAuth, withAuthGuard } from "./contexts/AuthContext";

function MyComponent() {
  // Your component logic here
  // Authentication is automatically handled
}

// Export with authentication wrappers
export default withAuth(withAuthGuard(MyComponent));
```

--------------------------------

### Automatic Authentication Handling with HOCs (TypeScript)

Source: https://github.com/dodopayments/dodopayments-raycast/blob/main/AUTHENTICATION.md

Illustrates how to apply Higher-Order Components (HOCs) like `withAuth` and `withAuthGuard` to a React component for automatic authentication management. This simplifies the process by abstracting away the authentication checks within the component's rendering logic.

```typescript
import { withAuth, withAuthGuard } from "./contexts/AuthContext";

function MyComponent() {
  // Component logic here
  // Authentication is automatically handled
}

// Export with authentication wrappers
export default withAuth(withAuthGuard(MyComponent));
```

--------------------------------

### Manual Authentication Guard Usage (TypeScript)

Source: https://github.com/dodopayments/dodopayments-raycast/blob/main/AUTHENTICATION.md

Shows how to use the `useAuthGuard` hook to manually implement an authentication guard within a React component. The `AuthGuard` component ensures that its children are only rendered when the user is authenticated, providing a clear way to protect specific UI sections.

```typescript
import { useAuthGuard } from "./hooks/useAuthGuard";

function MyComponent() {
  const { isReady, AuthGuard } = useAuthGuard();

  return (
    <AuthGuard>
      {/* This content only shows when authenticated */}
      <MyAuthenticatedContent />
    </AuthGuard>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.