@clerk/clerk-js
Version:
Clerk JS library
228 lines (218 loc) • 18.3 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["307"],{1976:function(e,t,i){i.r(t),i.d(t,{KeylessPrompt:()=>y});var r=i(9109),n=i(3799),o=i(5582),a=i(9144),s=i(8315),l=i(4204),c=i(7348),d=i(1217);function p(){return(0,r.BX)("svg",{width:"1rem",height:"1.25rem",viewBox:"0 0 16 20",fill:"none","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",children:[(0,r.BX)("g",{filter:"url(#filter0_i_438_501)",children:[(0,r.tZ)("path",{d:"M10.4766 9.99979C10.4766 11.3774 9.35978 12.4942 7.98215 12.4942C6.60452 12.4942 5.48773 11.3774 5.48773 9.99979C5.48773 8.62216 6.60452 7.50537 7.98215 7.50537C9.35978 7.50537 10.4766 8.62216 10.4766 9.99979Z",fill:"#BBBBBB"}),(0,r.tZ)("path",{d:"M12.4176 3.36236C12.6676 3.52972 12.6889 3.88187 12.4762 4.09457L10.6548 5.91595C10.4897 6.08107 10.2336 6.10714 10.0257 6.00071C9.41273 5.68684 8.71811 5.50976 7.98214 5.50976C5.5024 5.50976 3.49219 7.51998 3.49219 9.99972C3.49219 10.7357 3.66926 11.4303 3.98314 12.0433C4.08957 12.2511 4.06349 12.5073 3.89837 12.6724L2.07699 14.4938C1.86429 14.7065 1.51215 14.6851 1.34479 14.4352C0.495381 13.1666 0 11.641 0 9.99972C0 5.5913 3.57373 2.01758 7.98214 2.01758C9.62345 2.01758 11.1491 2.51296 12.4176 3.36236Z",fill:"#8F8F8F"}),(0,r.tZ)("path",{d:"M12.4762 15.905C12.6889 16.1177 12.6675 16.4698 12.4176 16.6372C11.149 17.4866 9.62342 17.982 7.9821 17.982C6.34078 17.982 4.81516 17.4866 3.54661 16.6372C3.29666 16.4698 3.27531 16.1177 3.48801 15.905L5.30938 14.0836C5.4745 13.9185 5.73066 13.8924 5.93851 13.9988C6.55149 14.3127 7.24612 14.4898 7.9821 14.4898C8.71808 14.4898 9.4127 14.3127 10.0257 13.9988C10.2335 13.8924 10.4897 13.9185 10.6548 14.0836L12.4762 15.905Z",fill:"#BBBBBB"})]}),(0,r.tZ)("defs",{children:(0,r.BX)("filter",{id:"filter0_i_438_501",x:"0",y:"1.86758",width:"12.6217",height:"16.1144",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[(0,r.tZ)("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),(0,r.tZ)("feBlend",{mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),(0,r.tZ)("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),(0,r.tZ)("feOffset",{dy:"-0.15"}),(0,r.tZ)("feGaussianBlur",{stdDeviation:"0.15"}),(0,r.tZ)("feComposite",{in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),(0,r.tZ)("feColorMatrix",{type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"}),(0,r.tZ)("feBlend",{mode:"normal",in2:"shape",result:"effect1_innerShadow_438_501"})]})})]})}function h(){return(0,r.tZ)("svg",{width:"1rem",height:"1rem",viewBox:"0 0 16 16",fill:"none","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",children:(0,r.tZ)("path",{d:"M2.75 2.75L13.25 13.25M7.02665 6.38227C7.00046 6.21924 6.98684 6.052 6.98684 5.88158C6.98684 4.15206 8.3889 2.75 10.1184 2.75C11.8479 2.75 13.25 4.15206 13.25 5.88158C13.25 7.6111 11.8479 9.01316 10.1184 9.01316C9.89357 9.01316 9.67425 8.98946 9.46283 8.94442M4.39638 8.74013L3.21279 9.92371C2.91768 10.1977 2.75 10.5823 2.75 10.985V13.25H5.25V11.25H6.55172L7.02665 10.7751M10 5.97998V5.99998",stroke:"#F0D653",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}var m=i(1576);let f="--clerk-keyless-prompt",u=`${f}-button`,x=`${f}-content`,g=(0,o.iv)`
box-sizing: border-box;
padding: 0;
margin: 0;
background: none;
border: none;
line-height: 1.5;
font-family:
-apple-system,
BlinkMacSystemFont,
avenir next,
avenir,
segoe ui,
helvetica neue,
helvetica,
Cantarell,
Ubuntu,
roboto,
noto,
arial,
sans-serif;
text-decoration: none;
`;function b(e){try{return e()}catch{return"https://dashboard.clerk.com/last-active"}}function w(e){let t=new URL(e).href.match(/^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/);if(!t)throw Error("invalid value dashboard url structure");return{baseDomain:`https://${t[1]}`,appId:`app_${t[2]}`,instanceId:`ins_${t[3]}`}}let C=e=>{let{isSignedIn:t}=(0,n.aF)(),[i,s]=(0,a.useState)(!1);(0,a.useEffect)(()=>{t&&s(!0)},[t]);let d=function(){let e=(0,n.cL)(),t=(0,a.useRef)(Date.now()),[,i]=(0,a.useReducer)(e=>e+1,0);return(0,a.useEffect)(()=>{let r=new AbortController;return window.addEventListener("focus",async()=>{let n=e.__unstable__environment;if(n){if(null!==n.authConfig.claimedAt)return r.abort();if(!(Date.now()<t.current+1e4)&&"visible"===document.visibilityState)for(let e=0;e<2;e++){let{authConfig:{claimedAt:e}}=await n.fetch();if(t.current=Date.now(),null!==e){i();break}}}},{signal:r.signal}),()=>{r.abort()}},[]),(0,m.useEnvironment)()}(),f=!!d.authConfig.claimedAt,C="function"==typeof e.onDismiss&&f,y=d.displayConfig.applicationName,v=f||C||i,$=(0,a.useMemo)(()=>{if(f)return e.copyKeysUrl;let t=new URL(e.claimUrl);return t.searchParams.append("return_url",window.location.href),t.href},[f,e.copyKeysUrl,e.claimUrl]),Z=(0,a.useMemo)(()=>b(()=>{let t=w(e.copyKeysUrl);return new URL(`${t.baseDomain}/apps/${t.appId}/instances/${t.instanceId}/user-authentication/email-phone-username`).href}),[e.copyKeysUrl]),B=(0,a.useMemo)(()=>b(()=>{let t=w(e.copyKeysUrl);return new URL(`${t.baseDomain}/last-active?path=api-keys`).href}),[e.copyKeysUrl]),L=(0,o.iv)`
${g};
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 1.75rem;
max-width: 14.625rem;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12px;
color: ${f||C?"white":"#fde047"};
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
white-space: nowrap;
user-select: none;
cursor: pointer;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
box-shadow:
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
`;return(0,r.BX)(c.h,{children:[(0,r.BX)(l.Flex,{"data-expanded":v,sx:e=>({position:"fixed",bottom:"1.25rem",right:"1.25rem",height:`${e.sizes.$10}`,minWidth:"13.4rem",paddingLeft:`${e.space.$3}`,borderRadius:"1.25rem",fontFamily:e.fonts.$main,background:"linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f",boxShadow:"0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);",transition:"all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)",'&[data-expanded="false"]:hover':{background:"linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f"},'&[data-expanded="true"]':{flexDirection:"column",alignItems:"flex-center",justifyContent:"flex-center",height:f||C?"fit-content":t?"11rem":"12rem",overflow:"hidden",width:"fit-content",minWidth:"16.125rem",gap:`${e.space.$1x5}`,padding:`${e.space.$2x5} ${e.space.$3} ${e.space.$3} ${e.space.$3}`,borderRadius:`${e.radii.$xl}`,transition:"all 230ms cubic-bezier(0.28, 1, 0.32, 1)"}}),children:[(0,r.BX)("button",{type:"button","aria-expanded":v,"aria-controls":x,id:u,onClick:()=>!f&&s(e=>!e),css:(0,o.iv)`
${g};
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
`,children:[(0,r.BX)(l.Flex,{sx:e=>({alignItems:"center",gap:e.space.$2}),children:[C?(0,r.tZ)("svg",{width:"1rem",height:"1rem",viewBox:"0 0 16 17",fill:"none","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",children:(0,r.BX)("g",{opacity:"0.88",children:[(0,r.tZ)("path",{d:"M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z",fill:"#22C543",fillOpacity:"0.16"}),(0,r.tZ)("path",{d:"M6.06686 8.68372L7.51686 10.1337L9.93353 6.75039M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z",stroke:"#22C543",strokeWidth:"1.2",strokeLinecap:"round",strokeLinejoin:"round"})]})}):f?(0,r.tZ)("svg",{width:"1rem",height:"1rem",viewBox:"0 0 16 16","aria-hidden":!0,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,r.tZ)("path",{d:"M8 5.75V7.25M8 10.2502V10.2602M13.25 8C13.25 10.8995 10.8995 13.25 8 13.25C5.10051 13.25 2.75 10.8995 2.75 8C2.75 5.10051 5.10051 2.75 8 2.75C10.8995 2.75 13.25 5.10051 13.25 8Z",stroke:"#F36B16",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}):(0,r.BX)("div",{css:(0,o.iv)`
perspective: 1000px;
position: relative;
width: 1rem;
height: 1rem;
transform-style: preserve-3d;
animation: ${v?"coinFlipAnimation 12s infinite linear":" none"};
@keyframes coinFlipAnimation {
0%,
55% {
transform: rotateY(0);
}
60%,
95% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
animation: none;
}
`,children:[(0,r.tZ)("span",{className:"coin-flip-front","aria-hidden":!0,css:(0,o.iv)`
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
`,children:(0,r.tZ)(p,{})}),(0,r.tZ)("span",{className:"coin-flip-back","aria-hidden":!0,css:(0,o.iv)`
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
`,children:(0,r.tZ)(h,{})})]}),(0,r.tZ)("p",{"data-text":"Clerk is in keyless mode","aria-label":C?"Claim completed":f?"Missing environment keys":"Clerk is in keyless mode",css:(0,o.iv)`
${g};
color: #d9d9d9;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
`,children:C?"Claim completed":f?"Missing environment keys":"Clerk is in keyless mode"})]}),(0,r.tZ)("svg",{width:"1rem",height:"1rem",viewBox:"0 0 16 16",fill:"none","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",css:(0,o.iv)`
color: #8c8c8c;
transition: color 120ms ease-out;
display: ${i&&!f&&!C?"block":"none"};
cursor: pointer;
:hover {
color: #eeeeee;
}
animation: show-button 300ms ease;
@keyframes show-button {
from {
transform: scaleX(0.9);
opacity: 0;
}
to {
transform: scaleX(1);
opacity: 1;
}
}
`,children:(0,r.tZ)("path",{d:"M3.75 8H12.25",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})]}),(0,r.BX)(l.Flex,{sx:e=>({flexDirection:"column",gap:e.space.$3}),children:[(0,r.tZ)("div",{role:"region",id:x,"aria-labelledby":u,hidden:!v,children:(0,r.tZ)("p",{css:(0,o.iv)`
${g};
color: #b4b4b4;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1rem;
max-width: 14.625rem;
animation: ${v&&"show-description 500ms ease-in forwards"};
@keyframes show-description {
0%,
5% {
opacity: 0;
}
12%,
100% {
opacity: 1;
}
}
`,children:C?(0,r.BX)(r.HY,{children:["Your application"," ",(0,r.tZ)("span",{css:(0,o.iv)`
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 8.125rem;
vertical-align: bottom;
font-weight: 500;
color: #d5d5d5;
`,children:y})," ","has been claimed. Configure settings from the"," ",(0,r.tZ)(l.Link,{isExternal:!0,"aria-label":"Go to Dashboard to configure settings",href:Z,sx:e=>({color:e.colors.$whiteAlpha600,textDecoration:"underline solid",transition:`${e.transitionTiming.$common} ${e.transitionDuration.$fast}`,":hover":{color:e.colors.$whiteAlpha800}}),children:"Clerk Dashboard"})]}):f?(0,r.tZ)(r.HY,{children:"You claimed this application but haven't set keys in your environment. Get them from the Clerk Dashboard."}):(0,r.tZ)("span",{children:t?"You've created your first user! Link this application to your Clerk account to explore the Dashboard.":"This app uses Clerk for authentication. We generated temporary API keys for you. Link this application to your Clerk account to configure it."})})}),v&&(C?(0,r.tZ)("button",{type:"button",onClick:async()=>{await e.onDismiss?.(),window.location.reload()},css:(0,o.iv)`
${L};
&:hover {
background: #4b4b4b;
transition: all 120ms ease-in-out;
}
`,children:"Dismiss"}):(0,r.BX)(l.Flex,{"data-expanded":v,sx:e=>({flexDirection:"column",alignItems:"center",gap:e.space.$2x5}),children:[(0,r.tZ)("a",{href:$,target:"_blank",rel:"noopener noreferrer",css:(0,o.iv)`
${L};
animation: ${v&&t?"show-main-CTA 800ms ease forwards":"show-main-CTA 650ms ease-in forwards"};
@keyframes show-main-CTA {
0%,
5% {
opacity: 0;
}
14%,
100% {
opacity: 1;
}
}
&:hover {
${f?`
background: #4B4B4B;
transition: all 120ms ease-in-out;`:`
box-shadow:
0px 0px 6px 0px rgba(253, 224, 71, 0.24) inset,
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);`}
}
`,children:f?"Get API keys":"Claim application"}),!f&&(0,r.BX)(r.HY,{children:[(0,r.tZ)("span",{css:(0,o.iv)`
height: 1px;
background-color: #151515;
width: 100%;
box-shadow: 0px 1px 0px 0px #424242;
`}),(0,r.tZ)("a",{href:B,target:"_blank",rel:"noopener noreferrer",css:(0,o.iv)`
${g};
color: #ffffff9e;
font-size: 0.75rem;
transition: color 120ms ease-out;
:hover {
color: #ffffffcf;
text-decoration: none;
}
animation: ${v&&t?"show-secondary-CTA 800ms ease forwards":"show-secondary-CTA 650ms ease-in forwards"};
@keyframes show-secondary-CTA {
0%,
9% {
opacity: 0;
}
19%,
100% {
opacity: 1;
}
}
`,children:"Already have a Clerk app? Get keys"})]})]}))]})]}),(0,r.tZ)(k,{children:(0,r.tZ)("a",{href:`#${u}`,css:(0,o.iv)`
position: fixed;
left: -999px;
top: 1rem;
z-index: 999999;
border-radius: 0.375rem;
background-color: white;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
color: black;
text-decoration: underline;
&:focus {
left: 1rem;
outline: 2px solid;
outline-offset: 2px;
}
`,children:"Skip to Clerk keyless mode content"})})]})},y=e=>(0,r.tZ)(d.InternalThemeProvider,{children:(0,r.tZ)(C,{...e})}),k=({children:e})=>{let[t,i]=(0,a.useState)(null);return(0,a.useEffect)(()=>{let e=document.createElement("div");return i(e),document.body.insertBefore(e,document.body.firstChild),()=>{e&&document.body.removeChild(e)}},[]),t?(0,s.createPortal)(e,t):null}}}]);