{"id":16731,"library":"isitme","title":"isitme Passkey Authentication","description":"The `isitme` package (currently version 0.0.7) provides a highly streamlined and zero-configuration solution for passkey-based authentication, specifically engineered for solo developers or 'solo builders'. It abstracts away the complexities of implementing WebAuthn, offering a simple 'no accounts, just your fingerprint' approach to secure access. The library facilitates both passkey registration and subsequent login flows, leveraging device-native authentication methods without the need for traditional backend user management or database integration. It offers first-class integrations with popular JavaScript frameworks such as React, Hono, Next.js, and Vue, providing framework-specific components or utilities that handle the entire passkey lifecycle. Its core differentiator lies in its extreme simplicity and developer experience, aiming for rapid integration and minimal friction for securely gating content or functionality. While in early development (pre-1.0), it focuses on providing a robust yet easy-to-use authentication layer for personalized, secure access.","status":"active","version":"0.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/isitme-dev/isitme","tags":["javascript","typescript"],"install":[{"cmd":"npm install isitme","lang":"bash","label":"npm"},{"cmd":"yarn add isitme","lang":"bash","label":"yarn"},{"cmd":"pnpm add isitme","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for potential server-side integration or middleware in Express applications.","package":"express","optional":true},{"reason":"Peer dependency for handling session cookies or authentication tokens in server environments.","package":"cookie-parser","optional":true},{"reason":"Peer dependency for using the `isitme/react` component integration.","package":"react","optional":true},{"reason":"Peer dependency for using the `isitme/react` component integration.","package":"react-dom","optional":true},{"reason":"Peer dependency for integration with the Hono web framework.","package":"hono","optional":true},{"reason":"Peer dependency for integration with the Next.js framework.","package":"next","optional":true},{"reason":"Peer dependency for integration with the Vue.js framework.","package":"vue","optional":true}],"imports":[{"note":"The `IsItMe` component is a named export from the React specific entry point.","wrong":"import IsItMe from 'isitme/react';","symbol":"IsItMe","correct":"import { IsItMe } from 'isitme/react';"},{"note":"This CSS import is necessary for Tailwind CSS 4 users to ensure `isitme` components are correctly styled by Tailwind.","symbol":"Tailwind CSS Import","correct":"@import 'isitme/tailwind.css';"},{"note":"This is an inferred example for Hono framework integration; specific export names and paths for other frameworks (Next.js, Vue) will vary but follow similar patterns. `isitme` primarily uses ESM.","wrong":"const { createAuthMiddleware } = require('isitme/hono');","symbol":"createAuthMiddleware","correct":"import { createAuthMiddleware } from 'isitme/hono';"}],"quickstart":{"code":"import { IsItMe } from \"isitme/react\";\n\nfunction AdminPage() {\n  return (\n    <IsItMe>\n      <h1>Admin dashboard</h1>\n      <p>Only you, authenticated via passkey, can see this sensitive content. Upon your first visit, a passkey will be registered; subsequent visits will require authentication via your registered passkey.</p>\n      <button onClick={() => console.log('Logout functionality not shown, but would clear local auth state.')}>Sign Out (placeholder)</button>\n    </IsItMe>\n  );\n}\n\n// To integrate with a Next.js App Router, you might use it like this:\n// export default function Page() {\n//   return <AdminPage />;\n// }\n","lang":"typescript","description":"This quickstart demonstrates how to protect a React component using the `IsItMe` wrapper. It handles passkey registration on first visit and subsequent authentication."},"warnings":[{"fix":"Pin exact versions (e.g., `npm install isitme@0.0.7`) and review release notes carefully when updating to new versions.","message":"As a pre-1.0 library (version 0.0.7), `isitme` does not guarantee API stability. Breaking changes may occur in minor or even patch releases.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Always serve your application over HTTPS in production. For local development, ensure your development server is configured for HTTPS or use `localhost` directly.","message":"Passkey authentication, based on WebAuthn, requires a secure context (HTTPS) for production environments and in many development scenarios (except localhost).","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Add `@import 'isitme/tailwind.css';` to your main CSS entry point, as documented in the README.","message":"When using Tailwind CSS 4, `isitme` components will appear unstyled unless its specific CSS import is included.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Inform users about passkey compatibility and consider providing alternative authentication methods or graceful degradation for unsupported environments if broad accessibility is critical.","message":"Passkey support (WebAuthn) varies across browsers, operating systems, and specific hardware. Some older devices or less common browsers may not fully support the API.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Change your import statement to `import { IsItMe } from 'isitme/react';`.","cause":"The React component `IsItMe` was imported incorrectly, likely as a default import instead of a named import.","error":"ReferenceError: IsItMe is not defined"},{"fix":"Ensure the user is actively consenting to the passkey prompt. Verify device settings for biometrics/security keys. Ensure your origin is considered secure (HTTPS).","cause":"This error typically occurs during passkey registration or authentication when the user declines the prompt, or a browser/OS security policy prevents the operation (e.g., pop-up blockers, no biometric sensor detected).","error":"DOMException: The operation either timed out or was not allowed. (WebAuthn)"},{"fix":"Ensure your application is being served over HTTPS. If developing locally, ensure your development server is configured for HTTPS or verify you are accessing via `localhost`.","cause":"WebAuthn APIs require a secure context (HTTPS) to function correctly, for security reasons.","error":"Error: No credentials available. Are you running on HTTPS?"}],"ecosystem":"npm"}