QuickStart

SvelteFire works in both SvelteKit and standalone Svelte apps. This guide assumes you’re using SvelteKit.

1. Install

npm i sveltefire firebase

2. Initialize

Initialize Firebase and add the FirebaseApp component to the component tree. Typically, this is done in the root +layout.svelte file to access Firebase on all pages.

+layout.svelte

<script lang="ts">
    import { FirebaseApp } from 'sveltefire';
    import { initializeApp } from 'firebase/app';
    import { getFirestore } from 'firebase/firestore';
    import { getAuth } from 'firebase/auth';

    // Initialize Firebase
    const app = initializeApp(/* your firebase config */);
    const firestore = getFirestore(app);
    const auth = getAuth(app);
</script>

<FirebaseApp {auth} {firestore}>
    <slot />
</FirebaseApp>

3. Use Firebase!

You can use stores to access the current user and Firestore.

<script>
  import { docStore, userStore } from 'sveltefire';

  const user = userStore();
  const post = docStore('posts/id');

</script>

{$user?.displayName}
{$post?.content}

Or you can use components to more easily pass data around. Notice how slot props like let:user and let:data allow us to access data from the backend with minimal effort. Here are some common examples.

<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>