How to setup Supabase with Nextjs for authentication | Supabase Auth

#nextjs #react #webdev #javascript

What is Supabase?

Supabase enables developers to build full-stack apps by offering authentication, database, storage, and real-time features. This Backend as a Service (BaaS) is a popular alternative to Firebase and is built with open-source technologies.

Supabase Auth enables easy app authentication, supporting OAuth, email-password, and passwordless methods.

Note: This blog is a part of a video series on my YouTube channel. You can also check the video version.

How to set up the Supabase project?

Create a new project in Supabase. You might need to create a new organization if you don't have one.
Then give your project name and db password
Once the project is created, you will have the project URL and anon key. You can use these to connect to your project. Note that these are public keys, and you can share them. Like Firebase, you protect your data with rules.

Now we need a nextjs app.

How to set up with Nextjs 15?

Create a new Nextjs project:

npx create-next-app supabase-auth-yt

Install Supabase client:

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

I have also installed daisyui(a tailwind ui library) for styling:

npm i -D daisyui

Create a new file called .env.local and add your supabase URL and anon key:

NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>

Create a new file called utils/supabase/server.js and add the following code:

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClientForServer() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options),
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  )
}

To interact with Supabase from the server, we must create a client for the server-side code. Also code is copied from the supabase docs.

For client-side code, we need to create a client in the utils/supabase/client.js file:

'use client'

import { createBrowserClient } from '@supabase/ssr'

const createClientForBrowser = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  )

export default createClientForBrowser