nuxt-password-protect

A simple module used to password protect your pages or your entire website.

Release notes

Features

Require a password to access a page
Require a password to access the entire website
Full control over the password page

Usage

Add module to nuxt.config.js along with the password protect options.

Your passwords can be stored as an environment variable or hardcoded in your source files.

Options

Module initialisation in nuxt.config.js

module.exports = {
  modules: ['nuxt-password-protect'],

  passwordProtect: {
    formPath: '/password',
    password: 'hello-world',
    tokenSeed: 0101010,
    queryString: '_pw',
    cookieName: '_password'
    cookie: {
      prefix: '',
      expires: 5
    }
  }
}

With the options you can define the basics of your website protection.

To protect a page, simply add the middleware

export default {
  name: 'MyComponent',
  middleware: ['password-protect']
}

To protect an entire website

Add the middle ware to your nuxt configuration file

module.exports = {
  router: {
    middleware: ['password-protect']
  }
}

Using the API

We provide three methods you can use on your password form page, these will either add or remove authorisation or check if a user is authorised.

You can access these methods using the context of your vue component.

this.$passwordProtect.authorise(password)

This method will create a cookie with a unique cookie if the user has entered the correct password.

this.$passwordProtect.isAuthorised()

Is the user authorised to view this content, this will return a boolean depending.

this.$passwordProtect.removeAuthorisation()

Removes the users authorisation.

Using the query string

We also support granting authorisation using a querystring, by default the query string is _pw.

So to attempt to authorise you can do https://mywebsite.com?_pw=password

The query string can be changed by the protect password options in your nuxt config file.

License

MIT License

dev7ch / nuxt-password-protect