npm package: @plutotcool/nuxt-password-protect
Description: Plug-and-play password protection for nuxt
Author: Julien Dargelos
Latest version: 1.8.0

# Nuxt Password Protect

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Plug-and-play password protection for nuxt.

Ths module is not meant to work for static generated websites.

[✨ &nbsp;Release Notes](/CHANGELOG.md)

## Features

- Instant password protection with two required settings
- Blocks access to any resources in production, including public assets.
- Customizable authentication page

## Quick Setup

Install the module to your Nuxt application with one command:

```bash
npx nuxi module add @plutotcool/nuxt-password-protect
```

Setup the module with a password and a secret key to sign JWT tokens (usually from environment variables):

```ts
// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@plutotcool/password-protect'
  ],

  passwordProtect: {
    password: process.env.PASSWORD_PROTECT,
    secret: process.env.PASSWORD_PROTECT_SECRET
  }
})
```

You can generate a secure secret key using the following command:

```bash
openssl rand -base64 40
```

That's it! You can now use Nuxt Password Protect in your Nuxt app ✨

# Options

```ts
/**
 * Module options for the password protect module.
 */
export interface ModuleOptions {
  /**
   * Enable or disable the password protect module.
   * @default true
   */
  enabled?: boolean

  /**
   * The password required to access the website. Password protection will be
   * disabled if empty.
   * @default undefined
   */
  password?: string

  /**
   * A secret key used to sign the JWT token. Password protection will be
   * disabled if empty.
   * @default undefined
   */
  secret?: string

  /**
   * The expiration time for the JWT token in milliseconds.
   * @default 7 * 24 * 60 * 60 * 1000 // 7 days
   */
  expiration?: number

  /**
   * Cookie name to use for the authentication token in requests.
   * @default 'password-protect'
   */
  cookie?: string

  /**
   * Array of route patterns that must be password-protected.
   * If undefined, all routes will be protected.
   * If empty array, no route will be protected.
   * Exclusion rules takes precedence over inclusion rules.
   * @default undefined
   */
  include?: string[]

  /**
   * Array of route patterns that must be excluded from password protection.
   * If undefined, no route will be excluded from protection.
   * If empty array, no route will be excluded from protection either.
   * Exclusion rules takes precedence over inclusion rules.
   * @default undefined
   */
  exclude?: string[]

  /**
   * Configuration for the HTML template used for authentication.
   * @default undefined
   */
  template?: {
    /**
     * Language code used in the HTML root document tag.
     * @default 'en'
     */
    lang?: string

    /**
     * Meta title for the HTML document.
     * @default 'Authentication'
     */
    metaTitle?: string

    /**
     * URL or path to a logo image to display above the form, relative to nuxt
     * rootDir. If the provided file is an external url, it will be used as is.
     * If it is a local path, it will be encoded as a base64 URL.
     * @default './runtime/server/assets/logo.svg'
     */
    logo?: string

    /**
     * Public path to a favicon image used for the authentication page. The path
     * must be accessible even when not authenticated for it to work. Make sure
     * to add it to the exclude option if needed.
     * @default undefined
     */
    icon?: string

    /**
     * Mime type of the favicon image. If undefined, will be inferred from the
     * icon path.
     * @default undefined
     */
    iconType?: string

    /**
     * Title of the authentication form.
     * @default 'Authentication'
     */
    title?: string

    /**
     * Message displayed above the form input.
     * @default 'Please authenticate to access this page'
     */
    message?: string

    /**
     * Error message displayed when the authentication fails.
     * @default 'Incorrect password'
     */
    errorMessage?: string

    /**
     * Message displayed while the authentication is being processed.
     * @default 'Loading...'
     */
    loadingMessage?: string

    /**
     * Password input label.
     * @default 'Password'
     */
    inputLabel?: string

    /**
     * Submit button label.
     * @default 'Authenticate'
     */
    submitLabel?: string
  }
}
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@plutotcool/nuxt-password-protect/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@plutotcool/nuxt-password-protect

[npm-downloads-src]: https://img.shields.io/npm/dm/@plutotcool/nuxt-password-protect.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@plutotcool/nuxt-password-protect

[license-src]: https://img.shields.io/npm/l/@plutotcool/nuxt-password-protect.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@plutotcool/nuxt-password-protect

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com