Example

Todo App

Auth · REST API · Realtime — built with @motherbase/ui and @motherbase/client

Todo App

'use client'
import { MotherbaseProvider } from '@motherbase/ui'
import { getBrowserClient } from '@/lib/motherbase/browser'

// One provider at the root: every component below reads the session from context.
export function Providers({ children }) {
  return <MotherbaseProvider client={getBrowserClient()}>{children}</MotherbaseProvider>
}

// Anywhere below — no props to pass down:
const user = useUser()

Backend setup

Add the Todo model to your Motherbase project and add an owner-scoped RLS policy so each signed-in user sees only their own rows.

Setup

-- Project Studio -> Database -> SQL

CREATE TABLE todo (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  title text NOT NULL,
  done boolean NOT NULL DEFAULT false,
  user_id text NOT NULL DEFAULT auth.uid(),
  created_at timestamptz NOT NULL DEFAULT now()
);

ALTER TABLE todo ENABLE ROW LEVEL SECURITY;

-- Every user can only see, modify, and delete their own rows.
-- No anon policy: signed-out requests match no policy and are blocked.
CREATE POLICY "todo owner access"
ON todo FOR ALL
TO authenticated
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);