Svelte Firekit

Svelte Firekit is a powerful Firebase toolkit for SvelteKit applications, providing a comprehensive set of utilities, stores, and components for seamless Firebase integration. Whether you're building a micro SaaS, web application, or any Firebase-powered project, Svelte Firekit streamlines your development process.

Installation

npm install firebase svelte-firekit

Configuration

Svelte Firekit automatically manages your Firebase configuration through environment variables. Create a .env file in your project root with the following variables:

PUBLIC_FIREBASE_API_KEY=your_api_key
PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
PUBLIC_FIREBASE_PROJECT_ID=your_project_id
PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
PUBLIC_FIREBASE_APP_ID=your_app_id
PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

The configuration is automatically handled by Firekit - no manual setup required. If any required environment variables are missing, Firekit will throw a helpful error indicating which variables need to be set.

Usage Example

Here's a simple example showing how to display the current user's name:

<script>
	import { firekitUser } from 'svelte-firekit';
</script>

Hello {firekitUser.displayName}

The firekitUser store provides access to the current user's information and authentication state.

Core Features

🔥 Firebase Integration

Zero-config Firebase setup through environment variables
Automatic initialization and app management
Built-in error handling and connection state management
Type-safe configuration management

🔐 Authentication

Complete authentication system with built-in components
Support for multiple authentication providers:
- Email/Password
- Google
- GitHub
- Custom providers
User state management and persistence through firekitUser store

📚 Firestore Integration

Reactive data stores for real-time updates
Simplified CRUD operations
Batch operations and transactions
Type-safe document references
Automatic data serialization/deserialization

📦 Storage Management

File upload and download utilities
Progress tracking and status updates
Storage security rules helpers
Image optimization utilities

⚡ Server-Side Rendering

Full SSR compatibility
Hydration support
Server-side data fetching
SEO-friendly rendering

🎯 Type Safety

Built with TypeScript
Complete type definitions
Intelligent autocomplete
Runtime type checking
Type-safe Firestore operations

Components

Svelte Firekit provides a comprehensive set of Svelte components for easy Firebase integration:

🔧 Core Components

`FirebaseApp`

The root component that initializes Firebase and provides context to child components.

<script>
	import { FirebaseApp } from 'svelte-firekit';
</script>

<FirebaseApp let:children>
	<!-- Your app content here -->
</FirebaseApp>

🔐 Authentication Components

`AuthGuard`

Protects routes and content based on authentication state.

<script>
	import { AuthGuard } from 'svelte-firekit';
</script>

<AuthGuard requireAuth={true} redirectTo="/login" let:children let:user let:auth let:signOut>
	<h1>Welcome, {user.displayName}!</h1>
	<button on:click={signOut}>Sign Out</button>
</AuthGuard>

`SignedIn`

Renders content only when a user is signed in.

<script>
	import { SignedIn } from 'svelte-firekit';
</script>

<SignedIn let:children let:user>
	<p>Hello, {user.displayName}!</p>
</SignedIn>

`SignedOut`

Renders content only when no user is signed in.

<script>
	import { SignedOut } from 'svelte-firekit';
</script>

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

`CustomGuard`

Advanced authentication guard with custom verification checks.

<script>
	import { CustomGuard } from 'svelte-firekit';

	const emailVerificationCheck = (user) => user.emailVerified;
</script>

<CustomGuard
	verificationChecks={[emailVerificationCheck]}
	redirectTo="/verify-email"
	let:children
	let:user
	let:auth
	let:signOut
>
	<p>Your email is verified!</p>
</CustomGuard>

📚 Firestore Components

`Collection`

Reactive component for Firestore collections with real-time updates.

<script>
	import { Collection } from 'svelte-firekit';
</script>

