Skip to content
svelte-firekit

Installation & Setup

Requirements

Section titled “Requirements”
  • Svelte 5.0 or later
  • Firebase v12 (modular SDK)
  • SvelteKit is optional — the library works in any Svelte 5 project

Install

Section titled “Install”
Terminal window
npm install svelte-firekit firebase

Initialize Firebase

Section titled “Initialize Firebase”

Call initFirekit once before your app renders. In SvelteKit, place this in your root layout or a server/client entry point.

src/lib/firebase.ts
import { initFirekit } from 'svelte-firekit';


export const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT.appspot.com',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
  databaseURL: 'https://YOUR_PROJECT-default-rtdb.firebaseio.com', // required for Realtime Database
};


initFirekit(firebaseConfig);

Wrap your app with <FirebaseApp>

Section titled “Wrap your app with <FirebaseApp>”

<FirebaseApp> sets up Svelte context so that any descendant component can access raw Firebase service instances. It also initialises App Check if you pass appCheckOptions.

src/routes/+layout.svelte
<script lang="ts">
  import { FirebaseApp } from 'svelte-firekit';
  import { firebaseConfig } from '$lib/firebase';


  let { children } = $props();
</script>


<FirebaseApp config={firebaseConfig}>
  {@render children()}
</FirebaseApp>

With App Check (ReCaptcha Enterprise)

Section titled “With App Check (ReCaptcha Enterprise)”
<script lang="ts">
  import { FirebaseApp, ReCaptchaEnterpriseProvider } from 'svelte-firekit';
  import { firebaseConfig } from '$lib/firebase';


  let { children } = $props();
</script>


<FirebaseApp
  config={firebaseConfig}
  appCheckOptions={{
    provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_SITE_KEY'),
    isTokenAutoRefreshEnabled: true,
  }}
>
  {@render children()}
</FirebaseApp>

Verify it works

Section titled “Verify it works”
src/routes/+page.svelte
<script lang="ts">
  import { firekitUser } from 'svelte-firekit';
</script>


{#if firekitUser.loading}
  <p>Loading auth state…</p>
{:else if firekitUser.isAuthenticated}
  <p>Signed in as {firekitUser.user?.displayName}</p>
{:else}
  <p>Not signed in</p>
{/if}

Configuration helpers

Section titled “Configuration helpers”

After calling initFirekit, you can query the configuration from anywhere in your app:

import { getFirekitConfig, isFirekitConfigured } from 'svelte-firekit';


if (isFirekitConfigured()) {
  const config = getFirekitConfig();
  console.log(config.projectId);
}

Next steps

Section titled “Next steps”