authfyio-react 0.3.9

package/dist/ui/SignUp.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { ensureStylesInjected } from './styles.js';
+const SOCIAL_LABELS = {
+    google: 'Google',
+    github: 'GitHub',
+    facebook: 'Facebook',
+    apple: 'Apple',
+    microsoft: 'Microsoft',
+    linkedin: 'LinkedIn',
+    discord: 'Discord',
+    slack: 'Slack',
+    twitter: 'X / Twitter',
+};
+const WALLET_LABELS = {
+    metamask: 'MetaMask',
+    coinbase_wallet: 'Coinbase Wallet',
+    okx_wallet: 'OKX Wallet',
+    solana: 'Solana',
+    base: 'Base',
+};
+const WALLET_COLORS = {
+    metamask: '#F6851B',
+    coinbase_wallet: '#0052FF',
+    okx_wallet: '#000000',
+    solana: '#9945FF',
+    base: '#0052FF',
+};
+export function SignUp({ redirectUrl = '/', signInUrl = '/sign-in', title = 'Create your account', subtitle = 'One account for everything.', showBranding = true, brandText = 'Authfyio', socialProviders: socialOverride, onSignUp, }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const [config, setConfig] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        client.fetchAuthConfig().then((c) => {
+            if (cancelled)
+                return;
+            setConfig(c);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    // Mirror SignIn — pk + return_url query on every OAuth anchor so the
+    // top-level navigation lands cookies on this app's origin via the
+    // /api/af/oauth-finish bridge. See SignIn for the full rationale.
+    const oauthQuery = (() => {
+        if (typeof window === 'undefined')
+            return '';
+        const params = new URLSearchParams();
+        if (client.publishableKey)
+            params.set('publishable_key', client.publishableKey);
+        const finish = new URL('/api/af/oauth-finish', window.location.origin);
+        finish.searchParams.set('to', redirectUrl);
+        params.set('return_url', finish.toString());
+        return '?' + params.toString();
+    })();
+    const enabledSocial = (socialOverride ?? (config?.socialProviders ?? [])).filter((p) => SOCIAL_LABELS[p]);
+    const enabledWallets = (config?.web3Wallets ?? []).filter((w) => WALLET_LABELS[w]);
+    const legal = config?.legal;
+    const brand = config?.branding;
+    const cardStyle = brand?.primaryColor
+        ? { ['--af-primary']: brand.primaryColor }
+        : {};
+    const effectiveBrandText = brand?.appName ?? brandText;
+    const showPoweredBy = brand && !brand.removeBranding;
+    const su = config?.signUp;
+    const signUpEnabled = su?.enabled !== false;
+    // What fields/identifiers the form actually needs based on the
+    // dashboard config. We need at least one identifier (email, username,
+    // or phone) plus a credential (password) — otherwise there's nothing
+    // to submit.
+    const showEmail = !!su?.email;
+    const showUsername = !!su?.username;
+    const usernameRequired = !!su?.username?.required;
+    const showPhone = !!su?.phone;
+    const showPassword = !!su?.password;
+    const showFirstAndLastName = !!su?.firstAndLastName;
+    const requireFirstAndLastName = !!su?.firstAndLastName?.required;
+    const hasSomething = showEmail || showUsername || showPhone || enabledSocial.length > 0 || enabledWallets.length > 0;
+    const [email, setEmail] = useState('');
+    const [username, setUsername] = useState('');
+    const [phone, setPhone] = useState('');
+    const [password, setPassword] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    async function submit(e) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        try {
+            const body = {};
+            if (showEmail && email)
+                body.email = email;
+            if (showUsername && username)
+                body.username = username;
+            if (showPhone && phone)
+                body.phone = phone;
+            if (showPassword && password)
+                body.password = password;
+            if (showFirstAndLastName && firstName)
+                body.firstName = firstName;
+            if (showFirstAndLastName && lastName)
+                body.lastName = lastName;
+            // Use email-password endpoint when there's an email; otherwise the
+            // matching identifier-specific endpoint. (Username/phone-only
+            // sign-up endpoints are 0.3 work — for now require email or
+            // social.)
+            const endpoint = showEmail
+                ? '/v1/auth/sign-up/email-password'
+                : showUsername
+                    ? '/v1/auth/sign-up/username-password'
+                    : '/v1/auth/sign-up/email-password';
+            const res = await fetch(`${baseUrl}${endpoint}`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            if (!res.ok) {
+                const b = await res.json().catch(() => ({}));
+                throw new Error(b?.message ?? 'Sign-up failed.');
+            }
+            const ok = (await res.json());
+            if (onSignUp)
+                onSignUp(ok);
+            if (typeof window !== 'undefined')
+                window.location.href = redirectUrl;
+        }
+        catch (err) {
+            setError(err?.message ?? 'Sign-up failed.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    return (_jsxs("div", { className: "af-card", role: "form", "aria-label": "Sign up", style: cardStyle, children: [showBranding && (_jsxs("div", { className: "af-brand", children: [brand?.logoUrl ? (_jsx("img", { src: brand.logoUrl, alt: "", style: { width: 26, height: 26, borderRadius: 8, objectFit: 'cover' } })) : (_jsx("span", { className: "af-brand-mark", "aria-hidden": true })), _jsx("span", { className: "af-brand-text", children: effectiveBrandText })] })), _jsx("h1", { className: "af-title", children: title }), _jsx("p", { className: "af-subtitle", children: subtitle }), !signUpEnabled ? (_jsx("div", { className: "af-error", children: "Sign-up is disabled for this app. Ask the app owner for an invite." })) : (_jsxs(_Fragment, { children: [(enabledSocial.length > 0 || enabledWallets.length > 0) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-social-grid", children: [enabledSocial.map((p) => (_jsxs("a", { className: "af-social-btn", href: `${baseUrl}/v1/auth/oauth/${p}/authorize${oauthQuery}`, "aria-label": `Sign up with ${SOCIAL_LABELS[p]}`, children: ["Continue with ", SOCIAL_LABELS[p]] }, p))), enabledWallets.map((w) => (_jsxs("a", { className: "af-social-btn", href: `${baseUrl}/v1/auth/web3/${w}/authorize${oauthQuery}`, "aria-label": `Sign up with ${WALLET_LABELS[w]}`, children: [_jsx("span", { className: "af-social-icon", "aria-hidden": true, style: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    background: WALLET_COLORS[w] ?? '#6b7280',
+                                                    color: 'white',
+                                                    borderRadius: 4,
+                                                    fontSize: 9,
+                                                    fontWeight: 700,
+                                                    textTransform: 'uppercase',
+                                                }, children: (WALLET_LABELS[w] ?? w).slice(0, 1) }), "Continue with ", WALLET_LABELS[w]] }, w)))] }), (showEmail || showUsername || showPhone) && _jsx("div", { className: "af-divider", children: "or" })] })), (showEmail || showUsername || showPhone) && (_jsxs("form", { onSubmit: submit, children: [showEmail && (_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", htmlFor: "af-signup-email", children: "Email" }), _jsx("input", { id: "af-signup-email", className: "af-input", type: "email", autoComplete: "email", required: su?.emailRequired ?? true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com" })] })), showUsername && (_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", htmlFor: "af-signup-username", children: "Username" }), _jsx("input", { id: "af-signup-username", className: "af-input", type: "text", autoComplete: "username", required: usernameRequired, minLength: su?.username?.minLength ?? 4, maxLength: su?.username?.maxLength ?? 64, value: username, onChange: (e) => setUsername(e.target.value), placeholder: "yourname" })] })), showPhone && (_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", htmlFor: "af-signup-phone", children: "Phone" }), _jsx("input", { id: "af-signup-phone", className: "af-input", type: "tel", autoComplete: "tel", value: phone, onChange: (e) => setPhone(e.target.value), placeholder: "+14155551234" })] })), showFirstAndLastName && (_jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsxs("div", { className: "af-field", style: { flex: 1 }, children: [_jsx("label", { className: "af-label", htmlFor: "af-signup-first", children: "First name" }), _jsx("input", { id: "af-signup-first", className: "af-input", type: "text", autoComplete: "given-name", required: requireFirstAndLastName, value: firstName, onChange: (e) => setFirstName(e.target.value) })] }), _jsxs("div", { className: "af-field", style: { flex: 1 }, children: [_jsx("label", { className: "af-label", htmlFor: "af-signup-last", children: "Last name" }), _jsx("input", { id: "af-signup-last", className: "af-input", type: "text", autoComplete: "family-name", required: requireFirstAndLastName, value: lastName, onChange: (e) => setLastName(e.target.value) })] })] })), showPassword && (_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", htmlFor: "af-signup-password", children: "Password" }), _jsx("input", { id: "af-signup-password", className: "af-input", type: "password", autoComplete: "new-password", required: true, minLength: 8, value: password, onChange: (e) => setPassword(e.target.value), placeholder: "At least 8 characters" })] })), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: loading, children: loading ? 'Creating account…' : 'Create account' }) })] })), config && !hasSomething && (_jsx("div", { className: "af-error", children: "No sign-up methods are enabled for this app. Enable at least one identifier (email, username, phone, or a social provider) in the Authfyio dashboard." }))] })), error && _jsx("div", { className: "af-error", children: error }), (legal?.termsOfServiceUrl || legal?.privacyPolicyUrl) && (_jsxs("div", { className: "af-legal", children: ["By creating an account you agree to our", ' ', legal?.termsOfServiceUrl && (_jsxs(_Fragment, { children: [_jsx("a", { href: legal.termsOfServiceUrl, target: "_blank", rel: "noreferrer", children: "Terms" }), legal?.privacyPolicyUrl ? ' and ' : '.'] })), legal?.privacyPolicyUrl && (_jsxs(_Fragment, { children: [_jsx("a", { href: legal.privacyPolicyUrl, target: "_blank", rel: "noreferrer", children: "Privacy Policy" }), "."] }))] })), signUpEnabled && (_jsxs("div", { className: "af-footer", children: ["Already have an account? ", _jsx("a", { href: signInUrl, children: "Sign in" })] })), showPoweredBy && (_jsxs("div", { className: "af-powered", children: ["Powered by ", _jsx("a", { href: "https://authfyio.com", target: "_blank", rel: "noreferrer", children: "Authfyio" })] }))] }));
+}

package/dist/ui/UnstyledButtons.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * Unstyled button wrappers — they inherit your app's own styling. Use them
+ * when you want sign-in / sign-up / sign-out behavior without the prebuilt
+ * card UI: <SignInButton />, <SignUpButton />, <SignOutButton />.
+ */
+type ButtonProps = {
+    children?: React.ReactNode;
+    className?: string;
+    /** Path to your own sign-in / sign-up page. Default '/sign-in' / '/sign-up'. */
+    url?: string;
+    /** Preserve current URL as a redirect_url query param (default true). */
+    preserveReturnPath?: boolean;
+};
+export declare function SignInButton({ children, className, url, preserveReturnPath }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignUpButton({ children, className, url, preserveReturnPath }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+type SignOutProps = {
+    children?: React.ReactNode;
+    className?: string;
+    redirectUrl?: string;
+};
+export declare function UnstyledSignOutButton({ children, className, redirectUrl }: SignOutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UnstyledButtons.d.ts.map

package/dist/ui/UnstyledButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledButtons.d.ts","sourceRoot":"","sources":["../../src/ui/UnstyledButtons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;GAIG;AAEH,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAgB,EAAE,kBAAyB,EAAE,EAAE,WAAW,2CAU7G;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAgB,EAAE,kBAAyB,EAAE,EAAE,WAAW,2CAU7G;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAiB,EAAE,EAAE,YAAY,2CAe7F"}

package/dist/ui/UnstyledButtons.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuthfyio } from '../provider.js';
+export function SignInButton({ children, className, url = '/sign-in', preserveReturnPath = true }) {
+    return (_jsx("a", { href: buildHref(url, preserveReturnPath), className: className, style: className ? undefined : inlineLinkStyle, children: children ?? 'Sign in' }));
+}
+export function SignUpButton({ children, className, url = '/sign-up', preserveReturnPath = true }) {
+    return (_jsx("a", { href: buildHref(url, preserveReturnPath), className: className, style: className ? undefined : inlineLinkStyle, children: children ?? 'Sign up' }));
+}
+export function UnstyledSignOutButton({ children, className, redirectUrl = '/' }) {
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    async function onClick() {
+        try {
+            await fetch(`${baseUrl}/v1/auth/sign-out`, { method: 'POST', credentials: 'include' });
+        }
+        finally {
+            if (typeof window !== 'undefined')
+                window.location.href = redirectUrl;
+        }
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, className: className, style: className ? undefined : inlineButtonStyle, children: children ?? 'Sign out' }));
+}
+function buildHref(path, preserve) {
+    if (!preserve || typeof window === 'undefined')
+        return path;
+    const ret = window.location.pathname + window.location.search;
+    if (!ret || ret === '/')
+        return path;
+    const sep = path.includes('?') ? '&' : '?';
+    return `${path}${sep}redirect_url=${encodeURIComponent(ret)}`;
+}
+const inlineLinkStyle = { color: 'inherit', textDecoration: 'underline' };
+const inlineButtonStyle = {
+    font: 'inherit',
+    background: 'transparent',
+    border: 0,
+    padding: 0,
+    cursor: 'pointer',
+    color: 'inherit',
+    textDecoration: 'underline',
+};

