Authentification

var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},l=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!y.call(t,r)&&r!==a&&i(t,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return t};var b=(t,e,a)=>(a=t!=null?p(f(t)):{},l(e||!t||!t.__esModule?i(a,"default",{value:t,enumerable:!0}):a,t)),v=t=>l(i({},"__esModule",{value:!0}),t);var d=m((T,c)=>{c.exports=jsx_runtime});var C={};(C,{default:()=>h,frontmatter:()=>w});var n=b(d()),w={title:"Authentification",description:"How to config the authentification."};function s(t){let e={a:"a",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...t.components},{Callout:a}=e;return a||E("Callout",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{type:"note",twClass:"mt-0",children:(0,n.jsxs)(e.p,{children:["The auth part is similar at the ",(0,n.jsx)(e.a,{href:"https://authjs.dev/",children:"authjs"}),documentation. You can follow the official documentation,(0,n.jsx)(e.a,{href:"https://authjs.dev/getting-started/installation#setup-environment",children:"here"}), if you want.]})}), ,(0,n.jsx)(a,{type:"danger",twClass:"mt-3",children:(0,n.jsxs)(e.p,{children:["After upgrade Auth.js to v5: ",(0,n.jsx)(e.code,{children:"NEXTAUTH_URL"})," has removed from ",(0,n.jsx)(e.code,{children:".env"}),file. Same thing,(0,n.jsx)(e.strong,{children:"in production"}),"."]})}), ,(0,n.jsxs)(e.h2,{id:"update-auth_secret-variable",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#update-auth_secret-variable",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Update auth_secret variable"]}), ,(0,n.jsxs)(e.p,{children:["The only environment variable that is mandatory is the ",(0,n.jsx)(e.code,{children:"AUTH_SECRET"}),". This is a random value used by the library to encrypt tokens and email verification hashes. You can generate one via running:"]}), ,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",rawString:npx auth secret ,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" auth"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" secret"})]})})})}), ,(0,n.jsxs)(e.p,{children:["Alternatively, you can use the ",(0,n.jsx)(e.code,{children:"openssl"})," CLI, ",(0,n.jsx)(e.code,{children:"openssl rand -base64 33"}),"."]}), ,(0,n.jsxs)(e.p,{children:["Or this ",(0,n.jsx)(e.a,{href:"https://generate-secret.vercel.app/32",children:"link"})," for generate a random secret key."]}), ,(0,n.jsxs)(e.p,{children:["Then add it to your ",(0,n.jsx)(e.code,{children:".env"})," file:"]}), ,(0,n.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,n.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"github-dark",children:".env.local"}),(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"github-dark",rawString:AUTH_SECRET = secret; ,children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"AUTH_SECRET"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" secret;"})]})})})]}), ,(0,n.jsxs)(e.h2,{id:"update-google-client-variables",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#update-google-client-variables",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Update google client variables"]}), ,(0,n.jsx)(e.p,{children:"In this section, you can update these variables:"}), ,(0,n.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,n.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"github-dark",children:".env.local"}),(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"github-dark",rawString:GOOGLE_CLIENT_ID = your_secret_client_id.apps.googleusercontent.com; GOOGLE_CLIENT_SECRET = your_secret_client; ,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"GOOGLE_CLIENT_ID"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" your_secret_client_id.apps.googleusercontent.com;"})]}), ,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"GOOGLE_CLIENT_SECRET"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" your_secret_client;"})]})]})})]}), ,(0,n.jsxs)(e.h3,{id:"video-explanation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#video-explanation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Video explanation"]}), ,(0,n.jsxs)(e.p,{children:["Watch a youtube video from ",(0,n.jsx)(e.a,{href:"https://www.youtube.com/@codewithantonio",children:"CodeWithAntonio"})," on how to configure the environment variables for NextAuth with Google authentication."]}), ,(0,n.jsx)("iframe",{className:"mt-6 aspect-video w-full",src:"https://www.youtube.com/embed/1MTyCvS05V4",title:"Next Auth V5 - Advanced Guide (2024)",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen",referrerPolicy:"strict-origin-when-cross-origin",allowFullScreen:!0}), ,(0,n.jsxs)(e.ul,{children:[ ,(0,n.jsxs)(e.li,{children:["GoogleAuth ",(0,n.jsx)(e.strong,{children:"local"})," config at ",(0,n.jsx)(e.a,{href:"https://www.youtube.com/watch?v=1MTyCvS05V4&t=12270s",children:"3:24:30"})]}), ,(0,n.jsxs)(e.li,{children:["Update GoogleAuth after ",(0,n.jsx)(e.strong,{children:"deployment"})," at ",(0,n.jsx)(e.a,{href:"https://www.youtube.com/watch?v=1MTyCvS05V4&t=12270s",children:"7:52:31"})]}), ]}), ,(0,n.jsxs)(e.h3,{id:"google-config-for-this-repo",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#google-config-for-this-repo",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Google config for this repo"]}), ,(0,n.jsx)("img",{className:"mt-4 overflow-hidden rounded-lg border",src:"/_static/docs/gg-auth-config.jpg"})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(s,{...t})}):s(t)}function E(t,e){throw new Error("Expected "+(e?"component":"object")+" "+t+" to be defined: you likely forgot to import, pass, or provide it.")}return v(C);})(); ;return Component;