Auth

Creating a Supabase client for SSR

Install Supabase packages

The ssr package configures Supabase to use Cookies, which is required for server-side languages and frameworks.


_10
npm install @supabase/ssr @supabase/supabase-js

Set environment variables

Create a .env.local file in your project root directory. You can get your SUPABASE_URL and SUPABASE_ANON_KEY from inside your Supabase project's dashboard.

.env.local

_10
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
_10
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Creating a client

Creating a Supabase client with the ssr package automatically configures it to use cookies. This means your user's session is available throughout the entire Next.js stack - client, server, App Router, Pages Router. It just works!

page.tsx

_12
"use client";
_12
_12
import { createBrowserClient } from '@supabase/ssr'
_12
_12
export default function Page () {
_12
const supabase = createBrowserClient(
_12
process.env.NEXT_PUBLIC_SUPABASE_URL!,
_12
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
_12
)
_12
_12
return ...
_12
}

Next steps