⭐ Get Started

This example works in both Svelte and SvelteKit, but we recommend you to use SvelteKit as it can be used just like svelte, with more functionnalities.

1. 1. Install

   Install the package from npm:

   npm install firebase-svelte firebase

2. 2. Initialize

   Initalize firebase using your config and add the `<FirebaseApp>` component somewhere in your project, typically in the `+layout.svelte` file to use Firebase everywhere.

   Keep in mind that if you, for example, only provide the `auth` prop, you will only be able to use the auth components. Here is a list of all the available props of the `<FirebaseApp>` component.

   +layout.svelte

   <script lang="ts">
     import { FirebaseApp } from 'firebase-svelte';
     import { initializeApp } from 'firebase/app';
     import { getFirestore } from 'firebase/firestore';
     import { getAuth } from 'firebase/auth';
   
     // Initialize Firebase
     const app = initializeApp(/* Firebase Config */)
     const auth = getAuth(app);
     const firestore = getFirestore(app);
   </script>
   
   <FirebaseApp {auth} {firestore}>
     <slot />
   </FirebaseApp>
             

3. 3. Use as much as you want

   Now you can use any component you want, for example :

   +page.svelte

   <script>
     import { Collection, Doc, User } from 'firebase-svelte';
     import { firestore, auth } from '$lib/firebase';
   </script>
   
   
   <!-- 1. 🧑‍🤝‍🧑 User -->
   <User let:user>
     
     <p>Hello, {user.displayName}</p>
   
     <!-- 2. 📄 Document, for example owned by a user -->
     <Doc 
   	  ref={`posts/${user.uid}`} 
   	  let:data={post} 
   	  let:ref={postRef}
     >
   
     <h2>{post.title}</h2>
   
       <!-- 3. 📚 Collection, 
       for example comments on a post -->
       <Collection 
         ref={`${postRef.path}/comments`} 
         let:data={comments}
       >
         {#each comments as comment}
           <p>{comment.content}</p>
         {/each}
       </Collection>
     </Doc>
   </User>