svelte-firekit 0.2.2 → 0.2.4

package/dist/components/AuthGuard.svelte

@@ -31,8 +31,8 @@
 		onUnauthorized,
 		fallback
 	}: {
-		/** Content shown when the auth requirement is satisfied. */
-		children: Snippet<[UserProfile, () => Promise<void>]>;
+		/** Content shown when the auth requirement is satisfied. User is null when requireAuth is false. */
+		children: Snippet<[UserProfile | null, () => Promise<void>]>;
 		/** When true (default), requires a signed-in user. When false, requires no user. */
 		requireAuth?: boolean;
 		/** Called when the auth state does not meet the requirement. Use for navigation. */
@@ -45,9 +45,11 @@
 		return firekitAuth.signOut();
 	}
 
-	// React to auth state changes — runs whenever isAuthenticated or loading changes.
+	// Only react after Firebase Auth has fully initialized (first onAuthStateChanged callback).
+	// Uses `initialized` instead of `loading` because `loading` gets reused for profile
+	// updates and could cause false redirects mid-operation.
 	$effect(() => {
-		if (firekitUser.loading) return;
+		if (!firekitUser.initialized) return;
 
 		const isAuth = firekitUser.isAuthenticated;
 		const shouldBlock = requireAuth ? !isAuth : isAuth;
@@ -55,10 +57,10 @@
 	});
 </script>
 
