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.
_10npm 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.
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.
Next steps
- Implement Authentication using Email and Password
- Implement Authentication using OAuth
- Learn more about SSR