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.

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

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
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!

For the client utility functions, it is recommended to create them in a separate /utils/supabase folder. That way, you can import them as client into any component or page that needs access to Supabase. For further information, you can look at the Next.js Auth Guide.

page.tsx

"use client";

import { createBrowserClient } from '@supabase/ssr'

export default function Page () {
  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

  return ...
}

Next steps

Implement Authentication using Email and Password
Implement Authentication using OAuth
Learn more about SSR

Edit this page on GitHub

Creating a Supabase client for SSR

Install Supabase packages#

Set environment variables#

Creating a client#

Next steps#

Install Supabase packages

Set environment variables

Creating a client

Next steps