Components

All components use Svelte 5 snippets for their slot-like API. Import them from svelte-firekit.

<FirebaseApp>

Root provider component. Initializes Firebase, sets up Svelte context, and optionally enables App Check. Wrap your app (or root layout) with this component.

<FirebaseApp config={firebaseConfig}>
  {@render children()}
</FirebaseApp>

Props

Prop	Type	Required	Description
config	FirebaseOptions	Yes	Firebase config object
appCheckOptions	AppCheckOptions	No	Enable App Check

---

<SignedIn>

Renders its children only when the user is signed in (and not anonymous).

<SignedIn>
  <p>Only visible when signed in.</p>
</SignedIn>

No props.

---

<SignedOut>

Renders its children only when the user is not signed in.

<SignedOut>
  <a href="/login">Sign in</a>
</SignedOut>

No props.

---

<AuthGuard>

Conditionally renders content based on auth state and calls a callback when authorization fails.

<AuthGuard requireAuth={true} onUnauthorized={() => goto('/login')}>
  <p>Protected content</p>
</AuthGuard>

Props

Prop	Type	Required	Description
requireAuth	boolean	Yes	true to require sign-in; false to require sign-out
onUnauthorized	() => void	No	Called when the condition is not met

---

<CustomGuard>

Runs async verification checks and renders content only when all pass.

<CustomGuard
  verificationChecks={[
    async () => {
      const snap = await getDoc(doc(db, 'users', userId));
      return snap.data()?.role === 'admin';
    },
  ]}
  onUnauthorized={() => goto('/403')}
>
  <p>Admin-only content</p>
</CustomGuard>

Props

Prop	Type	Required	Description
verificationChecks	Array<() => Promise<boolean>>	Yes	Async functions that all must return true
onUnauthorized	() => void	No	Called when any check returns false

---

<Doc>

Reactive Firestore document subscription.

<Doc path="posts/my-post-id">
  {#snippet data(post)}
    <h1>{post.title}</h1>
  {/snippet}
  {#snippet loading()}
    <p>Loading…</p>
  {/snippet}
  {#snippet error(err)}
    <p>{err.message}</p>
  {/snippet}
</Doc>

Props

Prop	Type	Required	Description
path	string	Yes	Firestore document path
includeMetadataChanges	boolean	No	Listen to metadata changes

Snippets

Name	Args	Rendered when
data	T	Document data is available
loading	—	Fetching initial data
error	Error	Subscription fails
missing	—	Document does not exist

---

<Collection>

Reactive Firestore collection subscription.

<Collection path="posts" query={[where('published', '==', true)]}>
  {#snippet data(posts)}
    {#each posts as post (post.id)}
      <article>{post.title}</article>
    {/each}
  {/snippet}
  {#snippet loading()}
    <p>Loading…</p>
  {/snippet}
</Collection>

Props

Prop	Type	Required	Description
path	string	Yes	Firestore collection path
query	QueryConstraint[]	No	Query constraints

Snippets

Name	Args	Rendered when
data	T[]	Collection data is available
loading	—	Fetching initial data
error	Error	Subscription fails

---

<Node>

Reactive Realtime Database node subscription.

<Node path="chat/messages">
  {#snippet data(messages)}
    <!-- messages is the raw RTDB value -->
    {JSON.stringify(messages)}
  {/snippet}
  {#snippet loading()}
    <p>Loading…</p>
  {/snippet}
</Node>

Props

Prop	Type	Required	Description
path	string	Yes	RTDB path

Snippets

Name	Args	Rendered when
data	Raw RTDB value	Data is available
loading	—	Fetching initial data
error	Error	Subscription fails

---

<DownloadURL>

Resolves a Firebase Storage download URL reactively.

<DownloadURL path="images/avatar.jpg">
  {#snippet data(url)}
    <img src={url} alt="Avatar" />
  {/snippet}
  {#snippet loading()}
    <div class="skeleton" />
  {/snippet}
</DownloadURL>

Props

Prop	Type	Required	Description
path	string	Yes	Storage file path

Snippets

Name	Args	Rendered when
data	string (URL)	URL is resolved
loading	—	Resolving URL
error	Error	URL cannot be resolved

---

<UploadTask>

Manages a resumable Storage upload.

<UploadTask path={`uploads/${file?.name}`} {file}>
  {#snippet data({ progress, state, downloadURL, error })}
    <progress value={progress} max={100} />
    {#if downloadURL}<a href={downloadURL}>Download</a>{/if}
  {/snippet}
</UploadTask>

Props

Prop	Type	Required	Description
path	string	Yes	Destination Storage path
file	File	Yes	File to upload
metadata	SettableMetadata	No	Custom metadata

Snippets

Name	Args	Description
data	{ progress, state, downloadURL, bytesTransferred, totalBytes, error }	Upload state