Auth

Creating a Supabase client for SSR

Configure your Supabase client to use cookies

To use Server-Side Rendering (SSR) with Supabase, you need to configure your Supabase client to use cookies. The @supabase/ssr package helps you do this for JavaScript/TypeScript applications.

Install

Install the @supabase/ssr and @supabase/supabase-js packages:


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

Set environment variables

In your environment variables file, set your Supabase URL and Supabase Anon Key:

Project URL
Anon key
.env.local

_10
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
_10
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Create a client

You'll need some one-time setup code to configure your Supabase client to use cookies. Once your utility code is set up, you can use your new createClient utility functions to get a properly configured Supabase client.

Use the browser client in code that runs on the browser, and the server client in code that runs on the server.

The following code samples are for App Router. For help with Pages Router, see the Next.js Server-Side Auth guide.

Next steps