⚛️ <SupaProvider>

SupaProvider is a React Context Provider designed to explicitly inject your Supabase URL and Anon Key downward into the entire React tree.

It is strictly optional if you are relying on the standard NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY variables stored securely at your .env.local level.

⚠️ All client exports from next-supa-utils/client inherently include the "use client" directive. They must be used inside Client Components only.

When Should I Use This?

If you are developing a white-label web application, or your architecture binds different user groups to structurally different multi-tenant Supabase self-hosted instances on the fly, you might not be able to rely on a fixed process.env.

The <SupaProvider> solves this by letting you pass the credentials directly.

Usage

Simply wrap the portion of your application that requires dynamically populated hooks (or wrap your entire app/layout.tsx if client components heavily demand it natively):

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

export default function ExplicitLayout({ children }) {
  // Assume these values are fetched externally / or changed dynamically
  const dynamicUrl = "https://tenant-one.supabase.instance.com";
  const dynamicAnon = "ey...";

  return (
    <SupaProvider supabaseUrl={dynamicUrl} supabaseAnonKey={dynamicAnon}>
      {children}
    </SupaProvider>
  );
}

By wrapping your tree with this provider, any child component invoking useSupaUser() or useSupaSession() will immediately borrow the dynamic credentials you inserted above inside the provider, instead of trying to read standard NEXT_PUBLIC_* variable fallbacks!