Guía práctica para implementar autenticación con Supabase y Next.js

Introducción

Si estás construyendo una aplicación web moderna, una de las primeras preocupaciones debe ser la autenticación de usuarios. En esta guía, te mostraremos cómo implementar un sistema seguro usando Supabase —una alternativa de código abierto a Firebase— y Next.js, el framework React ideal para SSR y APIs.

La combinación de estas dos tecnologías permite una integración fluida, con rendimiento, seguridad y escalabilidad.

---

¿Por qué usar Supabase con Next.js?

Supabase ofrece autenticación basada en tokens JWT, fácil integración con OAuth, y además cuenta con una capa de base de datos PostgreSQL. Por su parte, Next.js es ideal para proteger rutas del lado del servidor y gestionar sesiones con SSR/SSG.

Beneficios:

• Configuración rápida sin reinventar la rueda
• Tokens seguros con control de sesión
• Soporte para proveedores como Google, GitHub, etc.
• API REST y GraphQL lista

---

1. Configuración inicial

Paso 1: Crear proyecto en Supabase

Accede a supabase.com, crea una cuenta y un nuevo proyecto. Una vez creado, copia la SUPABASE_URL y SUPABASE_ANON_KEY.

Paso 2: Instalar dependencias

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

---

2. Inicializando el Cliente Supabase

Crea un archivo lib/supabaseClient.ts:

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

export const supabase = createBrowserSupabaseClient()

---

3. Configuración del Proveedor de Sesión

En _app.tsx, envuelve tu aplicación con el proveedor de sesión:

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. Página de Inicio de Sesión

Crea una página simple para iniciar sesión:

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}>Iniciar sesión con Google</button>
}

---

5. Protegiendo rutas con SSR

Usa el helper getServerSideProps para proteger páginas:

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. Cerrar sesión y gestión de sesión

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

---

Tabla comparativa: Firebase vs Supabase

Característica	Firebase	Supabase
Código abierto	No	Sí
Base de datos	Firestore (NoSQL)	PostgreSQL (relacional)
Alojamiento	Incluido	Separado

---

Conclusión

Integrar Supabase con Next.js proporciona una solución robusta, escalable y moderna para manejar la autenticación de usuarios. Con pocos pasos, implementas el inicio de sesión social, la protección de rutas y la gestión de sesiones.

Para los desarrolladores frontend que desean acelerar la entrega de MVPs o aplicaciones completas, este es uno de los enfoques más directos y efectivos.

---

Listo para acelerar tu negocio con autenticación moderna?

Nuestro equipo puede ayudarte a implementar soluciones seguras y escalables con Supabase y Next.js.

Solicitar presupuesto