@frank-auth/react/dist/cjs/components/auth/user-profile/mfa-setup.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@heroui/react"),D=require("react"),q=require("../../../hooks/use-config.cjs"),S=require("../../../hooks/use-mfa.cjs"),W=require("../../forms/phone-field.cjs"),A=require("../../forms/verification-code.cjs"),H=n=>n&&n.__esModule?n:{default:n},x=H(D);function G({onSuccess:n,onError:i,onClose:j,isOpen:u}){const{setupTOTP:y,verifySetup:v}=S.useMFA(),[f,h]=x.default.useState("setup"),[c,N]=x.default.useState(null),[l,m]=x.default.useState(""),[p,r]=x.default.useState(!1);x.default.useEffect(()=>{u||(h("setup"),N(null),m(""))},[u]);const g=async()=>{try{r(!0);const a=await y();N(a),h("verify")}catch(a){const o=a instanceof Error?a.message:"Failed to setup TOTP";i(o)}finally{r(!1)}},b=async()=>{if(!l||l.length!==6){i("Please enter a valid 6-digit code");return}try{r(!0),await v("totp",l),n("TOTP authentication enabled successfully"),j()}catch(a){const o=a instanceof Error?a.message:"Failed to verify TOTP";i(o)}finally{r(!1)}};return e.jsxs("div",{className:"space-y-4",children:[f==="setup"&&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:"M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z"})})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Setup Authenticator App"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"We'll help you setup two-factor authentication using an authenticator app like Google Authenticator or Authy."})]}),e.jsxs("div",{className:"text-left space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 bg-primary text-white text-xs rounded-full flex-shrink-0",children:"1"}),e.jsx("p",{className:"text-sm",children:"Install an authenticator app on your phone"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 bg-default-300 text-default-600 text-xs rounded-full flex-shrink-0",children:"2"}),e.jsx("p",{className:"text-sm",children:"Scan the QR code or enter the secret key"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 bg-default-300 text-default-600 text-xs rounded-full flex-shrink-0",children:"3"}),e.jsx("p",{className:"text-sm",children:"Enter the 6-digit code from your app"})]})]}),e.jsx(s.Button,{color:"primary",onPress:g,isLoading:p,className:"w-full",children:"Get Started"})]}),f==="verify"&&c&&e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Scan QR Code"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"Scan this QR code with your authenticator app, or enter the secret key manually."})]}),c.qrCode&&e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"p-4 bg-white rounded-lg border",children:e.jsx(s.Image,{src:c.qrCode,alt:"QR Code",width:200,height:200})})}),c.secret&&e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium mb-2",children:"Or enter this secret key manually:"}),e.jsx(s.Snippet,{size:"sm",symbol:"",className:"w-full",children:c.secret})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium mb-2",children:"Enter the 6-digit code from your app:"}),e.jsx(A.VerificationCode,{length:6,value:l,onChange:m,onComplete:b})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(s.Button,{variant:"light",onPress:()=>h("setup"),isDisabled:p,className:"flex-1",children:"Back"}),e.jsx(s.Button,{color:"primary",onPress:b,isLoading:p,isDisabled:!l||l.length!==6,className:"flex-1",children:"Verify & Enable"})]})]})]})}function I({onSuccess:n,onError:i,onClose:j,isOpen:u}){const{setupSMS:y,verifySetup:v}=S.useMFA(),[f,h]=x.default.useState("phone"),[c,N]=x.default.useState(""),[l,m]=x.default.useState(""),[p,r]=x.default.useState(!1);x.default.useEffect(()=>{u||(h("phone"),N(""),m(""))},[u]);const g=async()=>{if(!c){i("Please enter a valid phone number");return}try{r(!0),await y(c),h("verify")}catch(a){const o=a instanceof Error?a.message:"Failed to setup SMS";i(o)}finally{r(!1)}},b=async()=>{if(!l||l.length!==6){i("Please enter a valid 6-digit code");return}try{r(!0),await v("sms",l),n("SMS authentication enabled successfully"),j()}catch(a){const o=a instanceof Error?a.message:"Failed to verify SMS";i(o)}finally{r(!1)}};return e.jsxs("div",{className:"space-y-4",children:[f==="phone"&&e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mx-auto mb-4",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:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})})}),e.jsx("h3",{className:"text-lg font-semibold",children:"Setup SMS Authentication"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"We'll send verification codes to your phone via SMS."})]}),e.jsx(W.PhoneField,{label:"Phone Number",placeholder:"Enter your phone number",value:c,onChange:N,required:!0}),e.jsx(s.Button,{color:"primary",onPress:g,isLoading:p,isDisabled:!c,className:"w-full",children:"Send Verification Code"})]}),f==="verify"&&e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-lg font-semibold",children:"Verify Phone Number"}),e.jsxs("p",{className:"text-sm text-default-500 mt-2",children:["We sent a 6-digit code to ",c,". Enter it below to verify."]})]}),e.jsx(A.VerificationCode,{length:6,value:l,onChange:m,onComplete:b}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(s.Button,{variant:"light",onPress:()=>h("phone"),isDisabled:p,className:"flex-1",children:"Back"}),e.jsx(s.Button,{color:"primary",onPress:b,isLoading:p,isDisabled:!l||l.length!==6,className:"flex-1",children:"Verify & Enable"})]})]})]})}function _({codes:n,onRegenerate:i,isLoading:j}){const[u,y]=x.default.useState(!1);return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"flex items-center justify-center w-16 h-16 bg-warning/10 rounded-full mx-auto mb-4",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 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("h3",{className:"text-lg font-semibold",children:"Backup Codes"}),e.jsx("p",{className:"text-sm text-default-500 mt-2",children:"Save these backup codes in a secure place. Each code can only be used once."})]}),e.jsx(s.Alert,{color:"warning",variant:"flat",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium",children:"Important:"}),e.jsxs("ul",{className:"text-xs space-y-1 ml-4",children:[e.jsx("li",{children:"• Store these codes in a secure location"}),e.jsx("li",{children:"• Each code can only be used once"}),e.jsx("li",{children:"• Generate new codes when you're running low"})]})]})}),n.length>0&&e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsx("p",{className:"text-sm font-medium",children:"Your backup codes:"}),e.jsxs(s.Button,{size:"sm",variant:"light",onPress:()=>y(!u),children:[u?"Hide":"Show"," Codes"]})]}),u&&e.jsx("div",{className:"grid grid-cols-2 gap-2",children:n.map((v,f)=>e.jsx(s.Code,{className:"text-xs",children:v},f))})]}),e.jsx(s.Button,{color:"primary",variant:"bordered",onPress:i,isLoading:j,className:"w-full",children:"Generate New Codes"})]})}function $({onSuccess:n,onError:i,showTOTPSetup:j=!0,showSMSSetup:u=!0,showEmailSetup:y=!1,showBackupCodes:v=!0,className:f="",isDisabled:h=!1,variant:c="bordered",size:N="md",defaultMethod:l="overview",hideMethods:m=[],customMethods:p=[]}){const{isEnabled:r,mfaMethods:g,backupCodes:b,hasTOTP:a,hasSMS:o,hasBackupCodes:Q,removeMFAMethod:F,regenerateBackupCodes:P,disable:O,isLoading:k}=S.useMFA(),{components:L}=q.useConfig(),C=s.useDisclosure(),w=s.useDisclosure(),[T,z]=x.default.useState(l),M=L.MFASetup;if(M)return e.jsx(M,{onSuccess:n,onError:i,showTOTPSetup:j,showSMSSetup:u,showEmailSetup:y,showBackupCodes:v,className:f,isDisabled:h,variant:c,size:N,defaultMethod:l,hideMethods:m,customMethods:p});const B=async t=>{try{await F(t),n?.("MFA method removed successfully")}catch(d){const V=d instanceof Error?d.message:"Failed to remove MFA method";i?.(V)}},E=async()=>{try{await O(),n?.("Two-factor authentication disabled")}catch(t){const d=t instanceof Error?t.message:"Failed to disable MFA";i?.(d)}},R=async()=>{try{await P(),n?.("Backup codes regenerated successfully")}catch(t){const d=t instanceof Error?t.message:"Failed to regenerate backup codes";i?.(d)}};return e.jsxs("div",{className:`space-y-6 ${f}`,children:[e.jsxs(s.Card,{variant:c,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 ${r?"bg-success/10":"bg-default/10"}`,children:e.jsx("svg",{className:`w-5 h-5 ${r?"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:"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"})})}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-md font-semibold",children:"Two-Factor Authentication"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Chip,{size:"sm",color:r?"success":"default",variant:"flat",children:r?"Enabled":"Disabled"}),r&&e.jsxs("span",{className:"text-xs text-default-500",children:[g.length," method",g.length!==1?"s":""," configured"]})]})]})]}),r&&e.jsx(s.Button,{variant:"light",color:"danger",size:"sm",onPress:E,isDisabled:h||k,children:"Disable MFA"})]})}),!r&&e.jsxs(e.Fragment,{children:[e.jsx(s.Divider,{}),e.jsx(s.CardBody,{children:e.jsx("p",{className:"text-sm text-default-600",children:"Add an extra layer of security to your account by enabling two-factor authentication. Choose from authenticator apps, SMS, or backup codes."})})]})]}),e.jsxs(s.Tabs,{selectedKey:T,onSelectionChange:t=>z(t),variant:"bordered",children:[e.jsx(s.Tab,{title:"Overview",children:e.jsxs("div",{className:"space-y-4",children:[j&&!m.includes("totp")&&e.jsx(s.Card,{variant:"flat",children:e.jsx(s.CardBody,{children:e.jsxs("div",{className:"flex items-center justify-between",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:"M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z"})})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"Authenticator App"}),e.jsx("p",{className:"text-xs text-default-500",children:"Use an app like Google Authenticator or Authy"})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[a&&e.jsx(s.Chip,{size:"sm",color:"success",variant:"flat",children:"Enabled"}),e.jsx(s.Button,{size:"sm",color:a?"danger":"primary",variant:a?"light":"solid",onPress:a?()=>B(g.find(t=>t.type==="totp")?.id||""):C.onOpen,isDisabled:h,children:a?"Remove":"Setup"})]})]})})}),u&&!m.includes("sms")&&e.jsx(s.Card,{variant:"flat",children:e.jsx(s.CardBody,{children:e.jsxs("div",{className:"flex items-center justify-between",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-secondary/10 rounded-lg",children: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:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:"SMS"}),e.jsx("p",{className:"text-xs text-default-500",children:"Receive codes via text message"})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[o&&e.jsx(s.Chip,{size:"sm",color:"success",variant:"flat",children:"Enabled"}),e.jsx(s.Button,{size:"sm",color:o?"danger":"primary",variant:o?"light":"solid",onPress:o?()=>B(g.find(t=>t.type==="sms")?.id||""):w.onOpen,isDisabled:h,children:o?"Remove":"Setup"})]})]})})})]})},"overview"),v&&!m.includes("backup-codes")&&e.jsx(s.Tab,{title:"Backup Codes",children:e.jsx(_,{codes:b,onRegenerate:R,isLoading:k})},"backup-codes"),p.map(t=>!m.includes(t.key)&&e.jsx(s.Tab,{title:t.name,children:t.setupComponent},t.key))]}),e.jsx(s.Modal,{isOpen:C.isOpen,onOpenChange:C.onOpenChange,size:"md",placement:"center",hideCloseButton:!0,children:e.jsx(s.ModalContent,{children:t=>e.jsxs(e.Fragment,{children:[e.jsx(s.ModalHeader,{}),e.jsx(s.ModalBody,{children:e.jsx(G,{onSuccess:d=>{n?.(d),t()},onError:d=>i?.(d),onClose:t,isOpen:C.isOpen})})]})})}),e.jsx(s.Modal,{isOpen:w.isOpen,onOpenChange:w.onOpenChange,size:"md",placement:"center",hideCloseButton:!0,children:e.jsx(s.ModalContent,{children:t=>e.jsxs(e.Fragment,{children:[e.jsx(s.ModalHeader,{}),e.jsx(s.ModalBody,{children:e.jsx(I,{onSuccess:d=>{n?.(d),t()},onError:d=>i?.(d),onClose:t,isOpen:w.isOpen})})]})})})]})}exports.MFASetup=$;
//# sourceMappingURL=mfa-setup.cjs.map