sneekui 0.1.1

package/README.md

@@ -0,0 +1,152 @@
+# sneekui
+
+Drop-in **passwordless OTP login** UI for React, powered by [Sneek](https://sneek.in).
+
+One component renders the whole two-step flow — *enter your email/mobile → enter the
+code → signed in* — over SMS, WhatsApp, or email. No passwords.
+
+## The security model (read this first)
+
+`sneekui` runs in the browser, so it **never holds a Sneek API key**. Instead it
+calls **your own backend**, and your backend calls Sneek server-side with your secret
+key (using [`sneeksdk`](../../sdk)).
+
+```
+Browser (sneekui)
+   │  POST /api/auth/request-otp { identifier }
+   ▼
+Your backend  ──(sneeksdk, secret key)──►  Sneek API  ──►  SMS / WhatsApp / Email
+   │  POST /api/auth/verify-otp { requestId, code }
+   ▼
+Your backend issues your session / token
+```
+
+Putting a Sneek key in front-end code would expose it to every visitor. This package
+is designed so that can't happen.
+
+## Install
+
+```bash
+npm install sneekui
+```
+
+`react >= 17` is a peer dependency.
+
+## Quick start
+
+```tsx
+import { SneekOtpLogin, createFetchHandlers } from 'sneekui';
+
+export function LoginPage() {
+  return (
+    <SneekOtpLogin
+      title="Sign in to ConfHub"
+      {...createFetchHandlers({
+        requestUrl: '/api/auth/request-otp',
+        verifyUrl: '/api/auth/verify-otp',
+      })}
+      onSuccess={() => {
+        window.location.href = '/dashboard';
+      }}
+    />
+  );
+}
+```
+
+That's the whole front end. `createFetchHandlers` POSTs to your endpoints; defaults are
+`/api/auth/request-otp` and `/api/auth/verify-otp`.
+
+### Your backend endpoints
+
+```ts
+// POST /api/auth/request-otp   body: { identifier }
+import { Sneek } from 'sneeksdk';
+const sneek = new Sneek({ apiKey: process.env.SNEEK_API_KEY! });
+
+const otp = await sneek.sendOTP({ to: identifier, channel: 'auto' });
+return { requestId: otp.id, channels: [otp.channel], expiresInSeconds: 300 };
+
+// POST /api/auth/verify-otp   body: { requestId, code }
+// verify against your store, then return your own session/token
+```
+
+> The exact verify call depends on how you persist the OTP request. Sneek returns a
+> message id on send; store it keyed by `requestId` and check the code your way, or use
+> Sneek's verify endpoint if enabled for your app.
+
+## Headless usage
+
+Want your own markup? Use the hook:
+
+```tsx
+import { useSneekOtp, createFetchHandlers } from 'sneekui';
+
+function MyLogin() {
+  const otp = useSneekOtp({
+    ...createFetchHandlers(),
+    onSuccess: (user) => console.log('signed in', user),
+  });
+
+  if (otp.step === 'identify') {
+    return (
+      <form onSubmit={(e) => { e.preventDefault(); otp.sendOtp(); }}>
+        <input value={otp.identifier} onChange={(e) => otp.setIdentifier(e.target.value)} />
+        <button disabled={otp.isBusy}>{otp.isSending ? 'Sending…' : 'Send code'}</button>
+        {otp.error && <p>{otp.error}</p>}
+      </form>
+    );
+  }
+
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); otp.verify(); }}>
+      <input value={otp.code} onChange={(e) => otp.setCode(e.target.value)} />
+      <button disabled={otp.isBusy}>{otp.isVerifying ? 'Verifying…' : 'Verify'}</button>
+      <button type="button" onClick={otp.back}>Back</button>
+      <button type="button" onClick={otp.resend}>Resend</button>
+    </form>
+  );
+}
+```
+
+### Custom transport
+
+Don't want `fetch`? Provide `requestOtp` / `verifyOtp` directly:
+
+```tsx
+useSneekOtp({
+  requestOtp: async (identifier) => {
+    const r = await myClient.sendOtp(identifier);
+    return { requestId: r.id, channels: r.channels, expiresInSeconds: r.ttl };
+  },
+  verifyOtp: async ({ requestId, code }) => myClient.verify(requestId, code),
+  onSuccess: (result) => {/* … */},
+});
+```
+
+## API
+
+### `<SneekOtpLogin />`
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `requestOtp` | `(id) => Promise<RequestOtpResult>` | — | Required |
+| `verifyOtp` | `({requestId, code}) => Promise<T>` | — | Required |
+| `onSuccess` | `(result: T) => void` | — | After verify |
+| `onError` | `(error: unknown) => void` | — | Any failure |
+| `title` | `string` | `'Sign in'` | |
+| `subtitle` | `ReactNode` | Sneek tagline | |
+| `accentColor` | `string` | `'#56d3b5'` | Button colour |
+| `logo` | `ReactNode` | — | Above the title |
+| `style` / `className` | — | — | Container overrides |
+
+`createFetchHandlers(options)` returns `{ requestOtp, verifyOtp }`, so spread it into the
+component or hook.
+
+### `useSneekOtp(handlers)`
+
+Returns the reducer state plus `setIdentifier`, `setCode`, `sendOtp`, `verify`, `back`,
+`resend`, and the booleans `isSending`, `isVerifying`, `isBusy`.
+
+## License
+
+UNLICENSED — © Sneek.

package/dist/index.d.mts

@@ -0,0 +1,160 @@
+import { ReactNode, CSSProperties } from 'react';
+
+/**
+ * Framework-agnostic state machine for the Sneek passwordless OTP flow.
+ *
+ * Kept free of React so it can be unit-tested in isolation and reused by other
+ * front-end bindings later (Vue/Svelte). The hook in `use-sneek-otp.ts` is a
+ * thin wrapper around this reducer.
+ */
+type SneekChannel = 'sms' | 'whatsapp' | 'email';
+/** Which screen of the two-step flow is showing. */
+type SneekOtpStep = 'identify' | 'verify';
+/** Async lifecycle for the in-flight request. */
+type SneekOtpStatus = 'idle' | 'sending' | 'verifying';
+interface SneekOtpState {
+    step: SneekOtpStep;
+    status: SneekOtpStatus;
+    /** The email / mobile / username the user typed. */
+    identifier: string;
+    /** The OTP code the user typed on the verify screen. */
+    code: string;
+    /** Opaque id returned by the partner backend, replayed on verify. */
+    requestId: string;
+    /** Channels the OTP was actually delivered over. */
+    channels: SneekChannel[];
+    /** Seconds until the OTP expires (from the request response). */
+    expiresInSeconds: number;
+    /** User-facing error message, or null. */
+    error: string | null;
+}
+declare const initialOtpState: SneekOtpState;
+interface RequestOtpResult {
+    requestId: string;
+    channels?: SneekChannel[];
+    expiresInSeconds?: number;
+}
+type SneekOtpAction = {
+    type: 'set_identifier';
+    value: string;
+} | {
+    type: 'set_code';
+    value: string;
+} | {
+    type: 'request_start';
+} | {
+    type: 'request_success';
+    result: RequestOtpResult;
+} | {
+    type: 'request_error';
+    message: string;
+} | {
+    type: 'verify_start';
+} | {
+    type: 'verify_error';
+    message: string;
+} | {
+    type: 'reset';
+} | {
+    type: 'back_to_identify';
+};
+declare function otpReducer(state: SneekOtpState, action: SneekOtpAction): SneekOtpState;
+/** "SMS, WhatsApp" — human label for the channels an OTP was sent over. */
+declare function formatChannels(channels: SneekChannel[]): string;
+
+/**
+ * Partner-supplied transport. These call the *partner's own backend*, which in
+ * turn talks to the Sneek API with the secret server-side key. The browser
+ * never sees a Sneek API key — that is the whole security model of this package.
+ */
+interface SneekOtpHandlers<TResult = unknown> {
+    /** Ask the partner backend to send an OTP to `identifier`. */
+    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
+    /** Verify the code with the partner backend; resolve with the auth result. */
+    verifyOtp: (input: {
+        requestId: string;
+        code: string;
+    }) => Promise<TResult>;
+    /** Called after a successful verification with the partner's result. */
+    onSuccess?: (result: TResult) => void;
+    /** Called on any error (request or verify). */
+    onError?: (error: unknown) => void;
+}
+interface UseSneekOtp extends SneekOtpState {
+    setIdentifier: (value: string) => void;
+    setCode: (value: string) => void;
+    /** Submit the identify step — triggers `requestOtp`. */
+    sendOtp: () => Promise<void>;
+    /** Submit the verify step — triggers `verifyOtp`. */
+    verify: () => Promise<void>;
+    /** Go back to the identify screen (e.g. "use a different email"). */
+    back: () => void;
+    /** Re-send the OTP to the same identifier. */
+    resend: () => Promise<void>;
+    /** Convenience booleans. */
+    isSending: boolean;
+    isVerifying: boolean;
+    isBusy: boolean;
+}
+/**
+ * Headless hook implementing the passwordless OTP login flow. Bring your own
+ * markup, or use the {@link SneekOtpLogin} component for a styled default.
+ */
+declare function useSneekOtp<TResult = unknown>(handlers: SneekOtpHandlers<TResult>): UseSneekOtp;
+
+interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<TResult> {
+    /** Heading shown above the form. @default 'Sign in' */
+    title?: string;
+    /** Sub-heading. @default 'Passwordless login powered by Sneek' */
+    subtitle?: ReactNode;
+    /** Label for the identifier input. */
+    identifierLabel?: string;
+    /** Placeholder for the identifier input. */
+    identifierPlaceholder?: string;
+    /** Brand colour for the primary button. @default '#56d3b5' */
+    accentColor?: string;
+    /** Optional logo rendered above the title. */
+    logo?: ReactNode;
+    /** Override the outer container style. */
+    style?: CSSProperties;
+    /** Extra className on the outer container. */
+    className?: string;
+}
+/**
+ * Drop-in, dependency-free passwordless OTP login card. The component never
+ * receives a Sneek API key; it calls the partner-supplied handlers, which talk
+ * to the partner backend. Use {@link createFetchHandlers} for the common case.
+ */
+declare function SneekOtpLogin<TResult = unknown>(props: SneekOtpLoginProps<TResult>): ReactNode;
+
+interface FetchHandlerOptions {
+    /**
+     * Partner backend endpoint that sends an OTP. Receives `{ identifier }`,
+     * must return `{ requestId, channels?, expiresInSeconds? }`.
+     * @default '/api/auth/request-otp'
+     */
+    requestUrl?: string;
+    /**
+     * Partner backend endpoint that verifies an OTP. Receives
+     * `{ requestId, code }`, returns whatever your app needs (session, token…).
+     * @default '/api/auth/verify-otp'
+     */
+    verifyUrl?: string;
+    /** Extra headers (e.g. CSRF token) to send on both requests. */
+    headers?: Record<string, string>;
+    /** Forwarded to fetch — set to 'include' if you use cookie sessions. */
+    credentials?: RequestCredentials;
+}
+/**
+ * Build {@link SneekOtpHandlers} that POST to your own backend endpoints.
+ * Those endpoints call the Sneek API server-side with your secret key.
+ */
+declare function createFetchHandlers<TResult = unknown>(options?: FetchHandlerOptions): {
+    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
+    verifyOtp: (input: {
+        requestId: string;
+        code: string;
+    }) => Promise<TResult>;
+};
+
+export { type FetchHandlerOptions, type RequestOtpResult, type SneekChannel, type SneekOtpAction, type SneekOtpHandlers, SneekOtpLogin, type SneekOtpLoginProps, type SneekOtpState, type SneekOtpStatus, type SneekOtpStep, type UseSneekOtp, createFetchHandlers, formatChannels, initialOtpState, otpReducer, useSneekOtp };

package/dist/index.d.ts

@@ -0,0 +1,160 @@
+import { ReactNode, CSSProperties } from 'react';
+
+/**
+ * Framework-agnostic state machine for the Sneek passwordless OTP flow.
+ *
+ * Kept free of React so it can be unit-tested in isolation and reused by other
+ * front-end bindings later (Vue/Svelte). The hook in `use-sneek-otp.ts` is a
+ * thin wrapper around this reducer.
+ */
+type SneekChannel = 'sms' | 'whatsapp' | 'email';
+/** Which screen of the two-step flow is showing. */
+type SneekOtpStep = 'identify' | 'verify';
+/** Async lifecycle for the in-flight request. */
+type SneekOtpStatus = 'idle' | 'sending' | 'verifying';
+interface SneekOtpState {
+    step: SneekOtpStep;
+    status: SneekOtpStatus;
+    /** The email / mobile / username the user typed. */
+    identifier: string;
+    /** The OTP code the user typed on the verify screen. */
+    code: string;
+    /** Opaque id returned by the partner backend, replayed on verify. */
+    requestId: string;
+    /** Channels the OTP was actually delivered over. */
+    channels: SneekChannel[];
+    /** Seconds until the OTP expires (from the request response). */
+    expiresInSeconds: number;
+    /** User-facing error message, or null. */
+    error: string | null;
+}
+declare const initialOtpState: SneekOtpState;
+interface RequestOtpResult {
+    requestId: string;
+    channels?: SneekChannel[];
+    expiresInSeconds?: number;
+}
+type SneekOtpAction = {
+    type: 'set_identifier';
+    value: string;
+} | {
+    type: 'set_code';
+    value: string;
+} | {
+    type: 'request_start';
+} | {
+    type: 'request_success';
+    result: RequestOtpResult;
+} | {
+    type: 'request_error';
+    message: string;
+} | {
+    type: 'verify_start';
+} | {
+    type: 'verify_error';
+    message: string;
+} | {
+    type: 'reset';
+} | {
+    type: 'back_to_identify';
+};
+declare function otpReducer(state: SneekOtpState, action: SneekOtpAction): SneekOtpState;
+/** "SMS, WhatsApp" — human label for the channels an OTP was sent over. */
+declare function formatChannels(channels: SneekChannel[]): string;
+
+/**
+ * Partner-supplied transport. These call the *partner's own backend*, which in
+ * turn talks to the Sneek API with the secret server-side key. The browser
+ * never sees a Sneek API key — that is the whole security model of this package.
+ */
+interface SneekOtpHandlers<TResult = unknown> {
+    /** Ask the partner backend to send an OTP to `identifier`. */
+    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
+    /** Verify the code with the partner backend; resolve with the auth result. */
+    verifyOtp: (input: {
+        requestId: string;
+        code: string;
+    }) => Promise<TResult>;
+    /** Called after a successful verification with the partner's result. */
+    onSuccess?: (result: TResult) => void;
+    /** Called on any error (request or verify). */
+    onError?: (error: unknown) => void;
+}
+interface UseSneekOtp extends SneekOtpState {
+    setIdentifier: (value: string) => void;
+    setCode: (value: string) => void;
+    /** Submit the identify step — triggers `requestOtp`. */
+    sendOtp: () => Promise<void>;
+    /** Submit the verify step — triggers `verifyOtp`. */
+    verify: () => Promise<void>;
+    /** Go back to the identify screen (e.g. "use a different email"). */
+    back: () => void;
+    /** Re-send the OTP to the same identifier. */
+    resend: () => Promise<void>;
+    /** Convenience booleans. */
+    isSending: boolean;
+    isVerifying: boolean;
+    isBusy: boolean;
+}
+/**
+ * Headless hook implementing the passwordless OTP login flow. Bring your own
+ * markup, or use the {@link SneekOtpLogin} component for a styled default.
+ */
+declare function useSneekOtp<TResult = unknown>(handlers: SneekOtpHandlers<TResult>): UseSneekOtp;
+
+interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<TResult> {
+    /** Heading shown above the form. @default 'Sign in' */
+    title?: string;
+    /** Sub-heading. @default 'Passwordless login powered by Sneek' */
+    subtitle?: ReactNode;
+    /** Label for the identifier input. */
+    identifierLabel?: string;
+    /** Placeholder for the identifier input. */
+    identifierPlaceholder?: string;
+    /** Brand colour for the primary button. @default '#56d3b5' */
+    accentColor?: string;
+    /** Optional logo rendered above the title. */
+    logo?: ReactNode;
+    /** Override the outer container style. */
+    style?: CSSProperties;
+    /** Extra className on the outer container. */
+    className?: string;
+}
+/**
+ * Drop-in, dependency-free passwordless OTP login card. The component never
+ * receives a Sneek API key; it calls the partner-supplied handlers, which talk
+ * to the partner backend. Use {@link createFetchHandlers} for the common case.
+ */
+declare function SneekOtpLogin<TResult = unknown>(props: SneekOtpLoginProps<TResult>): ReactNode;
+
+interface FetchHandlerOptions {
+    /**
+     * Partner backend endpoint that sends an OTP. Receives `{ identifier }`,
+     * must return `{ requestId, channels?, expiresInSeconds? }`.
+     * @default '/api/auth/request-otp'
+     */
+    requestUrl?: string;
+    /**
+     * Partner backend endpoint that verifies an OTP. Receives
+     * `{ requestId, code }`, returns whatever your app needs (session, token…).
+     * @default '/api/auth/verify-otp'
+     */
+    verifyUrl?: string;
+    /** Extra headers (e.g. CSRF token) to send on both requests. */
+    headers?: Record<string, string>;
+    /** Forwarded to fetch — set to 'include' if you use cookie sessions. */
+    credentials?: RequestCredentials;
+}
+/**
+ * Build {@link SneekOtpHandlers} that POST to your own backend endpoints.
+ * Those endpoints call the Sneek API server-side with your secret key.
+ */
+declare function createFetchHandlers<TResult = unknown>(options?: FetchHandlerOptions): {
+    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
+    verifyOtp: (input: {
+        requestId: string;
+        code: string;
+    }) => Promise<TResult>;
+};
+
+export { type FetchHandlerOptions, type RequestOtpResult, type SneekChannel, type SneekOtpAction, type SneekOtpHandlers, SneekOtpLogin, type SneekOtpLoginProps, type SneekOtpState, type SneekOtpStatus, type SneekOtpStep, type UseSneekOtp, createFetchHandlers, formatChannels, initialOtpState, otpReducer, useSneekOtp };

package/dist/index.js

@@ -0,0 +1,341 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SneekOtpLogin: () => SneekOtpLogin,
+  createFetchHandlers: () => createFetchHandlers,
+  formatChannels: () => formatChannels,
+  initialOtpState: () => initialOtpState,
+  otpReducer: () => otpReducer,
+  useSneekOtp: () => useSneekOtp
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-sneek-otp.ts
+var import_react = require("react");
+
+// src/state.ts
+var initialOtpState = {
+  step: "identify",
+  status: "idle",
+  identifier: "",
+  code: "",
+  requestId: "",
+  channels: [],
+  expiresInSeconds: 0,
+  error: null
+};
+var isBusy = (status) => status !== "idle";
+function otpReducer(state, action) {
+  switch (action.type) {
+    case "set_identifier":
+      return { ...state, identifier: action.value, error: null };
+    case "set_code":
+      return { ...state, code: action.value, error: null };
+    case "request_start":
+      if (isBusy(state.status)) return state;
+      return { ...state, status: "sending", error: null };
+    case "request_success":
+      return {
+        ...state,
+        step: "verify",
+        status: "idle",
+        code: "",
+        requestId: action.result.requestId,
+        channels: action.result.channels ?? [],
+        expiresInSeconds: action.result.expiresInSeconds ?? 0,
+        error: null
+      };
+    case "request_error":
+      return { ...state, status: "idle", error: action.message };
+    case "verify_start":
+      if (isBusy(state.status)) return state;
+      return { ...state, status: "verifying", error: null };
+    case "verify_error":
+      return { ...state, status: "idle", error: action.message };
+    case "back_to_identify":
+      return {
+        ...state,
+        step: "identify",
+        status: "idle",
+        code: "",
+        requestId: "",
+        channels: [],
+        expiresInSeconds: 0,
+        error: null
+      };
+    case "reset":
+      return { ...initialOtpState };
+    default:
+      return state;
+  }
+}
+var CHANNEL_LABELS = {
+  sms: "SMS",
+  whatsapp: "WhatsApp",
+  email: "email"
+};
+function formatChannels(channels) {
+  return channels.map((c) => CHANNEL_LABELS[c] ?? c).join(", ");
+}
+function toMessage(error, fallback) {
+  if (error instanceof Error && error.message) return error.message;
+  if (typeof error === "string" && error) return error;
+  return fallback;
+}
+
+// src/use-sneek-otp.ts
+var DEFAULT_REQUEST_ERROR = "Could not send the code. Please try again.";
+var DEFAULT_VERIFY_ERROR = "That code was not correct. Please try again.";
+function useSneekOtp(handlers) {
+  const [state, dispatch] = (0, import_react.useReducer)(otpReducer, initialOtpState);
+  const { requestOtp, verifyOtp, onSuccess, onError } = handlers;
+  const setIdentifier = (0, import_react.useCallback)((value) => {
+    dispatch({ type: "set_identifier", value });
+  }, []);
+  const setCode = (0, import_react.useCallback)((value) => {
+    dispatch({ type: "set_code", value });
+  }, []);
+  const runRequest = (0, import_react.useCallback)(
+    async (identifier) => {
+      const trimmed = identifier.trim();
+      if (!trimmed) {
+        dispatch({ type: "request_error", message: "Enter your email or mobile number." });
+        return;
+      }
+      dispatch({ type: "request_start" });
+      try {
+        const result = await requestOtp(trimmed);
+        dispatch({ type: "request_success", result });
+      } catch (error) {
+        dispatch({ type: "request_error", message: toMessage(error, DEFAULT_REQUEST_ERROR) });
+        onError?.(error);
+      }
+    },
+    [requestOtp, onError]
+  );
+  const sendOtp = (0, import_react.useCallback)(() => runRequest(state.identifier), [runRequest, state.identifier]);
+  const resend = (0, import_react.useCallback)(() => runRequest(state.identifier), [runRequest, state.identifier]);
+  const verify = (0, import_react.useCallback)(async () => {
+    const code = state.code.trim();
+    if (!code) {
+      dispatch({ type: "verify_error", message: "Enter the code you received." });
+      return;
+    }
+    dispatch({ type: "verify_start" });
+    try {
+      const result = await verifyOtp({ requestId: state.requestId, code });
+      onSuccess?.(result);
+    } catch (error) {
+      dispatch({ type: "verify_error", message: toMessage(error, DEFAULT_VERIFY_ERROR) });
+      onError?.(error);
+    }
+  }, [verifyOtp, state.code, state.requestId, onSuccess, onError]);
+  const back = (0, import_react.useCallback)(() => {
+    dispatch({ type: "back_to_identify" });
+  }, []);
+  return {
+    ...state,
+    setIdentifier,
+    setCode,
+    sendOtp,
+    verify,
+    back,
+    resend,
+    isSending: state.status === "sending",
+    isVerifying: state.status === "verifying",
+    isBusy: state.status !== "idle"
+  };
+}
+
+// src/component.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function SneekOtpLogin(props) {
+  const {
+    title = "Sign in",
+    subtitle = "Passwordless login powered by Sneek",
+    identifierLabel = "Email or mobile number",
+    identifierPlaceholder = "you@example.com or +9198xxxxxxxx",
+    accentColor = "#56d3b5",
+    logo,
+    style,
+    className,
+    ...handlers
+  } = props;
+  const otp = useSneekOtp(handlers);
+  const onIdentifySubmit = (event) => {
+    event.preventDefault();
+    void otp.sendOtp();
+  };
+  const onVerifySubmit = (event) => {
+    event.preventDefault();
+    void otp.verify();
+  };
+  const inputStyle = {
+    padding: "12px 14px",
+    border: "1px solid rgba(0,0,0,0.15)",
+    borderRadius: 10,
+    fontSize: "0.95rem",
+    width: "100%",
+    boxSizing: "border-box",
+    outline: "none"
+  };
+  const buttonStyle = {
+    marginTop: 4,
+    padding: "12px 14px",
+    border: "none",
+    borderRadius: 10,
+    background: accentColor,
+    color: "#04231d",
+    fontSize: "1rem",
+    fontWeight: 600,
+    cursor: otp.isBusy ? "not-allowed" : "pointer",
+    opacity: otp.isBusy ? 0.6 : 1,
+    width: "100%"
+  };
+  const linkStyle = {
+    border: "none",
+    background: "transparent",
+    color: accentColor,
+    cursor: "pointer",
+    font: "inherit",
+    fontSize: "0.9rem",
+    padding: 0
+  };
+  const errorStyle = {
+    background: "rgba(255,107,94,0.12)",
+    color: "#c0392b",
+    padding: "10px 12px",
+    border: "1px solid rgba(255,107,94,0.25)",
+    borderRadius: 8,
+    fontSize: "0.85rem"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        maxWidth: 400,
+        margin: "0 auto",
+        padding: 32,
+        border: "1px solid rgba(0,0,0,0.08)",
+        borderRadius: 16,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", marginBottom: 24 }, children: [
+          logo,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { style: { fontSize: "1.4rem", fontWeight: 700, margin: "8px 0 4px" }, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "0.9rem", opacity: 0.7, margin: 0 }, children: subtitle })
+        ] }),
+        otp.step === "identify" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: onIdentifySubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          otp.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: errorStyle, children: otp.error }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }, children: [
+            identifierLabel,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "text",
+                value: otp.identifier,
+                onChange: (e) => otp.setIdentifier(e.target.value),
+                placeholder: identifierPlaceholder,
+                autoComplete: "username",
+                autoFocus: true,
+                required: true,
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", disabled: otp.isBusy, style: buttonStyle, children: otp.isSending ? "Sending code\u2026" : "Send code" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: onVerifySubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          otp.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: errorStyle, children: otp.error }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                background: "rgba(86,211,181,0.12)",
+                padding: "10px 12px",
+                borderRadius: 8,
+                fontSize: "0.85rem"
+              },
+              children: [
+                otp.channels.length > 0 ? `Code sent via ${formatChannels(otp.channels)}.` : "We sent you a code.",
+                otp.expiresInSeconds > 0 && ` It expires in ${Math.max(1, Math.floor(otp.expiresInSeconds / 60))} min.`
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }, children: [
+            "Verification code",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "one-time-code",
+                value: otp.code,
+                onChange: (e) => otp.setCode(e.target.value),
+                placeholder: "Enter code",
+                autoFocus: true,
+                required: true,
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", disabled: otp.isBusy, style: buttonStyle, children: otp.isVerifying ? "Verifying\u2026" : "Verify and sign in" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: otp.back, disabled: otp.isBusy, style: linkStyle, children: "Use a different contact" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => void otp.resend(), disabled: otp.isBusy, style: linkStyle, children: "Resend code" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/fetch-handlers.ts
+async function postJson(url, body, options) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...options.headers ?? {} },
+    credentials: options.credentials,
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    let message = `Request failed (${response.status})`;
+    try {
+      const data = await response.json();
+      message = data.message || data.error || message;
+    } catch {
+    }
+    throw new Error(message);
+  }
+  return await response.json();
+}
+function createFetchHandlers(options = {}) {
+  const requestUrl = options.requestUrl ?? "/api/auth/request-otp";
+  const verifyUrl = options.verifyUrl ?? "/api/auth/verify-otp";
+  return {
+    requestOtp: (identifier) => postJson(requestUrl, { identifier }, options),
+    verifyOtp: (input) => postJson(verifyUrl, input, options)
+  };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/use-sneek-otp.ts","../src/state.ts","../src/component.tsx","../src/fetch-handlers.ts"],"sourcesContent":["export {\n  useSneekOtp,\n  type SneekOtpHandlers,\n  type UseSneekOtp,\n} from './use-sneek-otp';\n\nexport {\n  SneekOtpLogin,\n  type SneekOtpLoginProps,\n} from './component';\n\nexport {\n  createFetchHandlers,\n  type FetchHandlerOptions,\n} from './fetch-handlers';\n\nexport {\n  otpReducer,\n  initialOtpState,\n  formatChannels,\n  type SneekChannel,\n  type SneekOtpStep,\n  type SneekOtpStatus,\n  type SneekOtpState,\n  type SneekOtpAction,\n  type RequestOtpResult,\n} from './state';\n","import { useCallback, useReducer } from 'react';\nimport {\n  initialOtpState,\n  otpReducer,\n  toMessage,\n  type RequestOtpResult,\n  type SneekOtpState,\n} from './state';\n\n/**\n * Partner-supplied transport. These call the *partner's own backend*, which in\n * turn talks to the Sneek API with the secret server-side key. The browser\n * never sees a Sneek API key — that is the whole security model of this package.\n */\nexport interface SneekOtpHandlers<TResult = unknown> {\n  /** Ask the partner backend to send an OTP to `identifier`. */\n  requestOtp: (identifier: string) => Promise<RequestOtpResult>;\n  /** Verify the code with the partner backend; resolve with the auth result. */\n  verifyOtp: (input: { requestId: string; code: string }) => Promise<TResult>;\n  /** Called after a successful verification with the partner's result. */\n  onSuccess?: (result: TResult) => void;\n  /** Called on any error (request or verify). */\n  onError?: (error: unknown) => void;\n}\n\nexport interface UseSneekOtp extends SneekOtpState {\n  setIdentifier: (value: string) => void;\n  setCode: (value: string) => void;\n  /** Submit the identify step — triggers `requestOtp`. */\n  sendOtp: () => Promise<void>;\n  /** Submit the verify step — triggers `verifyOtp`. */\n  verify: () => Promise<void>;\n  /** Go back to the identify screen (e.g. \"use a different email\"). */\n  back: () => void;\n  /** Re-send the OTP to the same identifier. */\n  resend: () => Promise<void>;\n  /** Convenience booleans. */\n  isSending: boolean;\n  isVerifying: boolean;\n  isBusy: boolean;\n}\n\nconst DEFAULT_REQUEST_ERROR = 'Could not send the code. Please try again.';\nconst DEFAULT_VERIFY_ERROR = 'That code was not correct. Please try again.';\n\n/**\n * Headless hook implementing the passwordless OTP login flow. Bring your own\n * markup, or use the {@link SneekOtpLogin} component for a styled default.\n */\nexport function useSneekOtp<TResult = unknown>(\n  handlers: SneekOtpHandlers<TResult>,\n): UseSneekOtp {\n  const [state, dispatch] = useReducer(otpReducer, initialOtpState);\n\n  const { requestOtp, verifyOtp, onSuccess, onError } = handlers;\n\n  const setIdentifier = useCallback((value: string) => {\n    dispatch({ type: 'set_identifier', value });\n  }, []);\n\n  const setCode = useCallback((value: string) => {\n    dispatch({ type: 'set_code', value });\n  }, []);\n\n  const runRequest = useCallback(\n    async (identifier: string) => {\n      const trimmed = identifier.trim();\n      if (!trimmed) {\n        dispatch({ type: 'request_error', message: 'Enter your email or mobile number.' });\n        return;\n      }\n      dispatch({ type: 'request_start' });\n      try {\n        const result = await requestOtp(trimmed);\n        dispatch({ type: 'request_success', result });\n      } catch (error) {\n        dispatch({ type: 'request_error', message: toMessage(error, DEFAULT_REQUEST_ERROR) });\n        onError?.(error);\n      }\n    },\n    [requestOtp, onError],\n  );\n\n  const sendOtp = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);\n\n  const resend = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);\n\n  const verify = useCallback(async () => {\n    const code = state.code.trim();\n    if (!code) {\n      dispatch({ type: 'verify_error', message: 'Enter the code you received.' });\n      return;\n    }\n    dispatch({ type: 'verify_start' });\n    try {\n      const result = await verifyOtp({ requestId: state.requestId, code });\n      onSuccess?.(result);\n    } catch (error) {\n      dispatch({ type: 'verify_error', message: toMessage(error, DEFAULT_VERIFY_ERROR) });\n      onError?.(error);\n    }\n  }, [verifyOtp, state.code, state.requestId, onSuccess, onError]);\n\n  const back = useCallback(() => {\n    dispatch({ type: 'back_to_identify' });\n  }, []);\n\n  return {\n    ...state,\n    setIdentifier,\n    setCode,\n    sendOtp,\n    verify,\n    back,\n    resend,\n    isSending: state.status === 'sending',\n    isVerifying: state.status === 'verifying',\n    isBusy: state.status !== 'idle',\n  };\n}\n","/**\n * Framework-agnostic state machine for the Sneek passwordless OTP flow.\n *\n * Kept free of React so it can be unit-tested in isolation and reused by other\n * front-end bindings later (Vue/Svelte). The hook in `use-sneek-otp.ts` is a\n * thin wrapper around this reducer.\n */\n\nexport type SneekChannel = 'sms' | 'whatsapp' | 'email';\n\n/** Which screen of the two-step flow is showing. */\nexport type SneekOtpStep = 'identify' | 'verify';\n\n/** Async lifecycle for the in-flight request. */\nexport type SneekOtpStatus = 'idle' | 'sending' | 'verifying';\n\nexport interface SneekOtpState {\n  step: SneekOtpStep;\n  status: SneekOtpStatus;\n  /** The email / mobile / username the user typed. */\n  identifier: string;\n  /** The OTP code the user typed on the verify screen. */\n  code: string;\n  /** Opaque id returned by the partner backend, replayed on verify. */\n  requestId: string;\n  /** Channels the OTP was actually delivered over. */\n  channels: SneekChannel[];\n  /** Seconds until the OTP expires (from the request response). */\n  expiresInSeconds: number;\n  /** User-facing error message, or null. */\n  error: string | null;\n}\n\nexport const initialOtpState: SneekOtpState = {\n  step: 'identify',\n  status: 'idle',\n  identifier: '',\n  code: '',\n  requestId: '',\n  channels: [],\n  expiresInSeconds: 0,\n  error: null,\n};\n\nexport interface RequestOtpResult {\n  requestId: string;\n  channels?: SneekChannel[];\n  expiresInSeconds?: number;\n}\n\nexport type SneekOtpAction =\n  | { type: 'set_identifier'; value: string }\n  | { type: 'set_code'; value: string }\n  | { type: 'request_start' }\n  | { type: 'request_success'; result: RequestOtpResult }\n  | { type: 'request_error'; message: string }\n  | { type: 'verify_start' }\n  | { type: 'verify_error'; message: string }\n  | { type: 'reset' }\n  | { type: 'back_to_identify' };\n\nconst isBusy = (status: SneekOtpStatus): boolean => status !== 'idle';\n\nexport function otpReducer(\n  state: SneekOtpState,\n  action: SneekOtpAction,\n): SneekOtpState {\n  switch (action.type) {\n    case 'set_identifier':\n      return { ...state, identifier: action.value, error: null };\n\n    case 'set_code':\n      return { ...state, code: action.value, error: null };\n\n    case 'request_start':\n      // Guard against double submits while a request is already in flight.\n      if (isBusy(state.status)) return state;\n      return { ...state, status: 'sending', error: null };\n\n    case 'request_success':\n      return {\n        ...state,\n        step: 'verify',\n        status: 'idle',\n        code: '',\n        requestId: action.result.requestId,\n        channels: action.result.channels ?? [],\n        expiresInSeconds: action.result.expiresInSeconds ?? 0,\n        error: null,\n      };\n\n    case 'request_error':\n      return { ...state, status: 'idle', error: action.message };\n\n    case 'verify_start':\n      if (isBusy(state.status)) return state;\n      return { ...state, status: 'verifying', error: null };\n\n    case 'verify_error':\n      return { ...state, status: 'idle', error: action.message };\n\n    case 'back_to_identify':\n      return {\n        ...state,\n        step: 'identify',\n        status: 'idle',\n        code: '',\n        requestId: '',\n        channels: [],\n        expiresInSeconds: 0,\n        error: null,\n      };\n\n    case 'reset':\n      return { ...initialOtpState };\n\n    default:\n      return state;\n  }\n}\n\nconst CHANNEL_LABELS: Record<SneekChannel, string> = {\n  sms: 'SMS',\n  whatsapp: 'WhatsApp',\n  email: 'email',\n};\n\n/** \"SMS, WhatsApp\" — human label for the channels an OTP was sent over. */\nexport function formatChannels(channels: SneekChannel[]): string {\n  return channels.map((c) => CHANNEL_LABELS[c] ?? c).join(', ');\n}\n\n/** Normalize any thrown value into a user-facing message. */\nexport function toMessage(error: unknown, fallback: string): string {\n  if (error instanceof Error && error.message) return error.message;\n  if (typeof error === 'string' && error) return error;\n  return fallback;\n}\n","import { type CSSProperties, type FormEvent, type ReactNode } from 'react';\nimport { formatChannels } from './state';\nimport { useSneekOtp, type SneekOtpHandlers } from './use-sneek-otp';\n\nexport interface SneekOtpLoginProps<TResult = unknown>\n  extends SneekOtpHandlers<TResult> {\n  /** Heading shown above the form. @default 'Sign in' */\n  title?: string;\n  /** Sub-heading. @default 'Passwordless login powered by Sneek' */\n  subtitle?: ReactNode;\n  /** Label for the identifier input. */\n  identifierLabel?: string;\n  /** Placeholder for the identifier input. */\n  identifierPlaceholder?: string;\n  /** Brand colour for the primary button. @default '#56d3b5' */\n  accentColor?: string;\n  /** Optional logo rendered above the title. */\n  logo?: ReactNode;\n  /** Override the outer container style. */\n  style?: CSSProperties;\n  /** Extra className on the outer container. */\n  className?: string;\n}\n\n/**\n * Drop-in, dependency-free passwordless OTP login card. The component never\n * receives a Sneek API key; it calls the partner-supplied handlers, which talk\n * to the partner backend. Use {@link createFetchHandlers} for the common case.\n */\nexport function SneekOtpLogin<TResult = unknown>(\n  props: SneekOtpLoginProps<TResult>,\n): ReactNode {\n  const {\n    title = 'Sign in',\n    subtitle = 'Passwordless login powered by Sneek',\n    identifierLabel = 'Email or mobile number',\n    identifierPlaceholder = 'you@example.com or +9198xxxxxxxx',\n    accentColor = '#56d3b5',\n    logo,\n    style,\n    className,\n    ...handlers\n  } = props;\n\n  const otp = useSneekOtp<TResult>(handlers);\n\n  const onIdentifySubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    void otp.sendOtp();\n  };\n\n  const onVerifySubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    void otp.verify();\n  };\n\n  const inputStyle: CSSProperties = {\n    padding: '12px 14px',\n    border: '1px solid rgba(0,0,0,0.15)',\n    borderRadius: 10,\n    fontSize: '0.95rem',\n    width: '100%',\n    boxSizing: 'border-box',\n    outline: 'none',\n  };\n\n  const buttonStyle: CSSProperties = {\n    marginTop: 4,\n    padding: '12px 14px',\n    border: 'none',\n    borderRadius: 10,\n    background: accentColor,\n    color: '#04231d',\n    fontSize: '1rem',\n    fontWeight: 600,\n    cursor: otp.isBusy ? 'not-allowed' : 'pointer',\n    opacity: otp.isBusy ? 0.6 : 1,\n    width: '100%',\n  };\n\n  const linkStyle: CSSProperties = {\n    border: 'none',\n    background: 'transparent',\n    color: accentColor,\n    cursor: 'pointer',\n    font: 'inherit',\n    fontSize: '0.9rem',\n    padding: 0,\n  };\n\n  const errorStyle: CSSProperties = {\n    background: 'rgba(255,107,94,0.12)',\n    color: '#c0392b',\n    padding: '10px 12px',\n    border: '1px solid rgba(255,107,94,0.25)',\n    borderRadius: 8,\n    fontSize: '0.85rem',\n  };\n\n  return (\n    <div\n      className={className}\n      style={{\n        maxWidth: 400,\n        margin: '0 auto',\n        padding: 32,\n        border: '1px solid rgba(0,0,0,0.08)',\n        borderRadius: 16,\n        fontFamily: 'system-ui, -apple-system, sans-serif',\n        ...style,\n      }}\n    >\n      <div style={{ textAlign: 'center', marginBottom: 24 }}>\n        {logo}\n        <h1 style={{ fontSize: '1.4rem', fontWeight: 700, margin: '8px 0 4px' }}>{title}</h1>\n        <p style={{ fontSize: '0.9rem', opacity: 0.7, margin: 0 }}>{subtitle}</p>\n      </div>\n\n      {otp.step === 'identify' ? (\n        <form onSubmit={onIdentifySubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          {otp.error && <div style={errorStyle}>{otp.error}</div>}\n          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.85rem' }}>\n            {identifierLabel}\n            <input\n              type=\"text\"\n              value={otp.identifier}\n              onChange={(e) => otp.setIdentifier(e.target.value)}\n              placeholder={identifierPlaceholder}\n              autoComplete=\"username\"\n              autoFocus\n              required\n              style={inputStyle}\n            />\n          </label>\n          <button type=\"submit\" disabled={otp.isBusy} style={buttonStyle}>\n            {otp.isSending ? 'Sending code…' : 'Send code'}\n          </button>\n        </form>\n      ) : (\n        <form onSubmit={onVerifySubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          {otp.error && <div style={errorStyle}>{otp.error}</div>}\n          <div\n            style={{\n              background: 'rgba(86,211,181,0.12)',\n              padding: '10px 12px',\n              borderRadius: 8,\n              fontSize: '0.85rem',\n            }}\n          >\n            {otp.channels.length > 0\n              ? `Code sent via ${formatChannels(otp.channels)}.`\n              : 'We sent you a code.'}\n            {otp.expiresInSeconds > 0 &&\n              ` It expires in ${Math.max(1, Math.floor(otp.expiresInSeconds / 60))} min.`}\n          </div>\n          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.85rem' }}>\n            Verification code\n            <input\n              type=\"text\"\n              inputMode=\"numeric\"\n              autoComplete=\"one-time-code\"\n              value={otp.code}\n              onChange={(e) => otp.setCode(e.target.value)}\n              placeholder=\"Enter code\"\n              autoFocus\n              required\n              style={inputStyle}\n            />\n          </label>\n          <button type=\"submit\" disabled={otp.isBusy} style={buttonStyle}>\n            {otp.isVerifying ? 'Verifying…' : 'Verify and sign in'}\n          </button>\n          <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n            <button type=\"button\" onClick={otp.back} disabled={otp.isBusy} style={linkStyle}>\n              Use a different contact\n            </button>\n            <button type=\"button\" onClick={() => void otp.resend()} disabled={otp.isBusy} style={linkStyle}>\n              Resend code\n            </button>\n          </div>\n        </form>\n      )}\n    </div>\n  );\n}\n","import type { RequestOtpResult } from './state';\n\nexport interface FetchHandlerOptions {\n  /**\n   * Partner backend endpoint that sends an OTP. Receives `{ identifier }`,\n   * must return `{ requestId, channels?, expiresInSeconds? }`.\n   * @default '/api/auth/request-otp'\n   */\n  requestUrl?: string;\n  /**\n   * Partner backend endpoint that verifies an OTP. Receives\n   * `{ requestId, code }`, returns whatever your app needs (session, token…).\n   * @default '/api/auth/verify-otp'\n   */\n  verifyUrl?: string;\n  /** Extra headers (e.g. CSRF token) to send on both requests. */\n  headers?: Record<string, string>;\n  /** Forwarded to fetch — set to 'include' if you use cookie sessions. */\n  credentials?: RequestCredentials;\n}\n\nasync function postJson<T>(\n  url: string,\n  body: unknown,\n  options: FetchHandlerOptions,\n): Promise<T> {\n  const response = await fetch(url, {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json', ...(options.headers ?? {}) },\n    credentials: options.credentials,\n    body: JSON.stringify(body),\n  });\n\n  if (!response.ok) {\n    let message = `Request failed (${response.status})`;\n    try {\n      const data = (await response.json()) as { message?: string; error?: string };\n      message = data.message || data.error || message;\n    } catch {\n      // non-JSON error body — keep the status-based message\n    }\n    throw new Error(message);\n  }\n\n  return (await response.json()) as T;\n}\n\n/**\n * Build {@link SneekOtpHandlers} that POST to your own backend endpoints.\n * Those endpoints call the Sneek API server-side with your secret key.\n */\nexport function createFetchHandlers<TResult = unknown>(\n  options: FetchHandlerOptions = {},\n): {\n  requestOtp: (identifier: string) => Promise<RequestOtpResult>;\n  verifyOtp: (input: { requestId: string; code: string }) => Promise<TResult>;\n} {\n  const requestUrl = options.requestUrl ?? '/api/auth/request-otp';\n  const verifyUrl = options.verifyUrl ?? '/api/auth/verify-otp';\n\n  return {\n    requestOtp: (identifier: string) =>\n      postJson<RequestOtpResult>(requestUrl, { identifier }, options),\n    verifyOtp: (input: { requestId: string; code: string }) =>\n      postJson<TResult>(verifyUrl, input, options),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,318 @@
+// src/use-sneek-otp.ts
+import { useCallback, useReducer } from "react";
+
+// src/state.ts
+var initialOtpState = {
+  step: "identify",
+  status: "idle",
+  identifier: "",
+  code: "",
+  requestId: "",
+  channels: [],
+  expiresInSeconds: 0,
+  error: null
+};
+var isBusy = (status) => status !== "idle";
+function otpReducer(state, action) {
+  switch (action.type) {
+    case "set_identifier":
+      return { ...state, identifier: action.value, error: null };
+    case "set_code":
+      return { ...state, code: action.value, error: null };
+    case "request_start":
+      if (isBusy(state.status)) return state;
+      return { ...state, status: "sending", error: null };
+    case "request_success":
+      return {
+        ...state,
+        step: "verify",
+        status: "idle",
+        code: "",
+        requestId: action.result.requestId,
+        channels: action.result.channels ?? [],
+        expiresInSeconds: action.result.expiresInSeconds ?? 0,
+        error: null
+      };
+    case "request_error":
+      return { ...state, status: "idle", error: action.message };
+    case "verify_start":
+      if (isBusy(state.status)) return state;
+      return { ...state, status: "verifying", error: null };
+    case "verify_error":
+      return { ...state, status: "idle", error: action.message };
+    case "back_to_identify":
+      return {
+        ...state,
+        step: "identify",
+        status: "idle",
+        code: "",
+        requestId: "",
+        channels: [],
+        expiresInSeconds: 0,
+        error: null
+      };
+    case "reset":
+      return { ...initialOtpState };
+    default:
+      return state;
+  }
+}
+var CHANNEL_LABELS = {
+  sms: "SMS",
+  whatsapp: "WhatsApp",
+  email: "email"
+};
+function formatChannels(channels) {
+  return channels.map((c) => CHANNEL_LABELS[c] ?? c).join(", ");
+}
+function toMessage(error, fallback) {
+  if (error instanceof Error && error.message) return error.message;
+  if (typeof error === "string" && error) return error;
+  return fallback;
+}
+
+// src/use-sneek-otp.ts
+var DEFAULT_REQUEST_ERROR = "Could not send the code. Please try again.";
+var DEFAULT_VERIFY_ERROR = "That code was not correct. Please try again.";
+function useSneekOtp(handlers) {
+  const [state, dispatch] = useReducer(otpReducer, initialOtpState);
+  const { requestOtp, verifyOtp, onSuccess, onError } = handlers;
+  const setIdentifier = useCallback((value) => {
+    dispatch({ type: "set_identifier", value });
+  }, []);
+  const setCode = useCallback((value) => {
+    dispatch({ type: "set_code", value });
+  }, []);
+  const runRequest = useCallback(
+    async (identifier) => {
+      const trimmed = identifier.trim();
+      if (!trimmed) {
+        dispatch({ type: "request_error", message: "Enter your email or mobile number." });
+        return;
+      }
+      dispatch({ type: "request_start" });
+      try {
+        const result = await requestOtp(trimmed);
+        dispatch({ type: "request_success", result });
+      } catch (error) {
+        dispatch({ type: "request_error", message: toMessage(error, DEFAULT_REQUEST_ERROR) });
+        onError?.(error);
+      }
+    },
+    [requestOtp, onError]
+  );
+  const sendOtp = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);
+  const resend = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);
+  const verify = useCallback(async () => {
+    const code = state.code.trim();
+    if (!code) {
+      dispatch({ type: "verify_error", message: "Enter the code you received." });
+      return;
+    }
+    dispatch({ type: "verify_start" });
+    try {
+      const result = await verifyOtp({ requestId: state.requestId, code });
+      onSuccess?.(result);
+    } catch (error) {
+      dispatch({ type: "verify_error", message: toMessage(error, DEFAULT_VERIFY_ERROR) });
+      onError?.(error);
+    }
+  }, [verifyOtp, state.code, state.requestId, onSuccess, onError]);
+  const back = useCallback(() => {
+    dispatch({ type: "back_to_identify" });
+  }, []);
+  return {
+    ...state,
+    setIdentifier,
+    setCode,
+    sendOtp,
+    verify,
+    back,
+    resend,
+    isSending: state.status === "sending",
+    isVerifying: state.status === "verifying",
+    isBusy: state.status !== "idle"
+  };
+}
+
+// src/component.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SneekOtpLogin(props) {
+  const {
+    title = "Sign in",
+    subtitle = "Passwordless login powered by Sneek",
+    identifierLabel = "Email or mobile number",
+    identifierPlaceholder = "you@example.com or +9198xxxxxxxx",
+    accentColor = "#56d3b5",
+    logo,
+    style,
+    className,
+    ...handlers
+  } = props;
+  const otp = useSneekOtp(handlers);
+  const onIdentifySubmit = (event) => {
+    event.preventDefault();
+    void otp.sendOtp();
+  };
+  const onVerifySubmit = (event) => {
+    event.preventDefault();
+    void otp.verify();
+  };
+  const inputStyle = {
+    padding: "12px 14px",
+    border: "1px solid rgba(0,0,0,0.15)",
+    borderRadius: 10,
+    fontSize: "0.95rem",
+    width: "100%",
+    boxSizing: "border-box",
+    outline: "none"
+  };
+  const buttonStyle = {
+    marginTop: 4,
+    padding: "12px 14px",
+    border: "none",
+    borderRadius: 10,
+    background: accentColor,
+    color: "#04231d",
+    fontSize: "1rem",
+    fontWeight: 600,
+    cursor: otp.isBusy ? "not-allowed" : "pointer",
+    opacity: otp.isBusy ? 0.6 : 1,
+    width: "100%"
+  };
+  const linkStyle = {
+    border: "none",
+    background: "transparent",
+    color: accentColor,
+    cursor: "pointer",
+    font: "inherit",
+    fontSize: "0.9rem",
+    padding: 0
+  };
+  const errorStyle = {
+    background: "rgba(255,107,94,0.12)",
+    color: "#c0392b",
+    padding: "10px 12px",
+    border: "1px solid rgba(255,107,94,0.25)",
+    borderRadius: 8,
+    fontSize: "0.85rem"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        maxWidth: 400,
+        margin: "0 auto",
+        padding: 32,
+        border: "1px solid rgba(0,0,0,0.08)",
+        borderRadius: 16,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: 24 }, children: [
+          logo,
+          /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.4rem", fontWeight: 700, margin: "8px 0 4px" }, children: title }),
+          /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9rem", opacity: 0.7, margin: 0 }, children: subtitle })
+        ] }),
+        otp.step === "identify" ? /* @__PURE__ */ jsxs("form", { onSubmit: onIdentifySubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          otp.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: otp.error }),
+          /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }, children: [
+            identifierLabel,
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: otp.identifier,
+                onChange: (e) => otp.setIdentifier(e.target.value),
+                placeholder: identifierPlaceholder,
+                autoComplete: "username",
+                autoFocus: true,
+                required: true,
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "submit", disabled: otp.isBusy, style: buttonStyle, children: otp.isSending ? "Sending code\u2026" : "Send code" })
+        ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: onVerifySubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+          otp.error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: otp.error }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: "rgba(86,211,181,0.12)",
+                padding: "10px 12px",
+                borderRadius: 8,
+                fontSize: "0.85rem"
+              },
+              children: [
+                otp.channels.length > 0 ? `Code sent via ${formatChannels(otp.channels)}.` : "We sent you a code.",
+                otp.expiresInSeconds > 0 && ` It expires in ${Math.max(1, Math.floor(otp.expiresInSeconds / 60))} min.`
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: "0.85rem" }, children: [
+            "Verification code",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "one-time-code",
+                value: otp.code,
+                onChange: (e) => otp.setCode(e.target.value),
+                placeholder: "Enter code",
+                autoFocus: true,
+                required: true,
+                style: inputStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "submit", disabled: otp.isBusy, style: buttonStyle, children: otp.isVerifying ? "Verifying\u2026" : "Verify and sign in" }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: otp.back, disabled: otp.isBusy, style: linkStyle, children: "Use a different contact" }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void otp.resend(), disabled: otp.isBusy, style: linkStyle, children: "Resend code" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/fetch-handlers.ts
+async function postJson(url, body, options) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...options.headers ?? {} },
+    credentials: options.credentials,
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    let message = `Request failed (${response.status})`;
+    try {
+      const data = await response.json();
+      message = data.message || data.error || message;
+    } catch {
+    }
+    throw new Error(message);
+  }
+  return await response.json();
+}
+function createFetchHandlers(options = {}) {
+  const requestUrl = options.requestUrl ?? "/api/auth/request-otp";
+  const verifyUrl = options.verifyUrl ?? "/api/auth/verify-otp";
+  return {
+    requestOtp: (identifier) => postJson(requestUrl, { identifier }, options),
+    verifyOtp: (input) => postJson(verifyUrl, input, options)
+  };
+}
+export {
+  SneekOtpLogin,
+  createFetchHandlers,
+  formatChannels,
+  initialOtpState,
+  otpReducer,
+  useSneekOtp
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-sneek-otp.ts","../src/state.ts","../src/component.tsx","../src/fetch-handlers.ts"],"sourcesContent":["import { useCallback, useReducer } from 'react';\nimport {\n  initialOtpState,\n  otpReducer,\n  toMessage,\n  type RequestOtpResult,\n  type SneekOtpState,\n} from './state';\n\n/**\n * Partner-supplied transport. These call the *partner's own backend*, which in\n * turn talks to the Sneek API with the secret server-side key. The browser\n * never sees a Sneek API key — that is the whole security model of this package.\n */\nexport interface SneekOtpHandlers<TResult = unknown> {\n  /** Ask the partner backend to send an OTP to `identifier`. */\n  requestOtp: (identifier: string) => Promise<RequestOtpResult>;\n  /** Verify the code with the partner backend; resolve with the auth result. */\n  verifyOtp: (input: { requestId: string; code: string }) => Promise<TResult>;\n  /** Called after a successful verification with the partner's result. */\n  onSuccess?: (result: TResult) => void;\n  /** Called on any error (request or verify). */\n  onError?: (error: unknown) => void;\n}\n\nexport interface UseSneekOtp extends SneekOtpState {\n  setIdentifier: (value: string) => void;\n  setCode: (value: string) => void;\n  /** Submit the identify step — triggers `requestOtp`. */\n  sendOtp: () => Promise<void>;\n  /** Submit the verify step — triggers `verifyOtp`. */\n  verify: () => Promise<void>;\n  /** Go back to the identify screen (e.g. \"use a different email\"). */\n  back: () => void;\n  /** Re-send the OTP to the same identifier. */\n  resend: () => Promise<void>;\n  /** Convenience booleans. */\n  isSending: boolean;\n  isVerifying: boolean;\n  isBusy: boolean;\n}\n\nconst DEFAULT_REQUEST_ERROR = 'Could not send the code. Please try again.';\nconst DEFAULT_VERIFY_ERROR = 'That code was not correct. Please try again.';\n\n/**\n * Headless hook implementing the passwordless OTP login flow. Bring your own\n * markup, or use the {@link SneekOtpLogin} component for a styled default.\n */\nexport function useSneekOtp<TResult = unknown>(\n  handlers: SneekOtpHandlers<TResult>,\n): UseSneekOtp {\n  const [state, dispatch] = useReducer(otpReducer, initialOtpState);\n\n  const { requestOtp, verifyOtp, onSuccess, onError } = handlers;\n\n  const setIdentifier = useCallback((value: string) => {\n    dispatch({ type: 'set_identifier', value });\n  }, []);\n\n  const setCode = useCallback((value: string) => {\n    dispatch({ type: 'set_code', value });\n  }, []);\n\n  const runRequest = useCallback(\n    async (identifier: string) => {\n      const trimmed = identifier.trim();\n      if (!trimmed) {\n        dispatch({ type: 'request_error', message: 'Enter your email or mobile number.' });\n        return;\n      }\n      dispatch({ type: 'request_start' });\n      try {\n        const result = await requestOtp(trimmed);\n        dispatch({ type: 'request_success', result });\n      } catch (error) {\n        dispatch({ type: 'request_error', message: toMessage(error, DEFAULT_REQUEST_ERROR) });\n        onError?.(error);\n      }\n    },\n    [requestOtp, onError],\n  );\n\n  const sendOtp = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);\n\n  const resend = useCallback(() => runRequest(state.identifier), [runRequest, state.identifier]);\n\n  const verify = useCallback(async () => {\n    const code = state.code.trim();\n    if (!code) {\n      dispatch({ type: 'verify_error', message: 'Enter the code you received.' });\n      return;\n    }\n    dispatch({ type: 'verify_start' });\n    try {\n      const result = await verifyOtp({ requestId: state.requestId, code });\n      onSuccess?.(result);\n    } catch (error) {\n      dispatch({ type: 'verify_error', message: toMessage(error, DEFAULT_VERIFY_ERROR) });\n      onError?.(error);\n    }\n  }, [verifyOtp, state.code, state.requestId, onSuccess, onError]);\n\n  const back = useCallback(() => {\n    dispatch({ type: 'back_to_identify' });\n  }, []);\n\n  return {\n    ...state,\n    setIdentifier,\n    setCode,\n    sendOtp,\n    verify,\n    back,\n    resend,\n    isSending: state.status === 'sending',\n    isVerifying: state.status === 'verifying',\n    isBusy: state.status !== 'idle',\n  };\n}\n","/**\n * Framework-agnostic state machine for the Sneek passwordless OTP flow.\n *\n * Kept free of React so it can be unit-tested in isolation and reused by other\n * front-end bindings later (Vue/Svelte). The hook in `use-sneek-otp.ts` is a\n * thin wrapper around this reducer.\n */\n\nexport type SneekChannel = 'sms' | 'whatsapp' | 'email';\n\n/** Which screen of the two-step flow is showing. */\nexport type SneekOtpStep = 'identify' | 'verify';\n\n/** Async lifecycle for the in-flight request. */\nexport type SneekOtpStatus = 'idle' | 'sending' | 'verifying';\n\nexport interface SneekOtpState {\n  step: SneekOtpStep;\n  status: SneekOtpStatus;\n  /** The email / mobile / username the user typed. */\n  identifier: string;\n  /** The OTP code the user typed on the verify screen. */\n  code: string;\n  /** Opaque id returned by the partner backend, replayed on verify. */\n  requestId: string;\n  /** Channels the OTP was actually delivered over. */\n  channels: SneekChannel[];\n  /** Seconds until the OTP expires (from the request response). */\n  expiresInSeconds: number;\n  /** User-facing error message, or null. */\n  error: string | null;\n}\n\nexport const initialOtpState: SneekOtpState = {\n  step: 'identify',\n  status: 'idle',\n  identifier: '',\n  code: '',\n  requestId: '',\n  channels: [],\n  expiresInSeconds: 0,\n  error: null,\n};\n\nexport interface RequestOtpResult {\n  requestId: string;\n  channels?: SneekChannel[];\n  expiresInSeconds?: number;\n}\n\nexport type SneekOtpAction =\n  | { type: 'set_identifier'; value: string }\n  | { type: 'set_code'; value: string }\n  | { type: 'request_start' }\n  | { type: 'request_success'; result: RequestOtpResult }\n  | { type: 'request_error'; message: string }\n  | { type: 'verify_start' }\n  | { type: 'verify_error'; message: string }\n  | { type: 'reset' }\n  | { type: 'back_to_identify' };\n\nconst isBusy = (status: SneekOtpStatus): boolean => status !== 'idle';\n\nexport function otpReducer(\n  state: SneekOtpState,\n  action: SneekOtpAction,\n): SneekOtpState {\n  switch (action.type) {\n    case 'set_identifier':\n      return { ...state, identifier: action.value, error: null };\n\n    case 'set_code':\n      return { ...state, code: action.value, error: null };\n\n    case 'request_start':\n      // Guard against double submits while a request is already in flight.\n      if (isBusy(state.status)) return state;\n      return { ...state, status: 'sending', error: null };\n\n    case 'request_success':\n      return {\n        ...state,\n        step: 'verify',\n        status: 'idle',\n        code: '',\n        requestId: action.result.requestId,\n        channels: action.result.channels ?? [],\n        expiresInSeconds: action.result.expiresInSeconds ?? 0,\n        error: null,\n      };\n\n    case 'request_error':\n      return { ...state, status: 'idle', error: action.message };\n\n    case 'verify_start':\n      if (isBusy(state.status)) return state;\n      return { ...state, status: 'verifying', error: null };\n\n    case 'verify_error':\n      return { ...state, status: 'idle', error: action.message };\n\n    case 'back_to_identify':\n      return {\n        ...state,\n        step: 'identify',\n        status: 'idle',\n        code: '',\n        requestId: '',\n        channels: [],\n        expiresInSeconds: 0,\n        error: null,\n      };\n\n    case 'reset':\n      return { ...initialOtpState };\n\n    default:\n      return state;\n  }\n}\n\nconst CHANNEL_LABELS: Record<SneekChannel, string> = {\n  sms: 'SMS',\n  whatsapp: 'WhatsApp',\n  email: 'email',\n};\n\n/** \"SMS, WhatsApp\" — human label for the channels an OTP was sent over. */\nexport function formatChannels(channels: SneekChannel[]): string {\n  return channels.map((c) => CHANNEL_LABELS[c] ?? c).join(', ');\n}\n\n/** Normalize any thrown value into a user-facing message. */\nexport function toMessage(error: unknown, fallback: string): string {\n  if (error instanceof Error && error.message) return error.message;\n  if (typeof error === 'string' && error) return error;\n  return fallback;\n}\n","import { type CSSProperties, type FormEvent, type ReactNode } from 'react';\nimport { formatChannels } from './state';\nimport { useSneekOtp, type SneekOtpHandlers } from './use-sneek-otp';\n\nexport interface SneekOtpLoginProps<TResult = unknown>\n  extends SneekOtpHandlers<TResult> {\n  /** Heading shown above the form. @default 'Sign in' */\n  title?: string;\n  /** Sub-heading. @default 'Passwordless login powered by Sneek' */\n  subtitle?: ReactNode;\n  /** Label for the identifier input. */\n  identifierLabel?: string;\n  /** Placeholder for the identifier input. */\n  identifierPlaceholder?: string;\n  /** Brand colour for the primary button. @default '#56d3b5' */\n  accentColor?: string;\n  /** Optional logo rendered above the title. */\n  logo?: ReactNode;\n  /** Override the outer container style. */\n  style?: CSSProperties;\n  /** Extra className on the outer container. */\n  className?: string;\n}\n\n/**\n * Drop-in, dependency-free passwordless OTP login card. The component never\n * receives a Sneek API key; it calls the partner-supplied handlers, which talk\n * to the partner backend. Use {@link createFetchHandlers} for the common case.\n */\nexport function SneekOtpLogin<TResult = unknown>(\n  props: SneekOtpLoginProps<TResult>,\n): ReactNode {\n  const {\n    title = 'Sign in',\n    subtitle = 'Passwordless login powered by Sneek',\n    identifierLabel = 'Email or mobile number',\n    identifierPlaceholder = 'you@example.com or +9198xxxxxxxx',\n    accentColor = '#56d3b5',\n    logo,\n    style,\n    className,\n    ...handlers\n  } = props;\n\n  const otp = useSneekOtp<TResult>(handlers);\n\n  const onIdentifySubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    void otp.sendOtp();\n  };\n\n  const onVerifySubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    void otp.verify();\n  };\n\n  const inputStyle: CSSProperties = {\n    padding: '12px 14px',\n    border: '1px solid rgba(0,0,0,0.15)',\n    borderRadius: 10,\n    fontSize: '0.95rem',\n    width: '100%',\n    boxSizing: 'border-box',\n    outline: 'none',\n  };\n\n  const buttonStyle: CSSProperties = {\n    marginTop: 4,\n    padding: '12px 14px',\n    border: 'none',\n    borderRadius: 10,\n    background: accentColor,\n    color: '#04231d',\n    fontSize: '1rem',\n    fontWeight: 600,\n    cursor: otp.isBusy ? 'not-allowed' : 'pointer',\n    opacity: otp.isBusy ? 0.6 : 1,\n    width: '100%',\n  };\n\n  const linkStyle: CSSProperties = {\n    border: 'none',\n    background: 'transparent',\n    color: accentColor,\n    cursor: 'pointer',\n    font: 'inherit',\n    fontSize: '0.9rem',\n    padding: 0,\n  };\n\n  const errorStyle: CSSProperties = {\n    background: 'rgba(255,107,94,0.12)',\n    color: '#c0392b',\n    padding: '10px 12px',\n    border: '1px solid rgba(255,107,94,0.25)',\n    borderRadius: 8,\n    fontSize: '0.85rem',\n  };\n\n  return (\n    <div\n      className={className}\n      style={{\n        maxWidth: 400,\n        margin: '0 auto',\n        padding: 32,\n        border: '1px solid rgba(0,0,0,0.08)',\n        borderRadius: 16,\n        fontFamily: 'system-ui, -apple-system, sans-serif',\n        ...style,\n      }}\n    >\n      <div style={{ textAlign: 'center', marginBottom: 24 }}>\n        {logo}\n        <h1 style={{ fontSize: '1.4rem', fontWeight: 700, margin: '8px 0 4px' }}>{title}</h1>\n        <p style={{ fontSize: '0.9rem', opacity: 0.7, margin: 0 }}>{subtitle}</p>\n      </div>\n\n      {otp.step === 'identify' ? (\n        <form onSubmit={onIdentifySubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          {otp.error && <div style={errorStyle}>{otp.error}</div>}\n          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.85rem' }}>\n            {identifierLabel}\n            <input\n              type=\"text\"\n              value={otp.identifier}\n              onChange={(e) => otp.setIdentifier(e.target.value)}\n              placeholder={identifierPlaceholder}\n              autoComplete=\"username\"\n              autoFocus\n              required\n              style={inputStyle}\n            />\n          </label>\n          <button type=\"submit\" disabled={otp.isBusy} style={buttonStyle}>\n            {otp.isSending ? 'Sending code…' : 'Send code'}\n          </button>\n        </form>\n      ) : (\n        <form onSubmit={onVerifySubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          {otp.error && <div style={errorStyle}>{otp.error}</div>}\n          <div\n            style={{\n              background: 'rgba(86,211,181,0.12)',\n              padding: '10px 12px',\n              borderRadius: 8,\n              fontSize: '0.85rem',\n            }}\n          >\n            {otp.channels.length > 0\n              ? `Code sent via ${formatChannels(otp.channels)}.`\n              : 'We sent you a code.'}\n            {otp.expiresInSeconds > 0 &&\n              ` It expires in ${Math.max(1, Math.floor(otp.expiresInSeconds / 60))} min.`}\n          </div>\n          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.85rem' }}>\n            Verification code\n            <input\n              type=\"text\"\n              inputMode=\"numeric\"\n              autoComplete=\"one-time-code\"\n              value={otp.code}\n              onChange={(e) => otp.setCode(e.target.value)}\n              placeholder=\"Enter code\"\n              autoFocus\n              required\n              style={inputStyle}\n            />\n          </label>\n          <button type=\"submit\" disabled={otp.isBusy} style={buttonStyle}>\n            {otp.isVerifying ? 'Verifying…' : 'Verify and sign in'}\n          </button>\n          <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n            <button type=\"button\" onClick={otp.back} disabled={otp.isBusy} style={linkStyle}>\n              Use a different contact\n            </button>\n            <button type=\"button\" onClick={() => void otp.resend()} disabled={otp.isBusy} style={linkStyle}>\n              Resend code\n            </button>\n          </div>\n        </form>\n      )}\n    </div>\n  );\n}\n","import type { RequestOtpResult } from './state';\n\nexport interface FetchHandlerOptions {\n  /**\n   * Partner backend endpoint that sends an OTP. Receives `{ identifier }`,\n   * must return `{ requestId, channels?, expiresInSeconds? }`.\n   * @default '/api/auth/request-otp'\n   */\n  requestUrl?: string;\n  /**\n   * Partner backend endpoint that verifies an OTP. Receives\n   * `{ requestId, code }`, returns whatever your app needs (session, token…).\n   * @default '/api/auth/verify-otp'\n   */\n  verifyUrl?: string;\n  /** Extra headers (e.g. CSRF token) to send on both requests. */\n  headers?: Record<string, string>;\n  /** Forwarded to fetch — set to 'include' if you use cookie sessions. */\n  credentials?: RequestCredentials;\n}\n\nasync function postJson<T>(\n  url: string,\n  body: unknown,\n  options: FetchHandlerOptions,\n): Promise<T> {\n  const response = await fetch(url, {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json', ...(options.headers ?? {}) },\n    credentials: options.credentials,\n    body: JSON.stringify(body),\n  });\n\n  if (!response.ok) {\n    let message = `Request failed (${response.status})`;\n    try {\n      const data = (await response.json()) as { message?: string; error?: string };\n      message = data.message || data.error || message;\n    } catch {\n      // non-JSON error body — keep the status-based message\n    }\n    throw new Error(message);\n  }\n\n  return (await response.json()) as T;\n}\n\n/**\n * Build {@link SneekOtpHandlers} that POST to your own backend endpoints.\n * Those endpoints call the Sneek API server-side with your secret key.\n */\nexport function createFetchHandlers<TResult = unknown>(\n  options: FetchHandlerOptions = {},\n): {\n  requestOtp: (identifier: string) => Promise<RequestOtpResult>;\n  verifyOtp: (input: { requestId: string; code: string }) => Promise<TResult>;\n} {\n  const requestUrl = options.requestUrl ?? '/api/auth/request-otp';\n  const verifyUrl = options.verifyUrl ?? '/api/auth/verify-otp';\n\n  return {\n    requestOtp: (identifier: string) =>\n      postJson<RequestOtpResult>(requestUrl, { identifier }, options),\n    verifyOtp: (input: { requestId: string; code: string }) =>\n      postJson<TResult>(verifyUrl, input, options),\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,56 @@
+{
+    "name": "sneekui",
+    "version": "0.1.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Drop-in passwordless OTP login UI for React, powered by Sneek",
+    "homepage": "https://sneek.in/docs",
+    "bugs": {
+        "url": "https://sneek.in/docs"
+    },
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "sideEffects": false,
+    "scripts": {
+        "build": "tsup",
+        "type-check": "tsc --noEmit",
+        "test": "node --test --import tsx test/*.test.ts"
+    },
+    "keywords": [
+        "sneek",
+        "otp",
+        "passwordless",
+        "react",
+        "authentication",
+        "login",
+        "2fa"
+    ],
+    "author": "Abblor Tech Pvt Ltd <abblorltd@gmail.com> (https://sneek.in)",
+    "license": "UNLICENSED",
+    "peerDependencies": {
+        "react": ">=17.0.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.11.0",
+        "@types/react": "^18.2.0",
+        "react": "^18.2.0",
+        "tsup": "^8.0.0",
+        "tsx": "^4.7.0",
+        "typescript": "^5.3.3"
+    },
+    "engines": {
+        "node": ">=18"
+    }
+}