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 in the root of your project.

Your directory structure will look similar to this:

/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:

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

{
  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

{
  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

{
  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

{
  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

{
  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

{
  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

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

loginButtonText

The login submit button text.

Field type: String

Default value: View site

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