(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[44632],{51070:function(e,i,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/getting-started/installation",function(){return s(4759)}])},59371:function(e,i,s){"use strict";s.d(i,{E:function(){return k}});var t=s(651),n=s(58354),r=s(76085),a=s(29920),l=s(92379);let h="authjs.codeTab.framework";k.Next=x,k.NextClient=p,k.Svelte=u,k.Express=j,k.Qwik=g;let d={[x.name]:"Next.js",[g.name]:"Qwik",[u.name]:"SvelteKit",[j.name]:"Express"},c={[x.name]:"Next.js",[p.name]:"Next.js (Client)",[g.name]:"Qwik",[u.name]:"SvelteKit",[j.name]:"Express"},o=(e,i)=>Object.values(e).findIndex(e=>e.toLowerCase()===i.toLowerCase());function k(e){let{children:i}=e,s=(0,n.useRouter)(),{query:{framework:k}}=s,x=l.Children.toArray(i),{project:u}=(0,r.LU)(),j=x.some(e=>e&&e.type.name===p.name)?c:d,[g,E]=(0,l.useState)(0);return(0,l.useEffect)(()=>{let e=Number(window.localStorage.getItem(h));k?(window.localStorage.setItem(h,String(o(j,k))),E(o(j,k))):e&&E(e)},[k,j]),(0,t.jsx)("div",{className:"[&_div[role='tablist']]:!pb-0",children:(0,t.jsx)(a.m,{storageKey:h,items:Object.values(j),selectedIndex:g,children:Object.keys(j).map(e=>{var i;let n=x.find(i=>{var s;return(null==i?void 0:null===(s=i.type)||void 0===s?void 0:s.name)===e});return Object.keys(null!==(i=null==n?void 0:n.props)&&void 0!==i?i:{}).length?n:(0,t.jsx)(a.m.Tab,{children:(0,t.jsxs)("p",{className:"rounded-lg bg-slate-100 p-6 font-semibold dark:bg-neutral-950",children:[j[e]," not documented yet. Help us by contributing"," ",(0,t.jsx)("a",{className:"underline",target:"_blank",href:"".concat(u.link,"/edit/main/docs/pages").concat(s.pathname,".mdx"),rel:"noreferrer",children:"here"}),"."]})},e)})})})}function p(e){let{children:i}=e;return(0,t.jsx)(a.m.Tab,{children:i})}function x(e){let{children:i}=e;return(0,t.jsx)(a.m.Tab,{children:i})}function u(e){let{children:i}=e;return(0,t.jsx)(a.m.Tab,{children:i})}function j(e){let{children:i}=e;return(0,t.jsx)(a.m.Tab,{children:i})}function g(e){let{children:i}=e;return(0,t.jsx)(a.m.Tab,{children:i})}},4759:function(e,i,s){"use strict";s.r(i),s.d(i,{useTOC:function(){return k}});var t=s(651),n=s(64464),r=s(46635),a=s(19829),l=s(29920),h=s(25156),d=s(82732),c=s(59371),o=s(74661);function k(e){return[{value:"Installing Auth.js",id:"installing-authjs",depth:3},{value:"Setup Environment",id:"setup-environment",depth:3},{value:"Configure",id:"configure",depth:3},{value:"Setup Authentication Methods",id:"setup-authentication-methods",depth:3}]}function p(e,i){throw Error("Expected "+(i?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}i.default=(0,n.c)(function(e){let{toc:i=k(e)}=e,s={a:"a",code:"code",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",...(0,a.a)(),...e.components};return l.m||p("$Tabs",!1),l.m.Tab||p("$Tabs.Tab",!0),c.E||p("Code",!1),c.E.Express||p("Code.Express",!0),c.E.Next||p("Code.Next",!0),c.E.Qwik||p("Code.Qwik",!0),c.E.Svelte||p("Code.Svelte",!0),(0,t.jsxs)(h.R,{children:[(0,t.jsx)(s.h3,{id:i[0].id,children:i[0].value}),(0,t.jsx)(s.p,{children:"Start by installing the appropriate package for your framework."}),(0,t.jsxs)(c.E,{children:[(0,t.jsx)(c.E.Next,{children:(0,t.jsxs)(l.m,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"npm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" install"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" next-auth@beta"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"pnpm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" next-auth@beta"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"yarn"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" next-auth@beta"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"bun"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" next-auth@beta"})]})})})})]})}),(0,t.jsxs)(c.E.Qwik,{children:[(0,t.jsx)(s.p,{children:"You can use the Qwik starter script:"}),(0,t.jsxs)(l.m,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"npm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" run"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" qwik"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" auth"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"pnpm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" run"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" qwik"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" auth"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"yarn"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" qwik"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" auth"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"bun"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" run"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" qwik"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" auth"})]})})})})]})]}),(0,t.jsx)(c.E.Svelte,{children:(0,t.jsxs)(l.m,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"npm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" install"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/sveltekit"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"pnpm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/sveltekit"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"yarn"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/sveltekit"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"bun"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/sveltekit"})]})})})})]})}),(0,t.jsx)(c.E.Express,{children:(0,t.jsxs)(l.m,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"npm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" install"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/express"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"pnpm"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/express"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"yarn"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/express"})]})})})}),(0,t.jsx)(l.m.Tab,{children:(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"bun"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" add"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" @auth/express"})]})})})})]})})]}),(0,t.jsx)(d.U,{type:"info",children:(0,t.jsxs)(s.p,{children:["Installing ",(0,t.jsx)(s.code,{children:"@auth/core"})," is not necessary, as a user you should never have to\ninteract with ",(0,t.jsx)(s.code,{children:"@auth/core"}),"."]})}),(0,t.jsx)(s.h3,{id:i[1].id,children:i[1].value}),(0,t.jsxs)(s.p,{children:["The only environment variable that is mandatory is the ",(0,t.jsx)(s.code,{children:"AUTH_SECRET"}),". This is a random value used by the library to encrypt tokens and email\nverification hashes. (See ",(0,t.jsx)(s.a,{href:"/getting-started/deployment",children:"Deployment"})," to learn more). You can generate one via the official ",(0,t.jsx)(s.a,{href:"https://cli.authjs.dev",children:"Auth.js CLI"})," running:"]}),(0,t.jsx)(s.pre,{icon:o.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"npx"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" auth"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" secret"})]})})}),(0,t.jsxs)(s.p,{children:["This will also add it to your ",(0,t.jsx)(s.code,{children:".env"})," file, respecting the framework conventions (eg.: Next.js’ ",(0,t.jsx)(s.code,{children:".env.local"}),")."]}),(0,t.jsx)(s.h3,{id:i[2].id,children:i[2].value}),(0,t.jsxs)(s.p,{children:["Next, create the Auth.js config file and object. This is where you can control the behaviour of the library and specify custom authentication logic, adapters, etc. We recommend all frameworks to create an ",(0,t.jsx)(s.code,{children:"auth.ts"})," file in the project. In this file we’ll pass in all the options to the framework specific initalization function and then export the route handler(s), signin and signout methods, and more."]}),(0,t.jsx)(d.U,{type:"info",children:(0,t.jsx)(s.p,{children:"You can name this file whatever you want and place it wherever you like, these\nare just conventions we’ve come up with."})}),(0,t.jsxs)(c.E,{children:[(0,t.jsxs)(c.E.Next,{children:[(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Start by creating a new ",(0,t.jsx)(s.code,{children:"auth.ts"})," file at the root of your app with the following content."]}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./auth.ts","data-copy":"",children:(0,t.jsxs)(s.code,{children:[(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" NextAuth "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "next-auth"'})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"handlers"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"signIn"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"signOut"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"auth"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" NextAuth"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"({"})]}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"  providers: [],"})}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"})"})})]})}),(0,t.jsxs)(s.ol,{start:"2",children:["\n",(0,t.jsxs)(s.li,{children:["Add a Route Handler under ",(0,t.jsx)(s.code,{children:"/app/api/auth/[...nextauth]/route.ts"}),"."]}),"\n"]}),(0,t.jsx)(d.U,{children:(0,t.jsxs)(s.p,{children:["This file must be an App Router Route Handler, however, the rest of your app\ncan stay under ",(0,t.jsx)(s.code,{children:"page/"})," if you’d like."]})}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./app/api/auth/[...nextauth]/route.ts","data-copy":"",children:(0,t.jsxs)(s.code,{children:[(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { handlers } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "@/auth"'}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},children:" // Referring to the auth.ts we just created"})]}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"GET"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"POST"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" handlers"})]})]})}),(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Add optional Middleware to keep the session alive, this will update the session expiry every time its called."}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./middleware.ts","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { auth "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"as"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" middleware } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "@/auth"'})]})})})]}),(0,t.jsxs)(c.E.Qwik,{children:[(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Start by creating a new ",(0,t.jsx)(s.code,{children:"plugin@auth.ts"})," file in your ",(0,t.jsx)(s.code,{children:"src/routes"})," directory with the following content."]}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"/src/routes/plugin@auth.ts","data-copy":"",children:(0,t.jsxs)(s.code,{children:[(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { QwikAuth$ } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "@auth/qwik"'})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"onRequest"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"useSession"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"useSignIn"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"useSignOut"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" QwikAuth$"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"("})]}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"  () "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"=>"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" ({"})]}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"    providers: ["}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"..."}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"],"})]}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"  })"})}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:")"})})]})})]}),(0,t.jsxs)(c.E.Svelte,{children:[(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Start by creating a new ",(0,t.jsx)(s.code,{children:"auth.ts"})," file in your ",(0,t.jsx)(s.code,{children:"src/"})," directory with the following content."]}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./src/auth.ts","data-copy":"",children:(0,t.jsxs)(s.code,{children:[(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { SvelteKitAuth } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "@auth/sveltekit"'})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"handle"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" SvelteKitAuth"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"({"})]}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"  providers: [],"})}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"})"})})]})}),(0,t.jsxs)(s.ol,{start:"2",children:["\n",(0,t.jsxs)(s.li,{children:["Re-export the ",(0,t.jsx)(s.code,{children:"handle"})," method in SvelteKit’s ",(0,t.jsx)(s.code,{children:"src/hooks.server.ts"})," file."]}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./src/hooks.server.ts","data-copy":"",children:(0,t.jsx)(s.code,{children:(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { handle } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "./auth"'})]})})}),(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsxs)(s.li,{children:["That handle function adds an ",(0,t.jsx)(s.code,{children:"auth()"})," method onto our ",(0,t.jsx)(s.code,{children:"event.locals"}),", which is available in any ",(0,t.jsx)(s.code,{children:"+layout.server.ts"})," or ",(0,t.jsx)(s.code,{children:"+page.server.ts"})," file. Therefore, we can access the session in our ",(0,t.jsx)(s.code,{children:"load"})," function like this."]}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./src/routes/+layout.server.ts","data-copy":"",children:(0,t.jsxs)(s.code,{children:[(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" type"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { LayoutServerLoad } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "./$types"'})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" load"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:":"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" LayoutServerLoad"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" ="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" async"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" ("}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#E36209","--shiki-dark":"#FFAB70"},children:"event"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:") "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"=>"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{"data-highlighted-line":"",children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"  const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:" session"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" ="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" await"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" event.locals."}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"auth"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"()"})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"  return"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" {"})]}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"    session,"})}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"  }"})}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"}"})})]})})]}),(0,t.jsxs)(c.E.Express,{children:[(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Start by importing ",(0,t.jsx)(s.code,{children:"ExpressAuth"})," and adding the handler to the auth route."]}),"\n"]}),(0,t.jsx)(s.pre,{icon:o.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./src/routes/auth.route.ts","data-copy":"",children:(0,t.jsxs)(s.code,{children:[(0,t.jsxs)(s.span,{"data-highlighted-line":"",children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { ExpressAuth } "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "@auth/express"'})]}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" express "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "express"'})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"const"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:" app"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" ="}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" express"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"()"})]}),"\n",(0,t.jsx)(s.span,{children:" "}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},children:"// If your app is served through a proxy"})}),"\n",(0,t.jsx)(s.span,{children:(0,t.jsx)(s.span,{style:{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},children:"// trust the proxy to allow us to read the `X-Forwarded-*` headers"})}),"\n",(0,t.jsxs)(s.span,{children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"app."}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"set"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"("}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:'"trust proxy"'}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"true"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:")"})]}),"\n",(0,t.jsxs)(s.span,{"data-highlighted-line":"",children:[(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"app."}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"use"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"("}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:'"/auth/*"'}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"ExpressAuth"}),(0,t.jsx)(s.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"({ providers: [] }))"})]})]})}),(0,t.jsxs)(s.p,{children:["Note this creates the Auth.js API, but does not yet protect resources. Continue on to ",(0,t.jsx)(s.a,{href:"/getting-started/session-management/protecting",children:"protecting resources"})," for more details."]})]})]}),(0,t.jsx)(s.h3,{id:i[3].id,children:i[3].value}),(0,t.jsxs)(s.p,{children:["With that, the basic setup is complete! Next we’ll setup the first authentication methods and fill out that ",(0,t.jsx)(s.code,{children:"providers"})," array."]})]})},"/getting-started/installation",{filePath:"pages/getting-started/installation.mdx",timestamp:1726433769e3,pageMap:r.v,frontMatter:{},title:"Installation"},"undefined"==typeof RemoteContent?k:RemoteContent.useTOC)},82732:function(e,i,s){"use strict";s.d(i,{U:function(){return h}});var t=s(651),n=s(69577),r=s(74661);let a={default:"\uD83D\uDCA1",error:"\uD83D\uDEAB",info:(0,t.jsx)(r.AV,{className:"_mt-1"}),warning:"⚠️"},l={default:(0,n.Z)("_border-orange-100 _bg-orange-50 _text-orange-800 dark:_border-orange-400/30 dark:_bg-orange-400/20 dark:_text-orange-300"),error:(0,n.Z)("_border-red-200 _bg-red-100 _text-red-900 dark:_border-red-200/30 dark:_bg-red-900/30 dark:_text-red-200"),info:(0,n.Z)("_border-blue-200 _bg-blue-100 _text-blue-900 dark:_border-blue-200/30 dark:_bg-blue-900/30 dark:_text-blue-200"),warning:(0,n.Z)("_border-yellow-100 _bg-yellow-50 _text-yellow-900 dark:_border-yellow-200/30 dark:_bg-yellow-700/30 dark:_text-yellow-200")};function h({children:e,type:i="default",emoji:s=a[i]}){return(0,t.jsxs)("div",{className:(0,n.Z)("nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4","contrast-more:_border-current contrast-more:dark:_border-current",l[i]),children:[(0,t.jsx)("div",{className:"_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2",style:{fontFamily:'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'},children:s}),(0,t.jsx)("div",{className:"_w-full _min-w-0 _leading-7",children:e})]})}},25156:function(e,i,s){"use strict";s.d(i,{R:function(){return a}});var t=s(651),n=s(69577),r=s(92379);function a({children:e,className:i,style:s,...a}){let l=(0,r.useId)().replaceAll(":","");return(0,t.jsx)("div",{className:(0,n.Z)("nextra-steps _ml-4 _mb-12 _border-l _border-gray-200 _pl-6","dark:_border-neutral-800",i),style:{...s,"--counter-id":l},...a,children:e})}},29920:function(e,i,s){"use strict";let t,n,r;s.d(i,{m:function(){return Q}});var a=s(651),l=s(11263),h=s(68662),d=s(92379),c=s(71452),o=s(45542),k=s(76192),p=s(72099),x=s(70207),u=s(50827),j=s(87327);function g({onFocus:e}){let i;let[s,t]=(0,d.useState)(!0),n=(i=(0,d.useRef)(!1),(0,k.e)(()=>(i.current=!0,()=>{i.current=!1}),[]),i);return s?d.createElement(j._,{as:"button",type:"button",features:j.x.Focusable,onFocus:i=>{i.preventDefault();let s,r=50;s=requestAnimationFrame(function i(){if(r--<=0){s&&cancelAnimationFrame(s);return}if(e()){if(cancelAnimationFrame(s),!n.current)return;t(!1);return}s=requestAnimationFrame(i)})}}):null}var E=s(35873),y=s(20237),F=s(76939),b=s(46751),m=s(10138);let f=d.createContext(null);function w({children:e}){let i=d.useRef({groups:new Map,get(e,i){var s;let t=this.groups.get(e);t||(t=new Map,this.groups.set(e,t));let n=null!=(s=t.get(i))?s:0;return t.set(i,n+1),[Array.from(t.keys()).indexOf(i),function(){let e=t.get(i);e>1?t.set(i,e-1):t.delete(i)}]}});return d.createElement(f.Provider,{value:i},e)}function v(e){let i=d.useContext(f);if(!i)throw Error("You must wrap your component in a <StableCollection>");let s=d.useId(),[t,n]=i.current.get(e,s);return d.useEffect(()=>n,[]),t}var C=s(80579),_=((t=_||{})[t.Forwards=0]="Forwards",t[t.Backwards=1]="Backwards",t),A=((n=A||{})[n.Less=-1]="Less",n[n.Equal=0]="Equal",n[n.Greater=1]="Greater",n),B=((r=B||{})[r.SetSelectedIndex=0]="SetSelectedIndex",r[r.RegisterTab=1]="RegisterTab",r[r.UnregisterTab=2]="UnregisterTab",r[r.RegisterPanel=3]="RegisterPanel",r[r.UnregisterPanel=4]="UnregisterPanel",r);let T={0(e,i){var s;let t=(0,E.z2)(e.tabs,e=>e.current),n=(0,E.z2)(e.panels,e=>e.current),r=t.filter(e=>{var i;return!(null!=(i=e.current)&&i.hasAttribute("disabled"))}),a={...e,tabs:t,panels:n};if(i.index<0||i.index>t.length-1){let s=(0,y.E)(Math.sign(i.index-e.selectedIndex),{[-1]:()=>1,0:()=>(0,y.E)(Math.sign(i.index),{[-1]:()=>0,0:()=>0,1:()=>1}),1:()=>0});if(0===r.length)return a;let n=(0,y.E)(s,{0:()=>t.indexOf(r[0]),1:()=>t.indexOf(r[r.length-1])});return{...a,selectedIndex:-1===n?e.selectedIndex:n}}let l=t.slice(0,i.index),h=[...t.slice(i.index),...l].find(e=>r.includes(e));if(!h)return a;let d=null!=(s=t.indexOf(h))?s:e.selectedIndex;return -1===d&&(d=e.selectedIndex),{...a,selectedIndex:d}},1(e,i){if(e.tabs.includes(i.tab))return e;let s=e.tabs[e.selectedIndex],t=(0,E.z2)([...e.tabs,i.tab],e=>e.current),n=e.selectedIndex;return e.info.current.isControlled||-1===(n=t.indexOf(s))&&(n=e.selectedIndex),{...e,tabs:t,selectedIndex:n}},2:(e,i)=>({...e,tabs:e.tabs.filter(e=>e!==i.tab)}),3:(e,i)=>e.panels.includes(i.panel)?e:{...e,panels:(0,E.z2)([...e.panels,i.panel],e=>e.current)},4:(e,i)=>({...e,panels:e.panels.filter(e=>e!==i.panel)})},I=(0,d.createContext)(null);function D(e){let i=(0,d.useContext)(I);if(null===i){let i=Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,D),i}return i}I.displayName="TabsDataContext";let P=(0,d.createContext)(null);function S(e){let i=(0,d.useContext)(P);if(null===i){let i=Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,S),i}return i}function N(e,i){return(0,y.E)(i.type,T,e,i)}P.displayName="TabsActionsContext";let R=m.VN.RenderStrategy|m.VN.Static,O=(0,m.yV)(function(e,i){var s,t;let n=(0,d.useId)(),{id:r=`headlessui-tabs-tab-${n}`,disabled:a=!1,autoFocus:p=!1,...j}=e,{orientation:g,activation:f,selectedIndex:w,tabs:_,panels:A}=D("Tab"),B=S("Tab"),T=D("Tab"),[I,P]=(0,d.useState)(null),N=(0,d.useRef)(null),R=(0,u.T)(N,i,P);(0,k.e)(()=>B.registerTab(N),[B,N]);let O=v("tabs"),M=_.indexOf(N);-1===M&&(M=O);let K=M===w,L=(0,o.z)(e=>{var i;let s=e();if(s===E.fE.Success&&"auto"===f){let e=null==(i=(0,b.r)(N))?void 0:i.activeElement,s=T.tabs.findIndex(i=>i.current===e);-1!==s&&B.change(s)}return s}),z=(0,o.z)(e=>{let i=_.map(e=>e.current).filter(Boolean);if(e.key===C.R.Space||e.key===C.R.Enter){e.preventDefault(),e.stopPropagation(),B.change(M);return}switch(e.key){case C.R.Home:case C.R.PageUp:return e.preventDefault(),e.stopPropagation(),L(()=>(0,E.jA)(i,E.TO.First));case C.R.End:case C.R.PageDown:return e.preventDefault(),e.stopPropagation(),L(()=>(0,E.jA)(i,E.TO.Last))}if(L(()=>(0,y.E)(g,{vertical:()=>e.key===C.R.ArrowUp?(0,E.jA)(i,E.TO.Previous|E.TO.WrapAround):e.key===C.R.ArrowDown?(0,E.jA)(i,E.TO.Next|E.TO.WrapAround):E.fE.Error,horizontal:()=>e.key===C.R.ArrowLeft?(0,E.jA)(i,E.TO.Previous|E.TO.WrapAround):e.key===C.R.ArrowRight?(0,E.jA)(i,E.TO.Next|E.TO.WrapAround):E.fE.Error}))===E.fE.Success)return e.preventDefault()}),U=(0,d.useRef)(!1),q=(0,o.z)(()=>{var e;U.current||(U.current=!0,null==(e=N.current)||e.focus({preventScroll:!0}),B.change(M),(0,F.Y)(()=>{U.current=!1}))}),V=(0,o.z)(e=>{e.preventDefault()}),{isFocusVisible:Q,focusProps:Y}=(0,l.F)({autoFocus:p}),{isHovered:$,hoverProps:G}=(0,h.X)({isDisabled:a}),{pressed:Z,pressProps:H}=(0,c.x)({disabled:a}),W=(0,d.useMemo)(()=>({selected:K,hover:$,active:Z,focus:Q,autofocus:p,disabled:a}),[K,$,Q,Z,p,a]),X=(0,m.dG)({ref:R,onKeyDown:z,onMouseDown:V,onClick:q,id:r,role:"tab",type:(0,x.f)(e,I),"aria-controls":null==(t=null==(s=A[M])?void 0:s.current)?void 0:t.id,"aria-selected":K,tabIndex:K?0:-1,disabled:a||void 0,autoFocus:p},Y,G,H);return(0,m.sY)({ourProps:X,theirProps:j,slot:W,defaultTag:"button",name:"Tabs.Tab"})}),M=(0,m.yV)(function(e,i){let{defaultIndex:s=0,vertical:t=!1,manual:n=!1,onChange:r,selectedIndex:a=null,...l}=e,h=t?"vertical":"horizontal",c=n?"manual":"auto",x=null!==a,j=(0,p.E)({isControlled:x}),y=(0,u.T)(i),[F,b]=(0,d.useReducer)(N,{info:j,selectedIndex:null!=a?a:s,tabs:[],panels:[]}),f=(0,d.useMemo)(()=>({selectedIndex:F.selectedIndex}),[F.selectedIndex]),v=(0,p.E)(r||(()=>{})),C=(0,p.E)(F.tabs),_=(0,d.useMemo)(()=>({orientation:h,activation:c,...F}),[h,c,F]),A=(0,o.z)(e=>(b({type:1,tab:e}),()=>b({type:2,tab:e}))),B=(0,o.z)(e=>(b({type:3,panel:e}),()=>b({type:4,panel:e}))),T=(0,o.z)(e=>{D.current!==e&&v.current(e),x||b({type:0,index:e})}),D=(0,p.E)(x?e.selectedIndex:F.selectedIndex),S=(0,d.useMemo)(()=>({registerTab:A,registerPanel:B,change:T}),[]);return(0,k.e)(()=>{b({type:0,index:null!=a?a:s})},[a]),(0,k.e)(()=>{if(void 0===D.current||F.tabs.length<=0)return;let e=(0,E.z2)(F.tabs,e=>e.current);e.some((e,i)=>F.tabs[i]!==e)&&T(e.indexOf(F.tabs[D.current]))}),d.createElement(w,null,d.createElement(P.Provider,{value:S},d.createElement(I.Provider,{value:_},_.tabs.length<=0&&d.createElement(g,{onFocus:()=>{var e,i;for(let s of C.current)if((null==(e=s.current)?void 0:e.tabIndex)===0)return null==(i=s.current)||i.focus(),!0;return!1}}),(0,m.sY)({ourProps:{ref:y},theirProps:l,slot:f,defaultTag:"div",name:"Tabs"}))))}),K=(0,m.yV)(function(e,i){let{orientation:s,selectedIndex:t}=D("Tab.List"),n=(0,u.T)(i),r=(0,d.useMemo)(()=>({selectedIndex:t}),[t]);return(0,m.sY)({ourProps:{ref:n,role:"tablist","aria-orientation":s},theirProps:e,slot:r,defaultTag:"div",name:"Tabs.List"})}),L=(0,m.yV)(function(e,i){let{selectedIndex:s}=D("Tab.Panels"),t=(0,u.T)(i),n=(0,d.useMemo)(()=>({selectedIndex:s}),[s]);return(0,m.sY)({ourProps:{ref:t},theirProps:e,slot:n,defaultTag:"div",name:"Tabs.Panels"})}),z=(0,m.yV)(function(e,i){var s,t,n,r;let a=(0,d.useId)(),{id:h=`headlessui-tabs-panel-${a}`,tabIndex:c=0,...o}=e,{selectedIndex:p,tabs:x,panels:g}=D("Tab.Panel"),E=S("Tab.Panel"),y=(0,d.useRef)(null),F=(0,u.T)(y,i);(0,k.e)(()=>E.registerPanel(y),[E,y]);let b=v("panels"),f=g.indexOf(y);-1===f&&(f=b);let w=f===p,{isFocusVisible:C,focusProps:_}=(0,l.F)(),A=(0,d.useMemo)(()=>({selected:w,focus:C}),[w,C]),B=(0,m.dG)({ref:F,id:h,role:"tabpanel","aria-labelledby":null==(t=null==(s=x[f])?void 0:s.current)?void 0:t.id,tabIndex:w?c:-1},_);return w||null!=(n=o.unmount)&&!n||null!=(r=o.static)&&r?(0,m.sY)({ourProps:B,theirProps:o,slot:A,defaultTag:"div",features:R,visible:w,name:"Tabs.Panel"}):d.createElement(j._,{"aria-hidden":"true",...B})}),U=Object.assign(O,{Group:M,List:K,Panels:L,Panel:z});var q=s(69577);function V(e){return!!e&&"object"==typeof e&&"label"in e}let Q=Object.assign(function({items:e,selectedIndex:i,defaultIndex:s=0,onChange:t,children:n,storageKey:r}){let[l,h]=(0,d.useState)(s);(0,d.useEffect)(()=>{void 0!==i&&h(i)},[i]),(0,d.useEffect)(()=>{if(!r)return;function e(e){e.key===r&&h(Number(e.newValue))}let i=Number(localStorage.getItem(r));return h(Number.isNaN(i)?0:i),window.addEventListener("storage",e),()=>{window.removeEventListener("storage",e)}},[]);let c=(0,d.useCallback)(e=>{if(r){let i=String(e);localStorage.setItem(r,i),window.dispatchEvent(new StorageEvent("storage",{key:r,newValue:i}));return}h(e),t?.(e)},[]);return(0,a.jsxs)(M,{selectedIndex:l,defaultIndex:s,onChange:c,tabIndex:-1,children:[(0,a.jsx)(K,{className:(0,q.Z)("nextra-scrollbar _overflow-x-auto _overscroll-x-contain _overflow-y-hidden","_mt-4 _flex _w-full _gap-2 _border-b _border-gray-200 _pb-px dark:_border-neutral-800"),children:e.map((e,i)=>(0,a.jsx)(U,{disabled:V(e)&&e.disabled,className:(0,q.Z)("_ring-inset","_rounded-t _p-2 _font-medium _leading-5 _transition-colors","_-mb-0.5 _select-none _border-b-2","data-[selected]:!_border-current data-[selected]:!_text-primary-600","_border-transparent _text-gray-600 hover:_border-gray-200 hover:_text-black dark:_text-gray-200 dark:hover:_border-neutral-800 dark:hover:_text-white","disabled:_pointer-events-none disabled:_text-gray-400 disabled:dark:_text-neutral-600"),children:V(e)?e.label:e},i))}),(0,a.jsx)(L,{children:n})]})},{displayName:"Tabs",Tab:function({children:e,unmount:i=!1,...s}){return(0,a.jsx)(z,{...s,unmount:i,className:"_rounded _mt-6",children:e})}})}},function(e){e.O(0,[64464,46635,92888,49774,40179],function(){return e(e.s=51070)}),_N_E=e.O()}]);