package/dist/ui/UserAvatar.d.ts

@@ -0,0 +1,14 @@
+export type UserAvatarProps = {
+    /** Avatar edge length in px. Default 28. */
+    size?: number;
+    className?: string;
+    /** Render only the fallback initials (skip the Gravatar network call). */
+    disableImage?: boolean;
+};
+/**
+ * Standalone avatar — just the circle, no dropdown. Gravatar with an
+ * identicon fallback; renders the user's initials while the image is
+ * loading and when no image is available.
+ */
+export declare function UserAvatar({ size, className, disableImage }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserAvatar.d.ts.map

package/dist/ui/UserAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../src/ui/UserAvatar.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,eAAe,GAAG;IAC5B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,eAAe,2CA0CjF"}

package/dist/ui/UserAvatar.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useUser } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Standalone avatar — just the circle, no dropdown. Gravatar with an
+ * identicon fallback; renders the user's initials while the image is
+ * loading and when no image is available.
+ */
+export function UserAvatar({ size = 28, className, disableImage }) {
+    useEffect(ensureStylesInjected, []);
+    const { user } = useUser();
+    const email = user?.email ?? '';
+    const displayName = user?.firstName
+        ? `${user.firstName}${user.lastName ? ' ' + user.lastName : ''}`
+        : email.split('@')[0] || 'U';
+    const initials = getInitials(displayName, email);
+    const fontSize = Math.round(size * 0.4);
+    return (_jsxs("span", { className: className, style: {
+            width: size,
+            height: size,
+            borderRadius: '999px',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            position: 'relative',
+            background: 'rgba(17,24,39,0.06)',
+            color: '#4b5563',
+            fontSize,
+            fontWeight: 600,
+        }, "aria-label": `Avatar for ${displayName}`, children: [!disableImage && email && (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: gravatar(email, size * 2), alt: "", width: size, height: size, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } })), _jsx("span", { style: { position: 'relative' }, children: initials })] }));
+}
+function getInitials(name, email) {
+    const src = (name && name.trim()) || email || '?';
+    const parts = src.trim().split(/\s+/);
+    if (parts.length >= 2)
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    return parts[0].slice(0, 2).toUpperCase();
+}
+function gravatar(email, size) {
+    // Cheap stable hash — good enough for deterministic identicon fallbacks.
+    let h = 5381;
+    const norm = email.trim().toLowerCase();
+    for (let i = 0; i < norm.length; i++)
+        h = ((h << 5) + h + norm.charCodeAt(i)) | 0;
+    const hex = (h >>> 0).toString(16).padStart(8, '0');
+    return `https://www.gravatar.com/avatar/${hex.repeat(4)}?s=${size}&d=identicon`;
+}

