@adonis-agora/authkit-react 0.14.0 → 0.15.0

package/build/index.d.ts

@@ -29,6 +29,10 @@ export { jsonRequest, useResource } from "./src/hooks/use_resource.js";
 export type { ResourceState } from "./src/hooks/use_resource.js";
 export { usePasskeyAutofill } from "./src/hooks/use_passkey_autofill.js";
 export type { UsePasskeyAutofillOptions } from "./src/hooks/use_passkey_autofill.js";
+export { usePasskeyLogin } from "./src/hooks/use_passkey_login.js";
+export type { UsePasskeyLoginOptions, UsePasskeyLoginResult, } from "./src/hooks/use_passkey_login.js";
+export { authenticatePasskey, submitPasskeyVerification, loadStartAuthentication, } from "./src/passkey/authenticate.js";
+export type { AuthenticatePasskeyOptions, SubmitPasskeyVerificationOptions, PasskeyCeremonyDeps, StartAuthenticationFn, } from "./src/passkey/authenticate.js";
 export { usePasswordStrength, heuristicScorer, } from "./src/hooks/use_password_strength.js";
 export type { PasswordStrengthScore, PasswordStrengthResult, PasswordScorer, UsePasswordStrengthOptions, } from "./src/hooks/use_password_strength.js";
 export { deriveInitials, currentUrl } from "./src/utils.js";
@@ -52,6 +56,8 @@ export { AuthorizedApps } from "./src/components/authorized_apps.js";
 export type { AuthorizedAppsProps } from "./src/components/authorized_apps.js";
 export { PasswordStrengthMeter } from "./src/components/password_strength_meter.js";
 export type { PasswordStrengthMeterProps } from "./src/components/password_strength_meter.js";
+export { PasskeyButton } from "./src/components/passkey_button.js";
+export type { PasskeyButtonProps } from "./src/components/passkey_button.js";
 export { OrganizationSwitcher } from "./src/components/organization_switcher.js";
 export type { OrganizationSwitcherProps } from "./src/components/organization_switcher.js";
 export { OrganizationProfile } from "./src/components/organization_profile.js";

package/build/index.js

@@ -14,6 +14,8 @@ export { useSwitchOrganization } from "./src/hooks/use_switch_organization.js";
 export { useOrgInvitations } from "./src/hooks/use_org_invitations.js";
 export { jsonRequest, useResource } from "./src/hooks/use_resource.js";
 export { usePasskeyAutofill } from "./src/hooks/use_passkey_autofill.js";
+export { usePasskeyLogin } from "./src/hooks/use_passkey_login.js";
+export { authenticatePasskey, submitPasskeyVerification, loadStartAuthentication, } from "./src/passkey/authenticate.js";
 export { usePasswordStrength, heuristicScorer, } from "./src/hooks/use_password_strength.js";
 export { deriveInitials, currentUrl } from "./src/utils.js";
 export { Authenticated, Guest } from "./src/components/authenticated.js";
@@ -26,6 +28,7 @@ export { UserButton } from "./src/components/user_button.js";
 export { UserProfile } from "./src/components/user_profile.js";
 export { AuthorizedApps } from "./src/components/authorized_apps.js";
 export { PasswordStrengthMeter } from "./src/components/password_strength_meter.js";
+export { PasskeyButton } from "./src/components/passkey_button.js";
 export { OrganizationSwitcher } from "./src/components/organization_switcher.js";
 export { OrganizationProfile } from "./src/components/organization_profile.js";
 export { KeyRotation } from "./src/components/key_rotation.js";

