next password protect

Mot de passe Protégez vos déploiements Next.js. Afficher la démo (le mot de passe est secret )

---

Exemple avec-personnalité-logo.mov

Comment ça marche

Cette bibliothèque ajoute une invite de mot de passe à votre déploiement suivant.js. Il se compose de deux parties principales:

1. Deux itinéraires d'API sans serveur:
   • Une voie de connexion qui vérifie si un mot de passe est correct et définit un cookie avec un JWT au cas où il le serait.
   • Un itinéraire de contrôle qui valide si vous avez le cookie d'autorisation avec un JWT valide.
2. Un HOC (composant d'ordre supérieur) qui enveloppe l'application Next.js et ajoute une vérification qui valide si vous êtes connecté. Si vous le faites, vous pouvez consulter l'application normalement; Sinon, vous êtes présenté avec une invite de mot de passe.

IMPORTANT : Le cas d'utilisation recommandé pour cette bibliothèque se trouve dans un environnement de mise en scène ou d'aperçu. En tirant parti de DefinePlugin de WebPack, nous pouvons nous assurer que cette bibliothèque n'est incluse que dans certains environnements, en gardant la taille du bundle de production petite.

Cette bibliothèque n'est pas conçue comme un emballage d'authentification de mot de passe sécurisé, mais plutôt comme un moyen de garder les personnes fouettes à l'extérieur.

Installation

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

Usage

Il y a 3 étapes pour activer la protection du mot de passe: la définition d'une variable globale, l'ajout des itinéraires API et l'ajout du HOC à _App.

Étape 1

Afin de pouvoir profiter de l'élimination du code mort, il est recommandé d'ajouter une variable d'environnement comme process.env.PASSWORD_PROTECT , et d'activer la bibliothèque en fonction de cette variable. Pour définir cette variable, ajoutez ce qui suit à next.config.js :

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

Étape 2

Ajoutez deux itinéraires API, un avec le loginHandler et un avec la fonction API passwordCheckHandler . Vous pouvez les nommer n'importe quoi, tant que vous passez les noms à loginApiUrl et checkApiUrl respectivement, à l'étape suivante. Par défaut, il attend /login et /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" ,
} ) ;

Étape 3

Ajoutez le HOC withPasswordProtect à l'exportation par défaut de App dans 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 ;

Remarque : assurez-vous de spécifier loginApiUrl et / ou checkApiUrl si la ou les itinéraires API ne sont pas par défaut.

API

API routes des gestionnaires

loginHandler(password: string, options)

L'objet Options peut contenir l'une des options suivantes:

Option	Description	Valeur par défaut
cookieMaxAge	Attribut de cookie max-âge	undefined
cookieName	Le nom du cookie d'autorisation	'next-password-protect'
cookieSameSite	Attribut de cookie samesite	false
cookieSecure	Drapeau sécurisé sur le cookie	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

L'objet Options peut contenir l'une des options suivantes:

Option	Description	Valeur par défaut
cookieName	Le nom du cookie d'autorisation	'next-password-protect'

Prochaine application hoc

withPasswordProtect(App: NextApp, options)

L'objet Options peut contenir l'une des options suivantes:

Option	Description	Valeur par défaut
checkApiUrl	Chemin relatif de l'itinéraire de l'API géré par passwordCheckHandler	'/api/passwordCheck'
loginApiUrl	Chemin relatif de l'itinéraire API géré par loginHandler	'/api/login'
loginComponent	Fournissez votre propre composant React pour afficher comme une invite de connexion	LoginComponent
loginComponentProps	Objet Propriétés pour personnaliser l'invite de connexion, sans remplacer l'ensemble du composant (voir ci-dessous)	{}
bypassProtection	Contourner la protection pour des itinéraires spécifiques, décidé par rappel avec NextRouter PARAM	({ route }) => false

L'objet loginComponentProps peut contenir l'une des options suivantes:

Option	Description	Valeur par défaut
backUrl	Afficher un lien avec cette URL pour revenir sur le site Web principal	undefined
buttonBackgroundColor	Couleur de fond du bouton de connexion	'#01EDBC'
buttonColor	Couleur du bouton de connexion	'#111'
logo	Afficher un logo au-dessus de l'invite (IMG SRC)	undefined

Avancé

Composant de connexion personnalisé

Pour modifier le composant de connexion par défaut, un composant REACT peut être fourni au HOC withPasswordProtect . Pour que la bibliothèque fonctionne correctement, assurez-vous que votre composant de connexion a une entrée de mot de passe qui est validée par l'itinéraire de l'API. Vous pouvez utiliser src/hoc/LoginComponent.tsx comme point de départ.

Mises en garde

L'AMP n'est pas encore pris en charge, car le LoginComponent a échoué la validation AMP. Sur une page AMP, rien n'est rendu. Cela pourrait être corrigé en modifiant le connexion LoginComponent en AMP valide.