<Collection ref="users" let:children let:data let:ref let:firestore let:count>
	{#each data as user}
		<div>{user.name}</div>
	{/each}
	<p>Total users: {count}</p>
</Collection>

`Ddoc`

Reactive component for individual Firestore documents.

<script>
	import { Ddoc } from 'svelte-firekit';
</script>

<Ddoc ref="users/123" let:children let:data let:ref let:firestore>
	{#if data}
		<h1>{data.name}</h1>
		<p>{data.email}</p>
	{/if}
</Ddoc>

📦 Storage Components

`UploadTask`

Handles file uploads with progress tracking.

<script>
	import { UploadTask } from 'svelte-firekit';

	let file;
</script>

<input type="file" bind:files={file} />

<UploadTask
	ref="images/{file.name}"
	data={file}
	let:children
	let:snapshot
	let:task
	let:progress
	let:storage
>
	<div>Upload Progress: {progress}%</div>
	{#if snapshot?.state === 'success'}
		<p>Upload complete!</p>
	{/if}
</UploadTask>

`DownloadUrl`

Retrieves download URLs for storage files.

<script>
	import { DownloadUrl } from 'svelte-firekit';
</script>

<DownloadUrl ref="images/profile.jpg" let:children let:url let:ref let:storage>
	<img src={url} alt="Profile" />
</DownloadUrl>

`StorageList`

Lists files and folders in Firebase Storage.

<script>
	import { StorageList } from 'svelte-firekit';
</script>

<StorageList ref="images" let:children let:list let:ref let:storage>
	{#each list.items as item}
		<div>{item.name}</div>
	{/each}
	{#each list.prefixes as prefix}
		<div>📁 {prefix.name}</div>
	{/each}
</StorageList>

🔄 Realtime Database Components

`Node`

Reactive component for Realtime Database nodes.

<script>
	import { Node } from 'svelte-firekit';
</script>

<Node path="users/123" let:children let:data let:ref let:database>
	{#if data}
		<h1>{data.name}</h1>
		<p>Status: {data.status}</p>
	{/if}
</Node>

`NodeList`

Reactive component for Realtime Database lists.

<script>
	import { NodeList } from 'svelte-firekit';
</script>

<NodeList path="users" let:children let:data let:ref let:database>
	{#each data as user}
		<div>{user.name} - {user.status}</div>
	{/each}
</NodeList>

Why Svelte Firekit?

Zero Configuration: Automatic Firebase setup through environment variables
Type Safety: Full TypeScript support with built-in type checking
Rapid Development: Get your Firebase-powered SvelteKit application up and running in minutes
Best Practices: Built following Firebase and SvelteKit best practices
Production Ready: Battle-tested in production environments
Active Community: Regular updates and active community support
Extensible: Easy to customize and extend for your specific needs

Next Steps

Check out our Getting Started guide
Explore the API Reference
View Examples
Join our Community

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

License

Svelte Firekit is released under the MIT License. See the LICENSE file for more details.

Authentication

Svelte Firekit provides a comprehensive authentication system through the firekitAuth singleton, offering various authentication methods and user management features.

Basic Usage

import { firekitAuth } from 'svelte-firekit';

Authentication Methods

Google Authentication

await firekitAuth.signInWithGoogle();

Email/Password Authentication

// Sign in
await firekitAuth.signInWithEmail(email, password);

// Register
await firekitAuth.registerWithEmail(email, password, displayName);

// Sign out
await firekitAuth.logOut();

User Management

Password Management

// Send password reset email
await firekitAuth.sendPasswordReset(email);

// Update password (requires reauthentication)
await firekitAuth.updateUserPassword(newPassword, currentPassword);

Profile Management

// Update user profile
await firekitAuth.updateUserProfile({
	displayName: 'New Name',
	photoURL: 'https://example.com/photo.jpg'
});

Email Verification

// Send verification email
await firekitAuth.sendEmailVerificationToUser();

Account Deletion

// Delete user account
await firekitAuth.deleteUserAccount();

Automatic Firestore Integration

The authentication system automatically maintains a user document in Firestore with the following information:

User ID
Email
Email verification status
Display name
Photo URL
Authentication provider information
Anonymous status

Error Handling

All methods include proper error handling and return appropriate error messages. For example, password updates will return:

{
  success: boolean;
  message: string;
  code?: string; // In case of errors
}

Features

🔐 Multiple authentication providers
📝 Automatic user profile management
🔄 Password reset and update functionality
✉️ Email verification
🗑️ Account deletion
🔄 Reauthentication support
📚 Automatic Firestore user document management
⚡ Type-safe operations

Important Notes

User data is automatically synchronized with Firestore
Password updates require current password verification
Account deletion removes both authentication and Firestore data
All operations are fully typed for TypeScript support

Name		Name	Last commit message	Last commit date
Latest commit History 61 Commits
.cursor/rules		.cursor/rules
src		src
static		static
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
app.d.ts		app.d.ts
app.html		app.html
package-lock.json		package-lock.json
package.json		package.json
svelte.config.js		svelte.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

code-gio/svelte-firekit

Folders and files

Latest commit

History

Repository files navigation

Svelte Firekit

Installation

Configuration

Usage Example

Core Features

🔥 Firebase Integration

🔐 Authentication

📚 Firestore Integration

📦 Storage Management

⚡ Server-Side Rendering

🎯 Type Safety

Components

🔧 Core Components

FirebaseApp

🔐 Authentication Components

AuthGuard

SignedIn

SignedOut

CustomGuard

📚 Firestore Components

Collection

Ddoc

📦 Storage Components

UploadTask

DownloadUrl

StorageList

🔄 Realtime Database Components

Node

NodeList