# React SDK Guide

> Aerostack React SDK guide — @aerostack/react hooks for auth, realtime, and presence in any React or Next.js application.

The `@aerostack/react` package provides a set of React Hooks and a Provider to easily integrate Aerostack services into your React applications.

## Installation

```bash
npm install @aerostack/react
```

## Setup

Wrap your application with the `AerostackProvider` to provide the SDK context to your components. Use your **Project ID** found in the Aerostack dashboard.

```tsx
// src/main.tsx

const config = {
  projectId: 'proj_abc123',
  baseUrl: 'https://api.aerostack.dev/v1'
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  
    
  
);
```

## Hooks

### `useAuth`
Manage user sessions, sign in, and registration.

```tsx

function Profile() {
  const { user, signIn, signOut, loading } = useAuth();

  if (loading) return <div>Loading...</div>;

  return user ? (
    <div>
      <p>Welcome, {user.name}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  ) : (
    <button onClick={() => signIn({ email: 'user@example.com', password: '...' })}>
      Sign In
    </button>
  );
}
```

### `useAerostack` (Custom Module Calls)
Invoke your server-side Logic Modules from the frontend. This is the recommended way to interact with your database and AI features from a React app.

```tsx

function SearchComponent() {
  const { sdk } = useAerostack();
  const [results, setResults] = useState([]);

  const handleSearch = async (query: string) => {
    // Invoke a Logic Lab module named 'search-products'
    const data = await sdk.call('search-products', { query });
    setResults(data);
  };

  return (
    // ... search UI
  );
}
```

  **Architectural Tip**: For security and performance, frontend applications should use `sdk.call()` to trigger server-side Logic Modules. Direct database or cache access from the frontend is restricted to ensure your project's data remains secure.

## Security

On the client side, **never** use your Secret API Keys. The React SDK is designed to work with public endpoints that are secured by Project IDs and User Sessions.