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

---

<NetworkStatus>

Renders snippets based on network and Firestore sync status.

<NetworkStatus>
  {#snippet online()}<span class="dot green" />{/snippet}
  {#snippet offline()}<span class="dot red">Offline</span>{/snippet}
  {#snippet pending()}<span>Saving...</span>{/snippet}
</NetworkStatus>

No required props.

Snippets

Name	Args	Rendered when
online	—	Browser is online and all writes are synced
offline	—	Browser is offline
pending	—	There are pending Firestore writes

---

<UploadTask>

Manages a resumable Storage upload with optional file validation.

<UploadTask
  path="uploads/{file.name}"
  {file}
  validate={{ maxSize: 5 * 1024 * 1024, accept: ['image/*'] }}
>
  {#snippet uploading(task)}
    <progress value={task.progress} max={100} />
    <button onclick={task.pause}>Pause</button>
  {/snippet}
  {#snippet complete(url)}
    <img src={url} alt="uploaded" />
  {/snippet}
  {#snippet error(err)}
    <p>{err.message}</p>
  {/snippet}
  {#snippet invalid(result)}
    {#each result.errors as err}
      <p class="error">{err.message}</p>
    {/each}
  {/snippet}
</UploadTask>

Props

Prop	Type	Required	Description
path	string	Yes	Destination Storage path
file	Blob | Uint8Array | ArrayBuffer	Yes	File or raw bytes to upload
metadata	UploadMetadata	No	Upload metadata (content type, custom metadata, etc.)
validate	FileValidationOptions	No	Validation rules (only applied when file is a File instance)

Snippets

Name	Args	Rendered when
uploading	{ progress, state, bytesTransferred, totalBytes, pause, resume, cancel }	Upload is active
complete	string (download URL)	Upload completed successfully
error	Error	Upload failed
invalid	FileValidationResult	File validation failed