next password protectダウンロード - next password protectソースコードダウンロード

next password protect

AI ソースコード

v1.8.0

ダウンロード

パスワードnext.jsの展開を保護します。デモを見る（パスワードは秘密です）

custom-logo.movでの例

それがどのように機能するか

このライブラリは、next.jsの展開にパスワードプロンプトを追加します。 2つの主要な部分で構成されています。

2つのサーバーレスAPIルート：
- パスワードが正しいかどうかをチェックするログインルートで、その場合に備えてJWTを使用してCookieを設定します。
- 有効なJWTを備えた認証Cookieがある場合に検証するチェックルート。
next.jsアプリをラップし、ログインしているかどうかを検証するチェックを追加するHOC（高次コンポーネント）。それ以外の場合は、パスワードプロンプトが表示されます。

重要：このライブラリに推奨されるユースケースは、ステージングまたはプレビュー環境にあります。 WebpackのDefinePlugin利用することにより、このライブラリが特定の環境にのみ含まれていることを確認し、生産バンドルサイズを小さく保ちます。

このライブラリは、安全なパスワード認証ラッパーとしてではなく、おせっかいな人々を締め出す方法として意図されています。

インストール

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

使用法

パスワード保護を有効にするには、グローバル変数の設定、APIルートの追加、HOCを_APPに追加するための3つのステップがあります。

ステップ1

死んだコードの排除を利用できるようにするには、 process.env.PASSWORD_PROTECTなどの環境変数を追加し、その変数に基づいてライブラリを有効にすることをお勧めします。この変数を設定するには、次をnext.config.jsに追加します。

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

ステップ2

2つのAPIルートを追加します。1つはloginHandlerを使用し、もう1つはpasswordCheckHandler API関数を備えています。次のステップで、それぞれ名前をloginApiUrlとcheckApiUrlに渡す限り、何でも名前を付けることができます。デフォルトでは、 /loginと/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" ,
} ) ;

ステップ3

withPasswordProtect hocをpages/_app.tsxのデフォルトAppに追加します：

 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 ;

注：APIルートがデフォルトでない場合は、必ずloginApiUrlおよび/またはcheckApiUrlを指定してください。

API

APIルートハンドラー

loginHandler(password: string, options)

オプションオブジェクトには、次のオプションのいずれかを含めることができます。

オプション	説明	デフォルト値
`cookieMaxAge`	Cookie Max-Age属性	`undefined`
`cookieName`	認証クッキーの名前	`'next-password-protect'`
`cookieSameSite`	Samesite Cookie属性	`false`
`cookieSecure`	クッキーの安全なフラグ	`process.env.NODE_ENV === 'production'`

passwordCheckHandler(password: string, options)

オプションオブジェクトには、次のオプションのいずれかを含めることができます。

オプション	説明	デフォルト値
`cookieName`	認証クッキーの名前	`'next-password-protect'`

次のアプリHOC

withPasswordProtect(App: NextApp, options)

オプションオブジェクトには、次のオプションのいずれかを含めることができます。

オプション	説明	デフォルト値
`checkApiUrl`	`passwordCheckHandler`によって処理されたAPIルートの相対パス	`'/api/passwordCheck'`
`loginApiUrl`	`loginHandler`によって処理されたAPIルートの相対パス	`'/api/login'`
`loginComponent`	ログインプロンプトとして表示するために独自のReactコンポーネントを提供する	`LoginComponent`
`loginComponentProps`	プロパティオブジェクト全体のコンポーネントをオーバーライドせずに、ログインプロンプトをカスタマイズします（以下を参照）	`{}`
`bypassProtection`	特定のルートのバイパス保護、 `NextRouter` paramとのコールバックによって決定されます	`({ route }) => false`

loginComponentPropsオブジェクトには、次のオプションのいずれかを含めることができます。

オプション	説明	デフォルト値
`backUrl`	このURLにリンクを表示して、メインのWebサイトに戻る	`undefined`
`buttonBackgroundColor`	ログインボタンの背景色	`'#01EDBC'`
`buttonColor`	ログインボタンの色	`'#111'`
`logo`	プロンプトの上にロゴを表示する（IMG SRC）	`undefined`

高度な

カスタムログインコンポーネント

デフォルトのログインコンポーネントを変更するには、 withPasswordProtect HocにReactコンポーネントを提供できます。ライブラリが適切に機能するために、ログインコンポーネントがAPIルートによって検証されたパスワード入力があることを確認してください。 src/hoc/LoginComponent.tsx出発点として使用できます。