Client-side only: this playground runs in your browser. Firebase keys stay in sessionStorage on this tab — we never send or store them on our servers.

React hooks

Live bindings through refirebase/react.

refirebase/react
import {
  RefirebaseProvider,
  useCollection,
  useUser,
} from 'refirebase/react';

function Inbox() {
  const { user } = useUser();
  const { data } = useCollection('messages');
  
  return <pre>{JSON.stringify({ user, data }, null, 2)}</pre>;
}

Connect a Firebase project

Paste your web config on the credentials page. Nothing is saved on our side — the SDK talks to Firebase from this tab only.

Add credentials