SvelteFire

Authentication Components

• SignedIn: Renders its content only when a user is authenticated. Provides let:user and let:signOut slot props.
• SignedOut: Renders its content only when no user is authenticated. Provides let:auth slot prop.

Firestore Components

• Doc: Fetches a single document. Use ref="path/to/doc" and access the data via let:data.
• Collection: Fetches a collection of documents. Use ref="collection_name" and access the array via let:data={items}.

<script>
  import { SignedIn, SignedOut, Doc, Collection } from 'sveltefire';
  import { signInAnonymously } from "firebase/auth";
</script>

<SignedIn let:user let:signOut>
    <p>Hello {user.uid}</p>
    <button on:click={signOut}>Sign Out</button>
</SignedIn>

<SignedOut let:auth>
    <button on:click={() => signInAnonymously(auth)}>Sign In</button>
</SignedOut>

<Doc ref="posts/id" let:data>
    <h2>{data.title}</h2>
    <p>{data.content}</p>
</Doc>

<Collection ref="posts" let:data={posts}>
    {#each posts as post}
        <h2>{post.title}</h2>
        <p>{post.content}</p>
    {/each}
</Collection>

SvelteFire is primarily a client-side library, but you can achieve Server-Side Rendering (SSR) by hydrating server-fetched data into a realtime stream.

1. In your SvelteKit load function (e.g., +page.ts), fetch the initial data using standard Firebase SDK methods like getDoc.
2. In your Svelte component (+page.svelte), pass that loaded data to the startWith prop of a SvelteFire component (like Doc).

This approach ensures the data is rendered in the initial HTML sent by the server, bypassing the loading state. Realtime listeners are then attached on the client side.

Note: This pattern results in two Firestore reads on the initial page load. Use this only when realtime updates are necessary for the specific data.

// +page.ts
import { doc, getDoc } from 'firebase/firestore';

export const load = (async () => {
  const ref = doc(firestore, 'posts', 'first-post');
  const snapshot = await getDoc(ref);
  return {
    post: snapshot.data(),
  };
});

// +page.svelte  
<script lang="ts">
  export let data: PageData;
</script>

<!-- Example using component -->
<Doc startWith={data.post} ref="posts/first-post" let:data={post}>
    <h2>{post.title}</h2>
    <p>{post.content}</p>
</Doc>

You can manage Firebase Storage uploads using the UploadTask component.

1. Capture a File object from an <input type="file">.
2. Pass the file to the data prop and the destination path to the ref prop of UploadTask.
3. Use the let:progress slot to get the upload percentage.
4. Use the let:snapshot slot to monitor the upload state (running, success, or error).
5. Once successful, use the DownloadURL component with the snapshot's reference to provide a download link to the user.

<script lang="ts">
  let file: File;
  let filePath = "things/test.png";

  function chooseFile(event) {
    file = event.target.files[0];
  }
</script>

<input type="file" on:change={chooseFile} />

{#if file}
  <UploadTask ref={filePath} data={file} let:progress let:snapshot>
    {#if snapshot?.state === "running" || snapshot?.state === "success"}
      <p>{progress}% uploaded</p>
      <progress value={progress} max="100" />
    {/if}

    {#if snapshot?.state === "error"}
      Upload failed
    {/if}

    {#if snapshot?.state === "success"}
      <DownloadURL ref={snapshot?.ref} let:link let:ref>
        <a href={link} download> {ref?.name} </a>
      </DownloadURL>
    {/if}
  </UploadTask>
{/if}

The DownloadURL component retrieves and provides the download URL for a specific file stored in Firebase Storage. It manages the loading state automatically and exposes the resulting URL via a slot prop.

Props

• ref: A Firebase Storage reference or a path string (e.g., files/hi-mom.txt).

Slots

• default: The content to display once the URL has been successfully retrieved.
• loading: The content to display while the URL is being fetched.

Slot Props

When using the default slot, you can access the following properties using the let: directive:

• link: The generated download URL.
• ref: The Firebase Storage reference.
• storage: The Firebase Storage instance.

<script>
  import  { DownloadURL } from "sveltefire";
</script>


<DownloadURL ref="images/pic.png" let:link let:ref>
    <!-- show img -->
    <img src={link} />

    <!-- or download via link -->
    <a href={link} download>{ref?.name}</a>
</DownloadURL>

SvelteFire provides components that use slot props to simplify common Firebase patterns, such as fetching relational data (e.g., user -> post -> comments).

Common components include:

• <FirebaseApp>: The root component that initializes the Firebase connection.
• <SignedIn>: Renders content only if a user is authenticated, providing the user object via let:user.
• <Doc>: Fetches a Firestore document based on a ref prop, providing the document data and its ref via let:data and let:ref.
• <Collection>: Fetches a collection of documents based on a ref prop, providing the array of documents via let:data.

<!-- 1. 🔥 Firebase App -->
<FirebaseApp {auth} {firestore}>

    <!-- 2. 👤 Get the current user -->
    <SignedIn let:user>

        <p>Howdy, {user.uid}</p>

        <!-- 3. 📜 Get a Firestore document owned by a user -->
        <Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
            
            <h2>{post.title}</h2>

            <!-- 4. 💬 Get all the comments in its subcollection -->
            <Collection ref={postRef.path + '/comments'} let:data={comments}>
                {#each comments as comment}
                    <!-- Render comment -->
                {/each}
            </Collection>
        </Doc>
    </SignedIn>
</FirebaseApp>

SvelteFire provides a set of components that wrap Firebase services, allowing you to fetch data and manage authentication state directly within your Svelte templates. These components use Svelte's let: directive to expose data to their children.

Common components include:

• <FirebaseApp>: Initializes the Firebase environment.
• <SignedIn>: Provides access to the currently authenticated user.
• <Doc>: Fetches a specific Firestore document.
• <Collection>: Fetches a collection of documents (often used for subcollections).

<!-- 1. 🔥 Firebase App -->
<FirebaseApp {auth} {firestore}>

  <!-- 2. 👤 Get the current user -->
  <SignedIn let:user>

    <p>Howdy, {user.uid}</p>

    <!-- 3 (a). 📜 Get a Firestore document owned by a user -->
    <Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>

      <h2>{post.title}</h2>

      <!-- 4 (a). 💬 Get all the comments in its subcollection -->
      <Collection ref={postRef.path + '/comments'} let:data={comments}>
        {#each comments as comment}
          <!-- Render comments -->
        {/each}
      </Collection>

    </Doc>

  </SignedIn>

</FirebaseApp>