DEV Community

Anjan Shomodder
Anjan Shomodder

Posted on

7 1

How to setup Supabase with Nextjs for authentication | Supabase Auth

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
Enter fullscreen mode Exit fullscreen mode
  • Install Supabase client:
npm install @supabase/supabase-js @supabase/ssr
Enter fullscreen mode Exit fullscreen mode

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

npm i -D daisyui
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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.
          }
        },
      },
    },
  )
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now, you can use these clients to interact with the supabase from your nextjs project.

Next, you can check these videos:



Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay