Fill navbar w/ real auth data (#42)

Jaime1108 · joshuasilva414 · web-flow · commit 3b3972d6210b · 2025-11-21T13:42:20.000-06:00
* barebone

* commit

---------

Co-authored-by: Joshua Silva &lt;72359611+joshuasilva414@users.noreply.github.com&gt;
diff --git a/drizzle.config.ts b/drizzle.config.ts
@@ -6,7 +6,8 @@ export default defineConfig({
   dialect: "turso",
   out: "./drizzle",
   dbCredentials: {
-    url: process.env.TURSO_DATABASE_URL!,
+    url: process.env.DATABASE_URL!,
+    //url: process.env.TURSO_DATABASE_URL!,
     authToken: process.env.TURSO_AUTH_TOKEN!,
   },
 });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Footer from "@/components/footer";
+import Navigation from "@/components/navbar"
 import { Toaster } from "sonner";
 
 const geistSans = Geist({
@@ -29,6 +30,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <Navigation />
         {children}
         <Toaster />
         <Footer />
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,16 +1,13 @@
 import Image from "next/image";
 import Link from "next/link";
-import Navigation from "@/components/navbar"
-
+import Navigation from "@/components/navbar";
+import AutoSignInTestComponent from "@/components/autoSignIn";
 export default function Home() {
-  var isSignedIn = false;
-  var mockUser = null;
-
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-white text-slate-900">
-      <header className="border-b border-slate-200 bg-white/70 backdrop-blur">
-        <Navigation isSignedIn={isSignedIn}/> {}
-      </header>
-    </div>
+    <div className="parent">
+      <div>I suppose tis is the main page</div>
+{/*
+    <AutoSignInTestComponent />
+  */}  </div>
   );
-}
+}
diff --git a/src/components/autoSignIn.tsx b/src/components/autoSignIn.tsx
@@ -0,0 +1,49 @@
+"use client";
+import { useEffect } from 'react';
+import { authClient } from '@/lib/auth-client'; // Adjust path to your auth client instance
+
+interface AutoSignInProps {
+  account_id?: string;
+  password?: string;
+  callbackUrl?: string;
+}
+
+/**
+ * A component for testing that automatically attempts to sign in on mount.
+ */
+const AutoSignInTestComponent = ({ 
+  account_id = "test", // Default test user
+  password = "test",    // Default test password
+  callbackUrl = "/dashboard"       // Redirect location on success
+}: AutoSignInProps) => {
+
+  useEffect(() => {
+    const signIn = async () => {
+      console.log(`Attempting to sign in test user: ${account_id}`);
+      
+      const { error } = await authClient.signIn({
+        account_id,
+        password,
+        callbackU: callbackUrl,
+      });
+
+      if (error) {
+        console.error("Auto sign-in failed:", error.message);
+
+      } else {
+        console.log("Auto sign-in successful!");
+      }
+    };
+
+    signIn();
+  }, [account_id, password, callbackUrl]); // Re-run if props change (though unlikely in this context)
+
+  return (
+    <div>
+      {/* Visual indicator for your tests */}
+      <p>Running auto sign-in logic...</p>
+    </div>
+  );
+};
+
+export default AutoSignInTestComponent;
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import {
   DropdownMenu,
@@ -11,20 +10,24 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
-type NavigationProps = {
-    isSignedIn: boolean;
-    User?: {
-      name: string;
-      email: string;
-      avatar?: string;
-      profileHref?:string;
-      coursesHref?:string;
-      historyHref?: string;
-    };
-  };
+import { authClient } from "@/lib/auth-client";
+const { useSession, signOut } = authClient;
 
+export default function Navigation() {
+  const { data: session } = useSession();
+  const user = session?.user;
+  const isSignedIn = Boolean(user);
+  const avatarSrc = user?.image ?? "/user.png";
+  const displayName = user?.name ?? "User";
+  const email = user?.email ?? "";
 
-export default function Navigation({ isSignedIn, User }: NavigationProps) {
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+    } catch (error) {
+      console.error("Failed to sign out", error);
+    }
+  };
 
   return (
     <div className="p-5" >
@@ -56,51 +59,51 @@ export default function Navigation({ isSignedIn, User }: NavigationProps) {
               </Link>
             </Button>
           </li>
-          {isSignedIn && User ? (
+          {isSignedIn && user ? (
             <>
             
           <li>
-            <Button className="text-lg px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
-            <Link
-              href="/logout"
+            <Button
+              className="text-lg px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground"
+              onClick={handleSignOut}
             >
               Logout
-            </Link>
             </Button>
           </li>
           {/* Profile Pic Placeholder */}
           <li>
           <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Avatar className="w-12 h-12 border-2 border-white rounded-full overflow-hidden transition-all duration-300 hover:border-blue-300 hover:drop-shadow-[1px_1px_40px_rgba(255,215,100,1)] cursor-pointer">
-              <AvatarImage
-                src={`/${User.avatar ?? "user.png"}`}
-                alt={User.name}
+            <AvatarImage
+                src={avatarSrc}
+                alt={displayName}
+              
                 className="object-cover w-full h-full"
               />
-              <AvatarFallback>{User.name?.charAt(0).toUpperCase() ?? "?"}</AvatarFallback>
+              <AvatarFallback>{displayName.charAt(0).toUpperCase()}</AvatarFallback>
             </Avatar>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
               <DropdownMenuLabel>
-                <p className="font-semibold">{User.name}</p>
-                <p className="text-sm text-gray-500">{User.email}</p>
+                <p className="font-semibold">{displayName}</p>
+                {email && <p className="text-sm text-gray-500">{email}</p>}
               </DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuItem asChild>
-                <Link href={User.profileHref ?? "/profile"}>Profile</Link>
+                <Link href="/profile">Profile</Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link href={User.coursesHref ?? "/courses"}>My Courses</Link>
+                <Link href="/courses">My Courses</Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link href={User.historyHref ?? "/history"}>History</Link>
+                <Link href="/history">History</Link>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem asChild>
-                <Link href="/logout" className="text-red-600">
+                <button className="text-red-600" onClick={handleSignOut}>
                   Logout
-                </Link>
+                </button>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -113,7 +116,7 @@ export default function Navigation({ isSignedIn, User }: NavigationProps) {
             <Link
               href="/sign-in"
             >
-              Login
+              Sign in
             </Link>
             </Button>
 
@@ -135,9 +138,9 @@ export default function Navigation({ isSignedIn, User }: NavigationProps) {
             <DropdownMenuItem asChild className="">
               <Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
             <Link
-              href="/login"
+              href="/sign-in"
             >
-              Login
+              Sign in
             </Link>
             </Button>
             </DropdownMenuItem>
diff --git a/src/lib/auth-client.ts b/src/lib/auth-client.ts
@@ -1,4 +1,4 @@
-import { createAuthClient } from "better-auth/client";
+import { createAuthClient } from "better-auth/react";
 import { inferAdditionalFields } from "better-auth/client/plugins";
 import { auth } from "./auth";
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { createAuthClient } from "better-auth/client";`
	`1`	`+import { createAuthClient } from "better-auth/react";`
`2`	`2`	`import { inferAdditionalFields } from "better-auth/client/plugins";`
`3`	`3`	`import { auth } from "./auth";`
`4`	`4`