(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[74792],{81497:function(e,i,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/configuring-github",function(){return t(1377)}])},97502:function(e,i){"use strict";i.Z={src:"/_next/static/media/app-start.17a57a93.webp",height:1607,width:2861,blurDataURL:"data:image/webp;base64,UklGRlQAAABXRUJQVlA4WAoAAAAQAAAABwAAAwAAQUxQSAwAAAABD9D/iAjMf0T/IwBWUDggIgAAALABAJ0BKggABAACQDglpAADFmCgUgAA/v3Mqiv64iAAAAA=",blurWidth:8,blurHeight:4}},99111:function(e,i){"use strict";i.Z={src:"/_next/static/media/github-auth-success.b1a5087d.webp",height:1607,width:2865,blurDataURL:"data:image/webp;base64,UklGRlwAAABXRUJQVlA4WAoAAAAQAAAABwAAAwAAQUxQSBQAAAABF9D/iAgQZNsUbRJHu3tE/2OXBFZQOCAiAAAAsAEAnQEqCAAEAAJAOCWkAAMWYg38AAD+/YvFiAc+8sAAAA==",blurWidth:8,blurHeight:4}},59371:function(e,i,t){"use strict";t.d(i,{E:function(){return u}});var s=t(651),n=t(58354),r=t(15008),a=t(14745),l=t(92379);let d="authjs.codeTab.framework";u.Next=x,u.NextClient=p,u.Svelte=g,u.Express=k,u.Qwik=j;let h={[x.name]:"Next.js",[j.name]:"Qwik",[g.name]:"SvelteKit",[k.name]:"Express"},o={[x.name]:"Next.js",[p.name]:"Next.js (Client)",[j.name]:"Qwik",[g.name]:"SvelteKit",[k.name]:"Express"},c=(e,i)=>Object.values(e).findIndex(e=>e.toLowerCase()===i.toLowerCase());function u(e){let{children:i}=e,t=(0,n.useRouter)(),{query:{framework:u}}=t,x=l.Children.toArray(i),{project:g}=(0,r.LU)(),k=x.some(e=>e&&e.type.name===p.name)?o:h,[j,A]=(0,l.useState)(0);return(0,l.useEffect)(()=>{let e=Number(window.localStorage.getItem(d));u?(window.localStorage.setItem(d,String(c(k,u))),A(c(k,u))):e&&A(e)},[u,k]),(0,s.jsx)("div",{className:"[&_div[role='tablist']]:!pb-0",children:(0,s.jsx)(a.m,{storageKey:d,items:Object.values(k),selectedIndex:j,children:Object.keys(k).map(e=>{var i;let n=x.find(i=>{var t;return(null==i?void 0:null===(t=i.type)||void 0===t?void 0:t.name)===e});return Object.keys(null!==(i=null==n?void 0:n.props)&&void 0!==i?i:{}).length?n:(0,s.jsx)(a.m.Tab,{children:(0,s.jsxs)("p",{className:"rounded-lg bg-slate-100 p-6 font-semibold dark:bg-neutral-950",children:[k[e]," not documented yet. Help us by contributing"," ",(0,s.jsx)("a",{className:"underline",target:"_blank",href:"".concat(g.link,"/edit/main/docs/pages").concat(t.pathname,".mdx"),rel:"noreferrer",children:"here"}),"."]})},e)})})})}function p(e){let{children:i}=e;return(0,s.jsx)(a.m.Tab,{children:i})}function x(e){let{children:i}=e;return(0,s.jsx)(a.m.Tab,{children:i})}function g(e){let{children:i}=e;return(0,s.jsx)(a.m.Tab,{children:i})}function k(e){let{children:i}=e;return(0,s.jsx)(a.m.Tab,{children:i})}function j(e){let{children:i}=e;return(0,s.jsx)(a.m.Tab,{children:i})}},36708:function(e,i,t){"use strict";t.d(i,{w:function(){return d}});var s=t(651),n=t(80324),r=t.n(n),a=t(90924),l=t.n(a);function d(e){let{src:i,alt:t,full:n,className:a}=e;return(0,s.jsx)("div",{className:r()("mt-6 flex justify-center overflow-hidden rounded-xl border border-zinc-200 shadow-lg",n?"bg-white":"m-8 bg-zinc-100",a),children:(0,s.jsx)(l(),{src:i,alt:t,className:r()("w-auto select-none bg-white",n?"":"ring-1 ring-gray-200")})})}},1377:function(e,i,t){"use strict";t.r(i),t.d(i,{default:function(){return y},useTOC:function(){return A}});var s=t(651),n=t(64464),r=t(46635),a=t(19829),l=t(14745),d=t(82732),h=t(36708),o=t(59371),c={src:"/_next/static/media/creating-oauth-app.fc2c1c16.webp",height:1802,width:2994,blurDataURL:"data:image/webp;base64,UklGRlYAAABXRUJQVlA4WAoAAAAQAAAABwAABAAAQUxQSAwAAAABD9D/iAhMYET/IwJWUDggJAAAAJABAJ0BKggABQACQDglpAAC51m2AAD+/CU9S40n5oYEQAAAAA==",blurWidth:8,blurHeight:5},u={src:"/_next/static/media/callback-url.e3627403.webp",height:1798,width:2990,blurDataURL:"data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACQAQCdASoIAAUAAkA4JaQAAudIE3AA/vvCvexUFrMU3x7YKiAgAA==",blurWidth:8,blurHeight:5},p={src:"/_next/static/media/clientid-secret.73de72fd.webp",height:1802,width:2989,blurDataURL:"data:image/webp;base64,UklGRloAAABXRUJQVlA4WAoAAAAQAAAABwAABAAAQUxQSAwAAAABD9D/iAjMf0T/IwBWUDggKAAAAJABAJ0BKggABQACQDglpAAC5Ow4gAD++8K97QAR4E6xeL3rVQIoAAA=",blurWidth:8,blurHeight:5},x=t(97502),g={src:"/_next/static/media/github-auth-credentials.34ca1f75.webp",height:1605,width:2865,blurDataURL:"data:image/webp;base64,UklGRlwAAABXRUJQVlA4WAoAAAAQAAAABwAAAwAAQUxQSBQAAAABF9D/iAgQZNsUbRJHu3tE/2OXBFZQOCAiAAAAsAEAnQEqCAAEAAJAOCWkAAL3gspOAAD+/YSWqLubQ2QAAA==",blurWidth:8,blurHeight:4},k=t(99111),j=t(74661);function A(e){return[{value:"Setting up Auth.js",id:"setting-up-authjs",depth:2},{value:"Installing Auth.js and Next.js",id:"installing-authjs-and-nextjs",depth:3},{value:"Creating the server config",id:"creating-the-server-config",depth:3},{value:"Adding environment variables",id:"adding-environment-variables",depth:3},{value:"Registering your App",id:"registering-your-app",depth:2},{value:"Creating an OAuth App in GitHub",id:"creating-an-oauth-app-in-github",depth:3},{value:"Secrets",id:"secrets",depth:3},{value:"Wiring all together",id:"wiring-all-together",depth:2},{value:"Deployment",id:"deployment",depth:2}]}function b(e,i){throw Error("Expected "+(i?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var y=(0,n.c)(function(e){let{toc:i=A(e)}=e,t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",strong:"strong",...(0,a.a)(),...e.components};return l.m||b("$Tabs",!1),l.m.Tab||b("$Tabs.Tab",!0),o.E||b("Code",!1),o.E.Express||b("Code.Express",!0),o.E.Next||b("Code.Next",!0),o.E.Qwik||b("Code.Qwik",!0),o.E.Svelte||b("Code.Svelte",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{children:"OAuth with GitHub"}),"\n",(0,s.jsxs)(t.p,{children:["In this tutorial, we’ll be setting up Auth.js in a Next.js application to be able to log in with ",(0,s.jsx)(t.strong,{children:"GitHub"}),"."]}),"\n",(0,s.jsx)(d.U,{type:"info",children:(0,s.jsxs)(t.p,{children:["This tutorial uses GitHub as the OAuth provider and Next.js as the framework.\nNote that for any OAuth provider or any framework, ",(0,s.jsx)(t.strong,{children:"the process will be the\nsame/very similar"}),", mainly differing on how you register your application in\nthe chosen provider’s dashboard."]})}),"\n",(0,s.jsx)(t.h2,{id:i[0].id,children:i[0].value}),"\n",(0,s.jsx)(t.h3,{id:i[1].id,children:i[1].value}),"\n",(0,s.jsxs)(t.p,{children:["For this tutorial, we’re gonna use the default ",(0,s.jsx)(t.a,{href:"https://github.com/nextauthjs/next-auth-example",children:"Auth.js & Next.js example app"}),". If you already have an existing Next.js app, it should work too. If you don’t, clone the repository:"]}),"\n",(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsx)(t.code,{children:(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"git"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" clone"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" https://github.com/nextauthjs/next-auth-example.git"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" && "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"cd"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" next-auth-example"})]})})}),"\n",(0,s.jsxs)(t.p,{children:["If you’re using the example app, Auth.js is already installed, otherwise follow the ",(0,s.jsx)(t.a,{href:"/getting-started/installation",children:"installation instructions"}),"."]}),"\n",(0,s.jsx)(t.h3,{id:i[2].id,children:i[2].value}),"\n",(0,s.jsx)(t.p,{children:"Next, we’re gonna create the main Auth.js configuration file which contains the necessary configuration for Auth.js, as well as the dynamic route handler."}),"\n",(0,s.jsx)(t.pre,{icon:j.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./auth.ts","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" NextAuth "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "next-auth"'})]}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" GitHub "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "next-auth/providers/github"'})]}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"handlers"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"auth"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" } "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:" NextAuth"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"({"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"  providers: [GitHub],"})}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"})"})})]})}),"\n",(0,s.jsx)(t.pre,{icon:j.KP,tabIndex:"0","data-language":"ts","data-word-wrap":"","data-filename":"./app/api/auth/[...nextauth]/route.ts","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"import"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { handlers } "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"from"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "@/auth"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},children:" // Referring to the auth.ts we just created"})]}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" { "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"GET"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:", "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:"POST"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" } "}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:" handlers"})]}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"export"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" const"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},children:" runtime"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:" ="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:' "edge"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},children:" // optional"})]})]})}),"\n",(0,s.jsxs)(t.p,{children:["Since this is a ",(0,s.jsx)(t.a,{href:"https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments",children:"catch-all dynamic route"}),", it will respond to all the relevant Auth.js API routes so that your application can interact with the chosen OAuth provider using the ",(0,s.jsx)(t.a,{href:"https://oauth.net/2",children:"OAuth 2"})," protocol."]}),"\n",(0,s.jsx)(t.h3,{id:i[3].id,children:i[3].value}),"\n",(0,s.jsxs)(t.p,{children:["If you haven’t, create an ",(0,s.jsx)(t.code,{children:".env.local"})," file as explained in the ",(0,s.jsx)(t.a,{href:"/getting-started/installation",children:"installation section"})," and add the following two GitHub variables:"]}),"\n",(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-filename":".env.local","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"AUTH_SECRET"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:'"changeMe"'})]}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{"data-highlighted-line":"",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"AUTH_GITHUB_ID"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="})]}),"\n",(0,s.jsxs)(t.span,{"data-highlighted-line":"",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"AUTH_GITHUB_SECRET"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="})]})]})}),"\n",(0,s.jsxs)(t.p,{children:["We will be filling ",(0,s.jsx)(t.code,{children:"AUTH_GITHUB_ID"})," and ",(0,s.jsx)(t.code,{children:"AUTH_GITHUB_SECRET"})," with proper values from the GitHub Developer Portal once we have registered our application in GitHub."]}),"\n",(0,s.jsx)(t.h2,{id:i[4].id,children:i[4].value}),"\n",(0,s.jsx)(t.h3,{id:i[5].id,children:i[5].value}),"\n",(0,s.jsx)(t.p,{children:"To get the required credentials from GitHub, we need to create an application in their developer settings."}),"\n",(0,s.jsxs)(t.p,{children:["Go to the ",(0,s.jsx)(t.a,{href:"https://github.com/settings/developers",children:"GitHub developer settings"}),", also found under ",(0,s.jsx)(t.strong,{children:"Settings"})," → ",(0,s.jsx)(t.strong,{children:"Developers"})," → ",(0,s.jsx)(t.strong,{children:"OAuth Apps"}),", and click “New OAuth App”:"]}),"\n","\n",(0,s.jsx)(h.w,{src:c,alt:"Creating an OAuth App on GitHub"}),"\n",(0,s.jsx)(t.p,{children:"Next, you’ll be presented with a screen to register your application. Fill in all the required fields."}),"\n","\n",(0,s.jsx)(h.w,{src:u}),"\n",(0,s.jsxs)(t.p,{children:["The default callback URL should generally take the form of ",(0,s.jsx)(t.code,{children:"[origin]/api/auth/callback/[provider]"}),", however, the default is slightly different depending on which framework you’re using."]}),"\n",(0,s.jsxs)(o.E,{children:[(0,s.jsx)(o.E.Next,{children:(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Local"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"http://localhost:3000/api/auth/callback/github"})}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Prod"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"https://app.company.com/api/auth/callback/github"})})]})})}),(0,s.jsxs)(o.E.Qwik,{children:[(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Local"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"http://localhost:3000/auth/callback/github"})}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Prod"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"https://app.company.com/auth/callback/github"})})]})}),(0,s.jsxs)(t.p,{children:["Notice no ",(0,s.jsx)(t.code,{children:"/api"})," path parameter."]})]}),(0,s.jsxs)(o.E.Svelte,{children:[(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Local"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"http://localhost:3000/auth/callback/github"})}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Prod"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"https://app.company.com/auth/callback/github"})})]})}),(0,s.jsxs)(t.p,{children:["Notice no ",(0,s.jsx)(t.code,{children:"/api"})," path parameter."]})]}),(0,s.jsxs)(o.E.Express,{children:[(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Local"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"http://localhost:3000/auth/callback/github"})}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"//"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" Prod"})]}),"\n",(0,s.jsx)(t.span,{children:(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"https://app.company.com/auth/callback/github"})})]})}),(0,s.jsxs)(t.p,{children:["Notice no ",(0,s.jsx)(t.code,{children:"/api"})," path parameter."]})]})]}),"\n",(0,s.jsxs)(t.p,{children:["Once you’ve entered all the required fields, press ",(0,s.jsx)(t.strong,{children:"“Register application”"}),"."]}),"\n",(0,s.jsx)(t.h3,{id:i[6].id,children:i[6].value}),"\n",(0,s.jsx)(t.p,{children:"After successfully registering your application, GitHub will present us with the required details."}),"\n","\n",(0,s.jsx)(h.w,{src:p,alt:"Generating clientId and clientSecret"}),"\n",(0,s.jsxs)(t.p,{children:["We need 2 things from this screen, the ",(0,s.jsx)(t.strong,{children:"Client ID"})," and ",(0,s.jsx)(t.strong,{children:"Client Secret"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"The Client ID is always visible, it is a public identifier of your OAuth application within GitHub."}),"\n",(0,s.jsxs)(t.p,{children:["To get a Client Secret, you have to click on ",(0,s.jsx)(t.strong,{children:"“Generate a new client secret”"}),", which will create your first client secret. You can easily create a new client secret here in case your first one gets leaked, lost, etc."]}),"\n",(0,s.jsx)(d.U,{children:(0,s.jsxs)(t.p,{children:["Keep your ",(0,s.jsx)(t.strong,{children:"Client Secret"})," secure and never expose it to the public or share\nit with people outside your organization."]})}),"\n",(0,s.jsx)(t.h2,{id:i[7].id,children:i[7].value}),"\n",(0,s.jsxs)(t.p,{children:["Now that we have the required Client ID and Client Secret, paste them into your ",(0,s.jsx)(t.code,{children:".env.local"})," file we created earlier."]}),"\n",(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-filename":".env.local","data-copy":"",children:(0,s.jsxs)(t.code,{children:[(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"AUTH_SECRET"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:'"changeMe"'})]}),"\n",(0,s.jsx)(t.span,{children:" "}),"\n",(0,s.jsxs)(t.span,{"data-highlighted-line":"",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"AUTH_GITHUB_ID"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:"{clientId}"})]}),"\n",(0,s.jsxs)(t.span,{"data-highlighted-line":"",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},children:"AUTH_GITHUB_SECRET"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:"{clientSecret}"})]})]})}),"\n",(0,s.jsx)(t.p,{children:"With all the pieces in place, you can now start your local dev server and test the login process."}),"\n",(0,s.jsxs)(l.m,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,s.jsx)(l.m.Tab,{children:(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsx)(t.code,{children:(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"npm"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" run"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" dev"})]})})})}),(0,s.jsx)(l.m.Tab,{children:(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsx)(t.code,{children:(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"pnpm"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" run"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" dev"})]})})})}),(0,s.jsx)(l.m.Tab,{children:(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsx)(t.code,{children:(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"yarn"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" dev"})]})})})}),(0,s.jsx)(l.m.Tab,{children:(0,s.jsx)(t.pre,{icon:j.Fx,tabIndex:"0","data-language":"bash","data-word-wrap":"","data-copy":"",children:(0,s.jsx)(t.code,{children:(0,s.jsxs)(t.span,{children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},children:"bun"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" run"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},children:" dev"})]})})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Navigate to ",(0,s.jsx)(t.a,{href:"http://localhost:3000",children:(0,s.jsx)(t.code,{children:"http://localhost:3000"})}),". You should see the following page:"]}),"\n","\n",(0,s.jsx)(h.w,{src:x.Z,alt:"App Start"}),"\n",(0,s.jsxs)(t.p,{children:["Click on ",(0,s.jsx)(t.strong,{children:"“Sign in”"}),", you should be redirected to the default Auth.js signin page. You can ",(0,s.jsx)(t.a,{href:"/guides/pages/signin",children:"customize this page"})," to fit your needs. Next, click on ",(0,s.jsx)(t.strong,{children:"“Sign in with GitHub”"}),". Auth.js will redirect you to GitHub, where GitHub will recognize your application and ask the user to confirm they want to authenticate to your new application by entering their credentials."]}),"\n","\n",(0,s.jsx)(h.w,{src:g,alt:"GitHub Credentials"}),"\n",(0,s.jsx)(t.p,{children:"Once authenticated, GitHub will redirect the user back to your app and Auth.js will take care of the rest:"}),"\n","\n",(0,s.jsx)(h.w,{src:k.Z,alt:"GitHub Authentication Success"}),"\n",(0,s.jsx)(t.p,{children:"If you’ve landed back here that means everything worked! We have completed the whole OAuth authentication flow so that users can log in to your application via GitHub!"}),"\n",(0,s.jsx)(d.U,{type:"info",children:(0,s.jsx)(t.p,{children:"As you can see, most of the time required setting up OAuth in your application\nis spent registering your application in the OAuth provider’s dashboard (some\nare easier to navigate, some are harder). Once registered, the setup via\nAuth.js should be straight forward."})}),"\n",(0,s.jsx)(t.h2,{id:i[8].id,children:i[8].value}),"\n",(0,s.jsx)(t.p,{children:"Before you can release your app to production, you’ll need to change a few things."}),"\n",(0,s.jsxs)(t.p,{children:["Unfortunately, GitHub is among the providers which do not let you register multiple callback URLs for one application. Therefore, you’ll need to register a separate application in GitHub’s dashboard ",(0,s.jsx)(t.a,{href:"/guides/configuring-github#registering-our-app",children:"as we did previously"})," but set the callback URL to your application’s production domain (.i.e ",(0,s.jsx)(t.code,{children:"https://example.com/api/auth/callback/github"}),"). You’ll then also have a new ",(0,s.jsx)(t.strong,{children:"Client ID"})," and ",(0,s.jsx)(t.strong,{children:"Client Secret"})," that you need to add to your production environment via your hosting provider’s dashboard (Vercel, Netlify, Cloudflare, etc.) or however you manage environment variables in production."]}),"\n",(0,s.jsxs)(t.p,{children:["Refer to the ",(0,s.jsx)(t.a,{href:"/getting-started/deployment",children:"Deployment page"})," for more information."]})]})},"/guides/configuring-github",{filePath:"pages/guides/configuring-github.mdx",timestamp:1725440829e3,pageMap:r.v,frontMatter:{},title:"OAuth with GitHub"},"undefined"==typeof RemoteContent?A:RemoteContent.useTOC)},82732:function(e,i,t){"use strict";t.d(i,{U:function(){return d}});var s=t(651),n=t(69577),r=t(74661);let a={default:"\uD83D\uDCA1",error:"\uD83D\uDEAB",info:(0,s.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 d({children:e,type:i="default",emoji:t=a[i]}){return(0,s.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,s.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:t}),(0,s.jsx)("div",{className:"_w-full _min-w-0 _leading-7",children:e})]})}},14745:function(e,i,t){"use strict";let s,n,r;t.d(i,{m:function(){return z}});var a=t(651),l=t(11263),d=t(68662),h=t(92379),o=t(85567),c=t(82417),u=t(47141),p=t(58954),x=t(59581),g=t(60342),k=t(45389);function j({onFocus:e}){let i;let[t,s]=(0,h.useState)(!0),n=(i=(0,h.useRef)(!1),(0,u.e)(()=>(i.current=!0,()=>{i.current=!1}),[]),i);return t?h.createElement(k._,{as:"button",type:"button",features:k.x.Focusable,onFocus:i=>{i.preventDefault();let t,r=50;t=requestAnimationFrame(function i(){if(r--<=0){t&&cancelAnimationFrame(t);return}if(e()){if(cancelAnimationFrame(t),!n.current)return;s(!1);return}t=requestAnimationFrame(i)})}}):null}var A=t(9630),b=t(97496),y=t(85018),f=t(66782),m=t(79026);let E=h.createContext(null);function w({children:e}){let i=h.useRef({groups:new Map,get(e,i){var t;let s=this.groups.get(e);s||(s=new Map,this.groups.set(e,s));let n=null!=(t=s.get(i))?t:0;return s.set(i,n+1),[Array.from(s.keys()).indexOf(i),function(){let e=s.get(i);e>1?s.set(i,e-1):s.delete(i)}]}});return h.createElement(E.Provider,{value:i},e)}function F(e){let i=h.useContext(E);if(!i)throw Error("You must wrap your component in a <StableCollection>");let t=h.useId(),[s,n]=i.current.get(e,t);return h.useEffect(()=>n,[]),s}var v=t(22898),C=((s=C||{})[s.Forwards=0]="Forwards",s[s.Backwards=1]="Backwards",s),_=((n=_||{})[n.Less=-1]="Less",n[n.Equal=0]="Equal",n[n.Greater=1]="Greater",n),T=((r=T||{})[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 B={0(e,i){var t;let s=(0,A.z2)(e.tabs,e=>e.current),n=(0,A.z2)(e.panels,e=>e.current),r=s.filter(e=>{var i;return!(null!=(i=e.current)&&i.hasAttribute("disabled"))}),a={...e,tabs:s,panels:n};if(i.index<0||i.index>s.length-1){let t=(0,b.E)(Math.sign(i.index-e.selectedIndex),{[-1]:()=>1,0:()=>(0,b.E)(Math.sign(i.index),{[-1]:()=>0,0:()=>0,1:()=>1}),1:()=>0});if(0===r.length)return a;let n=(0,b.E)(t,{0:()=>s.indexOf(r[0]),1:()=>s.indexOf(r[r.length-1])});return{...a,selectedIndex:-1===n?e.selectedIndex:n}}let l=s.slice(0,i.index),d=[...s.slice(i.index),...l].find(e=>r.includes(e));if(!d)return a;let h=null!=(t=s.indexOf(d))?t:e.selectedIndex;return -1===h&&(h=e.selectedIndex),{...a,selectedIndex:h}},1(e,i){if(e.tabs.includes(i.tab))return e;let t=e.tabs[e.selectedIndex],s=(0,A.z2)([...e.tabs,i.tab],e=>e.current),n=e.selectedIndex;return e.info.current.isControlled||-1===(n=s.indexOf(t))&&(n=e.selectedIndex),{...e,tabs:s,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,A.z2)([...e.panels,i.panel],e=>e.current)},4:(e,i)=>({...e,panels:e.panels.filter(e=>e!==i.panel)})},I=(0,h.createContext)(null);function D(e){let i=(0,h.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 S=(0,h.createContext)(null);function U(e){let i=(0,h.useContext)(S);if(null===i){let i=Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,U),i}return i}function N(e,i){return(0,b.E)(i.type,B,e,i)}S.displayName="TabsActionsContext";let R=m.VN.RenderStrategy|m.VN.Static,O=(0,m.yV)(function(e,i){var t,s;let n=(0,h.useId)(),{id:r=`headlessui-tabs-tab-${n}`,disabled:a=!1,autoFocus:p=!1,...k}=e,{orientation:j,activation:E,selectedIndex:w,tabs:C,panels:_}=D("Tab"),T=U("Tab"),B=D("Tab"),[I,S]=(0,h.useState)(null),N=(0,h.useRef)(null),R=(0,g.T)(N,i,S);(0,u.e)(()=>T.registerTab(N),[T,N]);let O=F("tabs"),P=C.indexOf(N);-1===P&&(P=O);let H=P===w,Q=(0,c.z)(e=>{var i;let t=e();if(t===A.fE.Success&&"auto"===E){let e=null==(i=(0,f.r)(N))?void 0:i.activeElement,t=B.tabs.findIndex(i=>i.current===e);-1!==t&&T.change(t)}return t}),G=(0,c.z)(e=>{let i=C.map(e=>e.current).filter(Boolean);if(e.key===v.R.Space||e.key===v.R.Enter){e.preventDefault(),e.stopPropagation(),T.change(P);return}switch(e.key){case v.R.Home:case v.R.PageUp:return e.preventDefault(),e.stopPropagation(),Q(()=>(0,A.jA)(i,A.TO.First));case v.R.End:case v.R.PageDown:return e.preventDefault(),e.stopPropagation(),Q(()=>(0,A.jA)(i,A.TO.Last))}if(Q(()=>(0,b.E)(j,{vertical:()=>e.key===v.R.ArrowUp?(0,A.jA)(i,A.TO.Previous|A.TO.WrapAround):e.key===v.R.ArrowDown?(0,A.jA)(i,A.TO.Next|A.TO.WrapAround):A.fE.Error,horizontal:()=>e.key===v.R.ArrowLeft?(0,A.jA)(i,A.TO.Previous|A.TO.WrapAround):e.key===v.R.ArrowRight?(0,A.jA)(i,A.TO.Next|A.TO.WrapAround):A.fE.Error}))===A.fE.Success)return e.preventDefault()}),L=(0,h.useRef)(!1),W=(0,c.z)(()=>{var e;L.current||(L.current=!0,null==(e=N.current)||e.focus({preventScroll:!0}),T.change(P),(0,y.Y)(()=>{L.current=!1}))}),M=(0,c.z)(e=>{e.preventDefault()}),{isFocusVisible:z,focusProps:V}=(0,l.F)({autoFocus:p}),{isHovered:Y,hoverProps:J}=(0,d.X)({isDisabled:a}),{pressed:q,pressProps:Z}=(0,o.x)({disabled:a}),K=(0,h.useMemo)(()=>({selected:H,hover:Y,active:q,focus:z,autofocus:p,disabled:a}),[H,Y,z,q,p,a]),X=(0,m.dG)({ref:R,onKeyDown:G,onMouseDown:M,onClick:W,id:r,role:"tab",type:(0,x.f)(e,I),"aria-controls":null==(s=null==(t=_[P])?void 0:t.current)?void 0:s.id,"aria-selected":H,tabIndex:H?0:-1,disabled:a||void 0,autoFocus:p},V,J,Z);return(0,m.sY)({ourProps:X,theirProps:k,slot:K,defaultTag:"button",name:"Tabs.Tab"})}),P=(0,m.yV)(function(e,i){let{defaultIndex:t=0,vertical:s=!1,manual:n=!1,onChange:r,selectedIndex:a=null,...l}=e,d=s?"vertical":"horizontal",o=n?"manual":"auto",x=null!==a,k=(0,p.E)({isControlled:x}),b=(0,g.T)(i),[y,f]=(0,h.useReducer)(N,{info:k,selectedIndex:null!=a?a:t,tabs:[],panels:[]}),E=(0,h.useMemo)(()=>({selectedIndex:y.selectedIndex}),[y.selectedIndex]),F=(0,p.E)(r||(()=>{})),v=(0,p.E)(y.tabs),C=(0,h.useMemo)(()=>({orientation:d,activation:o,...y}),[d,o,y]),_=(0,c.z)(e=>(f({type:1,tab:e}),()=>f({type:2,tab:e}))),T=(0,c.z)(e=>(f({type:3,panel:e}),()=>f({type:4,panel:e}))),B=(0,c.z)(e=>{D.current!==e&&F.current(e),x||f({type:0,index:e})}),D=(0,p.E)(x?e.selectedIndex:y.selectedIndex),U=(0,h.useMemo)(()=>({registerTab:_,registerPanel:T,change:B}),[]);return(0,u.e)(()=>{f({type:0,index:null!=a?a:t})},[a]),(0,u.e)(()=>{if(void 0===D.current||y.tabs.length<=0)return;let e=(0,A.z2)(y.tabs,e=>e.current);e.some((e,i)=>y.tabs[i]!==e)&&B(e.indexOf(y.tabs[D.current]))}),h.createElement(w,null,h.createElement(S.Provider,{value:U},h.createElement(I.Provider,{value:C},C.tabs.length<=0&&h.createElement(j,{onFocus:()=>{var e,i;for(let t of v.current)if((null==(e=t.current)?void 0:e.tabIndex)===0)return null==(i=t.current)||i.focus(),!0;return!1}}),(0,m.sY)({ourProps:{ref:b},theirProps:l,slot:E,defaultTag:"div",name:"Tabs"}))))}),H=(0,m.yV)(function(e,i){let{orientation:t,selectedIndex:s}=D("Tab.List"),n=(0,g.T)(i),r=(0,h.useMemo)(()=>({selectedIndex:s}),[s]);return(0,m.sY)({ourProps:{ref:n,role:"tablist","aria-orientation":t},theirProps:e,slot:r,defaultTag:"div",name:"Tabs.List"})}),Q=(0,m.yV)(function(e,i){let{selectedIndex:t}=D("Tab.Panels"),s=(0,g.T)(i),n=(0,h.useMemo)(()=>({selectedIndex:t}),[t]);return(0,m.sY)({ourProps:{ref:s},theirProps:e,slot:n,defaultTag:"div",name:"Tabs.Panels"})}),G=(0,m.yV)(function(e,i){var t,s,n,r;let a=(0,h.useId)(),{id:d=`headlessui-tabs-panel-${a}`,tabIndex:o=0,...c}=e,{selectedIndex:p,tabs:x,panels:j}=D("Tab.Panel"),A=U("Tab.Panel"),b=(0,h.useRef)(null),y=(0,g.T)(b,i);(0,u.e)(()=>A.registerPanel(b),[A,b]);let f=F("panels"),E=j.indexOf(b);-1===E&&(E=f);let w=E===p,{isFocusVisible:v,focusProps:C}=(0,l.F)(),_=(0,h.useMemo)(()=>({selected:w,focus:v}),[w,v]),T=(0,m.dG)({ref:y,id:d,role:"tabpanel","aria-labelledby":null==(s=null==(t=x[E])?void 0:t.current)?void 0:s.id,tabIndex:w?o:-1},C);return w||null!=(n=c.unmount)&&!n||null!=(r=c.static)&&r?(0,m.sY)({ourProps:T,theirProps:c,slot:_,defaultTag:"div",features:R,visible:w,name:"Tabs.Panel"}):h.createElement(k._,{"aria-hidden":"true",...T})}),L=Object.assign(O,{Group:P,List:H,Panels:Q,Panel:G});var W=t(69577);function M(e){return!!e&&"object"==typeof e&&"label"in e}let z=Object.assign(function({items:e,selectedIndex:i,defaultIndex:t=0,onChange:s,children:n,storageKey:r}){let[l,d]=(0,h.useState)(t);(0,h.useEffect)(()=>{void 0!==i&&d(i)},[i]),(0,h.useEffect)(()=>{if(!r)return;function e(e){e.key===r&&d(Number(e.newValue))}let i=Number(localStorage.getItem(r));return d(Number.isNaN(i)?0:i),window.addEventListener("storage",e),()=>{window.removeEventListener("storage",e)}},[]);let o=(0,h.useCallback)(e=>{if(r){let i=String(e);localStorage.setItem(r,i),window.dispatchEvent(new StorageEvent("storage",{key:r,newValue:i}));return}d(e),s?.(e)},[]);return(0,a.jsxs)(P,{selectedIndex:l,defaultIndex:t,onChange:o,tabIndex:-1,children:[(0,a.jsx)(H,{className:(0,W.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)(L,{disabled:M(e)&&e.disabled,className:(0,W.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:M(e)?e.label:e},i))}),(0,a.jsx)(Q,{children:n})]})},{displayName:"Tabs",Tab:function({children:e,unmount:i=!1,...t}){return(0,a.jsx)(G,{...t,unmount:i,className:"_rounded _mt-6",children:e})}})}},function(e){e.O(0,[64464,46635,92888,49774,40179],function(){return e(e.s=81497)}),_N_E=e.O()}]);