Added Sign In with Apple test route

src/routes/+page.svelte

@@ -630,44 +630,44 @@
 				</div>
 			{/if}
 		</div>
-		<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
+		{#if isDev}
-			<div class="flex flex-col md:flex-row gap-3">
+			<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
-				<a
+				<div class="flex flex-col md:flex-row gap-3">
-					href="/stats?{user
+					<a
-						? `userId=${user.id}`
+						href="/stats?{user
-						: `anonymousId=${anonymousId}`}&tz={encodeURIComponent(
+							? `userId=${user.id}`
-						Intl.DateTimeFormat().resolvedOptions().timeZone,
+							: `anonymousId=${anonymousId}`}&tz={encodeURIComponent(
-					)}"
+							Intl.DateTimeFormat().resolvedOptions().timeZone,
-					class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
+						)}"
-				>
+						class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
-					📊 View Stats
-				</a>
-
-				{#if user}
-					<form
-						method="POST"
-						action="/auth/logout"
-						use:enhance
-						class="w-full md:w-auto"
 					>
-						<button
+						📊 View Stats
-							type="submit"
+					</a>
-							class="inline-flex items-center justify-center w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
+
+					{#if user}
+						<form
+							method="POST"
+							action="/auth/logout"
+							use:enhance
+							class="w-full md:w-auto"
 						>
-							🚪 Sign Out
+							<button
+								type="submit"
+								class="inline-flex items-center justify-center w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
+							>
+								🚪 Sign Out
+							</button>
+						</form>
+					{:else}
+						<button
+							onclick={() => (authModalOpen = true)}
+							class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
+						>
+							🔐 Sign In
 						</button>
-					</form>
+					{/if}
-				{:else}
+				</div>
-					<button
-						onclick={() => (authModalOpen = true)}
-						class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
-					>
-						🔐 Sign In
-					</button>
-				{/if}
-			</div>
 
-			{#if isDev}
 				<div
 					class="text-xs text-gray-600 bg-gray-100 px-3 py-2 rounded border"
 				>
@@ -699,8 +699,8 @@
 					<div>Daily Verse Date: {dailyVerse.date}</div>
 				</div>
 				<DevButtons />
-			{/if}
+			</div>
-		</div>
+		{/if}
 	</div>
 </div>
 

src/routes/auth/apple/test/+page.server.ts

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user,
+		session: locals.session
+	};
+};

src/routes/auth/apple/test/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import AuthModal from '$lib/components/AuthModal.svelte';
+
+	let isOpen = $state(true);
+	const user = $derived(page.data.user);
+	const anonymousId = crypto.randomUUID();
+</script>
+
+<div class="min-h-screen bg-gray-900 flex items-center justify-center p-4">
+	{#if user}
+		<div class="text-white text-center space-y-4">
+			<p class="text-lg">Signed in as <strong>{user.email ?? 'no email'}</strong></p>
+			<form method="POST" action="/auth/logout">
+				<button class="px-4 py-2 bg-red-600 rounded-md hover:bg-red-700 transition-colors">
+					Sign Out
+				</button>
+			</form>
+		</div>
+	{:else}
+		<button
+			onclick={() => isOpen = true}
+			class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+		>
+			Open Auth Modal
+		</button>
+		<AuthModal bind:isOpen {anonymousId} />
+	{/if}
+</div>