@visns-studio/visns-components 6.32.3 → 6.34.3

package/src/components/auth/PasskeyEnrolPrompt.jsx

@@ -0,0 +1,269 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { KeyRound } from 'lucide-react';
+
+import StandardModal from '../generic/StandardModal';
+import { enrolPasskey, listPasskeys } from './passkeyClient';
+import { isPasskeyCancellation, isPasskeySupported } from './webauthn';
+import {
+    defaultPasskeyName,
+    neverAskPasskeyPrompt,
+    readPasskeyPromptRecord,
+    resolvePasskeyOptions,
+    shouldPromptForPasskey,
+    snoozePasskeyPrompt,
+} from './passkeyPrompt';
+
+import styles from '../styles/PasskeyEnrolPrompt.module.scss';
+
+/**
+ * "Would you like to sign in with your fingerprint next time?", asked once.
+ *
+ * Rendered by GenericAuth inside the authenticated shell, so every app that
+ * turns passkeys on gets the offer without writing a screen for it — which is
+ * the whole point: a passkey is worth having and nobody goes looking for it in
+ * an account-settings tab.
+ *
+ * WHEN IT APPEARS is not decided here. Every gate lives in passkeyPrompt.js as
+ * one pure function, tested against each of its conditions, because the ways
+ * this goes wrong (asked on every refresh, asked of somebody who already has
+ * one, asked again after "Don't ask again") are all the same kind of mistake
+ * and none of them is visible in a render. This component does three things
+ * the pure function cannot: it asks the browser whether WebAuthn exists, it
+ * asks the server how many passkeys the user already holds, and it draws the
+ * dialog.
+ *
+ * The index request is the only network traffic this adds, it happens once per
+ * sign-in, and it only happens after every cheap gate has already passed — so
+ * an app with the prompt turned off, a browser that cannot do WebAuthn, and a
+ * page refresh all cost nothing.
+ */
+
+/**
+ * The dialog itself, with no decisions in it.
+ *
+ * Separated from the component above so the markup can be rendered and
+ * asserted on its own (tests/passkeyPrompt.test.mjs) — the decision half needs
+ * a browser, a server and a storage, and none of those is what a markup test
+ * is about. Exported for the same reason a host might want it: an app with its
+ * own idea of when to ask can drive this directly.
+ */
+export const PasskeyEnrolDialog = ({
+    isOpen = true,
+    copy,
+    isBusy = false,
+    onAdd,
+    onLater,
+    onNever,
+}) => (
+    <StandardModal
+        isOpen={isOpen}
+        /* The X in the header and a click on the backdrop are the same
+           gesture as "Not now": a dismissal, not a refusal. Both snooze. */
+        onClose={onLater}
+        title={copy.title}
+        size="small"
+        variant="modal"
+        showHeader
+    >
+        <div className={styles.body}>
+            <span className={styles.mark} aria-hidden="true">
+                <KeyRound size={22} strokeWidth={1.5} />
+            </span>
+            <p className={styles.text}>{copy.body}</p>
+            <div className={styles.actions}>
+                <button
+                    type="button"
+                    className={styles.primary}
+                    onClick={onAdd}
+                    disabled={isBusy}
+                    aria-busy={isBusy}
+                >
+                    {isBusy ? copy.adding : copy.add}
+                </button>
+                <button
+                    type="button"
+                    className={styles.later}
+                    onClick={onLater}
+                    disabled={isBusy}
+                >
+                    {copy.later}
+                </button>
+                <button
+                    type="button"
+                    className={styles.never}
+                    onClick={onNever}
+                    disabled={isBusy}
+                >
+                    {copy.never}
+                </button>
+            </div>
+        </div>
+    </StandardModal>
+);
+
+const PasskeyEnrolPrompt = ({
+    /**
+     * The `passkeys` prop exactly as GenericAuth received it: `true`, `false`,
+     * or the object form `{enabled, promptOnLogin, snoozeDays, copy}`. See
+     * `resolvePasskeyOptions`.
+     */
+    passkeys,
+    /** The signed-in user. Only `id` is read, for the dismissal record. */
+    userProfile,
+    /** Merged over DEFAULT_AUTH_ENDPOINTS, as everywhere else in auth/. */
+    endpoints,
+    /**
+     * Whether a sign-in happened during THIS page's life, as opposed to a
+     * refresh that re-validated a session that already existed. GenericAuth
+     * knows, because the auth screens call the setter it owns; nothing this
+     * far down the tree could work it out for itself.
+     */
+    justSignedIn = false,
+    /** 'password' | 'passkey' | whatever else a host's screen reports. */
+    signInMethod,
+    /** Called after a credential is stored, in case the host wants to know. */
+    onEnrolled,
+}) => {
+    const options = resolvePasskeyOptions(passkeys);
+    const copy = options.copy;
+    const userId = userProfile?.id;
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [isBusy, setIsBusy] = useState(false);
+    // One decision per mounted prompt. Without this the effect would run again
+    // on any re-render that changed its inputs' identity, and a user who had
+    // just pressed "Not now" would be asked a second time in the same session.
+    const decidedRef = useRef(false);
+
+    useEffect(() => {
+        if (decidedRef.current) {
+            return undefined;
+        }
+
+        // The cheap gates first, and the request only if they all pass. This
+        // ordering IS the feature: `shouldPromptForPasskey` is called twice
+        // with the same values, once without a credential count and once with,
+        // so nothing can ask the server on a page refresh or on a browser that
+        // has no WebAuthn to begin with.
+        const worthAsking = shouldPromptForPasskey({
+            options,
+            supported: isPasskeySupported(),
+            justSignedIn,
+            signInMethod,
+            userId,
+            // Not known yet; a zero stands in for "the only thing still to
+            // check is how many they have".
+            credentialCount: 0,
+            record: readPasskeyPromptRecord(userId),
+        });
+
+        if (!worthAsking) {
+            return undefined;
+        }
+
+        decidedRef.current = true;
+
+        let cancelled = false;
+
+        listPasskeys(endpoints)
+            .then(({ count }) => {
+                if (cancelled) {
+                    return;
+                }
+
+                setIsOpen(
+                    shouldPromptForPasskey({
+                        options,
+                        supported: true,
+                        justSignedIn,
+                        signInMethod,
+                        userId,
+                        credentialCount: count,
+                        record: readPasskeyPromptRecord(userId),
+                    })
+                );
+            })
+            .catch(() => {
+                // A 404 (the feature is off on this deployment after all), a
+                // 401, a network failure. Silent: this is an unasked-for offer,
+                // and an error toast for one is noise about something the user
+                // never requested.
+            });
+
+        return () => {
+            cancelled = true;
+        };
+        // Once per mount. `options` is rebuilt every render and would restart
+        // this on each one; the values inside it are read above, at the moment
+        // the decision is made.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userId, justSignedIn, signInMethod]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setIsBusy(false);
+    }, []);
+
+    /** "Not now" — and the X, and the backdrop. */
+    const handleLater = useCallback(() => {
+        snoozePasskeyPrompt(userId);
+        close();
+    }, [userId, close]);
+
+    const handleNever = useCallback(() => {
+        neverAskPasskeyPrompt(userId);
+        close();
+    }, [userId, close]);
+
+    const handleAdd = useCallback(async () => {
+        setIsBusy(true);
+
+        try {
+            const result = await enrolPasskey(endpoints, {
+                name: defaultPasskeyName(),
+            });
+
+            toast.success(copy.success);
+            close();
+
+            if (typeof onEnrolled === 'function') {
+                onEnrolled(result);
+            }
+        } catch (error) {
+            setIsBusy(false);
+
+            // The person closed the browser's own sheet. They have answered
+            // the question; asking it again on the next sign-in would be
+            // asking them to answer it twice, so this snoozes exactly as "Not
+            // now" does — and says nothing, because nothing went wrong.
+            if (isPasskeyCancellation(error)) {
+                snoozePasskeyPrompt(userId);
+                close();
+                return;
+            }
+
+            // Anything else — the server refused the attestation, the request
+            // failed — is reported, and the dialog stays up so the button can
+            // be pressed again.
+            toast.error(error?.message || copy.failure);
+        }
+    }, [endpoints, copy, close, onEnrolled, userId]);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <PasskeyEnrolDialog
+            isOpen
+            copy={copy}
+            isBusy={isBusy}
+            onAdd={handleAdd}
+            onLater={handleLater}
+            onNever={handleNever}
+        />
+    );
+};
+
+export default PasskeyEnrolPrompt;