{"id":16922,"library":"vite-plugin-http-basic-auth","title":"Vite HTTP Basic Auth Plugin","description":"vite-plugin-http-basic-auth is a Vite plugin designed to add HTTP Basic Authentication support to the Vite development server and preview server. It is currently at version 1.0.2. As a plugin for Vite, its release cadence is generally tied to the Vite ecosystem, with updates provided as needed for compatibility or new features. This plugin is particularly useful for protecting development or staging environments that are exposed publicly, requiring credentials before allowing access. Key differentiators include its simple configuration within the Vite `defineConfig`, direct integration with environment variables for credentials, and optional enablement for both development and preview modes. It leverages standard HTTP Basic Auth, making it widely compatible with browsers and other clients.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/CzechCyberTeam/vite-plugin-http-auth","tags":["javascript","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-http-basic-auth","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-http-basic-auth","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-http-basic-auth","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Vite plugin and requires Vite to function.","package":"vite","optional":false}],"imports":[{"note":"The plugin is typically imported as a default export using ESM syntax within Vite configuration files. While Vite supports CJS for config, the plugin itself is likely ESM-first.","wrong":"const httpAuth = require('vite-plugin-http-basic-auth');","symbol":"httpAuth","correct":"import httpAuth from 'vite-plugin-http-basic-auth';"},{"note":"The `httpAuth` function is called directly within the `plugins` array in `vite.config.ts`/`vite.config.js`.","symbol":"Configuring the plugin","correct":"plugins: [httpAuth([{ username: 'user', password: 'pass' }])]"},{"note":"While explicit type imports might not always be needed due to inference, they are available for stricter type checking when configuring credentials or options.","symbol":"Types","correct":"import type { UserCredentials, AuthOptions } from 'vite-plugin-http-basic-auth';"}],"quickstart":{"code":"import { defineConfig, loadEnv } from 'vite';\nimport httpAuth from 'vite-plugin-http-basic-auth';\n\n// To run this example, create a .env file:\n// VITE_AUTH_USERNAME_DEV=devuser\n// VITE_AUTH_PASSWORD_DEV=devpass\n// VITE_AUTH_REALM=SecureDevSite\n\nexport default defineConfig(({ command, mode }) => {\n  const env = loadEnv(mode, process.cwd(), '');\n\n  return {\n    plugins: [\n      httpAuth([{\n        username: env.VITE_AUTH_USERNAME_DEV ?? '', // Use environment variables for credentials\n        password: env.VITE_AUTH_PASSWORD_DEV ?? ''\n      }], {\n        realm: env.VITE_AUTH_REALM ?? 'Protected Area', // Optional: customize the realm\n        useInServer: true,   // Default: true, enables auth for 'npm run dev'\n        useInPreview: true   // Default: true, enables auth for 'npm run preview'\n      })\n    ]\n  };\n});","lang":"typescript","description":"This quickstart demonstrates how to configure HTTP Basic Authentication using environment variables for a Vite project, protecting both the development and preview servers."},"warnings":[{"fix":"Access environment variables that should only be server-side without the `VITE_` prefix, or ensure sensitive credentials are only used in the server configuration and not within the client-side code paths.","message":"Environment variables starting with `VITE_` are exposed to the client-side bundle in Vite by default. Ensure that sensitive credentials used for server-side basic auth are not inadvertently exposed or handle them with care.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your development and preview servers are served over HTTPS. For Vite, you can configure HTTPS via `server.https: true` in `vite.config.ts` and provide certificate details.","message":"Basic Authentication sends credentials in plain text (Base64 encoded, not encrypted) over the network. Always use HTTPS for any environment where this plugin is deployed to prevent eavesdropping.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Conditionally set `useInServer` or `useInPreview` based on `mode`: `useInServer: mode === 'development'`, etc., or omit them to use the default `true`.","message":"The plugin's `useInServer` and `useInPreview` options are `true` by default. If you only want basic auth for specific environments (e.g., preview but not dev), you must explicitly set these options to `false` based on your `mode`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure you are using the correct ESM import syntax: `import httpAuth from 'vite-plugin-http-basic-auth';`.","cause":"Incorrect import statement for the plugin.","error":"TypeError: httpAuth is not a function"},{"fix":"Verify the username and password in your `.env` file match what is configured in `vite.config.ts`. Ensure `loadEnv` is correctly configured to load your `.env` file and prefixes.","cause":"Incorrect username/password credentials provided, or the environment variables supplying them are not loaded correctly.","error":"401 Unauthorized"},{"fix":"Check `useInServer` and `useInPreview` options in the plugin configuration. Confirm the plugin is correctly added to the `plugins` array in `vite.config.ts`.","cause":"The plugin might not be active for the current server type (dev or preview) or the plugin array in Vite config is misconfigured.","error":"HTTP Basic Auth is not prompting in browser"}],"ecosystem":"npm","meta_description":null}