next password protect

Passwort schützen Sie Ihre nächsten.js -Bereitstellungen. Demo anzeigen (Passwort ist geheim )

---

Beispiel-mit-Custom-Logo.Mov

Wie es funktioniert

Diese Bibliothek fügt Ihrer nächsten.js -Bereitstellung eine Passwortaufforderung hinzu. Es besteht aus zwei Hauptteilen:

1. Zwei serverlose API -Routen:
   • Eine Anmelderoute, die überprüft, ob ein Passwort korrekt ist, und ein Cookie mit einem JWT festgelegt, falls dies der Fall ist.
   • Eine Scheckroute, die bestätigt, wenn Sie das Autorisierungs -Cookie mit einem gültigen JWT haben.
2. Eine HOC (Komponente höherer Ordnung), die die App in der nächsten. Andernfalls wird Ihnen eine Passwortaufforderung angezeigt.

WICHTIG : Der empfohlene Anwendungsfall für diese Bibliothek befindet sich in einer Staging- oder Vorschau -Umgebung. Durch die Nutzung von Webpacks DefinePlugin können wir sicherstellen, dass diese Bibliothek nur in bestimmten Umgebungen enthalten ist, wodurch die Größe des Produktionsbündels gering ist.

Diese Bibliothek ist nicht als sicheres Wrapper für Passwortauthentifizierung gedacht, sondern als eine Möglichkeit, neugierige Personen fernzuhalten.

Installation

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

Verwendung

Es gibt 3 Schritte zum Aktivieren von Kennwortschutz: Festlegen einer globalen Variablen, Hinzufügen der API -Routen und Hinzufügen des HOC zu _App.

Schritt 1

Um in der Lage zu sein, die Dead -Code -Eliminierung auszunutzen, wird empfohlen, eine Umgebungsvariable wie process.env.PASSWORD_PROTECT hinzuzufügen. Um diese Variable festzulegen, fügen Sie Folgendes zu next.config.js hinzu:

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

Schritt 2

Fügen Sie zwei API -Routen hinzu, eine mit dem loginHandler und einer mit der passwordCheckHandler -API -Funktion. Sie können sie im nächsten Schritt alles nennen, solange Sie die Namen an loginApiUrl bzw. checkApiUrl übergeben. Standardmäßig erwartet es /login und /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" ,
} ) ;

Schritt 3

Fügen Sie den withPasswordProtect Export von App in pages/_app.tsx den standardmäßigen Export von App hinzu:

 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 ;

HINWEIS : Stellen Sie sicher, dass Sie loginApiUrl und/oder checkApiUrl angeben, wenn die API -Route (en) nicht standardmäßig ist.

API

API Routes Handler

loginHandler(password: string, options)

Das Optionsobjekt kann die folgenden Optionen enthalten:

Option	Beschreibung	Standardwert
cookieMaxAge	MAX-AGE-MAXE-METZ-Attribut	undefined
cookieName	Der Name des Autorisierungskeks	'next-password-protect'
cookieSameSite	Samesit Cookie Attribut	false
cookieSecure	Sichere Flagge auf dem Keks	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

Das Optionsobjekt kann die folgenden Optionen enthalten:

Option	Beschreibung	Standardwert
cookieName	Der Name des Autorisierungskeks	'next-password-protect'

Nächste App -hoc

withPasswordProtect(App: NextApp, options)

Das Optionsobjekt kann die folgenden Optionen enthalten:

Option	Beschreibung	Standardwert
checkApiUrl	Relativer Weg der API -Route, die von passwordCheckHandler behandelt wurde	'/api/passwordCheck'
loginApiUrl	Relativer Weg der API -Route von loginHandler	'/api/login'
loginComponent	Liefern Sie Ihre eigene React -Komponente, um als Anmeldeingabeaufforderung anzuzeigen	LoginComponent
loginComponentProps	Eigenschaften Objekt zum Anpassen der Anmeldeaufforderung, ohne die gesamte Komponente zu überschreiben (siehe unten)	{}
bypassProtection	Bypass -Schutz für bestimmte Routen, der durch Rückruf mit NextRouter Param entschieden wird	({ route }) => false

Das Objekt loginComponentProps kann die folgenden Optionen enthalten:

Option	Beschreibung	Standardwert
backUrl	Zeigen Sie einen Link mit dieser URL an, um auf die Hauptwebsite zurückzukehren	undefined
buttonBackgroundColor	Hintergrundfarbe der Anmeldetaste	'#01EDBC'
buttonColor	Login -Taste Farbe	'#111'
logo	Zeigen Sie ein Logo über der Eingabeaufforderung (IMG SRC)	undefined

Fortschrittlich

Benutzerdefinierte Anmeldekomponente

Um die Standard -Anmeldekomponente zu ändern, kann eine React -Komponente an das withPasswordProtect -hoc -HOC geliefert werden. Damit die Bibliothek ordnungsgemäß funktioniert, stellen Sie sicher, dass Ihre Anmeldungskomponente eine Kennworteingabe hat, die von der API -Route validiert wird. Sie können src/hoc/LoginComponent.tsx als Ausgangspunkt verwenden.

Einschränkungen

AMP wird noch nicht unterstützt, da die Logincomponent -AMP -Validierung fehlgeschlagen ist. Auf einer Verstärkerseite wird nichts gerendert. Dies könnte durch Ändern des Logincomponenten in einen gültigen AMP behoben werden.