-{#if firekitUser.loading}
+{#if !firekitUser.initialized}
 	{#if fallback}
 		{@render fallback()}
 	{/if}
-{:else if firekitUser.isAuthenticated === requireAuth && firekitUser.user}
+{:else if firekitUser.isAuthenticated === requireAuth}
 	{@render children(firekitUser.user, signOut)}
 {/if}

package/dist/components/AuthGuard.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { UserProfile } from '../types/auth.js';
 type $$ComponentProps = {
-    /** Content shown when the auth requirement is satisfied. */
-    children: Snippet<[UserProfile, () => Promise<void>]>;
+    /** Content shown when the auth requirement is satisfied. User is null when requireAuth is false. */
+    children: Snippet<[UserProfile | null, () => Promise<void>]>;
     /** When true (default), requires a signed-in user. When false, requires no user. */
     requireAuth?: boolean;
     /** Called when the auth state does not meet the requirement. Use for navigation. */

package/dist/components/CustomGuard.svelte

@@ -28,7 +28,7 @@
 		fallback,
 		verificationChecks = []
 	}: {
-		children: Snippet<[UserProfile, () => Promise<void>]>;
+		children: Snippet<[UserProfile | null, () => Promise<void>]>;
 		requireAuth?: boolean;
 		onUnauthorized?: () => void;
 		fallback?: Snippet;
@@ -53,8 +53,11 @@
 		}
 	}
 
+	// Only react after Firebase Auth has fully initialized (first onAuthStateChanged callback).
+	// Uses `initialized` instead of `loading` because `loading` gets reused for profile
+	// updates and could cause false redirects mid-operation.
 	$effect(() => {
-		if (firekitUser.loading) return;
+		if (!firekitUser.initialized) return;
 
 		const isAuth = firekitUser.isAuthenticated;
 		const shouldBlock = requireAuth ? !isAuth : isAuth;
@@ -78,10 +81,10 @@
 	});
 </script>
 
-{#if firekitUser.loading || isVerifying}
+{#if !firekitUser.initialized || isVerifying}
 	{#if fallback}
 		{@render fallback()}
 	{/if}
-{:else if firekitUser.isAuthenticated === requireAuth && verificationPassed && firekitUser.user}
+{:else if firekitUser.isAuthenticated === requireAuth && verificationPassed}
 	{@render children(firekitUser.user, signOut)}
 {/if}

package/dist/components/CustomGuard.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { UserProfile } from '../types/auth.js';
 type $$ComponentProps = {
-    children: Snippet<[UserProfile, () => Promise<void>]>;
+    children: Snippet<[UserProfile | null, () => Promise<void>]>;
     requireAuth?: boolean;
     onUnauthorized?: () => void;
     fallback?: Snippet;

package/dist/components/FirebaseApp.svelte

@@ -8,6 +8,7 @@
 	import { firekitAppCheck } from '../services/app-check.svelte.js';
 	import { firekitAnalytics } from '../services/analytics.js';
 	import { firekitMessaging } from '../services/messaging.svelte.js';
+	import { firekitUser } from '../services/user.svelte.js';
 
 	/**
 	 * Root provider component. Initializes Firebase (and optionally App Check) and
@@ -75,6 +76,9 @@
 		setContext('firebase/app-check', firekitAppCheck.initialized ? firebaseService.appCheck : null);
 		setContext('firebase/analytics', firekitAnalytics);
 		setContext('firebase/messaging', firekitMessaging);
+
+		// Now that Firebase is configured, start the auth state listener.
+		firekitUser.initialize();
 	}
 </script>
 

package/dist/components/SignedIn.svelte

@@ -5,18 +5,32 @@
 
 	/**
 	 * Renders `children` only when a non-anonymous user is signed in.
-	 * Uses runes — no subscription needed.
+	 * Optionally renders a `fallback` while auth state is loading.
 	 *
 	 * @example
 	 * <SignedIn>
 	 *   {#snippet children(user)}
 	 *     <p>Hello {user.displayName}</p>
 	 *   {/snippet}
+	 *   {#snippet fallback()}
+	 *     <p>Loading…</p>
+	 *   {/snippet}
 	 * </SignedIn>
 	 */
-	let { children }: { children: Snippet<[UserProfile]> } = $props();
+	let {
+		children,
+		fallback
+	}: {
+		children: Snippet<[UserProfile]>;
+		/** Shown while auth state is being determined. */
+		fallback?: Snippet;
+	} = $props();
 </script>
 
-{#if firekitUser.isAuthenticated && firekitUser.user}
+{#if !firekitUser.initialized}
+	{#if fallback}
+		{@render fallback()}
+	{/if}
+{:else if firekitUser.isAuthenticated && firekitUser.user}
 	{@render children(firekitUser.user)}
 {/if}

package/dist/components/SignedIn.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 import type { UserProfile } from '../types/auth.js';
 type $$ComponentProps = {
     children: Snippet<[UserProfile]>;
+    /** Shown while auth state is being determined. */
+    fallback?: Snippet;
 };
 declare const SignedIn: import("svelte").Component<$$ComponentProps, {}, "">;
 type SignedIn = ReturnType<typeof SignedIn>;

package/dist/components/SignedOut.svelte

@@ -3,23 +3,31 @@
 	import { firekitUser } from '../services/user.svelte.js';
 
 	/**
-	 * Renders `children` only when no authenticated user exists (including during loading).
-	 * Passes a sign-in trigger function to children — wire it up to your auth method of choice.
+	 * Renders `children` only when no authenticated user exists.
+	 * Waits for auth to initialize before rendering to avoid flashing
+	 * a login form to users who are already signed in.
+	 * Optionally renders a `fallback` while auth state is loading.
 	 *
 	 * @example
 	 * <SignedOut>
 	 *   {#snippet children(signIn)}
 	 *     <button onclick={signIn}>Sign in with Google</button>
 	 *   {/snippet}
+	 *   {#snippet fallback()}
+	 *     <p>Checking auth…</p>
+	 *   {/snippet}
 	 * </SignedOut>
 	 */
 	let {
 		children,
-		onSignIn
+		onSignIn,
+		fallback
 	}: {
 		children: Snippet<[() => void]>;
 		/** Optional callback invoked when the user triggers sign-in from the snippet. */
 		onSignIn?: () => void;
+		/** Shown while auth state is being determined. */
+		fallback?: Snippet;
 	} = $props();
 
 	function triggerSignIn() {
@@ -27,6 +35,10 @@
 	}
 </script>
 
-{#if !firekitUser.isAuthenticated && !firekitUser.loading}
+{#if !firekitUser.initialized}
+	{#if fallback}
+		{@render fallback()}
+	{/if}
+{:else if !firekitUser.isAuthenticated}
 	{@render children(triggerSignIn)}
 {/if}

package/dist/components/SignedOut.svelte.d.ts

@@ -3,6 +3,8 @@ type $$ComponentProps = {
     children: Snippet<[() => void]>;
     /** Optional callback invoked when the user triggers sign-in from the snippet. */
     onSignIn?: () => void;
+    /** Shown while auth state is being determined. */
+    fallback?: Snippet;
 };
 declare const SignedOut: import("svelte").Component<$$ComponentProps, {}, "">;
 type SignedOut = ReturnType<typeof SignedOut>;

package/dist/services/user.svelte.d.ts

@@ -36,9 +36,20 @@ declare class FirekitUserStore {
     private _photoURL;
     private _uid;
     private _phoneNumber;
+    private _listening;
     private constructor();
     static getInstance(): FirekitUserStore;
-    private bootstrap;
+    /**
+     * Called by FirebaseApp after initFirekit() to start the auth listener.
+     * Safe to call multiple times — only the first call has an effect.
+     */
+    initialize(): void;
+    /**
+     * Ensures the onAuthStateChanged listener is registered.
+     * Called lazily from initialize() or from any public getter/method
+     * so the store self-heals if Firebase was configured after import.
+     */
+    private ensureListening;
     private listenToAuthState;
     private syncToFirestore;
     private currentFirebaseUser;
@@ -66,9 +77,10 @@ declare class FirekitUserStore {
     updateExtendedData(data: Partial<ExtendedUserData>): Promise<void>;
     /**
      * Resolves once Firebase Auth has initialized (first `onAuthStateChanged` callback).
+     * Rejects after `timeoutMs` (default 10 000 ms) if auth never initializes.
      * Safe to call server-side — will resolve immediately with null.
      */
-    waitForAuth(): Promise<UserProfile | null>;
+    waitForAuth(timeoutMs?: number): Promise<UserProfile | null>;
     clearError(): void;
 }
 export declare const firekitUser: FirekitUserStore;

package/dist/services/user.svelte.js

@@ -34,10 +34,10 @@ class FirekitUserStore {
     _photoURL = $derived(this._user?.photoURL ?? null);
     _uid = $derived(this._user?.uid ?? null);
     _phoneNumber = $derived(this._user?.phoneNumber ?? null);
+    _listening = false;
     constructor() {
-        if (typeof window !== 'undefined') {
-            this.bootstrap();
-        }
+        // Do NOT bootstrap here — Firebase config may not be set yet.
+        // Auth listener is set up lazily via initialize() or ensureListening().
     }
     static getInstance() {
         if (!FirekitUserStore.instance) {
@@ -45,7 +45,23 @@ class FirekitUserStore {
         }
         return FirekitUserStore.instance;
     }
-    bootstrap() {
+    /**
+     * Called by FirebaseApp after initFirekit() to start the auth listener.
+     * Safe to call multiple times — only the first call has an effect.
+     */
+    initialize() {
+        if (typeof window === 'undefined')
+            return;
+        this.ensureListening();
+    }
+    /**
+     * Ensures the onAuthStateChanged listener is registered.
+     * Called lazily from initialize() or from any public getter/method
+     * so the store self-heals if Firebase was configured after import.
+     */
+    ensureListening() {
+        if (this._listening)
+            return;
         try {
             this.auth = firebaseService.getAuthInstance();
             try {
@@ -54,12 +70,11 @@ class FirekitUserStore {
             catch {
                 this.firestore = null;
             }
+            this._listening = true;
             this.listenToAuthState();
         }
-        catch (err) {
-            this._error = err instanceof Error ? err : new Error(String(err));
-            this._loading = false;
-            this._initialized = true;
+        catch {
+            // Firebase not yet configured — will retry on next access
         }
     }
     listenToAuthState() {
@@ -85,18 +100,20 @@ class FirekitUserStore {
         return validateCurrentUser(this.auth);
     }
     // ── Public getters (reactive) ────────────────────────────────────────────────
-    get user() { return this._user; }
-    get loading() { return this._loading; }
-    get initialized() { return this._initialized; }
-    get error() { return this._error; }
-    get isAuthenticated() { return this._isAuthenticated; }
-    get isAnonymous() { return this._isAnonymous; }
-    get isEmailVerified() { return this._isEmailVerified; }
-    get email() { return this._email; }
-    get displayName() { return this._displayName; }
-    get photoURL() { return this._photoURL; }
-    get uid() { return this._uid; }
-    get phoneNumber() { return this._phoneNumber; }
+    // Each getter calls ensureListening() so the auth listener is registered
+    // on first access, even if initialize() hasn't been called yet.
+    get user() { this.ensureListening(); return this._user; }
+    get loading() { this.ensureListening(); return this._loading; }
+    get initialized() { this.ensureListening(); return this._initialized; }
+    get error() { this.ensureListening(); return this._error; }
+    get isAuthenticated() { this.ensureListening(); return this._isAuthenticated; }
+    get isAnonymous() { this.ensureListening(); return this._isAnonymous; }
+    get isEmailVerified() { this.ensureListening(); return this._isEmailVerified; }
+    get email() { this.ensureListening(); return this._email; }
+    get displayName() { this.ensureListening(); return this._displayName; }
+    get photoURL() { this.ensureListening(); return this._photoURL; }
+    get uid() { this.ensureListening(); return this._uid; }
+    get phoneNumber() { this.ensureListening(); return this._phoneNumber; }
     // ── Profile updates ──────────────────────────────────────────────────────────
     async updateDisplayName(displayName) {
         const user = this.currentFirebaseUser();
@@ -253,17 +270,24 @@ class FirekitUserStore {
     // ── Utility ──────────────────────────────────────────────────────────────────
     /**
      * Resolves once Firebase Auth has initialized (first `onAuthStateChanged` callback).
+     * Rejects after `timeoutMs` (default 10 000 ms) if auth never initializes.
      * Safe to call server-side — will resolve immediately with null.
      */
-    waitForAuth() {
+    waitForAuth(timeoutMs = 10_000) {
+        if (typeof window === 'undefined')
+            return Promise.resolve(null);
+        this.ensureListening();
         if (this._initialized)
             return Promise.resolve(this._user);
-        // $effect.root creates a reactive scope outside of component initialization,
-        // so this works safely whether called inside or outside a Svelte component.
-        return new Promise((resolve) => {
+        return new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                stop();
+                reject(new Error('waitForAuth timed out — Firebase Auth did not initialize.'));
+            }, timeoutMs);
             const stop = $effect.root(() => {
                 $effect(() => {
                     if (this._initialized) {
+                        clearTimeout(timer);
                         stop();
                         resolve(this._user);
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-firekit",
-	"version": "0.2.2",
+	"version": "0.2.4",
 	"description": "A Svelte library for Firebase integration",
 	"license": "MIT",
 	"author": "Giovani Rodriguez",