refactor: Centralize Supabase client usage for auth callbacks and enhance session management in Header.

Author: Bharath-code

src/app/auth/callback/page.tsx

@@ -2,21 +2,16 @@
 
 import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { createClient } from "@supabase/supabase-js";
+import { supabase } from "@/lib/supabase";
 import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
 
 /**
  * Auth Callback Page
  *
- * Handles the redirect from Supabase magic link.
- * Supabase passes tokens in the URL hash, which must be handled client-side.
+ * Handles the redirect from Supabase magic link or OAuth.
+ * Uses the shared Supabase client to ensure PKCE code verifier is available.
  */
 
-const supabase = createClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY!
-);
-
 function AuthCallbackContent() {
     const router = useRouter();
     const searchParams = useSearchParams();

src/app/components/Header.tsx

@@ -16,22 +16,29 @@ export default function Header() {
 
   useEffect(() => {
     const checkAuth = async () => {
-      // Use getUser() as it provides a more definitive check than getSession()
-      const { data: { user }, error } = await supabase.auth.getUser();
+      // First check session (faster, from localStorage)
+      const { data: { session } } = await supabase.auth.getSession();
 
-      if (error || !user) {
-        setUser(null);
-      } else {
-        setUser(user);
+      if (session?.user) {
+        setUser(session.user);
+        setIsLoading(false);
+        return;
       }
+
+      // Fallback to getUser if no session (validates with server)
+      const { data: { user: authUser } } = await supabase.auth.getUser();
+      setUser(authUser || null);
       setIsLoading(false);
     };
 
     checkAuth();
 
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, session) => {
-      if (event === "SIGNED_OUT" || event === "USER_UPDATED" && !session) {
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+      // Handle all relevant auth events
+      if (event === "SIGNED_OUT") {
         setUser(null);
+      } else if (event === "SIGNED_IN" || event === "TOKEN_REFRESHED" || event === "INITIAL_SESSION") {
+        setUser(session?.user || null);
       } else if (session?.user) {
         setUser(session.user);
       }