@privy-io/react-auth
Version:
React client for the Privy Auth API
13 lines (12 loc) • 12.4 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./context-D-ZJYjUg.js"),o=require("./get-is-unified-wallet-UpdjHxOV.js"),n=require("@heroicons/react/24/outline/ExclamationTriangleIcon"),s=require("./Layouts-D3TOcPhm.js"),a=require("./ModalHeader-BCPQgekO.js"),i=require("./shared-e1wjsjhc.js"),l=require("styled-components"),c=require("./Checkbox-DzxHC5tk.js"),d=require("@heroicons/react/24/outline/KeyIcon"),u=require("@heroicons/react/24/solid/CheckCircleIcon"),h=require("fast-password-entropy"),x=require("secure-password-utilities"),p=require("secure-password-utilities/wordlists"),j=require("@heroicons/react/24/outline/ArrowDownTrayIcon"),g=require("@heroicons/react/24/outline/ClipboardDocumentCheckIcon"),y=require("@heroicons/react/24/outline/DocumentDuplicateIcon"),m=require("@heroicons/react/24/solid/XCircleIcon"),f=require("./ScreenHeader-CgYJ5Fmg.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function b(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var w=/*#__PURE__*/v(n),k=/*#__PURE__*/v(d),S=/*#__PURE__*/v(u),C=/*#__PURE__*/v(h),I=/*#__PURE__*/b(x),B=/*#__PURE__*/v(j),R=/*#__PURE__*/v(g),P=/*#__PURE__*/v(y),E=/*#__PURE__*/v(m);const F=({buttonHideAnimations:t,buttonLoading:o,password:n,onSubmit:l,onBack:c})=>{let[d,u]=r.useState(!0),[h,x]=r.useState(!1),[p,j]=r.useState(""),g=n===p;return r.useEffect((()=>{p&&!h&&x(!0)}),[p]),/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(a.ModalHeader,{closeable:!1,backFn:c}),/*#__PURE__*/e.jsx(s.RefactorSpacerTop,{}),/*#__PURE__*/e.jsxs(i.EmbeddedWalletScreenContainer,{children:[/*#__PURE__*/e.jsxs(i.Header,{children:[/*#__PURE__*/e.jsx(w.default,{height:48,width:48,stroke:"var(--privy-color-background)",fill:"var(--privy-color-accent)"}),/*#__PURE__*/e.jsx("h3",{style:{color:"var(--privy-color-foreground)"},children:"Confirm your password"}),/*#__PURE__*/e.jsx("p",{style:{color:"var(--privy-color-foreground-2)"},children:"Please re-enter your password below to continue."})]}),/*#__PURE__*/e.jsxs(i.PasswordContainer,{children:[/*#__PURE__*/e.jsx(i.PasswordInput,{value:p,onChange:e=>j(e.target.value),onKeyUp:e=>{"Enter"===e.key&&l()},onBlur:()=>x(!0),placeholder:"confirm your password",type:d?"password":"text",style:{paddingRight:"2.3rem"}}),/*#__PURE__*/e.jsx(i.InputRightIcons,{style:{right:"0.75rem"},children:d?/*#__PURE__*/e.jsx(i.HiddenIcon,{onClick:()=>u(!1)}):/*#__PURE__*/e.jsx(i.ShownIcon,{onClick:()=>u(!0)})})]}),
/*#__PURE__*/e.jsx(i.StatusText,{"aria-hidden":!h||g,error:!0,children:"Passwords do not match"})]}),/*#__PURE__*/e.jsx(i.NoAnimationPrimaryButton,{onClick:l,loading:o,disabled:!g,$hideAnimations:t,children:"Continue"}),/*#__PURE__*/e.jsx(s.RefactorSpacerBottom,{}),/*#__PURE__*/e.jsx(a.BlobbyFooter,{})]})},q=({buttonHideAnimations:t,buttonLoading:o,onSubmit:n,onBack:l,config:d})=>{let[u,h]=r.useState(!1);/*#__PURE__*/return e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(a.ModalHeader,{closeable:!1,backFn:l}),/*#__PURE__*/e.jsx(s.RefactorSpacerTop,{}),/*#__PURE__*/e.jsxs(i.EmbeddedWalletScreenContainer,{children:[/*#__PURE__*/e.jsxs(i.Header,{children:[/*#__PURE__*/e.jsx(w.default,{height:48,width:48,stroke:"var(--privy-color-background)",fill:"var(--privy-color-error)"}),/*#__PURE__*/e.jsx("h3",{style:{color:"var(--privy-color-foreground)"},children:"Confirm you have saved"}),/*#__PURE__*/e.jsx("p",{style:{color:"var(--privy-color-foreground-2)"},children:"Losing access to your password means you will lose access to your account."})]}),/*#__PURE__*/e.jsx(i.Details,{children:/*#__PURE__*/e.jsxs(i.DetailItem,{style:{color:"var(--privy-color-error)",cursor:"pointer"},onClick:e=>{e.preventDefault(),h((e=>!e))},children:[/*#__PURE__*/e.jsx(c.Checkbox,{color:"var(--privy-color-error)",readOnly:!0,checked:u}),/*#__PURE__*/e.jsx(e.Fragment,{children:"I understand that if I lose my password and device, I will lose access to my account and my assets."})]})})]}),/*#__PURE__*/e.jsxs(H,{children:["user"===d.initiatedBy&&/*#__PURE__*/e.jsx(a.SecondaryButton,{onClick:d.onCancel,disabled:o,children:"Cancel"}),/*#__PURE__*/e.jsx(i.NoAnimationPrimaryButton,{onClick:n,loading:o,$hideAnimations:t,disabled:!u,children:"Set Password"})]}),/*#__PURE__*/e.jsx(s.RefactorSpacerBottom,{}),/*#__PURE__*/e.jsx(a.BlobbyFooter,{})]})};let H=l.styled.div`
display: flex;
gap: 10px;
`,A=/[a-z]/,D=/[A-Z]/,T=/[0-9]/,$="!@#$%^&*()\\-_+.",M=`a-zA-Z0-9${$}`,L=RegExp(`[${$}]`),U=RegExp(`[${M}]`);const O=RegExp(`^[${M}]{6,}$`);function W(e){return e>.9?"Strong":e>.5?"Medium":"Weak"}function z(e=""){return(.3*function(e){if(e.length<8)return 0;let r=0;return A.test(e)&&(r+=1),D.test(e)&&(r+=1),T.test(e)&&(r+=1),L.test(e)&&(r+=1),Math.max(0,Math.min(1,r/3))}(e)+C.default(e)/95)/2}const N=({buttonHideAnimations:t,buttonLoading:o,password:n="",config:l,isResettingPassword:c,onSubmit:d,onClose:u,onBack:h,onPasswordChange:x,onPasswordGenerate:p})=>{let[j,g]=r.useState(!1),[y,m]=r.useState(!1);r.useEffect((()=>{n&&!y&&m(!0)}),[n]);let f=r.useMemo((()=>y?6>(n?.length||0)?"Password must be at least 6 characters":O.test(n||"")?null:`Invalid characters used ( ${((e="")=>[...new Set(e.split("").filter((e=>!U.test(e))).map((e=>e.replace(" ","SPACE"))))])(n).join(" ")} )`:null),[n,y]),v=r.useMemo((()=>f?{value:0,label:"Weak"}:function(e=""){let r=z(e);return{value:r,label:W(r)}}(n)),[n,f]),b=r.useMemo((()=>!n?.length||!!f),[f,n]);/*#__PURE__*/return e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(a.ModalHeader,{onClose:u,closeable:"user"===l.initiatedBy,backFn:h}),/*#__PURE__*/e.jsx(s.RefactorSpacerTop,{}),/*#__PURE__*/e.jsxs(i.EmbeddedWalletScreenContainer,{children:[/*#__PURE__*/e.jsxs(i.Header,{children:[/*#__PURE__*/e.jsx(k.default,{height:48,width:48,stroke:"var(--privy-color-accent)"}),/*#__PURE__*/e.jsxs("h3",{style:{color:"var(--privy-color-foreground)"},children:[c?"Reset":"Set"," your password"]}),/*#__PURE__*/e.jsx("p",{style:{color:"var(--privy-color-foreground-2)"},children:"Select a strong, memorable password to secure your account."})]}),/*#__PURE__*/e.jsxs(i.PasswordContainer,{children:[/*#__PURE__*/e.jsx(i.PasswordInput,{value:n,onChange:e=>x(e.target.value),onKeyUp:e=>{"Enter"===e.key&&d()},placeholder:"enter or generate a strong password",type:j?"password":"text",style:{paddingRight:"3.8rem"}}),/*#__PURE__*/e.jsxs(i.InputRightIcons,{style:{width:"3.5rem"},children:[j?/*#__PURE__*/e.jsx(i.HiddenIcon,{onClick:()=>g(!1)}):/*#__PURE__*/e.jsx(i.ShownIcon,{onClick:()=>g(!0)}),/*#__PURE__*/e.jsx(i.RegenerateIcon,{onClick:p})]})]}),/*#__PURE__*/e.jsx(i.StrengthMeter,{value:0===v.value?.01:v.value,label:v.label}),/*#__PURE__*/e.jsx(i.StatusText,{error:!!f,children:f||`Password Strength: ${y?v.label:"--"}`}),/*#__PURE__*/e.jsxs(G,{children:[/*#__PURE__*/e.jsx(_,{children:/*#__PURE__*/e.jsxs(i.Details,{children:[/*#__PURE__*/e.jsxs(i.DetailItem,{children:[/*#__PURE__*/e.jsx(S.default,{width:24,height:24,fill:"var(--privy-color-accent)"}),"This password is used to secure your account."]}),/*#__PURE__*/e.jsxs(i.DetailItem,{children:[/*#__PURE__*/e.jsx(S.default,{width:24,height:24,fill:"var(--privy-color-accent)"}),"Use it to log in on a new environment, like another browser or device."]})]})}),/*#__PURE__*/e.jsx(i.NoAnimationPrimaryButton,{onClick:d,loading:o,disabled:b,$hideAnimations:t,children:"Continue"})]})]}),/*#__PURE__*/e.jsx(s.RefactorSpacerBottom,{}),/*#__PURE__*/e.jsx(a.BlobbyFooter,{})]})};let _=l.styled(i.Details)`
flex: 1;
padding-top: 1rem;
`,G=l.styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;const K=({buttonHideAnimations:t,buttonLoading:o,appName:n,password:l,onSubmit:c,onBack:d})=>{let[u,h]=r.useState(!1),[x,p]=r.useState(!0),j=r.useCallback((()=>{h(!0),l&&navigator.clipboard.writeText(l)}),[l]),g=r.useCallback((()=>{let e=document.createElement("a"),r=n.toLowerCase().replace(/[^a-z\s]/g,"").replace(/\s/g,"-"),t=new Blob([Y(n,l)],{type:"text/plain"}),o=URL.createObjectURL(t);e.href=o,e.target="_blank",e.download=`${r}-privy-wallet-recovery.txt`,document.body.appendChild(e),e.click(),setTimeout((()=>{e.remove(),URL.revokeObjectURL(o)}),5e3)}),[l]);/*#__PURE__*/return e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(a.ModalHeader,{backFn:d,closeable:!1}),/*#__PURE__*/e.jsx(s.RefactorSpacerTop,{}),/*#__PURE__*/e.jsxs(i.EmbeddedWalletScreenContainer,{children:[/*#__PURE__*/e.jsxs(i.Header,{children:[/*#__PURE__*/e.jsx(w.default,{height:48,width:48,stroke:"var(--privy-color-background)",fill:"var(--privy-color-accent)"}),/*#__PURE__*/e.jsx("h3",{style:{color:"var(--privy-color-foreground)"},children:"Save your password"}),/*#__PURE__*/e.jsx("p",{style:{color:"var(--privy-color-foreground-2)"},children:"For your security, this password cannot be reset, so keep it somewhere safe."})]}),/*#__PURE__*/e.jsxs(i.PasswordContainer,{centered:!0,children:[/*#__PURE__*/e.jsx(i.PasswordDisplay,{children:x?"•".repeat(l.length):l}),/*#__PURE__*/e.jsx(i.InputRightIcons,{style:{right:"0.75rem"},children:x?/*#__PURE__*/e.jsx(i.HiddenIcon,{onClick:()=>p(!1)}):/*#__PURE__*/e.jsx(i.ShownIcon,{onClick:()=>p(!0)})})]}),/*#__PURE__*/e.jsxs("div",{style:{display:"flex",margin:"12px 0",gap:"12px"},children:[/*#__PURE__*/e.jsx(i.ExportButton,{onClick:j,children:u?/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(R.default,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Copied"]}):/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(P.default,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Copy"]})}),/*#__PURE__*/e.jsxs(i.ExportButton,{onClick:g,children:[/*#__PURE__*/e.jsx(B.default,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Download"]})]})]}),/*#__PURE__*/e.jsx(i.NoAnimationPrimaryButton,{onClick:c,loading:o,$hideAnimations:t,children:"Continue"}),/*#__PURE__*/e.jsx(s.RefactorSpacerBottom,{}),/*#__PURE__*/e.jsx(a.BlobbyFooter,{})]})};let Y=(e,r)=>`Your wallet recovery password for ${e} is\n\n${r}\n\nYou will need this password to access your ${e} wallet on a new device. Please keep it somewhere safe.`;const Z=({error:r,onClose:t})=>/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(a.ModalHeader,{closeable:!1}),/*#__PURE__*/e.jsx(s.RefactorSpacerTop,{}),r?/*#__PURE__*/e.jsxs(s.CenteredItemWithGap,{children:[/*#__PURE__*/e.jsx(E.default,{fill:"var(--privy-color-error)",width:"64px",height:"64px"}),/*#__PURE__*/e.jsx(f.CenteredScreenHeader,{title:"Something went wrong",description:r})]}):/*#__PURE__*/e.jsxs(s.CenteredItemWithGap,{children:[/*#__PURE__*/e.jsx(S.default,{fill:"var(--privy-color-success)",width:"64px",height:"64px"}),/*#__PURE__*/e.jsx(f.CenteredScreenHeader,{title:"Success"})]}),/*#__PURE__*/e.jsx(a.PrimaryButton,{onClick:t,children:"Close"}),/*#__PURE__*/e.jsx(s.RefactorSpacerBottom,{}),/*#__PURE__*/e.jsx(a.BlobbyFooter,{})]});let X=(e,r)=>{switch(e){case"creating":return"back"===r?e:"saving";case"saving":return"back"===r?"creating":"confirming";case"confirming":return"back"===r?"saving":"finalizing";case"finalizing":return"back"===r?"confirming":"done";default:return e}};exports.SetWalletPasswordForm=({onSubmit:n,...s})=>{let{lastScreen:a,navigate:i}=o.usePrivyModal(),{send:l,state:c}=(()=>{let[e,t]=r.useReducer(X,"creating");return{send:t,state:e}})(),d=r.useCallback((async()=>{"finalizing"===c&&await n(),l("next")}),[c,l,n]);r.useEffect((()=>{let e;return"done"===c&&"automatic"===s.config.initiatedBy&&(e=setTimeout((()=>s.onClose?.()),t.DEFAULT_SUCCESS_SCREEN_DURATION_MS)),()=>{e&&clearTimeout(e)}}),[c,s.config.initiatedBy,s.onClose]);let u=r.useCallback((()=>{l("back")}),[l]),h=r.useCallback((()=>{i("RecoverySelectionScreen")}),[a,i]);return"creating"===c?/*#__PURE__*/e.jsx(N,{...s,onSubmit:d,onBack:"RecoverySelectionScreen"===a?h:void 0}):"saving"===c?/*#__PURE__*/e.jsx(K,{...s,onSubmit:d,onBack:u}):"confirming"===c?/*#__PURE__*/e.jsx(F,{...s,onSubmit:d,onBack:u}):"finalizing"===c?/*#__PURE__*/e.jsx(q,{...s,onSubmit:d,onBack:u}):"done"===c?/*#__PURE__*/e.jsx(Z,{...s,onSubmit:d}):null},exports.generatePassphrase=()=>I.generatePassphrase(4,p.DEFAULT_WORDLIST);