@adonis-agora/authkit-react 0.17.0 → 0.18.0

package/build/index.d.ts

@@ -44,7 +44,7 @@ export type { UsePasskeyRegistrationOptions, UsePasskeyRegistrationResult, } fro
 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, buttonClass } from './src/utils.js';
-export { interactionUrls, oauthRedirectUrl } from './src/interaction/urls.js';
+export { interactionUrls, oauthRedirectUrl, OTP_CODE_FIELD } from './src/interaction/urls.js';
 export type { InteractionUrls, InteractionPostStep, } from './src/interaction/urls.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export type { AuthenticatedProps, GuestProps, } from './src/components/authenticated.js';

package/build/index.js

@@ -22,7 +22,7 @@ export { usePasskeyAssertion } from './src/hooks/use_passkey_assertion.js';
 export { usePasskeyRegistration } from './src/hooks/use_passkey_registration.js';
 export { usePasswordStrength, heuristicScorer, } from './src/hooks/use_password_strength.js';
 export { deriveInitials, currentUrl, buttonClass } from './src/utils.js';
-export { interactionUrls, oauthRedirectUrl } from './src/interaction/urls.js';
+export { interactionUrls, oauthRedirectUrl, OTP_CODE_FIELD } from './src/interaction/urls.js';
 export { Authenticated, Guest } from './src/components/authenticated.js';
 export { CanPermission } from './src/components/can_permission.js';
 export { useCan, checkCan, invalidateCanCache } from './src/hooks/use_can.js';

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

@@ -1,4 +1,4 @@
-import { type FormHTMLAttributes, type ReactNode } from 'react';
+import { type FormHTMLAttributes, type ReactNode, type SubmitEvent } from 'react';
 import { type InteractionPostStep } from '../interaction/urls.js';
 export interface InteractionFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'method' | 'action'> {
     uid: string;
@@ -7,7 +7,7 @@ export interface InteractionFormProps extends Omit<FormHTMLAttributes<HTMLFormEl
     basePath?: string;
     children?: ReactNode;
 }
