npm package: @lee-wfaa/gatsby-plugin-password-protect
Description: Add client-side password protection.
Author: WFAA
Latest version: 1.0.1

# Gatsby Plugin Password Protect

A client-side password protection plugin.

**IMPORTANT** Because this is client-side only, there is no way to 100% protect your password from unwanted visitors. This plugin was built to prevent the casual visitor from viewing content.

## Installation

1. Currently, this plugin is meant to be used locally until a more secure version is released. To install, simply place the code in your [site's `plugins` folder](https://www.gatsbyjs.com/docs/loading-plugins-from-your-local-plugins-folder/) in the root of your project.

Your directory structure will look similar to this:

```text
/my-gatsby-site
├── gatsby-config.js
└── /src
    └── /pages
        └── /index.js
├── /plugins
    └── /gatsby-plugin-password-protect
├── gatsby-browser.js
├── gatsby-node.js
├── gatsby-ssr.js
├── index.js
├── package.json
└── README.md
```

2. Include the plugin in a Gatsby site

Inside of the `gatsby-config.js` file of your site, include the plugin in the `plugins` array:

```javascript
module.exports = {
  plugins: [
    // other gatsby plugins
    // ...
    {
      resolve: 'gatsby-plugin-password-protect',
      options: {
        /** ...plugin options **/
      },
    },
  ],
}
```

## Build Process

After updating code in the `/src` directory, simply run `npm run build` to create the 3 necessary files in the root directory:

1. `gatsby-node.js`
2. `gastby-browser.js`
3. `gatsby-ssr.js`

These files are required to run the plugin in your Gatsby site.

## Plugin Options

### enabled

Turns on/off the password protection. This must be explicitly set to `true` or `"true"` to activate password protection.

**Field type**: `Boolean`

**Default value**: `false`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    enabled: true // or 'true'
  }
}
```

### password

The password to protect your site with. The password must be at three characters long and is required when enabled equals `true`.

**Field type**: `String`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    password: 'password!'
  }
}
```

### expiration

The expiration time, in seconds, for a valid session. Default value is 24 hours.

**Field type**: `Number`

**Default value**: `86400`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    expiration: 172800
  }
}
```

### storageKey

The name of the local storage key where your session will be stored.

**Field type**: `String`

**Default value**: `gppp`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    storageKey: 'local-storage-key'
  }
}
```

### publicKey

A random string used for client-side encryption of your session. This is required when `enabled` equals `true`. This can be changed at anytime, however, it will invalidate all current sessions.

**Field type**: `String`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    publicKey: 'MO|-#l 2#4v%q^&-IHgA0,,aWF-sWYA{!/=jR]3{>SlX90Z-4SQ,F2xyX7<%X,/+'
  }
}
```

### loadingMessage

The message to appear when validating the current session.

**Field type**: `String`

**Default value**: `Authenticating`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    loadingMessage: 'Validing your session...'
  }
}
```

### loginHeading

The heading of the login form.

**Field type**: `String`

**Default value**: `This site is password protected`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    loginHeading: 'Validing your session...'
  }
}
```

### loginButtonText

The login submit button text.

**Field type**: `String`

**Default value**: `View site`

```js
{
  resolve: `gatsby-plugin-password-protect`,
  options: {
    loginButtonText: 'Validing your session...'
  }
}
```