"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "vereisten", "hProperties": { "id": "vereisten" } }, "depth": 2, "value": "Vereisten" }, { "data": { "id": "configureer-logto", "hProperties": { "id": "configureer-logto" } }, "depth": 2, "value": "Configureer Logto" }, { "data": { "id": "stel-de-nextjs-applicatie-in", "hProperties": { "id": "stel-de-nextjs-applicatie-in" } }, "depth": 2, "value": "Stel de Next.js-applicatie in" }, { "data": { "id": "definieer-de-logto-bibliotheek", "hProperties": { "id": "definieer-de-logto-bibliotheek" } }, "depth": 2, "value": "Definieer de Logto-bibliotheek" }, { "data": { "id": "implementeer-inlog--en-uitlogknoppen", "hProperties": { "id": "implementeer-inlog--en-uitlogknoppen" } }, "depth": 2, "value": "Implementeer inlog- en uitlogknoppen" }, { "data": { "id": "inloggen", "hProperties": { "id": "inloggen" } }, "depth": 3, "value": "Inloggen" }, { "data": { "id": "uitloggen", "hProperties": { "id": "uitloggen" } }, "depth": 3, "value": "Uitloggen" }, { "data": { "id": "bereid-een-callbackpagina-voor", "hProperties": { "id": "bereid-een-callbackpagina-voor" } }, "depth": 2, "value": "Bereid een callbackpagina voor" }, { "data": { "id": "toon-gebruikerscontext-en-beveiligde-pagina", "hProperties": { "id": "toon-gebruikerscontext-en-beveiligde-pagina" } }, "depth": 2, "value": "Toon gebruikerscontext en beveiligde pagina" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 4, "words": 1142, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/functions/server-actions", children: "Serveracties" }), " bieden een verfrissende manier om robuuste webapplicaties te creëren zonder de noodzaak van traditionele REST API's. We hebben dit eerder besproken in ", _jsx(_components.a, { href: "https://blog.logto.io/nextjs-server-actions-stateless-session/", children: "ons artikel" }), "."] }), "\n", _jsxs(_components.p, { children: ["Vandaag zijn we verheugd om de officiële ondersteuning voor Serveracties te aankondigen in onze ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next", children: "Next.js SDK" }), ", ondanks dat het een experimentele functie is."] }), "\n", _jsxs(_components.p, { children: ["Voor een snel overzicht, bekijk ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "dit voorbeeld" }), " en volg mee terwijl we in deze gids uitleggen hoe je Logto met Serveracties kunt integreren."] }), "\n", _jsxs(_components.h2, { id: "vereisten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vereisten", children: _jsx(_components.span, { children: "#" }) }), "Vereisten"] }), "\n", _jsx(_components.p, { children: "Om te beginnen, zorg ervoor dat je het volgende hebt:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Een actieve Logto-instance of toegang tot een Logto Cloud-account." }), "\n", _jsx(_components.li, { children: "Een Next.js-project met de Serveracties-functie ingeschakeld." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "configureer-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configureer-logto", children: _jsx(_components.span, { children: "#" }) }), "Configureer Logto"] }), "\n", _jsxs(_components.p, { children: ["Als je Logto zelf host, raadpleeg dan de Logto \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started/", children: "Aan de slag" }), "\"-documentatie om je Logto-instance in te stellen."] }), "\n", _jsxs(_components.p, { children: ["Open de Logto Console door de URL ", _jsx(_components.code, { children: "https://cloud.logto.io/" }), " in te voeren als je Logto Cloud gebruikt, of het eindpunt dat je hebt ingesteld voor zelf-hosting."] }), "\n", _jsx(LogtoCloudButton, { children: "Open Logto Cloud en voltooi moeiteloos de configuratie" }), "\n", _jsx(_components.p, { children: "Ga vervolgens naar het tabblad \"Toepassingen\" en klik op \"Applicatie maken\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/applications_tab_67594608b6.png", alt: "Applicaties tabblad" }) }), "\n", _jsx(_components.p, { children: "Kies in het modaalvenster dat verschijnt \"Next.js (App Router)\" en geef een applicatienaam op, zoals \"Next.js App\". Klik dan op \"Applicatie maken”." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_73ae186100.webp", alt: "Applicatie maken" }) }), "\n", _jsx(_components.p, { children: "Je wordt naar een tutorialpagina in Logto geleid. Klik op \"Voltooien en klaar\" om door te gaan naar de pagina met applicatiedetails." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_details_e27b24d4a0.webp", alt: "Applicatiedetails" }) }), "\n", _jsx(_components.p, { children: "Voer in het gedeelte \"Redirect-URI's\" de volgende waarde in:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "[jouw-nextjs-basis-url]/callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Bijvoorbeeld, als je Next.js host op ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "http://localhost:3000" }) }), ", moet de waarde zijn:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http://localhost:3000/callback\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/save_changes_2314e02212.webp", alt: "Wijzigingen opslaan" }) }), "\n", _jsx(_components.p, { children: "Klik op de knop \"Wijzigingen opslaan\" onderaan. Als dat gelukt is, houd deze pagina open omdat het nuttig zal zijn voor de configuratie van Next.js." }), "\n", _jsxs(_components.h2, { id: "stel-de-nextjs-applicatie-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#stel-de-nextjs-applicatie-in", children: _jsx(_components.span, { children: "#" }) }), "Stel de Next.js-applicatie in"] }), "\n", _jsxs(_components.p, { children: ["Zorg ervoor dat je een project hebt met de nieuwste versie van Next.js. Als je er nog geen hebt, kun je de ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "officiële installatiegids" }), " volgen om er een te maken."] }), "\n", _jsxs(_components.p, { children: ["Op het moment van schrijven van deze gids is de functie experimenteel en vereist activatie in de ", _jsx(_components.code, { children: "next.config.js" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n experimental: {\n serverActions: true,\n },\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "definieer-de-logto-bibliotheek", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#definieer-de-logto-bibliotheek", children: _jsx(_components.span, { children: "#" }) }), "Definieer de Logto-bibliotheek"] }), "\n", _jsxs(_components.p, { children: ["Begin met het installeren van de ", _jsx(_components.code, { children: "@logto/next" }), "-module met ", _jsx(_components.code, { children: "npm" }), " als volgt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i @logto/next\n" }) }), "\n", _jsxs(_components.p, { children: ["Je kunt ook ", _jsx(_components.code, { children: "yarn" }), " of ", _jsx(_components.code, { children: "pnpm" }), " gebruiken."] }), "\n", _jsxs(_components.p, { children: ["Laten we vervolgens enkele functies maken als \"serveracties\", maak het nieuwe bestand ", _jsx(_components.code, { children: "libraries/logto.ts:" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport LogtoClient from '@logto/next/server-actions';\nimport { cookies } from 'next/headers';\n\nconst config = {\n appId: process.env.APP_ID ?? '', // Je kunt dit vinden op de detailpagina.\n appSecret: process.env.APP_SECRET ?? '', // Je kunt dit vinden op de detailpagina.\n endpoint: process.env.ENDPOINT ?? 'http://localhost:3001', // Je kunt dit vinden op de detailpagina.\n baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',\n cookieSecret: process.env.COOKIE_SECRET ?? 'complex_password_at_least_32_characters_long',\n cookieSecure: process.env.NODE_ENV === 'production',\n};\n\nconst logtoClient = new LogtoClient(config);\n\nconst cookieName = `logto:${config.appId}`;\n\nconst setCookies = (value?: string) => {\n if (value === undefined) {\n return;\n }\n\n cookies().set(cookieName, value, {\n maxAge: 14 * 3600 * 24,\n secure: config.cookieSecure,\n });\n};\n\nconst getCookie = () => {\n return cookies().get(cookieName)?.value ?? '';\n};\n\nexport const signIn = async () => {\n const { url, newCookie } = await logtoClient.handleSignIn(\n getCookie(),\n `${config.baseUrl}/callback`\n );\n\n setCookies(newCookie);\n\n return url;\n};\n\nexport const handleSignIn = async (searchParams: Record) => {\n // Zet searchParams-object om in een querystring.\n const search = new URLSearchParams(searchParams).toString();\n\n const newCookie = await logtoClient.handleSignInCallback(\n getCookie(),\n `${config.baseUrl}/callback?${search}`\n );\n\n setCookies(newCookie);\n};\n\nexport const signOut = async () => {\n const url = await logtoClient.handleSignOut(getCookie(), `${config.baseUrl}/callback`);\n\n setCookies('');\n\n return url;\n};\n\nexport const getLogtoContext = async () => {\n return await logtoClient.getLogtoContext(getCookie());\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["In dit bestand exporteren we vier functies voor authenticatiedoeleinden. Let op de eerste regel, ", _jsx(_components.code, { children: "\"use server\"" }), " geeft aan dat de code in het bestand alleen aan de serverzijde kan worden uitgevoerd. We gebruiken ", _jsx(_components.code, { children: "\"next/headers\"" }), " om cookiebased-sessies te beheren."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Referentie voor ", _jsx(_components.code, { children: "\"use server\"" }), ": ", _jsx(_components.a, { href: "https://react.dev/reference/react/use-server", children: "https://react.dev/reference/react/use-server" })] }), "\n", _jsxs(_components.li, { children: ["Referentie voor het gebruik van ", _jsx(_components.code, { children: "\"next/headers\"" }), " voor cookiebeheer: ", _jsx(_components.a, { href: "https://nextjs.org/docs/api-reference/next/headers", children: "https://nextjs.org/docs/api-reference/next/headers" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "De hierboven geëxporteerde functies kunnen direct worden aangeroepen vanuit de clientzijde React-component. Dat is het belangrijkste voordeel van het gebruik van Serveracties. Laten we naar het volgende hoofdstuk gaan om te zien hoe we deze functies kunnen gebruiken." }), "\n", _jsxs(_components.h2, { id: "implementeer-inlog--en-uitlogknoppen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementeer-inlog--en-uitlogknoppen", children: _jsx(_components.span, { children: "#" }) }), "Implementeer inlog- en uitlogknoppen"] }), "\n", _jsx(_components.p, { children: "Met de authenticatiefuncties op hun plaats, laten we de pagina construeren. We zullen twee client-componenten maken om de inlog- en uitlogacties te initiëren." }), "\n", _jsxs(_components.h3, { id: "inloggen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inloggen", children: _jsx(_components.span, { children: "#" }) }), "Inloggen"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/app/sign-in.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { signIn } from '../libraries/logto';\n\nconst SignIn = () => {\n const router = useRouter();\n\n const handleClick = async () => {\n const redirectUrl = await signIn();\n\n router.push(redirectUrl);\n };\n\n return ;\n};\n\nexport default SignIn;\n" }) }), "\n", _jsxs(_components.p, { children: ["Hier importeren we de ", _jsx(_components.code, { children: "signIn" }), "-functie die zojuist is gedefinieerd in het vorige hoofdstuk. Hoewel de code aan de serverzijde wordt uitgevoerd, kan deze functie nog steeds direct worden aangeroepen door de ", _jsx(_components.code, { children: ";\n};\n\nexport default SignOut;\n" }) }), "\n", _jsx(_components.p, { children: "Het uitlogproces is vergelijkbaar met het inlogproces." }), "\n", _jsxs(_components.h2, { id: "bereid-een-callbackpagina-voor", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bereid-een-callbackpagina-voor", children: _jsx(_components.span, { children: "#" }) }), "Bereid een callbackpagina voor"] }), "\n", _jsx(_components.p, { children: "Als een standaard OIDC-identiteitsprovider leidt Logto gebruikers om naar een callback-URL na authenticatie. We moeten daarom een callbackpagina voorbereiden om het resultaat van de aanmelding te verwerken." }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "/app/callback/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { handleSignIn } from '../../libraries/logto';\nimport { useEffect } from 'react';\n\ntype Props = {\n searchParams: Record;\n};\n\nexport default function Callback({ searchParams }: Props) {\n const router = useRouter();\n\n useEffect(() => {\n handleSignIn(searchParams).then(() => {\n router.push('/');\n });\n }, [router, searchParams]);\n\n return

Aanmelden...

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Hier gebruiken we een clientcomponent met ", _jsx(_components.code, { children: "useEffect" }), ", waarmee het eenvoudig is om een \"laad\"-pagina weer te geven voor een betere gebruikerservaring."] }), "\n", _jsxs(_components.h2, { id: "toon-gebruikerscontext-en-beveiligde-pagina", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#toon-gebruikerscontext-en-beveiligde-pagina", children: _jsx(_components.span, { children: "#" }) }), "Toon gebruikerscontext en beveiligde pagina"] }), "\n", _jsxs(_components.p, { children: ["Laten we nu een minimalistische startpagina maken om het nut van de Logto SDK te tonen. Bescherm indien nodig een bron tegen onbekende gebruikers door de waarde ", _jsx(_components.code, { children: "isAuthenticated" }), " te controleren en door te verwijzen naar de inlogpagina of foutberichten weer te geven."] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "app/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getLogtoContext } from '../libraries/logto';\nimport styles from './page.module.css';\nimport SignIn from './sign-in';\nimport SignOut from './sign-out';\n\nexport default async function Home() {\n const { isAuthenticated, claims } = await getLogtoContext();\n return (\n

Hallo Logto.

{isAuthenticated ? : }

\n {claims && (\n

Claims:

\n \n \n \n \n \n \n \n \n {Object.entries(claims).map(([key, value]) => (\n \n \n \n \n ))}\n \n

Naam	Waarde
{key}	{value}

\n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Zoals je kunt zien, is dit een ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components", children: "servercomponent" }), " die de noodzaak elimineert voor ", _jsx(_components.code, { children: "useEffect" }), " en het beheren van complexe toestandveranderingen."] }), "\n", _jsxs(_components.h2, { id: "conclusie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) }), "Conclusie"] }), "\n", _jsx(_components.p, { children: "Serveracties bieden een gestroomlijnde en eenvoudige manier om authenticatie te implementeren in vergelijking met traditionele Next.js-applicaties die vertrouwen op REST API's." }), "\n", _jsxs(_components.p, { children: ["Het hele codevoorbeeld is te vinden in deze repository: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample" })] }), "\n", _jsx(_components.p, { children: "Waarom probeer je Logto Cloud niet eens en ervaar je hoe eenvoudig het in de praktijk is?" }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto vandaag nog" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }