next password protect

Contraseña protege sus próximas implementaciones. Ver demostración (la contraseña es secreta )

---

ejemplo con custom-logo.mov

Cómo funciona

Esta biblioteca agrega una solicitud de contraseña a su implementación Next.js. Consiste en dos partes principales:

1. Dos rutas de API sin servidor:
   • Una ruta de inicio de sesión que verifica si una contraseña es correcta y establece una cookie con un JWT en caso de que lo sea.
   • Una ruta de verificación que valida si tiene la cookie de autorización con un JWT válido.
2. Un hoc (componente de orden superior) que envuelve la aplicación Next.js y agrega una verificación que se valida si ha iniciado sesión. Si lo hace, entonces puede ver la aplicación normalmente; De lo contrario, se le presenta un mensaje de contraseña.

IMPORTANTE : El caso de uso recomendado para esta biblioteca está en un entorno de puesta en escena o vista previa. Al aprovechar DefinePlugin de Webpack, podemos asegurarnos de que esta biblioteca solo esté incluida en ciertos entornos, manteniendo el tamaño del paquete de producción pequeño.

Esta biblioteca no se entiende como un envoltorio seguro de autenticación de contraseña, sino más bien como una forma de mantener a las personas entrometidas.

Instalación

yarn add next-password-protect
# or
npm install next-password-protect

Uso

Hay 3 pasos para habilitar la protección de la contraseña: configurar una variable global, agregar las rutas API y agregar el HOC a _App.

Paso 1

Para poder aprovechar la eliminación del código muerto, se recomienda agregar una variable de entorno como process.env.PASSWORD_PROTECT , y habilite la biblioteca en función de esa variable. Para establecer esta variable, agregue lo siguiente a next.config.js :

 module . exports = {
  env : {
    // Add any logic you want here, returning `true` to enable password protect.
    PASSWORD_PROTECT : process . env . ENVIRONMENT === 'staging' ,
  }
} ) ;

Paso 2

Agregue dos rutas API, una con el loginHandler y otra con la función API passwordCheckHandler . Puede nombrarlos cualquier cosa, siempre que pase los nombres a loginApiUrl y checkApiUrl respectivamente, en el siguiente paso. Por defecto, espera /login y /passwordCheck .

 import { loginHandler } from "next-password-protect" ;

export default loginHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ; 

 import { passwordCheckHandler } from "next-password-protect" ;

export default passwordCheckHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ;

Paso 3

Agregue withPasswordProtect HOC a la exportación predeterminada de App en pages/_app.tsx :

 import { withPasswordProtect } from "next-password-protect" ;

// Before: export default App;
export default process . env . PASSWORD_PROTECT
  ? withPasswordProtect ( App , {
    // Options go here (optional)
    loginApiUrl : "/login" ,
  } )
  : App ;

Nota : asegúrese de especificar loginApiUrl y/o checkApiUrl si las rutas API no son predeterminadas.

API

Manejadores de rutas API

loginHandler(password: string, options)

El objeto Opciones puede contener cualquiera de las siguientes opciones:

Opción	Descripción	Valor predeterminado
cookieMaxAge	Atributo de cookie max-edad	undefined
cookieName	El nombre de la cookie de autorización	'next-password-protect'
cookieSameSite	Atributo de cookie samesite	false
cookieSecure	Asegure la bandera en la galleta	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

El objeto Opciones puede contener cualquiera de las siguientes opciones:

Opción	Descripción	Valor predeterminado
cookieName	El nombre de la cookie de autorización	'next-password-protect'

Siguiente aplicación hoc

withPasswordProtect(App: NextApp, options)

El objeto Opciones puede contener cualquiera de las siguientes opciones:

Opción	Descripción	Valor predeterminado
checkApiUrl	Ruta relativa de la ruta API manejada por passwordCheckHandler	'/api/passwordCheck'
loginApiUrl	Ruta relativa de la ruta API manejada por loginHandler	'/api/login'
loginComponent	Suministro su propio componente React para mostrar como aviso de inicio de sesión	LoginComponent
loginComponentProps	Propiedades Objeto para personalizar el indicador de inicio de sesión, sin anular el componente completo (ver más abajo)	{}
bypassProtection	Protección de derivación para rutas específicas, decidida por devolución de llamada con NextRouter Param	({ route }) => false

El objeto loginComponentProps puede contener cualquiera de las siguientes opciones:

Opción	Descripción	Valor predeterminado
backUrl	Muestre un enlace con esta URL para volver al sitio web principal	undefined
buttonBackgroundColor	Color de fondo del botón de inicio de sesión	'#01EDBC'
buttonColor	Color del botón de inicio de sesión	'#111'
logo	Muestre un logotipo sobre el indicador (IMG SRC)	undefined

Avanzado

Componente de inicio de sesión personalizado

Para cambiar el componente de inicio de sesión predeterminado, se puede suministrar un componente React a withPasswordProtect HOC. Para que la biblioteca funcione correctamente, asegúrese de que su componente de inicio de sesión tenga entrada de contraseña validada por la ruta API. Puede usar src/hoc/LoginComponent.tsx como punto de partida.

Advertencias

El AMP aún no es compatible, porque el Logincomponent falló la validación de AMP. En una página de amplificador, no se representa nada. Esto podría solucionarse cambiando logincomponent a un amplificador válido.