-export declare function InteractionForm({ uid, step, csrfToken, basePath, children, ...rest }: InteractionFormProps): import("react").DetailedReactHTMLElement<{
+export declare function InteractionForm({ uid, step, csrfToken, basePath, children, onSubmit, ...rest }: InteractionFormProps): import("react").DetailedReactHTMLElement<{
     id?: string | undefined | undefined;
     name?: string | undefined | undefined;
     slot?: string | undefined | undefined;
@@ -145,7 +145,6 @@ export declare function InteractionForm({ uid, step, csrfToken, basePath, childr
     onInputCapture?: import("react").InputEventHandler<HTMLFormElement> | undefined;
     onReset?: import("react").ReactEventHandler<HTMLFormElement> | undefined;
     onResetCapture?: import("react").ReactEventHandler<HTMLFormElement> | undefined;
-    onSubmit?: import("react").SubmitEventHandler<HTMLFormElement> | undefined;
     onSubmitCapture?: import("react").SubmitEventHandler<HTMLFormElement> | undefined;
     onInvalid?: import("react").ReactEventHandler<HTMLFormElement> | undefined;
     onInvalidCapture?: import("react").ReactEventHandler<HTMLFormElement> | undefined;
@@ -295,4 +294,5 @@ export declare function InteractionForm({ uid, step, csrfToken, basePath, childr
     target?: string | undefined | undefined;
     method: string;
     action: string;
+    onSubmit: (event: SubmitEvent<HTMLElement>) => void;
 }, HTMLElement>;

package/build/src/components/interaction_form.js

@@ -1,6 +1,21 @@
-import { createElement } from 'react';
+import { createElement, } from 'react';
 import { interactionUrls } from '../interaction/urls.js';
-export function InteractionForm({ uid, step, csrfToken, basePath, children, ...rest }) {
+function lockOnSubmit(event, hostOnSubmit) {
+    const formEvent = event;
+    hostOnSubmit?.(formEvent);
+    const form = formEvent.currentTarget;
+    setTimeout(() => {
+        if (formEvent.defaultPrevented)
+            return;
+        form
+            .querySelectorAll('button[type="submit"], input[type="submit"]')
+            .forEach((el) => {
+            el.disabled = true;
+        });
+        form.setAttribute('aria-busy', 'true');
+    }, 0);
+}
+export function InteractionForm({ uid, step, csrfToken, basePath, children, onSubmit, ...rest }) {
     const action = interactionUrls(uid, basePath)[step];
-    return createElement('form', { method: 'POST', action, ...rest }, createElement('input', { type: 'hidden', name: '_csrf', value: csrfToken }), children);
+    return createElement('form', { method: 'POST', action, onSubmit: (event) => lockOnSubmit(event, onSubmit), ...rest }, createElement('input', { type: 'hidden', name: '_csrf', value: csrfToken }), children);
 }

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

@@ -3,6 +3,8 @@ export interface MagicLinkButtonProps extends Omit<ButtonHTMLAttributes<HTMLButt
     uid: string;
     csrfToken: string;
     basePath?: string;
+    channel?: 'code' | 'link';
+    pendingChildren?: ReactNode;
     children?: ReactNode;
 }
-export declare function MagicLinkButton({ uid, csrfToken, basePath, children, className, ...rest }: MagicLinkButtonProps): import("react").FunctionComponentElement<import("./interaction_form.js").InteractionFormProps>;
+export declare function MagicLinkButton({ uid, csrfToken, basePath, channel, pendingChildren, children, className, disabled, ...rest }: MagicLinkButtonProps): import("react").FunctionComponentElement<import("./interaction_form.js").InteractionFormProps>;

package/build/src/components/magic_link_button.js

@@ -1,10 +1,12 @@
-import { createElement } from 'react';
+import { createElement, useState } from 'react';
 import { buttonClass } from '../utils.js';
 import { InteractionForm } from './interaction_form.js';
-export function MagicLinkButton({ uid, csrfToken, basePath, children = 'Enviar link de login', className, ...rest }) {
-    return createElement(InteractionForm, { uid, step: 'magic', csrfToken, basePath }, createElement('button', {
+export function MagicLinkButton({ uid, csrfToken, basePath, channel, pendingChildren = 'Enviando…', children = 'Enviar link de login', className, disabled, ...rest }) {
+    const [pending, setPending] = useState(false);
+    return createElement(InteractionForm, { uid, step: 'magic', csrfToken, basePath, onSubmit: () => setPending(true) }, channel ? createElement('input', { type: 'hidden', name: 'channel', value: channel }) : null, createElement('button', {
         type: 'submit',
+        disabled: disabled || pending,
         className: buttonClass('authkit-button--ghost', className),
         ...rest,
-    }, children));
+    }, pending ? pendingChildren : children));
 }

package/build/src/interaction/urls.d.ts

@@ -6,7 +6,9 @@ export interface InteractionUrls {
     switch: string;
     passkeyOptions: string;
     passkeyVerify: string;
+    otpVerify: string;
 }
 export declare function interactionUrls(uid: string, basePath?: string): InteractionUrls;
-export type InteractionPostStep = 'identifier' | 'login' | 'magic';
+export type InteractionPostStep = 'identifier' | 'login' | 'magic' | 'otpVerify';
+export declare const OTP_CODE_FIELD = "code";
 export declare function oauthRedirectUrl(provider: string, uid: string, basePath?: string): string;

package/build/src/interaction/urls.js

@@ -8,8 +8,10 @@ export function interactionUrls(uid, basePath = '/auth/interaction') {
         switch: `${base}/switch`,
         passkeyOptions: `${base}/passkey/options`,
         passkeyVerify: `${base}/passkey/verify`,
+        otpVerify: `${base}/otp-verify`,
     };
 }
+export const OTP_CODE_FIELD = 'code';
 export function oauthRedirectUrl(provider, uid, basePath = '/auth') {
     return `${basePath}/${provider}/redirect/${uid}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adonis-agora/authkit-react",
-  "version": "0.17.0",
+  "version": "0.18.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",