"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "voraussetzungen", "hProperties": { "id": "voraussetzungen" } }, "depth": 2, "value": "Voraussetzungen" }, { "data": { "id": "logto-konfigurieren", "hProperties": { "id": "logto-konfigurieren" } }, "depth": 2, "value": "Logto konfigurieren" }, { "data": { "id": "nextjs-anwendung-einrichten", "hProperties": { "id": "nextjs-anwendung-einrichten" } }, "depth": 2, "value": "Next.js-Anwendung einrichten" }, { "data": { "id": "definiere-die-logto-bibliothek", "hProperties": { "id": "definiere-die-logto-bibliothek" } }, "depth": 2, "value": "Definiere die Logto-Bibliothek" }, { "data": { "id": "implementiere-anmelde--und-abmeldebuttons", "hProperties": { "id": "implementiere-anmelde--und-abmeldebuttons" } }, "depth": 2, "value": "Implementiere Anmelde- und Abmeldebuttons" }, { "data": { "id": "anmelden", "hProperties": { "id": "anmelden" } }, "depth": 3, "value": "Anmelden" }, { "data": { "id": "abmelden", "hProperties": { "id": "abmelden" } }, "depth": 3, "value": "Abmelden" }, { "data": { "id": "bereite-eine-callback-seite-vor", "hProperties": { "id": "bereite-eine-callback-seite-vor" } }, "depth": 2, "value": "Bereite eine Callback-Seite vor" }, { "data": { "id": "benutzerkontext-anzeigen-und-seite-schützen", "hProperties": { "id": "benutzerkontext-anzeigen-und-seite-schützen" } }, "depth": 2, "value": "Benutzerkontext anzeigen und Seite schützen" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 4, "words": 1090, "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: "Server-Aktionen" }), " stellen eine aktualisierte Methode dar, um robuste Webanwendungen ohne traditionelle REST-APIs zu erstellen. Wir haben dies bereits in ", _jsx(_components.a, { href: "https://blog.logto.io/nextjs-server-actions-stateless-session/", children: "unserem Artikel" }), " diskutiert."] }), "\n", _jsxs(_components.p, { children: ["Heute freuen wir uns, die offizielle Unterstützung für Server-Aktionen in unserem ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next", children: "Next.js-SDK" }), " bekannt zu geben, obwohl es sich um ein experimentelles Feature handelt."] }), "\n", _jsxs(_components.p, { children: ["Für einen kurzen Überblick, wirf einen Blick auf ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "dieses Beispiel" }), " und folge unserer Anleitung, um Logto mit Server-Aktionen zu integrieren."] }), "\n", _jsxs(_components.h2, { id: "voraussetzungen", children: ["Voraussetzungen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voraussetzungen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Um loszulegen, stelle sicher, dass du Folgendes hast:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Eine laufende Logto-Instanz oder Zugriff auf ein Logto-Cloud-Konto." }), "\n", _jsx(_components.li, { children: "Ein Next.js-Projekt mit aktiviertem Server-Aktionen-Feature." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "logto-konfigurieren", children: ["Logto konfigurieren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-konfigurieren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Wenn du Logto selbst hostest, lese in der Logto-\"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started/", children: "Erste Schritte" }), "\"-Dokumentation nach, wie du deine Logto-Instanz einrichtest."] }), "\n", _jsxs(_components.p, { children: ["Öffne die Logto-Konsole, indem du die URL ", _jsx(_components.code, { children: "https://cloud.logto.io/" }), " eingibst, wenn du Logto Cloud nutzt, oder den Endpunkt, den du für das Selbsthosting eingerichtet hast."] }), "\n", _jsx(LogtoCloudButton, { children: "Öffne Logto Cloud und schließe die Konfiguration mühelos ab" }), "\n", _jsx(_components.p, { children: "Navigiere als nächstes zum Tab \"Applications\" und klicke auf \"Create application\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/applications_tab_67594608b6.png", alt: "Applications tab" }) }), "\n", _jsx(_components.p, { children: "Wähle im erscheinenden Modal \"Next.js (App Router)\" und gib einen Anwendungsnamen an, z. B. \"Next.js App\". Klicke dann auf \"Create application\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_73ae186100.webp", alt: "Create application" }) }), "\n", _jsx(_components.p, { children: "Du wirst auf eine Tutorial-Seite in Logto weitergeleitet. Klicke auf \"Finish and done\", um zur Seite mit den Anwendungsdetails zu gelangen." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_details_e27b24d4a0.webp", alt: "Applications details" }) }), "\n", _jsx(_components.p, { children: "Im Abschnitt \"Redirect URIs\" gibst du den folgenden Wert ein:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "[deine-nextjs-basis-url]/callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Zum Beispiel, wenn du Next.js auf ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "http://localhost:3000" }) }), " hostest, sollte der Wert sein:"] }), "\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: "Save changes" }) }), "\n", _jsx(_components.p, { children: "Klicke auf den \"Save Changes\"-Button unten. Erfolgreich, halte diese Seite offen, da sie für die Next.js-Konfiguration nützlich sein wird." }), "\n", _jsxs(_components.h2, { id: "nextjs-anwendung-einrichten", children: ["Next.js-Anwendung einrichten", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nextjs-anwendung-einrichten", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Stelle sicher, dass du ein Projekt mit der neuesten Version von Next.js hast. Falls nicht, kannst du die ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "offizielle Installationsanleitung" }), " befolgen, um eines zu erstellen."] }), "\n", _jsxs(_components.p, { children: ["Zum Zeitpunkt des Schreibens dieser Anleitung ist das Feature experimentell und muss in der ", _jsx(_components.code, { children: "next.config.js" }), " aktiviert werden"] }), "\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: "definiere-die-logto-bibliothek", children: ["Definiere die Logto-Bibliothek", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#definiere-die-logto-bibliothek", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Beginne mit der Installation des ", _jsx(_components.code, { children: "@logto/next" }), "-Moduls mit ", _jsx(_components.code, { children: "npm" }), " wie folgt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i @logto/next\n" }) }), "\n", _jsxs(_components.p, { children: ["Du kannst auch ", _jsx(_components.code, { children: "yarn" }), " oder ", _jsx(_components.code, { children: "pnpm" }), " verwenden."] }), "\n", _jsxs(_components.p, { children: ["Erstelle dann einige Funktionen als \"Server-Aktionen\", erstelle die neue Datei ", _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 ?? '', // Dies findest du auf der Detailseite.\n appSecret: process.env.APP_SECRET ?? '', // Dies findest du auf der Detailseite.\n endpoint: process.env.ENDPOINT ?? 'http://localhost:3001', // Dies findest du auf der Detailseite.\n baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',\n cookieSecret: process.env.COOKIE_SECRET ?? 'komplexes_passwort_mindestens_32_zeichen_lang',\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 // Konvertiere searchParams-Objekt in einen Query-String.\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 dieser Datei exportieren wir vier Funktionen zu Authentifizierungszwecken. Beachte die erste Zeile, ", _jsx(_components.code, { children: "\"use server\"" }), " gibt an, dass der Code in der Datei nur auf der Serverseite ausgeführt werden kann. Wir verwenden ", _jsx(_components.code, { children: "\"next/headers\"" }), ", um cookie-basierte Sitzungen zu verwalten."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Referenz für ", _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: ["Referenz für die Verwendung von ", _jsx(_components.code, { children: "\"next/headers\"" }), " zur Verwaltung von Cookies: ", _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: "Die oben exportierten Funktionen können direkt von der Client-Seite React-Komponente aufgerufen werden. Das ist der Hauptvorteil der Verwendung von Server-Aktionen. Gehen wir zum nächsten Kapitel, um zu sehen, wie man diese Funktionen nutzt." }), "\n", _jsxs(_components.h2, { id: "implementiere-anmelde--und-abmeldebuttons", children: ["Implementiere Anmelde- und Abmeldebuttons", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementiere-anmelde--und-abmeldebuttons", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Mit den Authentifizierungsfunktionen zur Hand, lass uns die Seite konstruieren. Wir erstellen zwei Client-Komponenten, um die An- und Abmeldeaktionen einzuleiten." }), "\n", _jsxs(_components.h3, { id: "anmelden", children: ["Anmelden", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anmelden", children: _jsx(_components.span, { children: "#" }) })] }), "\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 importieren wir die ", _jsx(_components.code, { children: "signIn" }), "-Funktion, die im vorherigen Kapitel definiert wurde. Obwohl der Code auf der Serverseite ausgeführt wird, kann diese Funktion dennoch direkt von der ", _jsx(_components.code, { children: ";\n};\n\nexport default SignOut;\n" }) }), "\n", _jsx(_components.p, { children: "Der Abmeldeprozess ist ähnlich wie der Anmeldeprozess." }), "\n", _jsxs(_components.h2, { id: "bereite-eine-callback-seite-vor", children: ["Bereite eine Callback-Seite vor", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bereite-eine-callback-seite-vor", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Als standardmäßiger OIDC-Identitätsanbieter leitet Logto Benutzer nach der Authentifizierung zu einer Callback-URL weiter. Daher müssen wir eine Callback-Seite vorbereiten, um das Anmeldeergebnis zu verarbeiten." }), "\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

Signing in...

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Hier verwenden wir eine Client-Komponente mit ", _jsx(_components.code, { children: "useEffect" }), ", die es einfach macht, eine „Lade“-Seite für ein besseres Benutzererlebnis anzuzeigen."] }), "\n", _jsxs(_components.h2, { id: "benutzerkontext-anzeigen-und-seite-schützen", children: ["Benutzerkontext anzeigen und Seite schützen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#benutzerkontext-anzeigen-und-seite-schützen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Jetzt machen wir eine minimalistische Startseite, um die Nützlichkeit des Logto-SDK zu zeigen. Wenn nötig, schütze jede Ressource vor unbekannten Benutzern, indem du den Wert ", _jsx(_components.code, { children: "isAuthenticated" }), " prüfst und zur Anmeldeseite weiterleitest oder Fehlermeldungen anzeigst."] }), "\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

Hello 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

Name	Value
{key}	{value}

\n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Wie du sehen kannst, handelt es sich um eine ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components", children: "Server-Komponente" }), ", die es überflüssig macht, ", _jsx(_components.code, { children: "useEffect" }), " und komplexe Zustandsänderungen zu verwalten."] }), "\n", _jsxs(_components.h2, { id: "fazit", children: ["Fazit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Server-Aktionen bieten eine vereinfachte und unkomplizierte Möglichkeit, die Authentifizierung im Vergleich zu traditionellen Next.js-Anwendungen, die auf REST-APIs beruhen, zu implementieren." }), "\n", _jsxs(_components.p, { children: ["Der gesamte Beispielcode kann in diesem Repository gefunden werden: ", _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: "Warum nicht Logto Cloud ausprobieren und die Einfachheit in Aktion erleben?" }), "\n", _jsx(LogtoCloudButton, { children: "Probiere Logto heute aus" })] }); } 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."); }