svelte-firekit 0.2.2 → 0.2.3

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. */
@@ -59,6 +59,6 @@
 	{#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;
@@ -82,6 +82,6 @@
 	{#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/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.loading}
+	{#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.loading}
+	{#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/package.json

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