Nuxt Password Protect

Plug-and-play password protection for nuxt.

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

✨  Release Notes

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:

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

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

openssl rand -base64 40

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

Options

/**
 * 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
  }
}