package/dist/ui/UserButton.d.ts

@@ -0,0 +1,15 @@
+export type UserButtonProps = {
+    /** Redirect target after sign-out. Default '/'. */
+    afterSignOutUrl?: string;
+    /** Path to the user profile page (linked from the dropdown). Default '/user'. */
+    userProfileUrl?: string;
+    /** Show email under the name in the menu head. Default true. */
+    showEmail?: boolean;
+};
+/**
+ * Avatar button that opens a dropdown with "Manage account" and "Sign out".
+ * Invisible when signed out — wrap in
+ * <SignedIn> or guard yourself.
+ */
+export declare function UserButton({ afterSignOutUrl, userProfileUrl, showEmail, }: UserButtonProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=UserButton.d.ts.map

package/dist/ui/UserButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../../src/ui/UserButton.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG;IAC5B,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,eAAqB,EACrB,cAAwB,EACxB,SAAgB,GACjB,EAAE,eAAe,kDAyFjB"}

package/dist/ui/UserButton.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { useAuth, useUser } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Avatar button that opens a dropdown with "Manage account" and "Sign out".
+ * Invisible when signed out — wrap in
+ * <SignedIn> or guard yourself.
+ */
+export function UserButton({ afterSignOutUrl = '/', userProfileUrl = '/user', showEmail = true, }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const auth = useAuth();
+    const { user } = useUser();
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        function onDocClick(e) {
+            if (!rootRef.current)
+                return;
+            if (!rootRef.current.contains(e.target))
+                setOpen(false);
+        }
+        function onKey(e) {
+            if (e.key === 'Escape')
+                setOpen(false);
+        }
+        window.addEventListener('mousedown', onDocClick);
+        window.addEventListener('keydown', onKey);
+        return () => {
+            window.removeEventListener('mousedown', onDocClick);
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [open]);
+    async function signOut() {
+        try {
+            await fetch(`${baseUrl}/v1/auth/sign-out`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+        }
+        finally {
+            if (typeof window !== 'undefined')
+                window.location.href = afterSignOutUrl;
+        }
+    }
+    if (!auth.isSignedIn)
+        return null;
+    const email = user?.email ?? '';
+    const displayName = user?.firstName
+        ? `${user.firstName}${user.lastName ? ' ' + user.lastName : ''}`
+        : email.split('@')[0] || 'User';
+    const initials = getInitials(displayName, email);
+    const avatar = email ? gravatar(email) : null;
+    return (_jsxs("div", { ref: rootRef, style: { position: 'relative', display: 'inline-block' }, children: [_jsxs("button", { type: "button", className: "af-user-btn", onClick: () => setOpen((v) => !v), "aria-haspopup": "menu", "aria-expanded": open, children: [_jsxs("span", { className: "af-avatar", "aria-hidden": true, children: [avatar && _jsx("img", { src: avatar, alt: "" }), !avatar && initials] }), _jsx("span", { children: displayName })] }), open && (_jsxs("div", { className: "af-menu", role: "menu", children: [_jsxs("div", { className: "af-menu-head", children: [_jsxs("span", { className: "af-avatar af-avatar-lg", "aria-hidden": true, style: { width: 40, height: 40, fontSize: 12 }, children: [avatar && _jsx("img", { src: avatar, alt: "" }), !avatar && initials] }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("div", { className: "af-menu-head-name", children: displayName }), showEmail && email && _jsx("div", { className: "af-menu-head-email", children: email })] })] }), _jsx("a", { href: userProfileUrl, className: "af-menu-item", role: "menuitem", children: "Manage account" }), _jsx("div", { className: "af-menu-sep" }), _jsx("button", { type: "button", className: "af-menu-item af-menu-item-danger", role: "menuitem", onClick: signOut, children: "Sign out" })] }))] }));
+}
+function getInitials(name, email) {
+    const src = (name && name.trim()) || email || '?';
+    const parts = src.trim().split(/\s+/);
+    if (parts.length >= 2)
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    return parts[0].slice(0, 2).toUpperCase();
+}
+function gravatar(email) {
+    // md5 of the lowercased, trimmed email — computed at request time in the
+    // browser via SubtleCrypto where available, else we fall back to a simple
+    // hash (not cryptographically correct for Gravatar, but keeps us from
+    // bundling md5). We use Gravatar's "identicon" fallback so everyone gets
+    // a unique-looking avatar even without a registered profile.
+    const normalized = email.trim().toLowerCase();
+    // Tiny djb2 hash → hex; collides like crazy but good enough for fallbacks.
+    let h = 5381;
+    for (let i = 0; i < normalized.length; i++)
+        h = ((h << 5) + h + normalized.charCodeAt(i)) | 0;
+    const hex = (h >>> 0).toString(16).padStart(8, '0');
+    return `https://www.gravatar.com/avatar/${hex.repeat(4)}?s=80&d=identicon`;
+}

