Login sequence and inventory/protocol storage groundwork

App.tsx

@@ -2,16 +2,21 @@ import { useState } from "react";
 import { Dashboard } from "./components/Dashboard";
 import { Inventory } from "./components/Inventory";
 import { ProtocolChecker } from "./components/ProtocolChecker";
-import { 
-  LayoutDashboard, 
-  Package, 
-  FileCheck
+import { useSession, signIn, signOut } from "./lib/auth-client";
+import { Button } from "./components/ui/button";
+import { Card, CardContent } from "./components/ui/card";
+import {
+  LayoutDashboard,
+  Package,
+  FileCheck,
+  LogOut,
 } from "lucide-react";
 const logo = "/logo.png";
 
 type Tab = "dashboard" | "inventory" | "protocol";
 
 export default function App() {
+  const { data: session, isPending } = useSession();
   const [activeTab, setActiveTab] = useState<Tab>("dashboard");
 
   const navItems = [
@@ -20,6 +25,46 @@ export default function App() {
     { id: "protocol" as Tab, label: "Protocol Checker", icon: FileCheck },
   ];
 
+  if (isPending) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-secondary">
+        <img src={logo} alt="LabWise" className="h-12 opacity-50 animate-pulse" />
+      </div>
+    );
+  }
+
+  if (!session) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-secondary">
+        <Card className="w-full max-w-sm">
+          <CardContent className="p-8 space-y-6">
+            <div className="flex justify-center">
+              <img src={logo} alt="LabWise" className="h-12" />
+            </div>
+            <p className="text-center text-muted-foreground text-sm">
+              Sign in to access your lab inventory and protocols.
+            </p>
+            <div className="space-y-3">
+              <Button
+                className="w-full"
+                onClick={() => signIn.social({ provider: "google", callbackURL: "/" })}
+              >
+                Sign in with Google
+              </Button>
+              <Button
+                variant="outline"
+                className="w-full"
+                onClick={() => signIn.social({ provider: "github", callbackURL: "/" })}
+              >
+                Sign in with GitHub
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-screen bg-secondary">
       {/* Sidebar */}
@@ -27,7 +72,7 @@ export default function App() {
         <div className="p-6 border-b border-border flex items-center justify-center">
           <img src={logo} alt="labwise" className="h-15" />
         </div>
-        
+
         <nav className="flex-1 p-4">
           {navItems.map((item) => {
             const Icon = item.icon;
@@ -47,6 +92,19 @@ export default function App() {
             );
           })}
         </nav>
+
+        <div className="p-4 border-t border-border">
+          <div className="text-xs text-muted-foreground mb-2 truncate px-1">
+            {session.user.email}
+          </div>
+          <button
+            onClick={() => signOut()}
+            className="w-full flex items-center gap-3 px-4 py-2 rounded-lg text-muted-foreground hover:bg-muted transition-colors text-sm"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>Sign out</span>
+          </button>
+        </div>
       </aside>
 
       {/* Main Content */}