{"id":16765,"library":"better-auth-devtools","title":"Better Auth DevTools","description":"Better Auth DevTools is an unofficial development tool designed to augment the 'better-auth' library ecosystem. It provides utilities for managing test users, facilitating session switching, and offers a dedicated panel within React DevTools for enhanced debugging and interaction. Currently in an alpha state (version 0.1.1-alpha.9), the package is under active development, implying potential for frequent, unannounced breaking changes and API instability. It differentiates itself by offering direct integration with the 'better-auth' library, streamlining development workflows by providing direct control over authentication states and user management during local development and testing, significantly reducing manual setup time for various authentication scenarios. It serves as a crucial aid for developers working with authentication flows in React applications using 'better-auth'.","status":"active","version":"0.1.1-alpha.9","language":"javascript","source_language":"en","source_url":"https://github.com/C-W-D-Harshit/better-auth-devtools","tags":["javascript","better-auth","auth","devtools","plugin","react","typescript"],"install":[{"cmd":"npm install better-auth-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add better-auth-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add better-auth-devtools","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the React DevTools plugin and any React-based UI components.","package":"react","optional":false},{"reason":"Necessary for rendering React components, especially within the DevTools plugin context.","package":"react-dom","optional":false},{"reason":"The core authentication library that this devtool integrates with and provides utilities for.","package":"better-auth","optional":false}],"imports":[{"note":"Used for initializing the standalone devtools client. This package is ESM-only; CommonJS `require` is not supported. Ensure correct subpath import for client-specific functionalities.","wrong":"const { BetterAuthDevTools } = require('better-auth-devtools/client');","symbol":"BetterAuthDevTools","correct":"import { BetterAuthDevTools } from 'better-auth-devtools/client';"},{"note":"Used to create the plugin for React Developer Tools. It's a named export from the `/react` subpath. Attempting to use a default import will fail.","wrong":"import createBetterAuthDevToolsPlugin from 'better-auth-devtools/react';","symbol":"createBetterAuthDevToolsPlugin","correct":"import { createBetterAuthDevToolsPlugin } from 'better-auth-devtools/react';"},{"note":"The root path of the package re-exports `createBetterAuthDevToolsPlugin` for convenience. Prefer the explicit `/react` subpath for clarity, but this works. Still ESM-only.","wrong":"const { createBetterAuthDevToolsPlugin } = require('better-auth-devtools');","symbol":"createBetterAuthDevToolsPlugin","correct":"import { createBetterAuthDevToolsPlugin } from 'better-auth-devtools';"}],"quickstart":{"code":"import { BetterAuth } from 'better-auth';\nimport { BetterAuthDevTools } from 'better-auth-devtools/client';\nimport { createBetterAuthDevToolsPlugin } from 'better-auth-devtools/react';\n\n// 1. Initialize your BetterAuth instance (replace with your actual configuration)\nconst betterAuthInstance = new BetterAuth({\n  baseUrl: process.env.BETTER_AUTH_API_URL ?? 'https://api.example.com/auth',\n  clientId: process.env.BETTER_AUTH_CLIENT_ID ?? 'your-client-id-here',\n  // Add other BetterAuth configuration options as needed\n});\n\n// 2. Initialize the standalone Better Auth DevTools client\n// This provides a separate UI for managing test users and sessions.\nBetterAuthDevTools.init({\n  betterAuthInstance,\n  config: {\n    // Example config: enable verbose logging for devtools\n    debug: true,\n    // Additional standalone client configuration options can go here\n  },\n});\n\nconsole.log('Better Auth DevTools standalone client initialized.');\n\n// 3. Create and implicitly register the React DevTools plugin\n// This integrates a panel directly into the React Developer Tools extension.\n// Simply importing and calling this function in your React app's entry point\n// is often enough for the React DevTools extension to pick it up.\nconst reactDevToolsPlugin = createBetterAuthDevToolsPlugin({\n  betterAuthInstance,\n  config: {\n    // Example config for the React panel: show more details\n    showSessionDetails: true,\n    // Additional React plugin configuration options\n  },\n});\n\nconsole.log('Better Auth DevTools React plugin created and ready for React DevTools.');\n\n// In a typical React application, ensure these initializations happen\n// before your main React app renders, often in your 'index.tsx' or 'App.tsx'.\n\n// Example of interacting with betterAuthInstance (for context, not part of devtools init)\nasync function logUserStatus() {\n  try {\n    const user = await betterAuthInstance.getCurrentUser();\n    if (user) {\n      console.log('User is logged in:', user.email);\n    } else {\n      console.log('No user currently logged in.');\n    }\n  } catch (error) {\n    console.error('Failed to get user status:', error);\n  }\n}\n\n// Uncomment to run an example auth check\n// logUserStatus();","lang":"typescript","description":"This quickstart demonstrates how to initialize both the standalone Better Auth DevTools client and integrate the React DevTools plugin into a TypeScript project, providing a foundation for managing authentication states and users during development."},"warnings":[{"fix":"Monitor GitHub releases and changelogs closely for updates. Pin exact alpha versions in `package.json` to prevent unexpected breakage, but be prepared for manual upgrades.","message":"This package is currently in an alpha state (version 0.1.1-alpha.9). Expect frequent breaking changes, API instability, and unannounced modifications between releases without major version bumps. It is not recommended for production environments.","severity":"breaking","affected_versions":">=0.1.0-alpha.0"},{"fix":"Always test `better-auth-devtools` thoroughly after updating the core `better-auth` package. Report any incompatibilities to the `better-auth-devtools` maintainers.","message":"As an unofficial devtool for Better Auth, its feature set or API might not always align with future official Better Auth library updates or support policies. It's maintained independently.","severity":"gotcha","affected_versions":">=0.1.0-alpha.0"},{"fix":"Ensure that your project's installed versions of `react`, `react-dom`, and `better-auth` satisfy the peer dependency requirements specified in `better-auth-devtools`'s `package.json`. Use `npm install` or `yarn install` to resolve peer dependencies.","message":"This library has critical peer dependencies on `react`, `react-dom`, and `better-auth`. Mismatches in versions can lead to runtime errors, silent failures, or unexpected behavior, especially with React's context system or `better-auth`'s internal state.","severity":"gotcha","affected_versions":">=0.1.0-alpha.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Verify the exact import path, e.g., `import { BetterAuthDevTools } from 'better-auth-devtools/client';`. For TypeScript, ensure your `tsconfig.json` has `\"moduleResolution\": \"bundler\"` or `\"node16\"` (or newer compatible option) to correctly resolve package `exports`.","cause":"Incorrect import path for a subpath export, or an issue with TypeScript's module resolution for `exports` field.","error":"Error: Cannot find module 'better-auth-devtools/client' or its corresponding type declarations."},{"fix":"Update your project to use ES Modules (`import` statements) throughout. Ensure your `package.json` either has `\"type\": \"module\"` or that your bundler (Webpack, Rollup, etc.) is configured to handle ESM. Also ensure you are using named imports for `createBetterAuthDevToolsPlugin`.","cause":"Attempting to use CommonJS `require()` syntax with this package, which is ES Modules (ESM) only, or incorrect named import.","error":"TypeError: Cannot read properties of undefined (reading 'init') or Error: require() of ES Module better-auth-devtools/react not supported."},{"fix":"Ensure the React DevTools browser extension is installed and enabled for your browser. Verify your application is running in development mode. Make sure the `createBetterAuthDevToolsPlugin` call is executed early in your React application's lifecycle, typically in your root `index.tsx` or `App.tsx` file, before any main components render.","cause":"The React DevTools browser extension might not be active, the application is not running in development mode, or the plugin initialization code is not executed within a discoverable React context.","error":"React DevTools panel for Better Auth is not appearing, even after initializing the plugin."}],"ecosystem":"npm","meta_description":null}