🔒 Autenticación de usuarios y protección de rutas

🔒 Autenticación de usuarios y protección de rutas

Aprende a proteger partes de tu blog usando autenticación y control de acceso en Next.js.

---

📌 Índice de esta entrada:

1. 🛠️ Introducción a la autenticación
2. 📦 Instalación de NextAuth.js
3. ⚙️ Configuración de proveedores de login
4. 🔑 Proteger páginas y rutas
5. 📝 Ejemplo práctico: página de administración
6. 💡 Buenas prácticas de seguridad

---

🛠️ Introducción a la autenticación

La autenticación permite controlar quién puede acceder a ciertas páginas de tu blog. Por ejemplo, solo los administradores deberían poder crear o borrar publicaciones.

📦 Instalación de NextAuth.js

NextAuth.js es la librería más popular para autenticación en Next.js. Permite login con correo/contraseña, Google, GitHub y más.

npm install next-auth
# o con yarn
yarn add next-auth
    

⚙️ Configuración de proveedores de login

Vamos a crear un archivo /pages/api/auth/[...nextauth].js:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);
    

Asegúrate de tener tus credenciales de Google en un archivo .env.local.

🔑 Proteger páginas y rutas

Para proteger una página podemos usar el hook useSession de NextAuth:

import { useSession } from "next-auth/react";

export default function AdminPage() {
  const { data: session } = useSession();

  if (!session) return <p>Acceso denegado. Por favor, inicia sesión.</p>;

  return <div>
    <h1>Panel de Administración</h1>
  </div>;
}
    

Esto asegura que solo usuarios autenticados puedan ver la página.

📝 Ejemplo práctico: página de administración

Puedes crear un botón de login y logout con NextAuth:

import { signIn, signOut, useSession } from "next-auth/react";

export default function Navbar() {
  const { data: session } = useSession();

  return <nav>
    {session ? (
      <>
        <span>Hola, {session.user.name}</span>
        <button onClick={() => signOut()}>Salir</button>
      </>
    ) : (
      <button onClick={() => signIn()}>Iniciar sesión</button>
    )}
  </nav>;
}
    

💡 Buenas prácticas de seguridad

• Usa HTTPS siempre.
• No expongas tus credenciales en el repositorio.
• Protege las rutas de API también, no solo las páginas.
• Usa sesiones cortas y refresca tokens regularmente.

---

💡 Consejo: La autenticación es clave para proteger tu contenido y usuarios. NextAuth facilita mucho la integración con Next.js.

← Volver al índice