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

<script lang="ts">
	import { page } from "$app/state";
	import { browser } from "$app/environment";
	import AuthModal from "$lib/components/AuthModal.svelte";

	let isOpen = $state(true);
	const user = $derived(page.data.user);
	let anonymousId = $state("");

	$effect(() => {
		if (browser) {
			anonymousId = localStorage.getItem("bibdle-anonymous-id") ?? "";
		}
	});
</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>