SvelteFlame

An easy to use Firebase library for SvelteKit.

Inspired by SvelteFire.

Features

• [x] Authentication
• [x] Firestore
• [ ] Storage coming
• [ ] Realtime Database coming

Example

The repository contains examples that uses SvelteFlame. You can find it here

Usage

Install

npm i svelte-flame

Setup Firebase

// ./firebaseInit.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
	// Your firebase config
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

Wrap your app with SvelteFlame in your root layout

<!-- ./src/routes/+layout.svelte -->
<script lang="ts">
	import { db, auth } from './firebaseInit.js';
	import SvelteFlame from '$lib/SvelteFlame.svelte';
</script>

<SvelteFlame {auth} fireStore="{db}">
	<slot />
	<!-- Your app -->
</SvelteFlame>

Use in your components

<script lang="ts">
	import Document from '$lib/Components/Document.svelte';
</script>

<Document ref="messages/message" " let:data="{message}">
	{#if message !== null}
	<p>Document data: {message?.from}: {message?.text}</p>
	{/if}
</Document>