can sign in and out

layouts/LayoutDefault.tsx

@@ -4,6 +4,7 @@ import {
   AppShell,
   Box,
   Burger,
+  Button,
   Group,
   Image,
   MantineProvider,
@@ -20,11 +21,12 @@ import {
   IconCircleFilled,
   IconTrashFilled,
   IconPlus,
+  IconBrandGoogle,
 } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 import theme from "./theme.js";
 import logoUrl from "../assets/logo.png";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { TRPCProvider, useTRPC } from "../trpc/client.js";
 import { usePageContext } from "vike-react/usePageContext";
 import "./hover.css";
@@ -69,6 +71,71 @@ function getQueryClient() {
   return browserQueryClient;
 }
 
+export function SignInWithGoogle() {
+  const pageContext = usePageContext();
+  /** This is populated using the +onCreatePageContext.server.ts hook */
+  const user = pageContext?.user;
+  const [csrfToken, setCsrfToken] = useState("");
+  useEffect(() => {
+    fetch("/api/auth/csrf")
+      .then((res) => res.json())
+      .then((obj) => setCsrfToken(obj.csrfToken));
+  }, []);
+  if (user?.id) {
+    return (
+      <form
+        action="/api/auth/signout"
+        method="post"
+        className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        <input type="hidden" name="redirectTo" value={"/"} />
+        <input type="hidden" name="csrfToken" value={csrfToken} />
+        <span>Signed in as {user?.email}</span>
+        <Button
+          type="submit"
+          leftSection={<IconBrandGoogle />}
+          hidden={typeof user?.id === "string"}
+        >
+          Sign Out
+        </Button>
+      </form>
+    );
+  }
+  return (
+    <form
+      action="/api/auth/signin/google"
+      method="post"
+      className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    >
+      <input type="hidden" name="redirectTo" value={"/"} />
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+      <Button
+        type="submit"
+        leftSection={<IconBrandGoogle />}
+        hidden={typeof user?.id === "string"}
+      >
+        Sign in with Google
+      </Button>
+    </form>
+  );
+}
+
+export function SignOutButton() {
+  const handleSignOut = () => {
+    window.location.href = "/api/auth/signout";
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleSignOut}
+      className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+    >
+      Sign Out
+    </button>
+  );
+}
+
 export default function LayoutDefault({
   children,
 }: {
@@ -133,6 +200,7 @@ export default function LayoutDefault({
                 >
                   Token-Efficient Context Engineering
                 </Title>
+                <SignInWithGoogle />
               </Group>
             </AppShell.Header>
             <AppShell.Navbar p="md">