yarm6mesq: Refresh expired tokens and revoke on sign-out

src/components/App.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { loadSession, type Person } from "@/lib/auth-client";
+import { loadSession, signOut, type Person } from "@/lib/auth-client";
 import { SignInForm } from "./SignInForm";
 import { Logo } from "./Logo";
 
@@ -9,6 +9,7 @@ type State = { kind: "loading" } | { kind: "out" } | { kind: "in"; person: Perso
 
 export function App() {
   const [state, setState] = useState<State>({ kind: "loading" });
+  const [signingOut, setSigningOut] = useState(false);
 
   useEffect(() => {
     let live = true;
@@ -20,6 +21,14 @@ export function App() {
     };
   }, []);
 
+  async function handleSignOut() {
+    if (signingOut) return;
+    setSigningOut(true);
+    await signOut();
+    setSigningOut(false);
+    setState({ kind: "out" });
+  }
+
   if (state.kind === "loading") {
     return (
       <main className="center">
@@ -30,7 +39,7 @@ export function App() {
   if (state.kind === "out") {
     return <SignInForm onSignedIn={(person) => setState({ kind: "in", person })} />;
   }
-  // Placeholder shell. The home feed and sign-out are later tasks.
+  // Placeholder shell. The home feed is a later task; sign-out is wired here.
   return (
     <main className="shell">
       <header>
@@ -39,6 +48,9 @@ export function App() {
           <strong>{state.person.name}</strong>
           <span>{state.person.email}</span>
         </div>
+        <button type="button" onClick={handleSignOut} disabled={signingOut}>
+          {signingOut ? "Signing out..." : "Sign out"}
+        </button>
       </header>
     </main>
   );