https://infisical.com/_next/static/chunks/3615.d7cab0ade550f858.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3615],{24418:(e,n,t)=>{"use strict";t.d(n,{N:()=>_});var a=t(4902),i=t(14232),s=t(27863),r=t(21214),l=t(50181);function o(){var e=(0,i.useRef)(!1);return(0,l.E)(function(){return e.current=!0,function(){e.current=!1}},[]),e}var c=t(3866),d=t(91200),u=t(35319),m=function(e){var n=e.children,t=e.initial,s=e.isPresent,r=e.onExitComplete,l=e.custom,o=e.presenceAffectsLayout,m=(0,d.M)(h),p=(0,u.B)(),v=(0,i.useMemo)(function(){return{id:p,initial:t,isPresent:s,custom:l,onExitComplete:function(e){var n,t;m.set(e,!0);try{for(var i=(0,a.Ju)(m.values()),s=i.next();!s.done;s=i.next())if(!s.value)return}catch(e){n={error:e}}finally{try{s&&!s.done&&(t=i.return)&&t.call(i)}finally{if(n)throw n.error}}null==r||r()},register:function(e){return m.set(e,!1),function(){return m.delete(e)}}}},o?void 0:[s]);return(0,i.useMemo)(function(){m.forEach(function(e,n){return m.set(n,!1)})},[s]),i.useEffect(function(){s||m.size||null==r||r()},[s]),i.createElement(c.t.Provider,{value:v},n)};function h(){return new Map}var p=t(5048),v=t(15590),x=function(e){return e.key||""},_=function(e){var n,t,c,d,u,h,_=e.children,f=e.custom,j=e.initial,g=void 0===j||j,y=e.onExitComplete,b=e.exitBeforeEnter,w=e.presenceAffectsLayout,E=void 0===w||w,N=(0,a.zs)((n=o(),c=(t=(0,a.zs)((0,i.useState)(0),2))[0],d=t[1],u=(0,i.useCallback)(function(){n.current&&d(c+1)},[c]),[(0,i.useCallback)(function(){return r.Ay.postRender(u)},[u]),c]),1)[0],T=(0,i.useContext)(p.L).forceRender;T&&(N=T);var A=o(),k=(h=[],i.Children.forEach(_,function(e){(0,i.isValidElement)(e)&&h.push(e)}),h),R=k,V=new Set,C=(0,i.useRef)(R),S=(0,i.useRef)(new Map).current,B=(0,i.useRef)(!0);if((0,l.E)(function(){B.current=!1,k.forEach(function(e){var n=x(e);S.set(n,e)}),C.current=R}),(0,v.l)(function(){B.current=!0,S.clear(),V.clear()}),B.current)return i.createElement(i.Fragment,null,R.map(function(e){return i.createElement(m,{key:x(e),isPresent:!0,initial:!!g&&void 0,presenceAffectsLayout:E},e)}));R=(0,a.fX)([],(0,a.zs)(R),!1);for(var L=C.current.map(x),D=k.map(x),P=L.length,F=0;F<P;F++){var M=L[F];-1===D.indexOf(M)&&V.add(M)}return b&&V.size&&(R=[]),V.forEach(function(e){if(-1===D.indexOf(e)){var n=S.get(e);if(n){var t=L.indexOf(e);R.splice(t,0,i.createElement(m,{key:x(n),isPresent:!1,onExitComplete:function(){S.delete(e),V.delete(e);var n=C.current.findIndex(function(n){return n.key===e});if(C.current.splice(n,1),!V.size){if(C.current=k,!1===A.current)return;N(),y&&y()}},custom:f,presenceAffectsLayout:E},n))}}}),R=R.map(function(e){var n=e.key;return V.has(n)?e:i.createElement(m,{key:x(e),isPresent:!0,presenceAffectsLayout:E},e)}),"production"!==s._&&b&&R.length>1&&console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour."),i.createElement(i.Fragment,null,V.size?R:R.map(function(e){return(0,i.cloneElement)(e)}))}},73615:(e,n,t)=>{"use strict";t.r(n),t.d(n,{DotenvRun:()=>S,ForkExec:()=>U,ParentProcesses:()=>P,RuntimeInjection:()=>H,SecretSprawl:()=>g,SetupComparison:()=>V});var a=t(37876),i=t(14232),s=t(57689),r=t(68194),l=t(24418),o=t(6353),c=t(49899),d=t(97088),u=t.n(d);let m="postgresql://app:[email protected]:5432/production",h=[["SHELL","/bin/zsh"],["USER","dev"],["HOME","/Users/dev"],["PATH","/opt/homebrew/bin:/usr/bin:/bin"],["TERM","xterm-ghostty"]],p=[.22,1,.36,1];function v(e,n){let t=(0,i.useRef)(n);t.current=n;let[a,s]=(0,i.useState)(null),r=(0,i.useCallback)(()=>{let n=e.current;if(!n)return;let a=n.getBoundingClientRect();if(!a.width)return;let i={frame:{width:a.width,height:a.height}};for(let[e,n]of Object.entries(t.current)){var r;let t=null==(r=n.current)?void 0:r.getBoundingClientRect();t&&(i[e]={x:t.left-a.left,y:t.top-a.top,width:t.width,height:t.height})}s(i)},[e]);return(0,i.useEffect)(()=>{let n=e.current;if(!n)return;let a=window.requestAnimationFrame(r),i=new ResizeObserver(r);return i.observe(n),Object.values(t.current).forEach(e=>{e.current&&i.observe(e.current)}),()=>{window.cancelAnimationFrame(a),i.disconnect()}},[e,r]),a}function x(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:900,t=(0,s.I)(),[a,r]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{let a,i=e.current;if(!i||"undefined"==typeof IntersectionObserver)return void r(!0);let s=new IntersectionObserver(e=>{let[i]=e;i.isIntersecting&&(s.disconnect(),a=window.setTimeout(()=>r(!0),t?0:n))},{threshold:.35});return s.observe(i),()=>{s.disconnect(),window.clearTimeout(a)}},[n,t,e]),{hasRun:a,reduce:t}}function _(e){let{children:n}=e;return(0,a.jsx)("p",{className:u().srOnly,children:n})}function f(e){let{children:n,bare:t=!1,className:i=""}=e;return(0,a.jsx)("figure",{className:"".concat(u().figure," ").concat(t?u().figureBare:""," ").concat(i),children:n})}let j=["M50 49 C44 39 28 24 17.5 18","M51 49 C62 34 76 22 84 18","M52 50 C64 50 76 49 83 47","M48 51 C37 63 26 73 20 78","M52 52 C56 65 61 76 63 84"];function g(){let e=(0,i.useRef)(null),{hasRun:n,reduce:t}=x(e,0),s=e=>t?{opacity:1,y:0}:{opacity:+!!n,y:6*!n,transition:{delay:.25+1.06*e+.62,duration:.32,ease:p}};return(0,a.jsxs)(f,{bare:!0,children:[(0,a.jsx)(_,{children:(0,o.fq)("secret-sprawl")}),(0,a.jsxs)("div",{ref:e,className:u().sprawl,"aria-hidden":"true",children:[(0,a.jsx)("svg",{className:u().sprawlTrails,viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true",children:j.map((e,i)=>(0,a.jsx)(r.P.path,{d:e,initial:!t&&{pathLength:0},animate:t?{pathLength:1}:{pathLength:+!!n,transition:{delay:.25+1.06*i,duration:.62,ease:p}}},e))}),(0,a.jsxs)("div",{className:u().secretSource,children:[(0,a.jsx)("span",{children:"DATABASE_URL"}),(0,a.jsxs)("code",{children:["postgresql://••••@db.internal/",(0,a.jsx)("wbr",{}),"production"]})]}),(0,a.jsxs)(r.P.section,{className:"".concat(u().sprawlTarget," ").concat(u().sprawlLaptop),initial:!t&&{opacity:0,y:6},animate:s(0),children:[(0,a.jsx)("div",{className:u().sprawlTargetHead,children:(0,a.jsx)("strong",{children:"~/project/.env"})}),(0,a.jsx)("code",{children:"DATABASE_URL=postgresql://•••"})]}),(0,a.jsxs)(r.P.section,{className:"".concat(u().sprawlTarget," ").concat(u().sprawlSlack),initial:!t&&{opacity:0,y:6},animate:s(1),children:[(0,a.jsx)("div",{className:u().sprawlTargetHead,children:(0,a.jsx)("strong",{children:"Slack"})}),(0,a.jsx)("p",{children:"Can you send the dev config?"}),(0,a.jsx)("span",{className:u().sprawlAttachment,children:"prod.env \xb7 1 KB"})]}),(0,a.jsxs)(r.P.section,{className:"".concat(u().sprawlTarget," ").concat(u().sprawlCi),initial:!t&&{opacity:0,y:6},animate:s(2),children:[(0,a.jsx)("div",{className:u().sprawlTargetHead,children:(0,a.jsx)("strong",{children:"CI variables"})}),(0,a.jsxs)("div",{className:u().sprawlKeyValue,children:[(0,a.jsx)("code",{children:"DATABASE_URL"}),(0,a.jsx)("span",{children:"••••••••••"})]})]}),(0,a.jsxs)(r.P.section,{className:"".concat(u().sprawlTarget," ").concat(u().sprawlGitops),initial:!t&&{opacity:0,y:6},animate:s(3),children:[(0,a.jsx)("div",{className:u().sprawlTargetHead,children:(0,a.jsx)("strong",{children:"deployment.yaml"})}),(0,a.jsx)("code",{children:"value: postgresql://•••"})]}),(0,a.jsxs)(r.P.section,{className:"".concat(u().sprawlTarget," ").concat(u().sprawlBackup),initial:!t&&{opacity:0,y:6},animate:s(4),children:[(0,a.jsx)("div",{className:u().sprawlTargetHead,children:(0,a.jsx)("strong",{children:"Sync backup"})}),(0,a.jsxs)("div",{className:u().sprawlKeyValue,children:[(0,a.jsx)("code",{children:"secrets.env"}),(0,a.jsx)("span",{children:"synced"})]})]})]})]})}let y=[{key:"shell",label:"Set it on the command line",app:"console.log(`Connecting to ${process.env.DATABASE_URL}`)",env:null,command:"DATABASE_URL=".concat(m," node app.js"),ok:!0,output:"Connecting to ".concat(m)},{key:"file",label:"Put it in .env",app:"console.log(`Connecting to ${process.env.DATABASE_URL}`)",env:"DATABASE_URL=".concat(m),command:"node app.js",ok:!1,output:"Connecting to undefined"},{key:"dotenv",label:"Load .env with dotenv",app:"require('dotenv').config()\nconsole.log(`Connecting to ${process.env.DATABASE_URL}`)",env:"DATABASE_URL=".concat(m),command:"node app.js",ok:!0,output:"Connecting to ".concat(m)}];function b(e,n){let{speed:t=22,delay:a=0}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=(0,s.I)(),[l,o]=(0,i.useState)(0);return(0,i.useEffect)(()=>{let i;if(!n)return void o(0);if(r)return void o(e.length);o(0);let s=0,l=window.setTimeout(function n(){o(s+=1),s<e.length&&(i=window.setTimeout(n,t))},a);return()=>{window.clearTimeout(l),window.clearTimeout(i)}},[a,r,n,t,e]),{typed:e.slice(0,l),done:n>0&&l>=e.length}}let w=/(`(?:[^`\\]|\\.)*`|'(?:[^'\\]|\\.)*')/g,E=/(\$\{[^}]*\})/g;function N(e){let{anchor:n,frame:t,children:i,onDark:o=!1}=e,c=(0,s.I)();if(!n||!t)return null;let d=Math.min(440,t.width-32),m=Math.max(8,Math.min(n.x,t.width-d-8)),h=n.y+n.height+46+120<=t.height,v=n.y-46-120>=0,x=h||!v,_=x?{top:Math.min(n.y+n.height,t.height-120)}:{bottom:Math.min(t.height-n.y,t.height-120)},f=Math.max(14,Math.min(n.x+Math.min(n.width/2,60)-m,d-14));return(0,a.jsx)(l.N,{mode:"wait",children:(0,a.jsxs)(r.P.div,{className:"".concat(u().annotation," ").concat(o?u().annotationOnDark:""),"data-place":x?"below":"above",style:{left:m,width:d,..._},initial:{opacity:1}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.15},children:[(0,a.jsx)(r.P.span,{className:u().annotationLeader,style:{marginLeft:f},"aria-hidden":"true",initial:!c&&{height:0},animate:{height:46},transition:{duration:.34*!c,ease:p}}),(0,a.jsx)(r.P.span,{className:u().annotationPill,initial:!c&&{opacity:0,y:-10},animate:{opacity:1,y:0},transition:{duration:.34*!c,delay:.5*!c,ease:p},children:i})]},String(i))})}function T(e){let{name:n,code:t,activeLine:i=0,valueRef:s=null,lineRefs:r=null,cardRef:l=null,dim:o=!1}=e,c=t.split("\n");return(0,a.jsxs)("div",{ref:l,className:u().fileCard,"data-dim":o?"yes":"no",children:[(0,a.jsx)("div",{className:u().fileCardTab,children:(0,a.jsx)("strong",{children:n})}),(0,a.jsx)("pre",{className:u().fileCardCode,children:c.map((e,n)=>(0,a.jsxs)("span",{className:u().codeLine,"data-active":i===n+1?"yes":"no",ref:(null==r?void 0:r[n+1])||(s&&0===n?s:null),children:[(0,a.jsx)("span",{className:u().codeGutter,"aria-hidden":"true",children:n+1}),(0,a.jsx)("span",{className:u().codeText,children:(function(e){let n=[];return e.split(w).forEach((e,t)=>{if(e){if(t%2==0)return void n.push({text:e,tone:"plain"});e.split(E).forEach((e,t)=>{e&&n.push({text:e,tone:t%2==0?"string":"hole"})})}}),n})(e).map((e,n)=>(0,a.jsx)("span",{className:u()["tone_".concat(e.tone)],children:e.text},n))})]},n))})]})}function A(e){let{idle:n=!1}=e;return(0,a.jsx)("span",{className:"".concat(u().cursor," ").concat(n?u().cursorIdle:""),"aria-hidden":"true"})}function k(e){let{text:n,ok:t}=e;if(t)return(0,a.jsx)("code",{className:u().terminalOutput,children:n});let[i,...s]=n.split("undefined");return(0,a.jsxs)("code",{className:u().terminalOutput,children:[i,(0,a.jsx)("span",{className:u().terminalFail,children:"undefined"}),s.join("undefined")]})}function R(e){let{command:n,output:t,ok:l,index:o,active:c,runId:d,onSettled:m}=e,h=(0,s.I)(),{typed:p,done:v}=b(n,c?d:0),x=v?l?"ok":"fail":"idle";return(0,i.useEffect)(()=>{if(!v)return;let e=window.setTimeout(()=>m(o),900*!h);return()=>window.clearTimeout(e)},[v,o,m,h]),(0,a.jsxs)("div",{className:u().terminal,"data-state":x,children:[(0,a.jsx)("div",{className:u().terminalBar,"aria-hidden":"true",children:(0,a.jsx)("span",{children:"zsh"})}),(0,a.jsxs)("div",{className:u().terminalBody,children:[(0,a.jsxs)("div",{className:u().terminalLine,children:[(0,a.jsx)("span",{className:u().terminalPrompt,children:"$"}),(0,a.jsxs)("code",{children:[c?p:"",!v&&(0,a.jsx)(A,{idle:!c})]})]}),v&&(0,a.jsxs)(r.P.div,{className:u().terminalResult,initial:!h&&{opacity:0},animate:{opacity:1},transition:{duration:.2*!h,delay:.25},children:[(0,a.jsx)(k,{text:t,ok:l}),(0,a.jsxs)("div",{className:u().terminalLine,children:[(0,a.jsx)("span",{className:u().terminalPrompt,children:"$"}),(0,a.jsx)("code",{children:(0,a.jsx)(A,{})})]})]},d)]})]})}function V(){let[e,n]=(0,i.useState)(0),[t,s]=(0,i.useState)(-1),r=(0,i.useCallback)(e=>{s(n=>n===e?e+1:n)},[]);return(0,a.jsxs)(f,{bare:!0,children:[(0,a.jsxs)("div",{className:u().setupBar,children:[(0,a.jsx)("span",{children:"Three ways to give the app a DATABASE_URL"}),(0,a.jsx)("button",{type:"button",className:u().runButton,onClick:()=>{n(e=>e+1),s(0)},children:"Run"})]}),(0,a.jsx)("div",{className:u().setupGrid,children:y.map((n,i)=>(0,a.jsxs)("section",{className:u().setupColumn,children:[(0,a.jsxs)("div",{className:u().setupColumnBar,children:[(0,a.jsx)("span",{children:i+1}),(0,a.jsx)("strong",{children:n.label})]}),(0,a.jsx)(T,{name:"app.js",code:n.app}),n.env?(0,a.jsx)(T,{name:".env",code:n.env}):(0,a.jsx)("div",{className:u().fileCardNone,children:(0,a.jsxs)("span",{children:["no ",(0,a.jsx)("code",{children:".env"})," file"]})}),(0,a.jsx)(R,{command:n.command,output:n.output,ok:n.ok,index:i,active:t>=i,runId:e,onSettled:r})]},n.key))})]})}let C=[{key:"line1",target:"app",line:1,text:"This first line is dotenv. Nothing about the app has changed yet: this line is the whole of what people mean by “loading the .env file”."},{key:"read",target:"file",text:"dotenv opens the file called .env, sitting right there next to the app, and reads the text in it. The file is only ever read, never changed."},{key:"write",target:"env",text:"It splits that line at the first = into a key and a value, then adds the pair to process.env, the environment the app can actually see."},{key:"line2",target:"app",line:2,text:"Now the app asks for process.env.DATABASE_URL and prints it. It read it from the environment, not .env."}];function S(){let[e,n]=(0,i.useState)(!1),[t,l]=(0,i.useState)(0),d=(0,s.I)(),p=(0,i.useRef)(null),x=(0,i.useRef)(null),j=(0,i.useRef)(null),g=(0,i.useRef)(null),y=(0,i.useRef)(null),w=v(p,{line1:x,line2:j,file:g,env:y}),{typed:E,done:k}=b("node app.js",+!!e),R=e?C[t]:null,V=n=>e&&t>=C.findIndex(e=>e.key===n),S=t===C.length-1;return(0,i.useEffect)(()=>

