Oops

src/pages/index.astro

@@ -1,8 +1,15 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import SignIn from "../components/SignIn.tsx";
+import SignOut from "../components/SignOut.tsx";
 ---
 
 <Layout title="Welcome">
+	<div id="auth-container">
+		<SignIn client:load onSuccess={() => {}} requiredRole="guest" />
+	</div>
+
+	<div id="content-container" class="hidden">
 		<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
 			<img src="/hero.jpeg" alt="" height="250" width="250" class="rounded-full mx-auto">
 			<!-- Header -->
@@ -68,5 +75,33 @@ import Layout from "../layouts/Layout.astro";
 					</a>
 				</div>
 			</div>
+
+			<div class="text-center mt-4">
+				<SignOut client:load />
+			</div>
+		</div>
 	</div>
 </Layout>
+
+<script>
+	import { hasRole, isAuthenticated } from "../utils/auth-client";
+
+	function updateVisibility() {
+		const authContainer = document.getElementById("auth-container");
+		const contentContainer = document.getElementById("content-container");
+
+		if (isAuthenticated() && hasRole("guest")) {
+			authContainer?.classList.add("hidden");
+			contentContainer?.classList.remove("hidden");
+		} else {
+			authContainer?.classList.remove("hidden");
+			contentContainer?.classList.add("hidden");
+		}
+	}
+
+	// Check auth state on page load
+	updateVisibility();
+
+	// Add event listener for custom event from SignIn component
+	document.addEventListener("auth-success", updateVisibility);
+</script>