Docs

Environment Variables

To allow next-supa-utils to securely connect to your Supabase project, you need to provide your Supabase URL and Anonymous Key.

Standard Configuration (Recommended)

By default, all utilities and hooks in next-supa-utils will automatically look for the standard Supabase environment variables.

Create a .env.local file at the root of your Next.js project and add the following lines:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

[!important] You must prefix these variables with NEXT_PUBLIC_ so that they can be accessed by the Client-Side hooks (like useSupaUser).

You can find both of these values in your Supabase Dashboard under Project Settings > API.

Explicit Configuration (Advanced)

If you are using a self-hosted Supabase instance, or if you need to pass credentials dynamically (e.g., in a multi-tenant platform where the URL changes per request), you can skip the environment variables and pass them explicitly.

For Client Components

Wrap your application in <SupaProvider> to inject credentials into all client hooks globally.

// app/layout.tsx
import { SupaProvider } from "next-supa-utils/client";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SupaProvider 
          supabaseUrl="https://custom.supabase.instance.com" 
          supabaseAnonKey="ey..."
        >
          {children}
        </SupaProvider>
      </body>
    </html>
  );
}

For Server Components & Middleware

All server-side helpers (withSupaAuth, createAction, routeWrapper) accept supabaseUrl and supabaseAnonKey inside their options properties to override the environment variables on the fly.

PreviousInstallation
NextwithSupaAuth