1{if(!e||S||d)return;let n=window.setTimeout(()=>l(e=>e+1),8e3);return()=>window.clearTimeout(n)},[t,S,d,e]),(0,a.jsxs)(f,{bare:!0,className:u().runFigure,children:[(0,a.jsx)(_,{children:(0,o.fq)("dotenv-run")}),(0,a.jsxs)("div",{className:u().stepBar,children:[(0,a.jsxs)("span",{className:u().stepTitle,children:["What ",(0,a.jsx)("code",{children:"dotenv"})," actually does"]}),e&&(0,a.jsxs)("span",{className:u().stepCount,children:[String(t+1).padStart(2,"0")," /"," ",String(C.length).padStart(2,"0")]}),(0,a.jsx)("button",{type:"button",className:u().runButton,onClick:()=>{e?S?(n(!1),l(0)):l(e=>e+1):(n(!0),l(0))},children:e?S?"Reset":"Next":"Run"}),e&&!S&&!d&&(0,a.jsx)(r.P.span,{className:u().stepProgress,initial:{scaleX:0},animate:{scaleX:1},transition:{duration:8,ease:"linear"}},t)]}),(0,a.jsxs)("div",{ref:p,className:u().runFrame,children:[(0,a.jsxs)("div",{className:u().runFiles,children:[(0,a.jsx)(T,{name:"app.js",code:"require('dotenv').config()\nconsole.log(`Connecting to ${process.env.DATABASE_URL}`)",activeLine:(null==R?void 0:R.target)==="app"?R.line:0,lineRefs:{1:x,2:j}}),(0,a.jsx)(T,{name:".env",code:"DATABASE_URL=".concat(m),activeLine:+((null==R?void 0:R.target)==="file"),valueRef:g,dim:V("line2")})]}),(0,a.jsxs)("section",{className:u().memoryDoc,children:[(0,a.jsx)("div",{className:u().memoryDocTab,children:(0,a.jsx)("strong",{children:"process.env"})}),(0,a.jsxs)("div",{className:u().memoryRows,children:[h.map(e=>{let[n,t]=e;return(0,a.jsxs)("div",{children:[(0,a.jsx)("code",{children:n}),(0,a.jsx)("code",{children:t})]},n)}),(0,a.jsx)("div",{ref:y,"data-state":V("write")?"added":"reserved",children:V("write")&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("code",{children:"DATABASE_URL"}),(0,a.jsx)(c.A,{as:"code",maxDuration:1200,stagger:16,threshold:.05,children:m})]})})]})]}),(0,a.jsxs)("div",{className:u().terminal,"data-state":"idle",children:[(0,a.jsx)("div",{className:u().terminalBar,"aria-hidden":"true",children:(0,a.jsx)("span",{children:"zsh"})}),(0,a.jsxs)("div",{className:u().terminalBody,children:[(0,a.jsxs)("div",{className:u().terminalLine,children:[(0,a.jsx)("span",{className:u().terminalPrompt,children:"$"}),(0,a.jsxs)("code",{children:[e?E:"",!k&&(0,a.jsx)(A,{idle:!e})]})]}),V("line2")&&(0,a.jsxs)(r.P.div,{className:u().terminalResult,initial:!d&&{opacity:0},animate:{opacity:1},transition:{duration:.25*!d},children:[(0,a.jsxs)("code",{className:u().terminalOutput,children:["Connecting to ",m]}),(0,a.jsxs)("div",{className:u().terminalLine,children:[(0,a.jsx)("span",{className:u().terminalPrompt,children:"$"}),(0,a.jsx)("code",{children:(0,a.jsx)(A,{})})]})]})]})]}),R&&(0,a.jsx)(N,{anchor:null==w?void 0:w["app"===R.target?"line".concat(R.line):R.target],frame:null==w?void 0:w.frame,children:R.text})]})]})}let B=["HOME","USER","SHELL","PATH","TERM","DATABASE_URL"],L={HOME:"Your home directory. Tools that need somewhere to put config or caches start looking here.",USER:"The account this process is running as.",SHELL:"Your account's login shell. It is a fact about you, not about what happens to be running.",PATH:"The directories the system searches, in order, when you type a command name.",TERM:"Which kind of terminal is attached, so programs know which escape codes it understands.",DATABASE_URL:"The one variable your app actually cares about, and the only one no parent process put there."},D=[{key:"launchd",name:"launchd",sets:{HOME:"/Users/dev",USER:"dev",SHELL:"/bin/zsh",PATH:"/usr/bin:/bin"}},{key:"ghostty",name:"Ghostty",sets:{TERM:"xterm-ghostty"}},{key:"zsh",name:"zsh",sets:{PATH:"/opt/homebrew/bin:/usr/bin:/bin"}},{key:"node",name:"node app.js",sets:{DATABASE_URL:m}}];function P(){let[e,n]=(0,i.useState)(D.length-1),[t,l]=(0,i.useState)(null),c=(0,s.I)(),d=D[e],m={};D.slice(0,e+1).forEach(e=>{Object.entries(e.sets).forEach(n=>{let[t,a]=n;m[t]={value:a,source:e.name}})});let h=new Set(Object.keys(d.sets));return(0,a.jsxs)(f,{bare:!0,children:[(0,a.jsx)(_,{children:(0,o.fq)("parent-processes")}),(0,a.jsxs)("div",{className:u().stepBar,children:[(0,a.jsx)("span",{className:u().stepTitle,children:"How the environment got there"}),(0,a.jsx)("span",{className:u().stepHint,children:"Pick a process to see the environment as it had it, or a variable to see what it is for"})]}),(0,a.jsxs)("div",{className:u().chainFrame,children:[(0,a.jsx)("div",{className:u().chainColumn,children:D.map((t,s)=>(0,a.jsxs)(i.Fragment,{children:[s>0&&(0,a.jsx)("span",{className:u().chainLink,"data-state":s<=e?"done":"todo","aria-hidden":"true"}),(0,a.jsx)("button",{type:"button",className:u().chainCard,"data-state":s===e?"current":s<e?"past":"todo","aria-pressed":s===e,onMouseEnter:()=>n(s),onFocus:()=>n(s),onClick:()=>n(s),children:(0,a.jsx)("code",{children:t.name})})]},t.key))}),(0,a.jsxs)("section",{className:u().memoryDoc,children:[(0,a.jsx)("div",{className:u().memoryDocTab,children:(0,a.jsx)("strong",{children:"process.env"})}),(0,a.jsx)("div",{className:u().chainRows,children:B.map(e=>{let n=m[e];return(0,a.jsx)("button",{type:"button",disabled:!n,"data-state":n?h.has(e)?"touched":"set":"empty","data-tip":t===e&&n?"yes":"no",onMouseEnter:()=>l(e),onMouseLeave:()=>l(null),onFocus:()=>l(e),onBlur:()=>l(null),children:t===e&&n?(0,a.jsx)(r.P.span,{className:u().chainTip,initial:{opacity:0}

1,animate:{opacity:1},transition:{duration:.14},children:L[e]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.P.code,{initial:!c&&{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.3*!c,ease:p},children:n?e:""},"k-".concat(n?e:"none")),(0,a.jsx)(r.P.code,{initial:!c&&{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.3*!c,delay:.06*!c,ease:p},children:n?n.value:""},"v-".concat(n?n.value:"none"))]})},e)})})]})]})]})}let F=[{pid:"1",label:"launchd"},{pid:"4818",label:"Ghostty"},{pid:"4821",label:"zsh"},{pid:"5310",label:"node app.js"}],M=[1800,1500,1900,1500,1900,1500,1900];function U(){let e=(0,i.useRef)(null),[n,t]=(0,i.useState)(0),[l,d]=(0,i.useState)(0),m=(0,s.I)(),{hasRun:h}=x(e,0),v=h||n>0,j=v&&l>=M.length-1;return(0,i.useEffect)(()=>{if(!v||j)return;let e=window.setTimeout(()=>d(e=>e+1),m?0:M[l]);return()=>window.clearTimeout(e)},[l,j,m,n,v]),(0,a.jsxs)(f,{bare:!0,className:u().runFigure,children:[(0,a.jsx)(_,{children:(0,o.fq)("fork-exec")}),(0,a.jsxs)("div",{className:u().stepBar,children:[(0,a.jsxs)("span",{className:u().stepTitle,children:[(0,a.jsx)("code",{children:"fork"})," and ",(0,a.jsx)("code",{children:"exec"})]}),(0,a.jsx)("button",{type:"button",className:u().runButton,onClick:()=>{t(e=>e+1),d(0)},children:"Replay"})]}),(0,a.jsx)("div",{ref:e,className:u().forkFrame,children:(0,a.jsx)("div",{className:u().tree,children:F.map((e,t)=>{let{visible:i,execed:s,fresh:o}=(e=>{if(0===e)return{visible:!0,execed:!0,fresh:!1};let n=2*e-1;return{visible:v&&l>=n,execed:v&&l>=n+1,fresh:v&&(l===n||l===n+1)}})(t),d=s?e:F[t-1];return(0,a.jsxs)(r.P.div,{className:u().treeRow,"data-depth":t,"data-fresh":o?"yes":"no",animate:{opacity:+!!i,y:i?0:-44,x:i?0:-34},transition:{duration:.5*!m,ease:p},children:[(0,a.jsx)("code",{children:s&&t>0?(0,a.jsx)(c.A,{as:"span",maxDuration:1e3,stagger:42,threshold:.05,children:e.label},"x-".concat(n,"-").concat(t)):d.label}),(0,a.jsxs)("span",{children:["pid ",e.pid]})]},e.pid)})})})]})}let I=[{key:"config",target:"config",text:"This is what replaced .env in the repository. It names the project and environment to read from, holds no secrets at all, and is meant to be committed."},{key:"auth",target:"store",onDark:!0,text:"infisical proves who is asking before anything is handed over. Access belongs to an identity, not to whoever happens to have the laptop."},{key:"fetch",target:"secret",onDark:!0,text:"It requests DATABASE_URL over TLS. The value is encrypted at rest and in transit, so the store never holds it in the clear and neither does this machine."},{key:"exec",target:"terminal",onDark:!0,text:"infisical then forks and execs node, exactly as zsh did before it, handing over an environment it has already filled in. node is now infisical's child and inherits it."},{key:"env",target:"env",text:"DATABASE_URL arrives in process.env under the same key as always. app.js never changed, it still just reads its environment, and nothing was written to disk."}];function H(){let[e,n]=(0,i.useState)(!1),[t,l]=(0,i.useState)(0),d=(0,s.I)(),x=(0,i.useRef)(null),j=(0,i.useRef)(null),g=(0,i.useRef)(null),y=(0,i.useRef)(null),w=(0,i.useRef)(null),E=(0,i.useRef)(null),k=v(x,{config:j,store:g,secret:y,terminal:w,env:E}),{typed:R,done:V}=b("infisical run -- node app.js",+!!e),C=e?I[t]:null,S=n=>e&&t>=I.findIndex(e=>e.key===n),B=t===I.length-1;(0,i.useEffect)(()=>{if(!e||B||d)return;let n=window.setTimeout(()=>l(e=>e+1),8e3);return()=>window.clearTimeout(n)},[t,B,d,e]);let L=S("env")&&(null==k?void 0:k.secret)&&(null==k?void 0:k.env)&&(null==k?void 0:k.frame)?(()=>{let e=k.secret,n=k.env,t=e.x,a=e.y+e.height/2,i=n.x,s=n.y+n.height/2,r=Math.max(12,Math.min(t,i)-26);return{d:"M ".concat(t," ").concat(a," C ").concat(r," ").concat(a,", ").concat(r," ").concat(s,", ").concat(i," ").concat(s),width:k.frame.width,height:k.frame.height}})():null;return(0,a.jsxs)(f,{bare:!0,className:u().runFigure,children:[(0,a.jsx)(_,{children:(0,o.fq)("runtime-injection")}),(0,a.jsxs)("div",{className:u().stepBar,children:[(0,a.jsx)("span",{className:u().stepTitle,children:"Runtime injection"}),e&&(0,a.jsxs)("span",{className:u().stepCount,children:[String(t+1).padStart(2,"0")," /"," ",String(I.length).padStart(2,"0")]}),(0,a.jsx)("button",{type:"button",className:u().runButton,onClick:()=>{e?B?(n(!1),l(0)):l(e=>e+1):(n(!0),l(0))},children:e?B?"Reset":"Next":"Run"}),e&&!B&&!d&&(0,a.jsx)(r.P.span,{className:u().stepProgress,initial:{scaleX:0},animate:{scaleX:1},transition:{duration:8,ease:"linear"}},t)]}),(0,a.jsxs)("div",{ref:x,className:u().injectFrame,children:[(0,a.jsxs)("div",{className:u().runFiles,children:[(0,a.jsx)(T,{name:"app.js",code:"console.log(`Connecting to ${process.env.DATABASE_URL}`)"}),(0,a.jsx)(T,{name:".infisical.json",code:'{\n  "workspaceId": "6f2a1c94e8b3",\n  "defaultEnvironment": "development"\n}',cardRef:j})]}),(0,a.jsxs)("div",{className:u().injectRight,children:[(0,a.jsxs)("section",{className:u().storeDoc,children:[(0,a.jsxs)("div",{className:u().storeDocTab,children:[(0,a.jsx)("strong",{children:"Infisical"}),(0,a.jsx)("span",{ref:g,"data-state":S("auth")?"on":"off",children:S("auth")?"logged in as [email protected]":"not logged in"})]}),(0,a.jsxs)("div",{ref:y,className:u().storeSecret,children:[(0,a.jsx)("code",{children:"DATABASE_URL"}),(0,a.jsx)("code",{className:u().storeCipher,children:"b7Xk92pQ4mZvR8tLw3Ns6eY1hD5gJ0cF2aUi"})]})]}),(0,a.jsxs)("section",{className:u().memoryDoc,children:[(0,a.jsx)("div",{className:u().memoryDocTab,children:(0,a.jsx)("strong",{children:"process.env"})}),(0,a.jsxs)("div",{className:u().memoryRows,children:[h.map(e=>{let[n,t]=e;return(0,a.jsxs)("div",{children:[(0,a.jsx)("code",{children:n}),(0,a.jsx)("code",{children:t})]},n)}),(0,a.jsx)("div",{ref:E,"data-state":S("env")?"added":"reserved",children:S("env")&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("code",{children:"DATABASE_URL"}),(0,a.jsx)(c.A,{as:"code",maxDuration:1400,stagger:18,threshold:.05,children:m})]})})]})]})]}),(0,a.jsxs)("div",{className:u().terminal,"data-state":"idle",children:[(0,a.jsx)("div",{className:u().terminalBar,"aria-hidden":"true",children:(0,a.jsx)("span",{children:"zsh"})}),(0,a.jsxs)("div",{className:u().terminalBody,children:[(0,a.jsxs)("div",{ref:w,className:u().terminalLine,children:[(0,a.jsx)("span",{className:u().terminalPrompt,children:"$"}),(0,a.jsxs)("code",{children:[e?R:"",!V&&(0,a.jsx)(A,{idle:!e})]})]}),S("exec")&&(0,a.jsx)(r.P.code,{className:u().terminalNotice,initial:!d&&{opacity:0}

1,animate:{opacity:1},transition:{duration:.25*!d},children:"Injecting 1 Infisical secrets into your application process"}),S("env")&&(0,a.jsxs)(r.P.div,{className:u().terminalResult,initial:!d&&{opacity:0},animate:{opacity:1},transition:{duration:.25*!d,delay:.8*!d},children:[(0,a.jsxs)("code",{className:u().terminalOutput,children:["Connecting to ",m]}),(0,a.jsxs)("div",{className:u().terminalLine,children:[(0,a.jsx)("span",{className:u().terminalPrompt,children:"$"}),(0,a.jsx)("code",{children:(0,a.jsx)(A,{})})]})]})]})]}),L&&(0,a.jsx)("svg",{className:u().wire,width:L.width,height:L.height,viewBox:"0 0 ".concat(L.width," ").concat(L.height),"aria-hidden":"true",children:(0,a.jsx)(r.P.path,{d:L.d,initial:!d&&{pathLength:0},animate:{pathLength:1},transition:{duration:.8*!d,ease:p}})}),C&&(0,a.jsx)(N,{anchor:null==k?void 0:k[C.target],frame:null==k?void 0:k.frame,onDark:C.onDark,children:C.text})]})]})}},97088:e=>{e.exports={figure:"EnvironmentVariables_figure__K7AU6",figureBare:"EnvironmentVariables_figureBare__UxSJ5",srOnly:"EnvironmentVariables_srOnly__aNqFc",sprawl:"EnvironmentVariables_sprawl__GAHHp",sprawlTrails:"EnvironmentVariables_sprawlTrails__heq0e",secretSource:"EnvironmentVariables_secretSource__6Ke3c",sprawlTarget:"EnvironmentVariables_sprawlTarget__ZKWwn",sprawlTargetHead:"EnvironmentVariables_sprawlTargetHead__8pm7X",sprawlAttachment:"EnvironmentVariables_sprawlAttachment__fSj9W",sprawlKeyValue:"EnvironmentVariables_sprawlKeyValue__K3M0F",sprawlLaptop:"EnvironmentVariables_sprawlLaptop__zpluq",sprawlSlack:"EnvironmentVariables_sprawlSlack__WZIlQ",sprawlCi:"EnvironmentVariables_sprawlCi__syV8G",sprawlGitops:"EnvironmentVariables_sprawlGitops__QKTZF",sprawlBackup:"EnvironmentVariables_sprawlBackup__MLs8Y",setupBar:"EnvironmentVariables_setupBar__y2Qw_",runButton:"EnvironmentVariables_runButton__H311J",setupGrid:"EnvironmentVariables_setupGrid__IGfON",setupColumn:"EnvironmentVariables_setupColumn__WMy3l",setupColumnBar:"EnvironmentVariables_setupColumnBar__FaCXH",fileCard:"EnvironmentVariables_fileCard__sAF_K",fileCardTab:"EnvironmentVariables_fileCardTab__MwDj0",fileCardCode:"EnvironmentVariables_fileCardCode__F3dUP",codeLine:"EnvironmentVariables_codeLine__nBLWL",codeGutter:"EnvironmentVariables_codeGutter__hLBX9",codeText:"EnvironmentVariables_codeText__ftaEd",tone_plain:"EnvironmentVariables_tone_plain__Zr_wM",tone_hole:"EnvironmentVariables_tone_hole__Fzx_S",tone_string:"EnvironmentVariables_tone_string__qsbMp",fileCardNone:"EnvironmentVariables_fileCardNone__2njBV",terminal:"EnvironmentVariables_terminal__RTk0X",terminalBar:"EnvironmentVariables_terminalBar__Mc057",terminalBody:"EnvironmentVariables_terminalBody__JmbUX",terminalResult:"EnvironmentVariables_terminalResult__DQ2Zg",terminalLine:"EnvironmentVariables_terminalLine__O6iWj",terminalOutput:"EnvironmentVariables_terminalOutput__Q5Jtg",terminalPrompt:"EnvironmentVariables_terminalPrompt__m8DKR",terminalFail:"EnvironmentVariables_terminalFail__XqUtB",terminalNotice:"EnvironmentVariables_terminalNotice__8JaWy",cursor:"EnvironmentVariables_cursor__XVYgD",cursorBlink:"EnvironmentVariables_cursorBlink__YBhFC",cursorIdle:"EnvironmentVariables_cursorIdle__J2lk5",runFigure:"EnvironmentVariables_runFigure__NzOem",runFrame:"EnvironmentVariables_runFrame__61gHT",injectFrame:"EnvironmentVariables_injectFrame__9C7a6",runFiles:"EnvironmentVariables_runFiles__3hzwJ",memoryDoc:"EnvironmentVariables_memoryDoc__STTNX",storeDoc:"EnvironmentVariables_storeDoc__QtX7c",memoryDocTab:"EnvironmentVariables_memoryDocTab__C667u",memoryRows:"EnvironmentVariables_memoryRows__HoVme",annotation:"EnvironmentVariables_annotation__IgizS",annotationLeader:"EnvironmentVariables_annotationLeader__qnXDr",annotationOnDark:"EnvironmentVariables_annotationOnDark__AT_SW",annotationPill:"EnvironmentVariables_annotationPill__4rJXx",stepBar:"EnvironmentVariables_stepBar__P0gzY",stepHint:"EnvironmentVariables_stepHint__aa_l4",stepTitle:"EnvironmentVariables_stepTitle__DUNQM",stepCount:"EnvironmentVariables_stepCount__FDSjd",stepProgress:"EnvironmentVariables_stepProgress__YAFyz",injectRight:"Env

1ironmentVariables_injectRight__Ru08n",storeDocTab:"EnvironmentVariables_storeDocTab__abvos",storeSecret:"EnvironmentVariables_storeSecret__xNCTR",storeCipher:"EnvironmentVariables_storeCipher__pW5NN",wire:"EnvironmentVariables_wire__9z1z0",chainFrame:"EnvironmentVariables_chainFrame__Y7hwN",chainColumn:"EnvironmentVariables_chainColumn__BKeI_",chainCard:"EnvironmentVariables_chainCard__eD18N",chainLink:"EnvironmentVariables_chainLink__e486p",chainRows:"EnvironmentVariables_chainRows__wsyHW",chainTip:"EnvironmentVariables_chainTip__M2xdh",forkFrame:"EnvironmentVariables_forkFrame__hiwfw",tree:"EnvironmentVariables_tree__oFZsD",treeRow:"EnvironmentVariables_treeRow__I6FhY"}}}]);