@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
4 lines (3 loc) • 14.7 kB
JavaScript
'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),s=require("@heroui/react"),C=require("../../../hooks/use-passkeys.cjs"),z=require("../../../hooks/use-config.cjs"),D=t=>t&&t.__esModule?t:{default:t},y=D(A);function H({onSuccess:t,onError:c,onClose:m,isOpen:u}){const{registerPasskey:h,isSupported:p,isAvailable:o}=C.usePasskeys(),[d,n]=y.default.useState("intro"),[i,v]=y.default.useState(""),[g,l]=y.default.useState(!1);y.default.useEffect(()=>{if(!u)n("intro"),v("");else{const r=N();v(`${r.browser} on ${r.os}`)}},[u]);const N=()=>{const r=navigator.userAgent;let a="Unknown Browser",f="Unknown OS";return r.includes("Chrome")?a="Chrome":r.includes("Firefox")?a="Firefox":r.includes("Safari")?a="Safari":r.includes("Edge")&&(a="Edge"),r.includes("Windows")?f="Windows":r.includes("Mac")?f="macOS":r.includes("Linux")?f="Linux":r.includes("Android")?f="Android":r.includes("iOS")&&(f="iOS"),{browser:a,os:f}},P=async()=>{if(!i.trim()){c("Please enter a name for your passkey");return}try{l(!0),n("registering"),await h(i.trim()),t("Passkey registered successfully"),m()}catch(r){const a=r instanceof Error?r.message:"Failed to register passkey";c(a),n("name")}finally{l(!1)}};return p?o?e.jsxs("div",{className:"space-y-4",children:[d==="intro"&&e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mx-auto",children:e.jsx("svg",{className:"w-8 h-8 text-primary",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"})})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Create a Passkey"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"Passkeys are a secure and convenient way to sign in without a password."})]}),e.jsxs("div",{className:"text-left space-y-3",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 bg-success text-white text-xs rounded-full flex-shrink-0 mt-0.5",children:"✓"}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"More secure than passwords"}),e.jsx("p",{className:"text-xs text-default-500",children:"Protected by your device's security"})]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 bg-success text-white text-xs rounded-full flex-shrink-0 mt-0.5",children:"✓"}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"Fast and convenient"}),e.jsx("p",{className:"text-xs text-default-500",children:"Sign in with just your fingerprint or face"})]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 bg-success text-white text-xs rounded-full flex-shrink-0 mt-0.5",children:"✓"}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"Phishing resistant"}),e.jsx("p",{className:"text-xs text-default-500",children:"Can't be stolen or used on fake sites"})]})]})]}),e.jsx(s.Button,{color:"primary",onPress:()=>n("name"),className:"w-full",children:"Continue"})]}),d==="name"&&e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Name Your Passkey"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"Give your passkey a name so you can identify it later."})]}),e.jsx(s.Input,{label:"Passkey Name",placeholder:"Enter a name for this passkey",value:i,onValueChange:v,description:"For example: 'iPhone Touch ID' or 'YubiKey'",isInvalid:!i.trim(),errorMessage:i.trim()?"":"Name is required"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(s.Button,{variant:"light",onPress:()=>n("intro"),className:"flex-1",children:"Back"}),e.jsx(s.Button,{color:"primary",onPress:P,isDisabled:!i.trim(),className:"flex-1",children:"Create Passkey"})]})]}),d==="registering"&&e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mx-auto",children:e.jsx("svg",{className:"w-8 h-8 text-primary animate-pulse",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"})})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Creating Passkey..."}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"Follow your browser's prompts to complete the setup."})]}),e.jsx(s.Alert,{color:"primary",variant:"flat",children:e.jsxs("div",{className:"space-y-1",children:[e.jsx("p",{className:"text-sm font-medium",children:"What to expect:"}),e.jsxs("ul",{className:"text-xs space-y-1 ml-4",children:[e.jsx("li",{children:"• You may be asked to use your fingerprint, face, or PIN"}),e.jsx("li",{children:"• Or insert and tap your security key"}),e.jsx("li",{children:"• Allow the browser to create a passkey"})]})]})})]})]}):e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 bg-warning/10 rounded-full mx-auto",children:e.jsx("svg",{className:"w-8 h-8 text-warning",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"})})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold",children:"No Authenticator Available"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"No biometric or security key authenticator is available on this device."})]}),e.jsx(s.Button,{variant:"light",onPress:m,children:"Close"})]}):e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 bg-danger/10 rounded-full mx-auto",children:e.jsx("svg",{className:"w-8 h-8 text-danger",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"})})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Passkeys Not Supported"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"Your browser doesn't support passkeys. Please use a modern browser like Chrome, Firefox, Safari, or Edge."})]}),e.jsx(s.Button,{variant:"light",onPress:m,children:"Close"})]})}function F({passkey:t,onRename:c,onDelete:m,isDisabled:u}){const[h,p]=y.default.useState(!1),[o,d]=y.default.useState(t.name),n=()=>{o.trim()&&o!==t.name&&c(t.id,o.trim()),p(!1)},i=()=>{d(t.name),p(!1)},v=()=>(t.authenticatorType?.toLowerCase()||"").includes("platform")?e.jsx("svg",{className:"w-5 h-5 text-primary",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"})}):e.jsx("svg",{className:"w-5 h-5 text-secondary",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"})}),g=l=>new Date(l).toLocaleDateString(void 0,{year:"numeric",month:"short",day:"numeric"});return e.jsxs("div",{className:"flex items-center justify-between p-4 border border-default-200 rounded-lg",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-10 h-10 bg-default-100 rounded-lg",children:v()}),e.jsx("div",{className:"flex flex-col",children:h?e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Input,{value:o,onValueChange:d,size:"sm",className:"w-48",onKeyDown:l=>{l.key==="Enter"&&n(),l.key==="Escape"&&i()},autoFocus:!0}),e.jsx(s.Button,{size:"sm",color:"primary",onPress:n,children:"Save"}),e.jsx(s.Button,{size:"sm",variant:"light",onPress:i,children:"Cancel"})]}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm font-medium",children:t.name}),t.isPrimary&&e.jsx(s.Chip,{size:"sm",color:"primary",variant:"flat",children:"Primary"})]}),e.jsxs("div",{className:"flex items-center gap-2 text-xs text-default-500",children:[e.jsxs("span",{children:["Created ",g(t.createdAt)]}),t.lastUsedAt&&e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"•"}),e.jsxs("span",{children:["Last used ",g(t.lastUsedAt)]})]})]})]})})]}),!h&&e.jsxs(s.Dropdown,{children:[e.jsx(s.DropdownTrigger,{children:e.jsx(s.Button,{isIconOnly:!0,variant:"light",size:"sm",isDisabled:u,children:e.jsx("svg",{className:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"})})})}),e.jsxs(s.DropdownMenu,{children:[e.jsx(s.DropdownItem,{onPress:()=>p(!0),children:"Rename"},"rename"),e.jsx(s.DropdownItem,{color:"danger",onPress:()=>m(t.id),children:"Delete"},"delete")]})]})]})}function I({onSuccess:t,onError:c,className:m="",isDisabled:u=!1,variant:h="bordered",size:p="md",showRegistration:o=!0,showManagement:d=!0,maxPasskeys:n=10,hideSections:i=[],customTypes:v=[]}){const{passkeys:g,isSupported:l,isAvailable:N,deletePasskey:P,renamePasskey:r,passkeyCount:a,isLoading:f}=C.usePasskeys(),{components:L}=z.useConfig(),k=s.useDisclosure(),b=L.PasskeySetup;if(b)return e.jsx(b,{onSuccess:t,onError:c,className:m,isDisabled:u,variant:h,size:p,showRegistration:o,showManagement:d,maxPasskeys:n,hideSections:i,customTypes:v});const M=async x=>{try{await P(x),t?.("Passkey deleted successfully")}catch(j){const w=j instanceof Error?j.message:"Failed to delete passkey";c?.(w)}},B=async(x,j)=>{try{await r(x,j),t?.("Passkey renamed successfully")}catch(w){const S=w instanceof Error?w.message:"Failed to rename passkey";c?.(S)}};return e.jsxs("div",{className:`space-y-6 ${m}`,children:[e.jsxs(s.Card,{variant:h,children:[e.jsx(s.CardHeader,{children:e.jsxs("div",{className:"flex items-center justify-between w-full",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`flex items-center justify-center w-10 h-10 rounded-lg ${a>0?"bg-success/10":"bg-default/10"}`,children:e.jsx("svg",{className:`w-5 h-5 ${a>0?"text-success":"text-default-400"}`,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"})})}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-md font-semibold",children:"Passkeys"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"text-sm text-default-500",children:[a," of ",n," passkeys configured"]}),a>0&&e.jsx(s.Chip,{size:"sm",color:"success",variant:"flat",children:"Active"})]})]})]}),o&&l&&N&&a<n&&e.jsx(s.Button,{color:"primary",size:"sm",onPress:k.onOpen,isDisabled:u||f,children:"Add Passkey"})]})}),a===0&&e.jsxs(e.Fragment,{children:[e.jsx(s.Divider,{}),e.jsx(s.CardBody,{children:l?N?e.jsxs("div",{className:"space-y-3",children:[e.jsx("p",{className:"text-sm text-default-600",children:"Passkeys provide a secure and convenient way to sign in without passwords. They use your device's built-in security features like fingerprint, face recognition, or security keys."}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("svg",{className:"w-4 h-4 text-primary",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})}),e.jsx("p",{className:"text-xs text-default-500",children:"Passkeys are more secure than passwords and can't be stolen or phished."})]})]}):e.jsx(s.Alert,{color:"warning",variant:"flat",children:e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"No Authenticator Available"}),e.jsx("p",{className:"text-xs mt-1",children:"No biometric or security key authenticator is available on this device."})]})}):e.jsx(s.Alert,{color:"warning",variant:"flat",children:e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"Passkeys Not Supported"}),e.jsx("p",{className:"text-xs mt-1",children:"Your browser doesn't support passkeys. Please use a modern browser."})]})})})]})]}),d&&a>0&&!i.includes("management")&&e.jsxs(s.Card,{variant:h,children:[e.jsx(s.CardHeader,{children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-10 h-10 bg-primary/10 rounded-lg",children:e.jsx("svg",{className:"w-5 h-5 text-primary",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"})})}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-md font-semibold",children:"Your Passkeys"}),e.jsx("p",{className:"text-sm text-default-500",children:"Manage your registered passkeys"})]})]})}),e.jsx(s.Divider,{}),e.jsx(s.CardBody,{children:e.jsx("div",{className:"space-y-3",children:g.map(x=>e.jsx(F,{passkey:x,onRename:B,onDelete:M,isDisabled:u},x.id))})})]}),e.jsx(s.Modal,{isOpen:k.isOpen,onOpenChange:k.onOpenChange,size:"md",placement:"center",hideCloseButton:!0,children:e.jsx(s.ModalContent,{children:x=>e.jsxs(e.Fragment,{children:[e.jsx(s.ModalHeader,{}),e.jsx(s.ModalBody,{children:e.jsx(H,{onSuccess:j=>{t?.(j),x()},onError:j=>c?.(j),onClose:x,isOpen:k.isOpen})})]})})})]})}exports.PasskeySetup=I;
//# sourceMappingURL=passkey-setup.cjs.map