Niclassg/svelte-flame

SvelteFlame

An easy to use Firebase library for SvelteKit.

Inspired by SvelteFire.

Features

• Authentication
• Firestore
• Storage coming
• Realtime Database coming

Example

There is a demo repo 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 'svelte-flame';
</script>

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

Use in your components

<script lang="ts">
	import { Document } from 'svelte-flame';
</script>

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