@adonis-agora/authkit-react 0.13.1 → 0.15.0

package/README.md

@@ -33,7 +33,6 @@ export default defineConfig({
       return {
         user: user ?? null,
         globalRoles: auth.identity?.globalRoles ?? [],
-        // appRoles opcional, se o host resolver papéis de app
       }
     },
   },
@@ -41,7 +40,7 @@ export default defineConfig({
 ```
 
 O objeto `user` deve corresponder ao tipo `AuthUser`:
-`{ id, email, name?, avatarUrl?, globalRoles, appRoles? }` — exatamente a saída de
+`{ id, email, name?, avatarUrl?, globalRoles }` — exatamente a saída de
 `identityToUser`/`resolveUser` do client.
 
 ## 2. No frontend: `useAuth()`
@@ -69,7 +68,7 @@ não-autenticado (`user: null`, listas vazias).
 ## 3. Componentes de gating
 
 ```tsx
-import { Authenticated, Guest, Can } from '@adonis-agora/authkit-react'
+import { Authenticated, Guest } from '@adonis-agora/authkit-react'
 
 <Authenticated fallback={<LoginButton />}>
   <Dashboard />
@@ -78,23 +77,12 @@ import { Authenticated, Guest, Can } from '@adonis-agora/authkit-react'
 <Guest>
   <MarketingBanner />
 </Guest>
-
-{/* papel global único */}
-<Can role="ADMIN">
-  <AdminPanel />
-</Can>
-
-{/* exige todos os papéis */}
-<Can roles={['ADMIN', 'BILLING']} mode="all" fallback={<NoAccess />}>
-  <BillingSettings />
-</Can>
-
-{/* papel específico do app */}
-<Can role="EDITOR" appRole>
-  <EditButton />
-</Can>
 ```
 
+Gating por papel/permissão de app (`<Can>`) migrou para
+`@adonis-agora/authz-react`, que consulta o serviço Authz em vez de depender
+de papéis de app resolvidos no host — veja a doc desse pacote.
+
 ## 4. `AuthProvider` (opcional)
 
 Fora do Inertia (testes, Storybook), injete o valor manualmente. O contexto tem
@@ -139,7 +127,7 @@ redirecionam para o IdP. Temável via CSS vars `--authkit-*`. Veja a
 Para uso fora de componentes, as funções de papéis são exportadas e livres de React:
 
 ```ts
-import { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole } from '@adonis-agora/authkit-react'
+import { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles } from '@adonis-agora/authkit-react'
 
 hasGlobalRole(user, 'ADMIN')
 hasAnyGlobalRole(user, ['ADMIN', 'TEACHER'])

package/build/index.d.ts

@@ -29,13 +29,15 @@ 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";
 export { Authenticated, Guest } from "./src/components/authenticated.js";
 export type { AuthenticatedProps, GuestProps, } from "./src/components/authenticated.js";
-export { Can } from "./src/components/can.js";
-export type { CanProps } from "./src/components/can.js";
 export { CanPermission } from "./src/components/can_permission.js";
 export type { CanPermissionProps } from "./src/components/can_permission.js";
 export { useCan, checkCan, invalidateCanCache } from "./src/hooks/use_can.js";
@@ -54,13 +56,15 @@ 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";
 export type { OrganizationProfileProps } from "./src/components/organization_profile.js";
 export { KeyRotation } from "./src/components/key_rotation.js";
 export type { KeyRotationProps } from "./src/components/key_rotation.js";
-export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from "./src/roles.js";
+export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, } from "./src/roles.js";
 export type { AuthUser, AuthSharedProps, AuthState } from "./src/types.js";
 export { createAuthkitClient, AuthkitClientError, } from "./src/client/client.js";
 export type { AuthkitClient, AuthkitClientOptions, } from "./src/client/client.js";

package/build/index.js

@@ -14,10 +14,11 @@ 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";
-export { Can } from "./src/components/can.js";
 export { CanPermission } from "./src/components/can_permission.js";
 export { useCan, checkCan, invalidateCanCache } from "./src/hooks/use_can.js";
 export { SignInButton } from "./src/components/sign_in_button.js";
@@ -27,10 +28,11 @@ 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";
-export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, hasAppRole, hasAnyAppRole, hasAllAppRoles, } from "./src/roles.js";
+export { hasGlobalRole, hasAnyGlobalRole, hasAllGlobalRoles, } from "./src/roles.js";
 export { createAuthkitClient, AuthkitClientError, } from "./src/client/client.js";
 export { AuthkitClientProvider, useAuthkitClient, createAuthkitQueryClient, } from "./src/client/context.js";
 export { authkitKeys } from "./src/queries/keys.js";

package/build/src/authkit_provider.d.ts

