Estrategias de autenticación de Next.js

Nuestro equipo redactor ha pasado mucho tiempo investigando para dar resolución a tu interrogante, te ofrecemos la resolución por esto nuestro objetivo es servirte de mucha apoyo.

Solución:

Descargo de responsabilidad: soy un mantenedor del paquete gratuito de código abierto a continuación, pero creo que es apropiado aquí, ya que es una pregunta común para la que no hay una gran respuesta, ya que muchas de las soluciones populares tienen las fallas de seguridad específicas planteadas en la pregunta ( como no usar CSRF cuando corresponda y exponer tokens de sesión o tokens web al JavaScript del lado del cliente).

El paquete NextAuth.js intenta abordar los problemas planteados anteriormente, con un software gratuito de código abierto.

• Usa httpOnly galletas con secure.
• Tiene protección CSRF (método de cookies de doble envío, con cookies firmadas).
• Las cookies tienen el prefijo apropiado (p. ej. __HOST- o __Secure).
• Admite inicio de sesión sin contraseña/correo electrónico y proveedores de OAuth (con muchos incluidos).
• Admite tokens web JSON (firmados y cifrados) y bases de datos de sesión.
• Puede usarlo sin una base de datos (por ejemplo, cualquier ANSI SQL, MongoDB).
• Tiene una demostración en vivo (ver código fuente).
• Es 100% FOSS, no es un software comercial ni una solución SaaS (no vende nada).

Ruta API de ejemplo

p.ej page/api/auth/[...nextauth.js]

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = 
  providers: [
    // OAuth authentication providers
    Providers.Apple(
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET
    ),
    Providers.Google(
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    ),
    // Sign in with email (passwordless)
    Providers.Email(
      server: process.env.MAIL_SERVER,
      from: '<[email protected]>'
    ),
  ],
  // MySQL, Postgres or MongoDB database (or leave empty)
  database: process.env.DATABASE_URL


export default (req, res) => NextAuth(req, res, options)

Ejemplo de componente de reacción

p.ej pages/index.js

import React from 'react'
import  
  useSession, 
  signin, 
  signout 
 from 'next-auth/client'

export default () => 
  const [ session, loading ] = useSession()

  return 

    !session && <>
      Not signed in 

      Sign in
    
    session && <>
      Signed in as session.user.email 

      Sign out
    
  

Incluso si elige no usarlo, puede encontrar el código útil como referencia (por ejemplo, cómo se manejan los tokens web JSON y cómo se rotan en las sesiones).

He tenido que pensar en esto también para mi proyecto actual. Utilizo las mismas tecnologías: una API ExpressJS y un front-end renderizado del lado del servidor NextJS.

Lo que elegí hacer es usar pasaporte.js en la API de ExpressJS. TheNetNinja en YouTube tiene una muy buena lista de reproducción con 21 episodios. Él le muestra cómo implementar Google OAuth 2.0 en su API, pero esta lógica se transfiere a cualquier otra estrategia (JWT, correo electrónico + contraseña, autenticación de Facebook, etc.).

En el front-end, literalmente redirigiría al usuario a una URL en Express API. Esta URL le mostraría al usuario la pantalla de Google OAuth, el usuario hace clic en “Permitir”, la API hace algunas cosas más, crea una cookie para el usuario específico y luego lo redirige a una URL en la interfaz. Ahora, el usuario está autenticado.

Acerca de las cookies HTTPOnly: Elegí desactivar esta función porque estaba almacenando información en la cookie que necesitaba en el front-end. Si tiene esta característica habilitada, entonces el front-end (javascript) no tiene acceso a esas cookies, porque son HTTPOnly.

Aquí está el enlace a la lista de reproducción de la que estaba hablando: https://www.youtube.com/watch?v=sakQbeRjgwg&list=PL4cUxeGkcC9jdm7QX143aMLAqyM-jTZ2x

Espero haberte dado una dirección que puedas tomar.

EDITAR: No he respondido a su pregunta sobre CSURF, pero eso es porque no estoy familiarizado con él.

Reseñas y puntuaciones

Acuérdate de que tienes la capacidad de explicar .

---

---

Utiliza Nuestro Buscador