isitme Passkey Authentication

Common errors

• ReferenceError: IsItMe is not defined

  cause The React component `IsItMe` was imported incorrectly, likely as a default import instead of a named import.
  fix Change your import statement to `import { IsItMe } from 'isitme/react';`.

• DOMException: The operation either timed out or was not allowed. (WebAuthn)

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

• Error: No credentials available. Are you running on HTTPS?

  cause WebAuthn APIs require a secure context (HTTPS) to function correctly, for security reasons.
  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`.

Warnings

• breaking 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.
  Fix: Pin exact versions (e.g., `npm install isitme@0.0.7`) and review release notes carefully when updating to new versions.
• gotcha Passkey authentication, based on WebAuthn, requires a secure context (HTTPS) for production environments and in many development scenarios (except localhost).
  Fix: Always serve your application over HTTPS in production. For local development, ensure your development server is configured for HTTPS or use `localhost` directly.
• gotcha When using Tailwind CSS 4, `isitme` components will appear unstyled unless its specific CSS import is included.
  Fix: Add `@import 'isitme/tailwind.css';` to your main CSS entry point, as documented in the README.
• gotcha Passkey support (WebAuthn) varies across browsers, operating systems, and specific hardware. Some older devices or less common browsers may not fully support the API.
  Fix: Inform users about passkey compatibility and consider providing alternative authentication methods or graceful degradation for unsupported environments if broad accessibility is critical.

Install

• npm install isitme npm
• yarn add isitme yarn
• pnpm add isitme pnpm

Imports

• IsItMe
  wrong:

  import IsItMe from 'isitme/react';

  correct:

  import { IsItMe } from 'isitme/react';

  The `IsItMe` component is a named export from the React specific entry point.
• Tailwind CSS Import

  @import 'isitme/tailwind.css';

  This CSS import is necessary for Tailwind CSS 4 users to ensure `isitme` components are correctly styled by Tailwind.
• createAuthMiddleware
  wrong:

  const { createAuthMiddleware } = require('isitme/hono');

  correct:

  import { createAuthMiddleware } from 'isitme/hono';

  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.

Quickstart

This quickstart demonstrates how to protect a React component using the `IsItMe` wrapper. It handles passkey registration on first visit and subsequent authentication.

import { IsItMe } from "isitme/react";

function AdminPage() {
  return (
    <IsItMe>
      <h1>Admin dashboard</h1>
      <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>
      <button onClick={() => console.log('Logout functionality not shown, but would clear local auth state.')}>Sign Out (placeholder)</button>
    </IsItMe>
  );
}

// To integrate with a Next.js App Router, you might use it like this:
// export default function Page() {
//   return <AdminPage />;
// }