@arbase-js/react

React provider and hooks for arbase-js.

npm install arbase-js @arbase-js/react

Quick start

import { createBrowserClient, ArbaseProvider, useSession, useUser } from '@arbase-js/react'

const arbase = createBrowserClient(
  import.meta.env.VITE_ARBASE_URL,
  import.meta.env.VITE_ARBASE_ANON_KEY,
)

export function App() {
  return (
    <ArbaseProvider client={arbase}>
      <Profile />
    </ArbaseProvider>
  )
}

function Profile() {
  const { session, isLoading } = useSession()
  const { user } = useUser()
  if (isLoading) return <p>Loading…</p>
  if (!session) return <p>Signed out</p>
  return <p>Hello {user?.email}</p>
}

API

| Export | Description | |--------|-------------| | ArbaseProvider | Provides client + live session | | useArbase() | Returns the ArbaseClient | | useSession() | { session, isLoading } | | useUser() | { user, isLoading } | | createBrowserClient(url, anonKey) | Browser-safe client (rejects service keys) |

Auth state is synchronized via arbase-js onAuthStateChange.

Query hooks (useQuery, etc.) are not included in v0.1 — call client.from(...).select() directly (or add React Query yourself).

Next.js

Use createBrowserClient only from Client Components:

'use client'

import { createBrowserClient, ArbaseProvider } from '@arbase-js/react'

const client = createBrowserClient(
  process.env.NEXT_PUBLIC_ARBASE_URL!,
  process.env.NEXT_PUBLIC_ARBASE_ANON_KEY!,
)

export function Providers({ children }: { children: React.ReactNode }) {
  return <ArbaseProvider client={client}>{children}</ArbaseProvider>
}

Never put a service-role key in NEXT_PUBLIC_* env vars.

Scripts

| Command | Purpose | |---------|---------| | npm run build | ESM + CJS + types | | npm test | Hook/provider tests | | npm run pack:check | Dry-run pack |