Switching Adapters

The sample app supports switching between Mock, Supabase, and PocketBase adapters at runtime. The adapter picker is accessible from both the login screen and the profile screen.

How It Works

When you switch adapters, the app:

1. Creates a new SDK client with the selected adapter
2. Resets the auth state (you'll need to sign in again)
3. All subsequent queries go through the new adapter

// From lib/client.ts
export async function buildClient(config: AdapterConfig) {
  if (config.type === 'mock') {
    return createSeededMockClient(); // pre-seeded data
  }

  if (config.type === 'supabase') {
    const { SupabaseAdapter } = await import(
      '@vibecode-db/client/adapters/supabase'
    );
    const adapter = new SupabaseAdapter({
      supabaseUrl: config.supabaseUrl!,
      supabaseKey: config.supabaseKey!,
    });
    return createClient(url, key, { adapter });
  }

  if (config.type === 'pocketbase') {
    const { PocketBaseAdapter } = await import(
      '@vibecode-db/client/adapters/pocketbase'
    );
    const adapter = new PocketBaseAdapter({
      url: config.pocketbaseUrl!,
    });
    return createClient(url, '', { adapter });
  }
}

Mock Adapter

No configuration needed. Comes with seeded data:

• 3 blog posts with titles, content, and timestamps
• 1 user profile with name and bio
• Sign up with any email/password to create a new user

Supabase Adapter

Requires a Supabase project:

1. Enter your Project URL (e.g. https://xxx.supabase.co)
2. Enter your Anon Key
3. Your Supabase project needs posts and profiles tables

Required Tables

create table posts (
  id serial primary key,
  title text not null,
  content text not null,
  author_id text not null,
  author_name text,
  created_at timestamptz default now()
);

create table profiles (
  id text primary key,
  email text,
  name text,
  bio text,
  avatar_url text
);

PocketBase Adapter

Requires a running PocketBase instance:

1. Enter your PocketBase URL (default: http://127.0.0.1:8090)
2. Create posts and profiles collections in the PocketBase admin UI

NativeWind v4 Setup

The app uses NativeWind v4 for Tailwind CSS support in React Native. Key configuration: