Autenticación en React con Supabase: Guía Completa

La autenticación es una de las funcionalidades fundamentales para la mayoría de las aplicaciones modernas. Si alguna vez te has preguntado cómo implementar autenticación en tu aplicación React utilizando Supabase, una alternativa de código abierto a Firebase, este artículo es para ti. Vamos a cubrir todo el proceso paso a paso, desde la configuración inicial hasta habilitar el inicio de sesión con proveedores como Google, Facebook y GitHub.

¿Por qué usar Supabase para la autenticación?

Supabase es una plataforma backend como servicio (BaaS) que ofrece autenticación preconfigurada, bases de datos PostgreSQL y muchas otras funcionalidades. Lo mejor es que proporciona una interfaz intuitiva y herramientas listas para usar que aceleran el desarrollo de aplicaciones. A continuación, te mostraremos cómo usar estas ventajas en tu proyecto.

Configuración inicial

Antes de comenzar, necesitas instalar las herramientas necesarias y preparar el entorno de desarrollo.

Crear un proyecto de Supabase

Accede al dashboard de Supabase y crea un nuevo proyecto.

creacion de proyecto en supabase

Crea una buena contraseña y guardala bien ya que sera la unica vez que la veras.

Una vez creado, desde el dashboard de supabase o en https://supabase.com/dashboard/project/<id-del-proyecto> podras ver tu API KEY y la url de tu proyecto, si no la ves dirígete a la pestaña Settings > API para obtener tu URL de proyecto y tu clave anónima (anonkey).
Guarda esta información, ya que la usarás más adelante.

Crear una aplicación React

Ahora vamos a la terminal y ejecuta:

npm create vite@latest supabase-auth

Deberas seleccionar React y TypeScript:

Need to install the following packages:
create-vite@6.1.1
Ok to proceed? (y) Y


> npx
> create-vite supabase-auth

✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/carlos.seijas/Developer/supabase-auth...

Done. Now run:

  cd supabase-auth
  npm install
  npm run dev

Esto creará un nuevo proyecto de React llamado supabase-auth. Luego, entra al directorio del proyecto:

cd supabase-auth

Instalar las dependencias de Supabase

Ejecuta el siguiente comando para instalar las bibliotecas necesarias:

npm install @supabase/supabase-js @supabase/auth-ui-react

Estas bibliotecas incluyen el cliente de Supabase y una interfaz de usuario preconstruida para la autenticación.

Configurando Supabase en React

El siguiente paso es conectar tu aplicación React con Supabase.

Configurar las variables de entorno

Crea un archivo .env en el directorio raíz de tu proyecto y define las siguientes variables:

VITE_SUPABASE_URL=tu-url-de-supabase
VITE_SUPABASE_ANON_KEY=tu-clave-anon

Estas variables serán usadas para inicializar el cliente de Supabase.

Configurar el cliente de Supabase

Abre el archivo src/App.js y reemplaza su contenido con el siguiente código:

import "./App.css";
import { useState, useEffect } from "react";
import { createClient, Session } from "@supabase/supabase-js";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

export default function App() {
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
    return () => subscription.unsubscribe();
  }, []);

  if (!session) {
    return (
      <div className="auth-container">
        <div className="auth-card">
          <h2 className="auth-title">Iniciar Sesión</h2>
          <Auth
            supabaseClient={supabase}
            appearance={{ theme: ThemeSupa }}
            providers={["google", "facebook", "github"]}
            localization={{
              variables: {
                sign_in: {
                  email_label: "Correo electrónico",
                  password_label: "Contraseña",
                  button_label: "Iniciar sesión",
                }
              }
            }}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h2 className="auth-title">¡Bienvenido!</h2>
        <p className="auth-text">
          Has iniciado sesión como:<br/>
          <span className="user-email">{session.user.email}</span>
        </p>
        <button
          className="logout-button"
          onClick={() => supabase.auth.signOut()}
        >
          Cerrar sesión
        </button>
      </div>
    </div>
  );
}

Este código configura el cliente de Supabase, muestra la interfaz de autenticación y permite cerrar sesión.

Agregando algunos estilos

Si deseas mejorar la apariencia de tu aplicación desde el principio, puedes agregar los siguientes estilos básicos a tu archivo App.css. Estos estilos centran los elementos principales en la pantalla:

.auth-container {
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #f0f2f5;
}

.auth-card {
 padding: 2.5rem;
 background-color: white;
 border-radius: 12px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 width: 100%;
 max-width: 500px;
 text-align: center;
}

.auth-title {
 font-size: 2rem;
 color: #1a1a1a;
 margin-bottom: 0.5rem;
 font-weight: 600;
}

.auth-text {
 font-size: 1.1rem;
 color: #666;
 margin-bottom: 2rem;
}

.user-email {
 color: #2563eb;
 font-weight: 500;
}

.logout-button {
 background-color: #ef4444;
 color: white;
 padding: 0.75rem 2rem;
 border-radius: 8px;
 border: none;
 cursor: pointer;
 font-size: 1.1rem;
 font-weight: 500;
 transition: all 0.2s ease;
 box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.logout-button:hover {
 background-color: #dc2626;
 transform: translateY(-1px);
}

Probando la aplicación

Ejecuta el siguiente comando para iniciar tu servidor de desarrollo:

npm run dev

Podras ver la aplicación si abres tu navegador en localhost:5173/

Deberas ver algo asi:

ejemplo de login con supabase

Creando la primera cuenta

Inicialmente, no tendrás una cuenta creada, por lo que deberás hacer clic en el botón de Sign Up para registrarte. Introduce tu correo electrónico y una contraseña segura. Después de esto, recibirás un correo electrónico para confirmar tu cuenta. Este correo será enviado automáticamente por Supabase utilizando un template predeterminado, el cual puedes personalizar más adelante para que se ajuste al diseño de tu aplicación.

confirmacion de email

Una vez que confirmes tu cuenta desde el enlace en el correo, podrás iniciar sesión sin problemas.

Conclusión

En esta guía, aprendiste cómo implementar autenticación en React utilizando Supabase. Configuramos un cliente de Supabase, habilitamos la autenticación con email. Ahora tienes una base sólida para construir aplicaciones más avanzadas con autenticación segura y escalable. ¡Sigue explorando y creando!