The Nuxt Certification Program by VueSchool is out!

nuxt-basic-auth

Nuxt Module for Basic Authentication

Basic Auth

npm versionnpm downloadsLicenseNuxt

Nuxt 3 Module for Basic Authentication.

Features

  • ✅ Simple to use
  • ✅ Supports multiple users
  • ✅ Whitelist routes

Quick Setup

  1. Add @kgierke/nuxt-basic-auth dependency to your project
# Using pnpm
pnpm add -D @kgierke/nuxt-basic-auth

# Using yarn
yarn add --dev @kgierke/nuxt-basic-auth

# Using npm
npm install --save-dev @kgierke/nuxt-basic-auth
  1. Add @kgierke/nuxt-basic-auth to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@kgierke/nuxt-basic-auth"],
});
  1. Configure the module in nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@kgierke/nuxt-basic-auth"],

  basicAuth: {
    enabled: true,
    users: [
      {
        username: "admin",
        password: "admin",
      },
    ],
    // Optional: Whitelist routes
    // allowedRoutes: ["/api/.*"],
  },
});

That's it! You can now use Basic Auth in your Nuxt app ✨

Options

OptionTypeDefaultDescription
enabledbooleantrueEnables or disables Basic Auth.
usersarray[]Array of users. Each user must have a username and password property. Can also be formatted as string <username>:<password>,<username2>:<password2>
allowedRoutesstring[][]Array of routes that are not protected by Basic Auth. Supports regex patterns.

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release