@@ -9,5 +9,4 @@ export interface AuthkitProviderProps {
 export declare function AuthkitProvider({ config, value, children }: AuthkitProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
     user: import("./types.js").AuthUser | null;
     globalRoles: string[];
-    appRoles?: string[];
 } | undefined>> | import("react").FunctionComponentElement<import("react").ProviderProps<import("./config.js").ResolvedAuthkitConfig>>;

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/build/src/provider.d.ts

@@ -3,7 +3,6 @@ import type { AuthSharedProps } from './types.js';
 export declare const AuthContext: import("react").Context<{
     user: import("./types.js").AuthUser | null;
     globalRoles: string[];
-    appRoles?: string[];
 } | undefined>;
 export interface AuthProviderProps {
     value: AuthSharedProps['authkit'];
@@ -12,5 +11,4 @@ export interface AuthProviderProps {
 export declare function AuthProvider({ value, children }: AuthProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
     user: import("./types.js").AuthUser | null;
     globalRoles: string[];
-    appRoles?: string[];
 } | undefined>>;

package/build/src/roles.d.ts

@@ -2,6 +2,3 @@ import type { AuthUser } from './types.js';
 export declare function hasGlobalRole(user: AuthUser | null | undefined, role: string): boolean;
 export declare function hasAnyGlobalRole(user: AuthUser | null | undefined, roles: string[]): boolean;
 export declare function hasAllGlobalRoles(user: AuthUser | null | undefined, roles: string[]): boolean;
-export declare function hasAppRole(user: AuthUser | null | undefined, role: string): boolean;
-export declare function hasAnyAppRole(user: AuthUser | null | undefined, roles: string[]): boolean;
-export declare function hasAllAppRoles(user: AuthUser | null | undefined, roles: string[]): boolean;

package/build/src/roles.js

@@ -22,18 +22,3 @@ export function hasAllGlobalRoles(user, roles) {
         return false;
     return hasAllRoles(user.globalRoles, roles);
 }
-export function hasAppRole(user, role) {
-    if (!user || !user.appRoles)
-        return false;
-    return hasRole(user.appRoles, role);
-}
-export function hasAnyAppRole(user, roles) {
-    if (!user || !user.appRoles)
-        return false;
-    return hasAnyRole(user.appRoles, roles);
-}
-export function hasAllAppRoles(user, roles) {
-    if (!user || !user.appRoles)
-        return false;
-    return hasAllRoles(user.appRoles, roles);
-}

package/build/src/types.d.ts

@@ -4,14 +4,12 @@ export interface AuthUser {
     name?: string;
     avatarUrl?: string;
     globalRoles: string[];
-    appRoles?: string[];
     [key: string]: unknown;
 }
 export interface AuthSharedProps {
     authkit: {
         user: AuthUser | null;
         globalRoles: string[];
-        appRoles?: string[];
     };
     [key: string]: unknown;
 }
@@ -19,9 +17,7 @@ export interface AuthState {
     user: AuthUser | null;
     isAuthenticated: boolean;
     globalRoles: string[];
-    appRoles: string[];
     hasGlobalRole(role: string): boolean;
     hasAnyGlobalRole(roles: string[]): boolean;
     hasAllGlobalRoles(roles: string[]): boolean;
-    hasAppRole(role: string): boolean;
 }

package/build/src/use_auth.js

@@ -1,11 +1,10 @@
 import { useContext, useMemo } from 'react';
 import { usePage } from '@inertiajs/react';
 import { AuthContext } from './provider.js';
-import { hasAllGlobalRoles as hasAllGlobalRolesPure, hasAnyGlobalRole as hasAnyGlobalRolePure, hasAppRole as hasAppRolePure, hasGlobalRole as hasGlobalRolePure, } from './roles.js';
+import { hasAllGlobalRoles as hasAllGlobalRolesPure, hasAnyGlobalRole as hasAnyGlobalRolePure, hasGlobalRole as hasGlobalRolePure, } from './roles.js';
 const UNAUTHENTICATED = {
     user: null,
     globalRoles: [],
-    appRoles: undefined,
 };
 export function useAuth() {
     const contextValue = useContext(AuthContext);
@@ -18,16 +17,13 @@ export function useAuth() {
     return useMemo(() => {
         const user = authkit.user ?? null;
         const globalRoles = authkit.globalRoles ?? user?.globalRoles ?? [];
-        const appRoles = authkit.appRoles ?? user?.appRoles ?? [];
         return {
             user,
             isAuthenticated: user !== null,
             globalRoles,
-            appRoles,
             hasGlobalRole: (role) => hasGlobalRolePure(user, role),
             hasAnyGlobalRole: (roles) => hasAnyGlobalRolePure(user, roles),
             hasAllGlobalRoles: (roles) => hasAllGlobalRolesPure(user, roles),
-            hasAppRole: (role) => hasAppRolePure(user, role),
         };
     }, [authkit]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adonis-agora/authkit-react",
-  "version": "0.13.1",
+  "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;
+}

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

@@ -1,10 +0,0 @@
-import { type ReactNode } from 'react';
-export interface CanProps {
-    children: ReactNode;
-    role?: string;
-    roles?: string[];
-    mode?: 'any' | 'all';
-    appRole?: boolean;
-    fallback?: ReactNode;
-}
-export declare function Can({ children, role, roles, mode, appRole, fallback, }: CanProps): import("react").FunctionComponentElement<import("react").FragmentProps>;

package/build/src/components/can.js

@@ -1,19 +0,0 @@
-import { createElement, Fragment } from 'react';
-import { useAuth } from '../use_auth.js';
-import { hasAllAppRoles, hasAllGlobalRoles, hasAnyAppRole, hasAnyGlobalRole, hasAppRole, hasGlobalRole, } from '../roles.js';
-export function Can({ children, role, roles, mode = 'any', appRole = false, fallback = null, }) {
-    const { user } = useAuth();
-    let allowed = false;
-    if (role !== undefined) {
-        allowed = appRole ? hasAppRole(user, role) : hasGlobalRole(user, role);
-    }
-    else if (roles !== undefined) {
-        if (appRole) {
-            allowed = mode === 'all' ? hasAllAppRoles(user, roles) : hasAnyAppRole(user, roles);
-        }
-        else {
-            allowed = mode === 'all' ? hasAllGlobalRoles(user, roles) : hasAnyGlobalRole(user, roles);
-        }
-    }
-    return createElement(Fragment, null, allowed ? children : fallback);
-}