Practical guide to implementing authentication with Supabase and Next.js

Introduction

If you're building a modern web application, one of the first concerns should be user authentication. In this guide, we'll show you how to implement a secure system using Supabase — an open-source alternative to Firebase — and Next.js, the ideal React framework for SSR and APIs.

The combination of these two technologies allows for a seamless integration, with performance, security, and scalability.

---

Why use Supabase with Next.js?

Supabase offers JWT token-based authentication, easy OAuth integration, and also has a PostgreSQL database layer. Next.js is ideal for protecting server-side routes and managing sessions with SSR/SSG.

Benefits:

• Quick setup without reinventing the wheel
• Secure tokens with session control
• Support for providers like Google, GitHub, etc.
• Ready REST and GraphQL API

---

1. Initial setup

Step 1: Create a project in Supabase

Access supabase.com, create an account and a new project. Once created, copy the SUPABASE_URL and SUPABASE_ANON_KEY.

Step 2: Install dependencies

npm install @supabase/supabase-js @supabase/auth-helpers-nextjs

---

2. Initializing the Supabase Client

Create a file lib/supabaseClient.ts:

import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'

export const supabase = createBrowserSupabaseClient()

---

3. Setting up the Session Provider

In _app.tsx, wrap your app with the session provider:

import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { supabase } from '@/lib/supabaseClient'

function MyApp({ Component, pageProps }) {
  return (
    <SessionContextProvider
      supabaseClient={supabase}
      initialSession={pageProps.initialSession}
    >
      <Component {...pageProps} />
    </SessionContextProvider>
  )
}

---

4. Login Page

Create a simple page for login:

import { useSupabaseClient } from '@supabase/auth-helpers-react'

export default function Login() {
  const supabase = useSupabaseClient()

  const loginWithGoogle = async () => {
    await supabase.auth.signInWithOAuth({ provider: 'google' })
  }

  return <button onClick={loginWithGoogle}>Login with Google</button>
}

---

5. Protecting routes with SSR

Use the getServerSideProps helper to protect pages:

import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export const getServerSideProps = async (ctx) => {
  const supabase = createServerSupabaseClient(ctx)
  const {
    data: { session },
  } = await supabase.auth.getSession()

  if (!session) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user: session.user },
  }
}

---

6. Logout and session management

const logout = async () => {
  await supabase.auth.signOut()
}

---

Comparison table: Firebase vs Supabase

Feature	Firebase	Supabase
Open Source	No	Yes
Database	Firestore (NoSQL)	PostgreSQL (relational)
Hosting	Included	Separate

---

Conclusion

Integrating Supabase with Next.js provides a robust, scalable, and modern solution to handle user authentication. With just a few steps, you implement social login, route protection, and session management.

For frontend developers who want to accelerate the delivery of MVPs or complete apps, this is one of the most straightforward and effective approaches.

---

Ready to accelerate your business with modern authentication?

Our team can help you implement secure and scalable solutions with Supabase and Next.js.

Request a quote