👤 useSupaUser()

A powerful React hook that provides the current authenticated user instance and fundamentally subscribes to auth state changes seamlessly.

Quick Start

You can get the current active user and listen to auth changes immediately. Place useSupaUser inside a use client component wrapper.

"use client";
import { useSupaUser } from "next-supa-utils/client";

export default function Avatar() {
  const { user, loading } = useSupaUser();

  if (loading) return <p>Loading user data...</p>;
  
  // Renders instantly upon receiving an unauthenticated user block
  if (!user) return <p>Please sign in</p>;

  return <p>Hello, {user.email}!</p>;
}

How Does It Compare To Raw Supabase Methods?

Under the hood, useSupaUser guarantees a lightweight and real-time experience:

1. Creates a browser client via createBrowserClient from @supabase/ssr under an optimized React cache chunk.
2. Calls supabase.auth.getUser() immediately upon React un-suspending the component mount phase.
3. Subscribes manually to the onAuthStateChange API from the JS SDK, waiting in real-time for updates.
4. If a sign out, login, or token refresh occurs on another tab, it syncs those updates automatically.
5. Cleans up the background UI subscription natively on unmount.

Return API (UseSupaUserReturn)