Svelte FireKit
Complete Firebase integration for Svelte 5 applications. Build MVPs faster with reactive state management, zero-config setup, and comprehensive UI components.
Everything You Need for Firebase
From authentication to real-time data, file storage to analytics - Svelte FireKit provides a complete solution for modern web applications.
Email/password, Google, Facebook, Apple, phone, and anonymous auth with automatic Firestore integration.
Reactive collections and documents with live updates, caching, and advanced querying.
Upload/download files with progress tracking, image optimization, and security rules.
User online/offline tracking with geolocation and real-time status updates.
Comprehensive event tracking and user behavior analytics integration.
Full server-side rendering support with hydration and SEO optimization.
Get Started in Minutes
Set up Svelte FireKit in your project and start building your MVP right away.
Quick Setup Guide
Install Dependencies
Install the library and Firebase SDK
npm install svelte-firekit firebaseConfigure Environment
Set up Firebase configuration variables
PUBLIC_FIREBASE_API_KEY=your_api_key
PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
PUBLIC_FIREBASE_PROJECT_ID=your_project_id
PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
PUBLIC_FIREBASE_APP_ID=your_app_idInitialize Firebase
Wrap your app with the FirebaseApp component
<FirebaseApp>
<!-- Your app content -->
<SignedIn>
{@render children(user)}
</SignedIn>
</FirebaseApp>Start Building
Use reactive stores and components
// Reactive user state
const user = $derived(firekitUser.user);
const isAuthenticated = $derived(firekitUser.isAuthenticated);
// Reactive collection
const posts = firekitCollection('posts');
// Use in components
<SignedIn>
{@render children(user)}
</SignedIn>Build MVPs Faster
Common patterns and components to accelerate your development process.
Complete auth system with multiple providers
import { SignedIn, SignedOut, AuthGuard } from '$lib/components/firekit';
<AuthGuard requireAuth={true} redirectTo="/login">
{#snippet children(user, auth, signOut)}
<h1>Welcome, {user.displayName}!</h1>
<button onclick={signOut}>Sign Out</button>
{/snippet}
</AuthGuard>
<SignedIn>
{#snippet children(user)}
<div>Hello, {user.displayName}!</div>
{/snippet}
</SignedIn>
<SignedOut>
{#snippet children(auth)}
<button onclick={() => signInWithGoogle()}>Sign In</button>
{/snippet}
</SignedOut>Live data synchronization with Firestore
import { Collection } from '$lib/components/firekit';
import { where } from 'firebase/firestore';
<Collection ref="posts">
{#snippet children(data, ref, firestore, count)}
<div>Total posts: {count}</div>
{#each data as post}
<article>
<h3>{post.title}</h3>
<p>{post.content}</p>
</article>
{/each}
{/snippet}
</Collection>
<!-- With query constraints -->
<Collection ref="posts" queryConstraints={[where('published', '==', true)]}>
{#snippet children(data, ref, firestore, count)}
{#each data as post}
<article>{post.title}</article>
{/each}
{/snippet}
</Collection>Drag & drop file upload with progress
import { UploadTask } from '$lib/components/firekit';
let fileData: File;
<input type="file" onchange={(e) => fileData = e.target.files[0]} />
<UploadTask ref="uploads/{fileData?.name}" data={fileData}>
{#snippet children(snapshot, uploadTask, progress, storage)}
<div>Progress: {progress}%</div>
{#if snapshot?.state === 'success'}
<div>Upload complete!</div>
{/if}
{/snippet}
</UploadTask>