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.ai/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.ai/v1`)

⚠️

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

Overview Authentication