React SDK

The @aerostack/react package provides React hooks and context for auth and realtime features. It’s designed for client-side use in React, Next.js, Remix, and any other React-based framework.

Install

npm install @aerostack/react

Setup

Wrap your app with AerostackProvider:

// app.tsx (or _app.tsx for Next.js pages router)
import { AerostackProvider } from '@aerostack/react'

export default function App({ children }) {
  return (
    <AerostackProvider
      projectId="your-project-id"
      apiKey="your-api-key"
      baseUrl="https://api.aerostack.dev/v1"
    >
      {children}
    </AerostackProvider>
  )
}

Provider props

Prop	Type	Required	Description
projectId	string	Yes	Your Aerostack project ID
apiKey	string	Yes	Your project’s public API key
baseUrl	string	No	API base URL (default: https://api.aerostack.dev/v1)

Caution

The apiKey here is your public project key (safe to expose to the browser). Never use your admin or secret key on the client.

Available hooks

Hook	Description
useAuth()	Authentication state and methods
useAerostack()	Access to sdk, realtime, and provider config

Quick usage

import { useAuth } from '@aerostack/react'

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

  if (loading) return <p>Loading...</p>
  if (!user) return <button onClick={() => signIn(email, pw)}>Sign in</button>
  return (
    <div>
      <p>Hello, {user.name}</p>
      <button onClick={signOut}>Sign out</button>
    </div>
  )
}

Next steps

• Authentication — full useAuth hook reference
• Realtime — useAerostack + channel subscriptions
• Hooks Reference — complete API table