var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var s in n)t(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of N(n))!k.call(a,l)&&l!==s&&t(a,l,{get:()=>n[l],enumerable:!(c=m(n,l))||c.enumerable});return a};var f=(a,n,s)=>(s=a!=null?h(u(a)):{},o(n||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>o(t({},"__esModule",{value:!0}),a);var r=g((L,i)=>{i.exports=_jsx_runtime});var v={};y(v,{default:()=>C,frontmatter:()=>x});var e=f(r()),x={title:"Authentication using OpenId in React/NextJs App With Orchard Core - Part 2",excerpt:"In this post we will see how to do authentication using OpenId for a React App using Orchard Core.",date:"2021-11-18",videoId:"UldaX-QXdqE",series:"Orchard Core - Getting Started",part:2,tags:["orchard-core","openid","nextjs","auth"]};function p(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",code:"code",pre:"pre",h3:"h3"},a.components),{YoutubeVideo:s,TOCInline:c}=n;return c||d("TOCInline",!0),s||d("YoutubeVideo",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{videoId:a.videoId}),(0,e.jsx)(c,{toc:a.toc,asDisclosure:!0}),(0,e.jsxs)(n.h2,{id:"intro",children:[(0,e.jsx)(n.a,{href:"#intro","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Intro"]}),(0,e.jsx)(n.p,{children:"In this post we will see how to do authentication using OpenId for a React App using Orchard Core."}),(0,e.jsxs)(n.h2,{id:"prerequisites",children:[(0,e.jsx)(n.a,{href:"#prerequisites","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Prerequisites"]}),(0,e.jsxs)(n.p,{children:["To create the CMS and and a sample content follow the ",(0,e.jsx)(n.a,{href:"https://blog.antosubash.com/posts/orchard-core-getting-started-p1",children:"Getting started"})]}),(0,e.jsxs)(n.h2,{id:"create-a-openid-client",children:[(0,e.jsx)(n.a,{href:"#create-a-openid-client","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create a OpenId Client"]}),(0,e.jsxs)(n.p,{children:["Navigate to the ",(0,e.jsx)(n.code,{children:"https://localhost:5001/Admin"})," and login as a admin."]}),(0,e.jsxs)(n.p,{children:["Navigate to ",(0,e.jsx)(n.code,{children:"Security -> OpenID Connect -> Scopes -> Add an scope"}),"."]}),(0,e.jsxs)(n.p,{children:["Create two scopes ",(0,e.jsx)(n.code,{children:"role"})," and ",(0,e.jsx)(n.code,{children:"openid"}),"."]}),(0,e.jsxs)(n.p,{children:["Navigate to ",(0,e.jsx)(n.code,{children:"Security -> OpenID Connect -> Applications -> Add an Application"}),"."]}),(0,e.jsx)(n.p,{children:"Create a client with"}),(0,e.jsx)(n.p,{children:"Client id : client1"}),(0,e.jsx)(n.p,{children:"Display Name : client1"}),(0,e.jsx)(n.p,{children:"Type : Public client"}),(0,e.jsx)(n.p,{children:"Flows : Allow Authorization Code Flow"}),(0,e.jsxs)(n.p,{children:["Redirect Uris : ",(0,e.jsx)(n.a,{href:"http://localhost:3000",children:"http://localhost:3000"})]}),(0,e.jsx)(n.p,{children:"Consent type: Explicit consent"}),(0,e.jsx)(n.p,{children:"Allowed scopes: openid, role"}),(0,e.jsx)(n.p,{children:"Click Save"}),(0,e.jsxs)(n.h2,{id:"update-the-cors-policy",children:[(0,e.jsx)(n.a,{href:"#update-the-cors-policy","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Update the CORS policy"]}),(0,e.jsx)(n.p,{children:"Create a new policy to and set is as default. All credentials and any origin, headers and methods."}),(0,e.jsxs)(n.p,{children:["Update the CORS in CMS ",(0,e.jsx)(n.code,{children:"Startup.cs"})," file under ",(0,e.jsx)(n.code,{children:"ConfigureServices"})," function."]}),(0,e.jsx)(n.pre,{className:"language-cs",children:(0,e.jsxs)(n.code,{className:"code-highlight language-cs",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"public"})," ",(0,e.jsx)(n.span,{className:"token class-name return-type",children:(0,e.jsx)(n.span,{className:"token keyword",children:"void"})})," ",(0,e.jsx)(n.span,{className:"token function",children:"ConfigureServices"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token class-name",children:"IServiceCollection"})," services",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" services",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"AddCors"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"o ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," o",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"AddDefaultPolicy"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"builder ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` builder `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"AllowAnyOrigin"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"AllowAnyMethod"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"AllowAnyHeader"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" services",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"AddOrchardCms"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"create-a-nextjs-app",children:[(0,e.jsx)(n.a,{href:"#create-a-nextjs-app","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create a NextJS App"]}),(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"code-highlight language-bash",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," create next-app ",(0,e.jsx)(n.span,{className:"token parameter variable",children:"--typescript"}),` `]})})}),(0,e.jsxs)(n.h2,{id:"add-npm-packages",children:[(0,e.jsx)(n.a,{href:"#add-npm-packages","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Add npm packages"]}),(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"code-highlight language-bash",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` oidc-client-ts react-oidc-context @apollo/client `]})})}),(0,e.jsxs)(n.h2,{id:"add-env-file",children:[(0,e.jsx)(n.a,{href:"#add-env-file","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Add .env file"]}),(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"code-highlight language-bash",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token variable assign-left",children:"NEXT_PUBLIC_BASE_URL"}),(0,e.jsx)(n.span,{className:"token operator",children:"="}),`https://localhost:5001 `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token variable assign-left",children:"NEXT_PUBLIC_GRAPHQL_URL"}),(0,e.jsx)(n.span,{className:"token operator",children:"="}),`https://localhost:5001/api/graphql `]})]})}),(0,e.jsxs)(n.h2,{id:"create-login-component",children:[(0,e.jsx)(n.a,{href:"#create-login-component","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create login component"]}),(0,e.jsxs)(n.p,{children:["Inside the ",(0,e.jsx)(n.code,{children:"components"})," folder create ",(0,e.jsx)(n.code,{children:"Login.tsx"})]}),(0,e.jsx)(n.pre,{className:"language-ts",children:(0,e.jsxs)(n.code,{className:"code-highlight language-ts",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," React ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useAuth ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-oidc-context'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function function-variable",children:"Login"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," auth ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useAuth"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"isLoading",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),"Loading",(0,e.jsx)(n.span,{className:"token operator",children:"..."}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"error",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),"Oops",(0,e.jsx)(n.span,{className:"token operator",children:"..."})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"error",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"message",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"isAuthenticated",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" Hello ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"user",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"profile",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"sub",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token string",children:'" "'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"button onClick",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"removeUser",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),"Log out",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"button",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"button onClick",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"auth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"signinRedirect",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),"Log ",(0,e.jsx)(n.span,{className:"token keyword",children:"in"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"button",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"}),` Login `]})]})}),(0,e.jsxs)(n.h2,{id:"create-languages-component",children:[(0,e.jsx)(n.a,{href:"#create-languages-component","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create Languages component"]}),(0,e.jsxs)(n.p,{children:["Inside the ",(0,e.jsx)(n.code,{children:"components"})," folder create ",(0,e.jsx)(n.code,{children:"Languages.tsx"})]}),(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"code-highlight language-jsx",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," gql",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," useQuery ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"@apollo/client"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Props"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"LanguagesQuery"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," gql",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsx)(n.span,{className:"token graphql language-graphql",children:` `})]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"query"})," ",(0,e.jsx)(n.span,{className:"token function definition-query",children:"Languages"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token object",children:"language"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"code"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"createdUtc"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"displayText"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"modifiedUtc"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"name"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token graphql language-graphql",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token graphql language-graphql"}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function function-variable",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Languages"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token property literal-property",children:"props"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Props"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator arrow",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," loading",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," error",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," data ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"LanguagesQuery"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"loading",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Loading..."}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"error",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Error :("}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"language"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function property-access method",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token property literal-property",children:"lang"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," any"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator arrow",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,e.jsxs)(n.span,{className:"token language-javascript script",children:[(0,e.jsx)(n.span,{className:"token punctuation script-punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"lang",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"code"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"lang",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Languages"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"create-apollo-client",children:[(0,e.jsx)(n.a,{href:"#create-apollo-client","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create apollo client"]}),(0,e.jsxs)(n.p,{children:["Create a file ",(0,e.jsx)(n.code,{children:"apollo-client.ts"})," inside the ",(0,e.jsx)(n.code,{children:"lib"})," folder."]}),(0,e.jsx)(n.pre,{className:"language-ts",children:(0,e.jsxs)(n.code,{className:"code-highlight language-ts",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ApolloClient",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," createHttpLink",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," InMemoryCache ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@apollo/client'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," setContext ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@apollo/client/link/context'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," User ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'oidc-client-ts'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," httpLink ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"createHttpLink"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" uri",(0,e.jsx)(n.span,{className:"token operator",children:":"})," process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"env",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"NEXT_PUBLIC_GRAPHQL_URL"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," authLink ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"setContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"_",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," headers ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// get the authentication token from local storage if it exists"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," oidcStorage ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," sessionStorage",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"getItem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"oidc.user:"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"env",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"NEXT_PUBLIC_BASE_URL"}),(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:":client1"}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," token ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," User",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"fromStorageString"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"oidcStorage",(0,e.jsx)(n.span,{className:"token operator",children:"!"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),`access_token `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// return the headers to the context so httpLink can read them"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" headers",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"..."}),"headers",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" authorization",(0,e.jsx)(n.span,{className:"token operator",children:":"})," token ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"Bearer "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"token",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," client ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"ApolloClient"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" link",(0,e.jsx)(n.span,{className:"token operator",children:":"})," authLink",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"concat"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"httpLink",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" cache",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"InMemoryCache"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"}),` client `]})]})}),(0,e.jsxs)(n.h2,{id:"update-_apptsx",children:[(0,e.jsx)(n.a,{href:"#update-_apptsx","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Update _app.tsx"]}),(0,e.jsx)(n.pre,{className:"language-ts",children:(0,e.jsxs)(n.code,{className:"code-highlight language-ts",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../styles/globals.css'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," AppProps ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/app'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," AuthProvider ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react-oidc-context"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ApolloProvider ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"@apollo/client"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," client ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../lib/apollo-client'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"MyApp"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," Component",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," pageProps ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," AppProps",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," oidcConfig ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" authority",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"https://localhost:5001"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" client_id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"client1"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" redirect_uri",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"http://localhost:3000"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" response_type",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"code"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" scopes",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"openid email"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function function-variable",children:"onSignin"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" location",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"href ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"/"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"AuthProvider ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token operator",children:"..."}),"oidcConfig",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," onSigninCallback",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"onSignin",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ApolloProvider client",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"client",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"Component ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token operator",children:"..."}),"pageProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"ApolloProvider",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"AuthProvider",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"}),` MyApp `]})]})}),(0,e.jsxs)(n.h3,{id:"update-the-index-page",children:[(0,e.jsx)(n.a,{href:"#update-the-index-page","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Update the index page"]}),(0,e.jsx)(n.pre,{className:"language-ts",children:(0,e.jsxs)(n.code,{className:"code-highlight language-ts",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," NextPage ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," Login ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'./../components/Login'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," Languages ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'./../components/Languages'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," Home",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token function function-variable",children:"NextPage"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"Login ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"Languages",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"Languages",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"}),` Home `]})]})}),(0,e.jsxs)(n.h2,{id:"run-both-cms-and-next-app",children:[(0,e.jsx)(n.a,{href:"#run-both-cms-and-next-app","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Run both CMS and Next app"]}),(0,e.jsx)(n.p,{children:"Navigate to the CMS project and run"}),(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"code-highlight language-bash",children:(0,e.jsx)(n.span,{className:"code-line",children:`dotnet run `})})}),(0,e.jsx)(n.p,{children:"Navigate to the NextJS project and run"}),(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"code-highlight language-bash",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," // To ",(0,e.jsx)(n.span,{className:"token function",children:"install"})," the ",(0,e.jsx)(n.span,{className:"token function",children:"npm"}),` packages `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"}),` dev // To run the app `]})]})}),(0,e.jsxs)(n.p,{children:["Repo : ",(0,e.jsx)(n.a,{href:"https://github.com/antosubash/OrchardCoreReactAuth",children:"https://github.com/antosubash/OrchardCoreReactAuth"})]})]})}function b(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var C=b;function d(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(v);})(); ;return Component;

Menu

Tags:

Related Posts

Create content with code in Orchard Core - Part 3

Orchard core. Getting started - Part 1