Getting Started with WildwoodComponents

Before you begin, make sure you have:

• Node.js 18+ — Required for the native fetch API used by the core SDK.
• React 18+ — WildwoodComponents uses modern React features including hooks and context.
• pnpm, npm, or yarn — Any package manager works. Examples use pnpm.
• A WildwoodAPI instance — The components communicate with a WildwoodAPI backend. You need the base URL of a running instance.
• An AppId — Each client application registered in WildwoodAPI has a unique AppId to scope components to your application.

Before you begin, make sure you have:

• React Native 0.72+ — Or Expo SDK 49+.
• React 18+ — WildwoodComponents uses modern React features including hooks and context.
• pnpm, npm, or yarn — Any package manager works.
• A WildwoodAPI instance — The components communicate with a WildwoodAPI backend. You need the base URL of a running instance.
• An AppId — Each client application registered in WildwoodAPI has a unique AppId to scope components to your application.

Before you begin, make sure you have:

• Node.js 18+ — Required for the native fetch API used by the core SDK.
• Express 4+ or 5+ — The middleware is designed for Express, but the core SDK works standalone.
• A WildwoodAPI instance — The SDK communicates with a WildwoodAPI backend. You need the base URL of a running instance.
• An API Key — Server-side usage requires an API key (never expose this to client-side code).

# Install packages
pnpm add @wildwood/core @wildwood/react

// App.tsx - Wrap with provider
import { WildwoodProvider, AuthenticationComponent } from '@wildwood/react';

function App() {
  return (
    <WildwoodProvider config={{
      baseUrl: 'https://localhost:7046',
      appId: 'your-app-id',
    }}>
      <AuthenticationComponent
        onAuthenticationSuccess={(resp) => console.log('Logged in!', resp)}
      />
    </WildwoodProvider>
  );
}

# Install packages
pnpm add @wildwood/core @wildwood/react-native

// App.tsx - Wrap with provider
import { WildwoodProvider, AuthenticationComponent } from '@wildwood/react-native';

function App() {
  return (
    <WildwoodProvider config={{
      baseUrl: 'https://your-api.example.com',
      appId: 'your-app-id',
      storage: 'asyncStorage',
    }}>
      <AuthenticationComponent
        onAuthenticationSuccess={(resp) => navigation.navigate('Home')}
      />
    </WildwoodProvider>
  );
}

# Install packages
pnpm add @wildwood/core @wildwood/node

// server.ts - Express middleware
import express from 'express';
import { createAuthMiddleware } from '@wildwood/node';

const app = express();

const auth = createAuthMiddleware({
  baseUrl: 'https://localhost:7046',
  apiKey: process.env.WILDWOOD_API_KEY!,
});

app.use('/api', auth);
app.get('/api/profile', (req, res) => {
  res.json(req.wildwoodUser);
});

The JavaScript SDK uses a layered architecture: a framework-agnostic @wildwood/core handles all API communication and state, while @wildwood/react and @wildwood/react-native provide thin UI wrappers with hooks and components.

Your App (React / React Native)
  |
  +-- @wildwood/react or @wildwood/react-native (UI layer)
  |     |-- WildwoodProvider (React Context)
  |     |-- AuthenticationComponent
  |     |-- AIChatComponent
  |     |-- Hooks: useAuth, useAI, usePayment, ...
  |
  +-- @wildwood/core (SDK layer)
  |     |-- WildwoodClient (main entry point)
  |     |-- client.auth, client.ai, client.payment, ...
  |     |-- SessionManager (token refresh, storage)
  |     |-- EventEmitter (authChanged, sessionExpired)
  |
  +-- WildwoodAPI (backend)
        |-- JWT Authentication
        |-- Multi-tenant data isolation
        |-- AI provider orchestration
        |-- Payment processing
        |-- ...

The Node.js SDK provides Express middleware for JWT validation and API proxying, plus a server-side admin client built on @wildwood/core.

Your Server (Express / Node.js)
  |
  +-- @wildwood/node (middleware layer)
  |     |-- authMiddleware (JWT validation)
  |     |-- proxyMiddleware (API proxying)
  |     |-- adminClient (user management)
  |
  +-- @wildwood/core (SDK layer)
  |     |-- WildwoodClient (main entry point)
  |     |-- HTTP client with auth headers
  |     |-- Token validation utilities
  |
  +-- WildwoodAPI (backend)
        |-- JWT Authentication
        |-- Multi-tenant data isolation
        |-- AI provider orchestration
        |-- Payment processing
        |-- ...