package/dist/ui/UserProfile.d.ts

@@ -0,0 +1,19 @@
+type Tab = 'profile' | 'security' | 'sessions';
+export type UserProfileProps = {
+    /** Default open tab. */
+    initialTab?: Tab;
+    /** Called after the user saves profile changes. */
+    onUpdate?: (user: {
+        firstName: string | null;
+        lastName: string | null;
+    }) => void;
+};
+/**
+ * Self-service user profile card. Tabs: Profile (name/email), Security
+ * (password change, future MFA), Sessions (future). Minimal scaffolding —
+ * uses the public instance API endpoints available today, with room for
+ * future expansion.
+ */
+export declare function UserProfile({ initialTab, onUpdate }: UserProfileProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UserProfile.d.ts.map

package/dist/ui/UserProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfile.d.ts","sourceRoot":"","sources":["../../src/ui/UserProfile.tsx"],"names":[],"mappings":"AAQA,KAAK,GAAG,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wBAAwB;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;CAClF,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,UAAsB,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA2DjF"}

package/dist/ui/UserProfile.js

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { useUser } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Self-service user profile card. Tabs: Profile (name/email), Security
+ * (password change, future MFA), Sessions (future). Minimal scaffolding —
+ * uses the public instance API endpoints available today, with room for
+ * future expansion.
+ */
+export function UserProfile({ initialTab = 'profile', onUpdate }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const { user, isLoaded } = useUser();
+    const [tab, setTab] = useState(initialTab);
+    if (!isLoaded) {
+        return (_jsx("div", { className: "af-card", style: { maxWidth: 720 }, children: _jsx("div", { className: "af-subtitle", children: "Loading\u2026" }) }));
+    }
+    if (!user) {
+        return (_jsx("div", { className: "af-card", style: { maxWidth: 720 }, children: _jsx("div", { className: "af-error", children: "You are not signed in." }) }));
+    }
+    return (_jsxs("div", { className: "af-card", style: { maxWidth: 720 }, children: [_jsx("h1", { className: "af-title", children: "Account" }), _jsx("p", { className: "af-subtitle", children: "Manage your profile, credentials, and active sessions." }), _jsxs("div", { className: "af-profile", children: [_jsxs("div", { className: "af-profile-nav", role: "tablist", children: [_jsx("button", { role: "tab", className: `af-profile-nav-item${tab === 'profile' ? ' is-active' : ''}`, onClick: () => setTab('profile'), children: "Profile" }), _jsx("button", { role: "tab", className: `af-profile-nav-item${tab === 'security' ? ' is-active' : ''}`, onClick: () => setTab('security'), children: "Security" }), _jsx("button", { role: "tab", className: `af-profile-nav-item${tab === 'sessions' ? ' is-active' : ''}`, onClick: () => setTab('sessions'), children: "Sessions" })] }), _jsxs("div", { className: "af-profile-panel", role: "tabpanel", children: [tab === 'profile' && _jsx(ProfileTab, { baseUrl: baseUrl, user: user, onUpdate: onUpdate }), tab === 'security' && _jsx(SecurityTab, { baseUrl: baseUrl }), tab === 'sessions' && _jsx(SessionsTab, { baseUrl: baseUrl })] })] })] }));
+}
+function ProfileTab({ baseUrl, user, onUpdate, }) {
+    const [firstName, setFirstName] = useState(user.firstName ?? '');
+    const [lastName, setLastName] = useState(user.lastName ?? '');
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
+    async function save(e) {
+        e.preventDefault();
+        setSaving(true);
+        setError(null);
+        setSaved(false);
+        try {
+            const res = await fetch(`${baseUrl}/v1/sessions/current`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    firstName: firstName || null,
+                    lastName: lastName || null,
+                }),
+            });
+            if (!res.ok)
+                throw new Error('Could not save profile.');
+            setSaved(true);
+            if (onUpdate)
+                onUpdate({ firstName: firstName || null, lastName: lastName || null });
+        }
+        catch (err) {
+            setError(err?.message ?? 'Could not save profile.');
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: save, children: [_jsx("h3", { children: "Profile" }), _jsx("p", { className: "af-sub", children: "Your public identity across this application." }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", htmlFor: "af-first", children: "First name" }), _jsx("input", { id: "af-first", className: "af-input", value: firstName, onChange: (e) => setFirstName(e.target.value), maxLength: 60 })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", htmlFor: "af-last", children: "Last name" }), _jsx("input", { id: "af-last", className: "af-input", value: lastName, onChange: (e) => setLastName(e.target.value), maxLength: 60 })] }), _jsxs("div", { className: "af-row", children: [_jsx("span", { className: "af-row-key", children: "Email" }), _jsx("span", { className: "af-row-val", children: user.email ?? '—' })] }), _jsxs("div", { className: "af-row", children: [_jsx("span", { className: "af-row-key", children: "Username" }), _jsx("span", { className: "af-row-val", children: user.username ?? _jsx("span", { style: { color: '#9ca3af' }, children: "Not set" }) })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: saving, style: { width: 'auto' }, children: saving ? 'Saving…' : 'Save changes' }) }), error && _jsx("div", { className: "af-error", children: error }), saved && _jsx("div", { className: "af-notice", children: "Saved." })] }));
+}
+function SecurityTab({ baseUrl }) {
+    const [currentPassword, setCurrent] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [confirm, setConfirm] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [ok, setOk] = useState(false);
+    async function submit(e) {
+        e.preventDefault();
+        setError(null);
+        setOk(false);
+        if (newPassword.length < 8)
+            return setError('New password must be at least 8 characters.');
+        if (newPassword !== confirm)
+            return setError('Passwords do not match.');
+        setSaving(true);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/me/password`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ currentPassword, newPassword }),
+            });
+            if (!res.ok)
+                throw new Error('Could not update password.');
+            setOk(true);
+            setCurrent('');
+            setNewPassword('');
+            setConfirm('');
+        }
+        catch (err) {
+            setError(err?.message ?? 'Could not update password.');
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: submit, children: [_jsx("h3", { children: "Security" }), _jsx("p", { className: "af-sub", children: "Update your password. Active sessions are not signed out automatically." }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Current password" }), _jsx("input", { className: "af-input", type: "password", autoComplete: "current-password", required: true, value: currentPassword, onChange: (e) => setCurrent(e.target.value) })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "New password" }), _jsx("input", { className: "af-input", type: "password", autoComplete: "new-password", required: true, value: newPassword, onChange: (e) => setNewPassword(e.target.value) })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Confirm new password" }), _jsx("input", { className: "af-input", type: "password", autoComplete: "new-password", required: true, value: confirm, onChange: (e) => setConfirm(e.target.value) })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: saving, style: { width: 'auto' }, children: saving ? 'Updating…' : 'Update password' }) }), error && _jsx("div", { className: "af-error", children: error }), ok && _jsx("div", { className: "af-notice", children: "Password updated." })] }), _jsx(MfaEnrollSection, { baseUrl: baseUrl })] }));
+}
+/**
+ * Two-factor (TOTP authenticator) enrollment. Generates a secret, has the user
+ * confirm a code from their authenticator app, then reveals one-time backup
+ * codes. Mirrors the instance API: /me/totp/generate -> /me/totp/verify ->
+ * /me/backup-codes/generate.
+ */
+function MfaEnrollSection({ baseUrl }) {
+    const [step, setStep] = useState('idle');
+    const [secret, setSecret] = useState('');
+    const [otpauth, setOtpauth] = useState('');
+    const [code, setCode] = useState('');
+    const [backupCodes, setBackupCodes] = useState([]);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    async function start() {
+        setBusy(true);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/me/totp/generate`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+            if (!res.ok)
+                throw new Error('Could not start enrollment.');
+            const body = (await res.json());
+            setOtpauth(body.otpauth ?? '');
+            setSecret(body.secret ?? '');
+            setStep('verify');
+        }
+        catch (err) {
+            setError(err?.message ?? 'Could not start enrollment.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function confirm(e) {
+        e.preventDefault();
+        setBusy(true);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/me/totp/verify`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ code: code.trim() }),
+            });
+            const body = (await res.json().catch(() => ({})));
+            if (!res.ok || !body.ok)
+                throw new Error('That code is not valid. Try again.');
+            // Issue recovery codes now that the factor is confirmed.
+            const bc = await fetch(`${baseUrl}/v1/auth/me/backup-codes/generate`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+            const bcBody = (await bc.json().catch(() => ({})));
+            setBackupCodes(bcBody.codes ?? []);
+            setStep('done');
+        }
+        catch (err) {
+            setError(err?.message ?? 'Verification failed.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { style: { marginTop: 28, borderTop: '1px solid var(--af-border, #e5e7eb)', paddingTop: 20 }, children: [_jsx("h3", { children: "Two-step verification" }), _jsx("p", { className: "af-sub", children: "Add an authenticator app (TOTP) for a second factor at sign-in." }), step === 'idle' && (_jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "button", className: "af-btn af-btn-primary", disabled: busy, style: { width: 'auto' }, onClick: start, children: busy ? 'Please wait…' : 'Enable authenticator app' }) })), step === 'verify' && (_jsxs("form", { onSubmit: confirm, children: [_jsx("p", { className: "af-sub", children: "Add this secret key to your authenticator app, then enter the 6-digit code it shows." }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Secret key" }), _jsx("input", { className: "af-input", readOnly: true, value: secret, onFocus: (e) => e.currentTarget.select() })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Authenticator code" }), _jsx("input", { className: "af-input", inputMode: "numeric", autoComplete: "one-time-code", required: true, value: code, onChange: (e) => setCode(e.target.value), placeholder: "123456" })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: busy, style: { width: 'auto' }, children: busy ? 'Verifying…' : 'Confirm & enable' }) })] })), step === 'done' && (_jsxs("div", { children: [_jsx("div", { className: "af-notice", children: "Two-step verification is on." }), backupCodes.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { className: "af-sub", style: { marginTop: 14 }, children: "Save these one-time backup codes somewhere safe \u2014 each works once if you lose your authenticator." }), _jsx("pre", { className: "af-input", style: { whiteSpace: 'pre-wrap', fontFamily: 'monospace' }, children: backupCodes.join('\n') })] }))] })), error && _jsx("div", { className: "af-error", children: error })] }));
+}
+function SessionsTab({ baseUrl }) {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                // Per-user session listing is on the roadmap; for now we offer a
+                // bulk sign-out action that ends every session for the user.
+                setLoading(false);
+            }
+            catch {
+                if (!cancelled)
+                    setError('Could not load sessions.');
+            }
+        })();
+        return () => { cancelled = true; };
+    }, []);
+    async function endAll() {
+        try {
+            await fetch(`${baseUrl}/v1/auth/sign-out/all`, { method: 'POST', credentials: 'include' });
+            if (typeof window !== 'undefined')
+                window.location.href = '/';
+        }
+        catch (err) {
+            setError(err?.message ?? 'Failed to sign out.');
+        }
+    }
+    return (_jsxs("div", { children: [_jsx("h3", { children: "Active sessions" }), _jsx("p", { className: "af-sub", children: "Manage your signed-in devices." }), loading && _jsx("div", { className: "af-subtitle", children: "Loading\u2026" }), error && _jsx("div", { className: "af-error", children: error }), _jsxs("div", { className: "af-row", children: [_jsx("span", { className: "af-row-key", children: "This device" }), _jsx("span", { className: "af-pill af-pill-success", children: "Current" })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "button", className: "af-btn af-btn-danger", onClick: endAll, style: { width: 'auto' }, children: "Sign out of all devices" }) })] }));
+}