package/build/src/components/passkey_button.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface PasskeyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    optionsUrl: string;
+    verifyUrl: string;
+    csrfToken?: string;
+    children?: ReactNode;
+    errorContent?: ReactNode;
+}
+export declare function PasskeyButton({ optionsUrl, verifyUrl, csrfToken, children, errorContent, className, ...rest }: PasskeyButtonProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/build/src/components/passkey_button.js

@@ -0,0 +1,24 @@
+import { createElement, } from "react";
+import { usePasskeyLogin } from "../hooks/use_passkey_login.js";
+const DEFAULT_ERROR = "Não foi possível autenticar com a passkey. Tente novamente.";
+export function PasskeyButton({ optionsUrl, verifyUrl, csrfToken, children = "Entrar com passkey", errorContent, className, ...rest }) {
+    const { authenticate, busy, failed } = usePasskeyLogin({
+        optionsUrl,
+        verifyUrl,
+        csrfToken,
+    });
+    const button = createElement("button", {
+        type: "button",
+        className: ["authkit-button", "authkit-button--ghost", className]
+            .filter(Boolean)
+            .join(" "),
+        onClick: () => {
+            void authenticate();
+        },
+        disabled: busy,
+        ...rest,
+    }, children);
+    if (!failed || errorContent === null)
+        return button;
+    return createElement("div", { className: "authkit-passkey" }, button, createElement("p", { className: "authkit-passkey__error" }, errorContent ?? DEFAULT_ERROR));
+}

package/build/src/components/sign_in_button.d.ts

@@ -13,6 +13,7 @@ export declare function SignInButton({ children, returnTo, showWhenAuthenticated
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
+    hidden?: boolean | undefined | undefined;
     resource?: string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -33,7 +34,6 @@ export declare function SignInButton({ children, returnTo, showWhenAuthenticated
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;

package/build/src/components/sign_out_button.d.ts

@@ -12,6 +12,7 @@ export declare function SignOutButton({ children, returnTo, className, ...rest }
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
+    hidden?: boolean | undefined | undefined;
     resource?: string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -32,7 +33,6 @@ export declare function SignOutButton({ children, returnTo, className, ...rest }
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;

package/build/src/hooks/use_passkey_autofill.js

@@ -1,19 +1,12 @@
-var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
-    if (typeof path === "string" && /^\.\.?\//.test(path)) {
-        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
-            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
-        });
-    }
-    return path;
-};
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
+import { loadStartAuthentication, } from "../passkey/authenticate.js";
 export function usePasskeyAutofill(options) {
-    const { optionsUrl, verifyUrl, onSuccess, csrfToken, enabled = true } = options;
+    const { optionsUrl, verifyUrl, onSuccess, csrfToken, enabled = true, } = options;
     const abortRef = useRef(null);
     useEffect(() => {
         if (!enabled)
             return;
-        if (typeof window === 'undefined' || typeof navigator === 'undefined')
+        if (typeof window === "undefined" || typeof navigator === "undefined")
             return;
         if (!window.PublicKeyCredential)
             return;
@@ -22,32 +15,28 @@ export function usePasskeyAutofill(options) {
         abortRef.current = ac;
         const run = async () => {
             try {
-                const supported = typeof PublicKeyCredential.isConditionalMediationAvailable === 'function'
+                const supported = typeof PublicKeyCredential
+                    .isConditionalMediationAvailable === "function"
                     ? await PublicKeyCredential.isConditionalMediationAvailable()
                     : false;
                 if (!supported || cancelled)
                     return;
                 let startAuthentication;
                 try {
-                    const mod = await import(__rewriteRelativeImportExtension('@simplewebauthn/browser'));
-                    startAuthentication = mod.startAuthentication;
+                    startAuthentication = await loadStartAuthentication();
                 }
                 catch {
-                    try {
-                        const mod = await import(__rewriteRelativeImportExtension('https://cdn.jsdelivr.net/npm/@simplewebauthn/browser@13/dist/bundle/index.js'));
-                        startAuthentication = mod.startAuthentication;
-                    }
-                    catch {
-                        return;
-                    }
+                    return;
                 }
-                if (!startAuthentication || cancelled)
+                if (cancelled)
                     return;
-                const headers = { 'content-type': 'application/json' };
+                const headers = {
+                    "content-type": "application/json",
+                };
                 if (csrfToken)
-                    headers['x-csrf-token'] = csrfToken;
+                    headers["x-csrf-token"] = csrfToken;
                 const optRes = await fetch(optionsUrl, {
-                    method: 'POST',
+                    method: "POST",
                     headers,
                     body: JSON.stringify({}),
                     signal: ac.signal,
@@ -58,7 +47,11 @@ export function usePasskeyAutofill(options) {
                 delete optionsJSON._discoverable;
                 if (cancelled)
                     return;
-                const assertion = await startAuthentication({ optionsJSON, useBrowserAutofill: true, verifyBrowserAutofillInput: true }, ac.signal);
+                const assertion = await startAuthentication({
+                    optionsJSON,
+                    useBrowserAutofill: true,
+                    verifyBrowserAutofillInput: true,
+                }, ac.signal);
                 if (cancelled)
                     return;
                 onSuccess(JSON.stringify(assertion));

package/build/src/hooks/use_passkey_login.d.ts

@@ -0,0 +1,12 @@
+export interface UsePasskeyLoginOptions {
+    optionsUrl: string;
+    verifyUrl: string;
+    csrfToken?: string;
+    onSuccess?: (assertion: string) => void;
+}
+export interface UsePasskeyLoginResult {
+    authenticate: () => Promise<void>;
+    busy: boolean;
+    failed: boolean;
+}
+export declare function usePasskeyLogin(options: UsePasskeyLoginOptions): UsePasskeyLoginResult;

package/build/src/hooks/use_passkey_login.js

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+import { authenticatePasskey, submitPasskeyVerification, } from "../passkey/authenticate.js";
+export function usePasskeyLogin(options) {
+    const { optionsUrl, verifyUrl, csrfToken, onSuccess } = options;
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const authenticate = useCallback(async () => {
+        setFailed(false);
+        setBusy(true);
+        try {
+            const assertion = await authenticatePasskey({ optionsUrl, csrfToken });
+            if (onSuccess) {
+                onSuccess(assertion);
+                setBusy(false);
+                return;
+            }
+            submitPasskeyVerification({ verifyUrl, assertion, csrfToken });
+        }
+        catch {
+            setFailed(true);
+            setBusy(false);
+        }
+    }, [optionsUrl, verifyUrl, csrfToken, onSuccess]);
+    return { authenticate, busy, failed };
+}

package/build/src/passkey/authenticate.d.ts

@@ -0,0 +1,22 @@
+export type StartAuthenticationFn = (opts: {
+    optionsJSON: unknown;
+    useBrowserAutofill?: boolean;
+    verifyBrowserAutofillInput?: boolean;
+}, signal?: AbortSignal) => Promise<unknown>;
+export declare function loadStartAuthentication(): Promise<StartAuthenticationFn>;
+export interface AuthenticatePasskeyOptions {
+    optionsUrl: string;
+    csrfToken?: string;
+    signal?: AbortSignal;
+}
+export interface PasskeyCeremonyDeps {
+    fetch?: typeof globalThis.fetch;
+    loadStartAuthentication?: () => Promise<StartAuthenticationFn>;
+}
+export declare function authenticatePasskey(options: AuthenticatePasskeyOptions, deps?: PasskeyCeremonyDeps): Promise<string>;
+export interface SubmitPasskeyVerificationOptions {
+    verifyUrl: string;
+    assertion: string;
+    csrfToken?: string;
+}
+export declare function submitPasskeyVerification(options: SubmitPasskeyVerificationOptions): void;

package/build/src/passkey/authenticate.js

@@ -0,0 +1,63 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+const CDN_URL = "https://cdn.jsdelivr.net/npm/@simplewebauthn/browser@13/dist/bundle/index.js";
+export async function loadStartAuthentication() {
+    try {
+        const mod = await import(__rewriteRelativeImportExtension("@simplewebauthn/browser"));
+        return mod.startAuthentication;
+    }
+    catch {
+        const mod = await import(__rewriteRelativeImportExtension(CDN_URL));
+        return mod.startAuthentication;
+    }
+}
+export async function authenticatePasskey(options, deps = {}) {
+    const { optionsUrl, csrfToken, signal } = options;
+    const doFetch = deps.fetch ?? globalThis.fetch;
+    const loadFn = deps.loadStartAuthentication ?? loadStartAuthentication;
+    const headers = {
+        "content-type": "application/json",
+    };
+    if (csrfToken)
+        headers["x-csrf-token"] = csrfToken;
+    const res = await doFetch(optionsUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({}),
+        signal,
+    });
+    if (!res.ok) {
+        throw new Error(`passkey options request failed: ${res.status}`);
+    }
+    const optionsJSON = await res.json();
+    const startAuthentication = await loadFn();
+    const assertion = await startAuthentication({ optionsJSON }, signal);
+    return JSON.stringify(assertion);
+}
+export function submitPasskeyVerification(options) {
+    const { verifyUrl, assertion, csrfToken } = options;
+    if (typeof document === "undefined")
+        return;
+    const form = document.createElement("form");
+    form.method = "POST";
+    form.action = verifyUrl;
+    form.hidden = true;
+    if (csrfToken)
+        form.appendChild(hiddenInput("_csrf", csrfToken));
+    form.appendChild(hiddenInput("response", assertion));
+    document.body.appendChild(form);
+    form.submit();
+}
+function hiddenInput(name, value) {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = value;
+    return input;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adonis-agora/authkit-react",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Frontend ergonomics over AuthKit for AdonisJS + Inertia + React apps: a typed useAuth() hook, role-gating hooks and gating components.",
   "license": "MIT",
   "author": "dudousxd",

package/styles.css

@@ -47,6 +47,17 @@
   border-color: var(--authkit-border);
 }
 
+.authkit-passkey {
+  display: flex;
+  flex-direction: column;
+  gap: var(--authkit-gap);
+}
+.authkit-passkey__error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--authkit-danger);
+}
+
 .authkit-avatar {
   display: inline-flex;
   align-items: center;
@@ -206,16 +217,16 @@
   transition: background-color 0.15s ease;
 }
 /* Cor por score, do mais fraco ao mais forte (via data-score no bar). */
-.authkit-strength__bar[data-score='1'] .authkit-strength__segment--filled {
+.authkit-strength__bar[data-score="1"] .authkit-strength__segment--filled {
   background: var(--authkit-danger);
 }
-.authkit-strength__bar[data-score='2'] .authkit-strength__segment--filled {
+.authkit-strength__bar[data-score="2"] .authkit-strength__segment--filled {
   background: #f5a524;
 }
-.authkit-strength__bar[data-score='3'] .authkit-strength__segment--filled {
+.authkit-strength__bar[data-score="3"] .authkit-strength__segment--filled {
   background: #d6c20a;
 }
-.authkit-strength__bar[data-score='4'] .authkit-strength__segment--filled {
+.authkit-strength__bar[data-score="4"] .authkit-strength__segment--filled {
   background: #2fb344;
 }
 .authkit-strength__label {
@@ -246,8 +257,14 @@
   font-size: 0.875rem;
   color: var(--authkit-fg);
 }
-.authkit-orgswitcher__trigger:disabled { opacity: 0.6; cursor: default; }
-.authkit-orgswitcher__chevron { font-size: 0.65rem; color: var(--authkit-muted); }
+.authkit-orgswitcher__trigger:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.authkit-orgswitcher__chevron {
+  font-size: 0.65rem;
+  color: var(--authkit-muted);
+}
 .authkit-orgswitcher__menu {
   position: absolute;
   top: calc(100% + 4px);
@@ -256,7 +273,7 @@
   background: var(--authkit-bg);
   border: 1px solid var(--authkit-border);
   border-radius: var(--authkit-radius);
-  box-shadow: 0 4px 16px rgba(0,0,0,.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   z-index: 50;
   overflow: hidden;
 }
@@ -273,31 +290,118 @@
   color: var(--authkit-fg);
   text-align: left;
 }
-.authkit-orgswitcher__item:hover { background: color-mix(in srgb, var(--authkit-primary) 8%, transparent); }
-.authkit-orgswitcher__item--active { font-weight: 600; }
-.authkit-orgswitcher__item-name { flex: 1; }
-.authkit-orgswitcher__item-role { font-size: 0.75rem; color: var(--authkit-muted); margin-left: 0.5rem; }
+.authkit-orgswitcher__item:hover {
+  background: color-mix(in srgb, var(--authkit-primary) 8%, transparent);
+}
+.authkit-orgswitcher__item--active {
+  font-weight: 600;
+}
+.authkit-orgswitcher__item-name {
+  flex: 1;
+}
+.authkit-orgswitcher__item-role {
+  font-size: 0.75rem;
+  color: var(--authkit-muted);
+  margin-left: 0.5rem;
+}
 
 /* ─── OrganizationProfile ──────────────────────────────────────────────── */
-.authkit-org-profile { display: flex; flex-direction: column; gap: var(--authkit-gap); }
-.authkit-org-profile__header { margin-bottom: 0.5rem; }
-.authkit-org-profile__name { font-weight: 600; font-size: 1rem; color: var(--authkit-fg); }
-.authkit-org-profile__slug { font-size: 0.8rem; color: var(--authkit-muted); }
-.authkit-org-profile__section-title { font-size: 0.85rem; font-weight: 600; color: var(--authkit-fg); margin-bottom: 0.4rem; }
-.authkit-org-profile__members { display: flex; flex-direction: column; gap: 0.25rem; }
-.authkit-org-profile__member { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--authkit-border); }
-.authkit-org-profile__member:last-child { border-bottom: none; }
-.authkit-org-profile__member-info { display: flex; flex-direction: column; }
-.authkit-org-profile__member-email { font-size: 0.875rem; color: var(--authkit-fg); }
-.authkit-org-profile__member-role { font-size: 0.75rem; color: var(--authkit-muted); }
-.authkit-org-profile__invite-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }
-.authkit-org-profile__empty { font-size: 0.875rem; color: var(--authkit-muted); }
+.authkit-org-profile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--authkit-gap);
+}
+.authkit-org-profile__header {
+  margin-bottom: 0.5rem;
+}
+.authkit-org-profile__name {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--authkit-fg);
+}
+.authkit-org-profile__slug {
+  font-size: 0.8rem;
+  color: var(--authkit-muted);
+}
+.authkit-org-profile__section-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--authkit-fg);
+  margin-bottom: 0.4rem;
+}
+.authkit-org-profile__members {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.authkit-org-profile__member {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0;
+  border-bottom: 1px solid var(--authkit-border);
+}
+.authkit-org-profile__member:last-child {
+  border-bottom: none;
+}
+.authkit-org-profile__member-info {
+  display: flex;
+  flex-direction: column;
+}
+.authkit-org-profile__member-email {
+  font-size: 0.875rem;
+  color: var(--authkit-fg);
+}
+.authkit-org-profile__member-role {
+  font-size: 0.75rem;
+  color: var(--authkit-muted);
+}
+.authkit-org-profile__invite-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+}
+.authkit-org-profile__empty {
+  font-size: 0.875rem;
+  color: var(--authkit-muted);
+}
 
 /* ─── KeyRotation ──────────────────────────────────────────────────────────── */
-.authkit-keys { display: flex; flex-direction: column; gap: var(--authkit-gap); }
-.authkit-keys__title { font-size: 1rem; font-weight: 600; color: var(--authkit-fg); margin: 0 0 0.5rem; }
-.authkit-keys__stats { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0 0 0.5rem; font-size: 0.875rem; }
-.authkit-keys__stats dt { color: var(--authkit-muted); }
-.authkit-keys__stats dd { margin: 0; color: var(--authkit-fg); }
-.authkit-keys__retire { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--authkit-fg); cursor: pointer; }
-.authkit-keys__loading { color: var(--authkit-muted); font-size: 0.9rem; }
+.authkit-keys {
+  display: flex;
+  flex-direction: column;
+  gap: var(--authkit-gap);
+}
+.authkit-keys__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--authkit-fg);
+  margin: 0 0 0.5rem;
+}
+.authkit-keys__stats {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.2rem 0.75rem;
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+}
+.authkit-keys__stats dt {
+  color: var(--authkit-muted);
+}
+.authkit-keys__stats dd {
+  margin: 0;
+  color: var(--authkit-fg);
+}
+.authkit-keys__retire {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.875rem;
+  color: var(--authkit-fg);
+  cursor: pointer;
+}
+.authkit-keys__loading {
+  color: var(--authkit-muted);
+  font-size: 0.9rem;
+}