Svelte with Firebase

npm install firebase

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

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
};

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

// src/lib/stores/firebaseAuth.js
import { writable } from 'svelte/store';
import { auth } from '$lib/firebase.js';
import {
  signInWithEmailAndPassword, createUserWithEmailAndPassword,
  signOut, onAuthStateChanged, GoogleAuthProvider, signInWithPopup
} from 'firebase/auth';

export const user = writable(null);
export const authLoading = writable(true);

// Listen to auth state changes
onAuthStateChanged(auth, (firebaseUser) => {
  user.set(firebaseUser);
  authLoading.set(false);
});

export const authActions = {
  login: (email, password) => signInWithEmailAndPassword(auth, email, password),
  register: (email, password) => createUserWithEmailAndPassword(auth, email, password),
  loginWithGoogle: () => signInWithPopup(auth, new GoogleAuthProvider()),
  logout: () => signOut(auth)
};

// src/lib/services/todoService.js
import { db } from '$lib/firebase.js';
import {
  collection, addDoc, getDocs, deleteDoc, updateDoc,
  doc, query, where, orderBy, onSnapshot, serverTimestamp
} from 'firebase/firestore';

const COLLECTION = 'todos';

export const todoService = {
  // Real-time listener — returns an unsubscribe function
  subscribe: (userId, callback) => {
    const q = query(
      collection(db, COLLECTION),
      where('userId', '==', userId),
      orderBy('createdAt', 'desc')
    );
    return onSnapshot(q, snapshot => {
      const todos = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
      callback(todos);
    });
  },
  add: (userId, text) => addDoc(collection(db, COLLECTION), {
    text, done: false, userId, createdAt: serverTimestamp()
  }),
  toggle: (id, done) => updateDoc(doc(db, COLLECTION, id), { done: !done }),
  delete: (id) => deleteDoc(doc(db, COLLECTION, id))
};

<!-- TodoApp.svelte -->
<script>
  import { onDestroy } from &#039;svelte';
  import { user, authLoading, authActions } from &#039;$lib/stores/firebaseAuth.js';
  import { todoService } from &#039;$lib/services/todoService.js';

  let todos = [];
  let newTodo = &#039;';
  let unsubscribe;

  // Subscribe to real-time todos when user logs in
  $: if ($user) {
    if (unsubscribe) unsubscribe();
    unsubscribe = todoService.subscribe($user.uid, (data) => {
      todos = data;
    });
  }

  onDestroy(() => { if (unsubscribe) unsubscribe(); });

  async function addTodo() {
    if (newTodo.trim() && $user) {
      await todoService.add($user.uid, newTodo.trim());
      newTodo = &#039;';
    }
  }

  $: remaining = todos.filter(t => !t.done).length;
</script>

{#if $authLoading}
  <p>Loading...</p>
{:else if !$user}
  <div class="login-page">
    <h1>Firebase Todo</h1>
    <button on:click={authActions.loginWithGoogle}>
      Sign in with Google
    </button>
  </div>
{:else}
  <div class="app">
    <header>
      <h1>My Todos ({remaining} remaining)</h1>
      <button on:click={authActions.logout}>Logout</button>
    </header>

    <div class="input-row">
      <input bind:value={newTodo} on:keydown={e => e.key===&#039;Enter' && addTodo()} placeholder="Add todo..." />
      <button on:click={addTodo}>Add</button>
    </div>

    <ul>
      {#each todos as todo (todo.id)}
        <li class:done={todo.done}>
          <input type="checkbox" checked={todo.done}
            on:change={() => todoService.toggle(todo.id, todo.done)} />
          <span>{todo.text}</span>
          <button on:click={() => todoService.delete(todo.id)}>✕</button>
        </li>
      {:else}
        <li class="empty">No todos yet!</li>
      {/each}
    </ul>
  </div>
{/if}

npm install -g firebase-tools
firebase login
firebase init hosting   # Select 'dist' as public folder
npm run build           # Builds to /dist
firebase deploy