"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introductie", "hProperties": { "id": "introductie" } }, "depth": 2, "value": "Introductie" }, { "data": { "id": "maak-een-logto-applicatie", "hProperties": { "id": "maak-een-logto-applicatie" } }, "depth": 2, "value": "Maak een Logto-applicatie" }, { "data": { "id": "stel-je-chrome-extensie-in", "hProperties": { "id": "stel-je-chrome-extensie-in" } }, "depth": 2, "value": "Stel je Chrome-extensie in" }, { "data": { "id": "installeer-logto-sdk", "hProperties": { "id": "installeer-logto-sdk" } }, "depth": 3, "value": "Installeer Logto SDK" }, { "data": { "id": "update-de-manifestjson", "hProperties": { "id": "update-de-manifestjson" } }, "depth": 3, "value": "Update de manifest.json" }, { "data": { "id": "stel-een-achtergrondscript-service-worker-in", "hProperties": { "id": "stel-een-achtergrondscript-service-worker-in" } }, "depth": 3, "value": "Stel een achtergrondscript (service worker) in" }, { "data": { "id": "update-logto-applicatie-instellingen", "hProperties": { "id": "update-logto-applicatie-instellingen" } }, "depth": 2, "value": "Update Logto-applicatie-instellingen" }, { "data": { "id": "voeg-inlog--en-uitlogknoppen-toe-aan-de-popup", "hProperties": { "id": "voeg-inlog--en-uitlogknoppen-toe-aan-de-popup" } }, "depth": 2, "value": "Voeg inlog- en uitlogknoppen toe aan de popup" }, { "data": { "id": "controlepunt-test-de-authenticatiestroom", "hProperties": { "id": "controlepunt-test-de-authenticatiestroom" } }, "depth": 2, "value": "Controlepunt: Test de authenticatiestroom" }, { "data": { "id": "controleer-authenticatiestatus", "hProperties": { "id": "controleer-authenticatiestatus" } }, "depth": 2, "value": "Controleer authenticatiestatus" }, { "data": { "id": "andere-overwegingen", "hProperties": { "id": "andere-overwegingen" } }, "depth": 2, "value": "Andere overwegingen" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 4, "words": 1337, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Chrome-extensies zijn een geweldige manier om de functionaliteit van de Chrome-browser uit te breiden. Wanneer je een populaire extensie hebt, wil je deze misschien monetariseren door pro-functies aan te bieden aan gebruikers die ervoor betalen. Gebruikersauthenticatie is noodzakelijk voor dit doel:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Gebruikersidentificatie" }), ": Je moet weten wie de gebruiker is om gepersonaliseerde functies te bieden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Toegangscontrole" }), ": Je moet controleren wie toegang heeft tot de betaalde functies."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Abonnementsbeheer" }), ": Je moet een manier bieden voor gebruikers om zich te abonneren en hun abonnementen te beheren."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Aan de andere kant willen we niet vasthouden aan het Google-accountsysteem, omdat je gebruikers misschien liever andere accounts gebruiken, of je meerdere services hebt die je wilt integreren met hetzelfde identiteitsysteem." }), "\n", _jsx(_components.p, { children: "Een kort overzicht van de voordelen van het gebruik van OpenID Connect (OIDC) voor authenticatie:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Geen leveranciersafhankelijkheid" }), ": Je gebruikers kunnen verschillende methoden gebruiken om in te loggen, in plaats van gedwongen te worden om Google te gebruiken."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Single Sign-On (SSO)" }), ": Gebruikers kunnen eenmalig inloggen en toegang krijgen tot meerdere services of applicaties."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Gestandaardiseerd" }), ": OIDC is een open standaard die breed wordt aangenomen en ondersteund, en het is ook veilig."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["In deze tutorial gebruiken we ", _jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " als de OIDC-provider, wat een Auth0-alternatief is voor het bouwen van identiteitsinfrastructuren."] }), "\n", _jsx(_components.p, { children: "Laten we beginnen!" }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Je kunt een voorbeeldproject voor deze tutorial vinden op ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "onze GitHub\nrepository" }), "."] }) }), "\n", _jsxs(_components.h2, { id: "introductie", children: ["Introductie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introductie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Aangenomen dat je een \"Sign in\"-knop in de popup van je Chrome-extensie plaatst, zal de authenticatiestroom er als volgt uitzien:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant A as Extensie-popup\n participant B as Extensieservicewerker\n participant C as Logto inlogervaring\n\n A->>B: Roept inloggen op\n B->>C: Omleidt naar Logto\n C->>C: Gebruiker logt in\n C->>B: Omleidt terug naar extensie\n B->>A: Meldt de popup\n" }) }), "\n", _jsxs(_components.p, { children: ["Voor andere interactieve pagina's in je extensie hoef je alleen de ", _jsx(_components.code, { children: "Extensie-popup" }), " deelnemer te vervangen door de naam van de pagina. In deze tutorial richten we ons op de popuppagina."] }), "\n", _jsxs(_components.h2, { id: "maak-een-logto-applicatie", children: ["Maak een Logto-applicatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#maak-een-logto-applicatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Om aan de slag te gaan, maak je een Logto-applicatie met het type \"Single page app\". Volg deze stappen om een Logto-applicatie te maken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Log in op de ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto-console" }), "."] }), "\n", _jsxs(_components.li, { children: ["Klik op ", _jsx(_components.strong, { children: "Applicatie maken" }), "."] }), "\n", _jsx(_components.li, { children: "Op de geopende pagina vind je de knop \"App maken zonder framework\" en klik erop." }), "\n", _jsx(_components.li, { children: "Kies het type \"Single page app\" en voer de naam van je applicatie in." }), "\n", _jsxs(_components.li, { children: ["Klik op ", _jsx(_components.strong, { children: "Aanmaken" }), "."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "stel-je-chrome-extensie-in", children: ["Stel je Chrome-extensie in", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#stel-je-chrome-extensie-in", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "installeer-logto-sdk", children: ["Installeer Logto SDK", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installeer-logto-sdk", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Installeer Logto SDK in je Chrome-extensieproject:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# of pnpm, yarn, etc.\nnpm i @logto/chrome-extension\n" }) }), "\n", _jsxs(_components.h3, { id: "update-de-manifestjson", children: ["Update de ", _jsx(_components.code, { children: "manifest.json" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#update-de-manifestjson", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logto SDK vereist de volgende machtigingen in de ", _jsx(_components.code, { children: "manifest.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"permissions\": [\"identity\", \"storage\"],\n \"host_permissions\": [\"https://*.logto.app/*\"]\n}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.identity" }), ": Vereist voor de Chrome Identity API, die wordt gebruikt om in te loggen en uit te loggen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.storage" }), ": Vereist voor het opslaan van de gebruikerssessie."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "host_permissions" }), ": Vereist voor de Logto SDK om te communiceren met de Logto API's."] }), "\n"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Als je een aangepast domein gebruikt op Logto Cloud, moet je de ", _jsx(_components.code, { children: "host_permissions" }), " bijwerken om overeen te komen met je domein."] }) }), "\n", _jsxs(_components.h3, { id: "stel-een-achtergrondscript-service-worker-in", children: ["Stel een achtergrondscript (service worker) in", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#stel-een-achtergrondscript-service-worker-in", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In het achtergrondscript van je Chrome-extensie, initialiseer de Logto SDK:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nimport LogtoClient from '@logto/chrome-extension';\n\nexport const client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Vervang ", _jsx(_components.code, { children: "" }), " en ", _jsx(_components.code, { children: "" }), " met de daadwerkelijke waarden. Je kunt deze waarden vinden op de applicatiepagina die je zojuist hebt gemaakt in de Logto-console."] }), "\n", _jsxs(_components.p, { children: ["Als je geen achtergrondscript hebt, kun je de ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics", children: "officiële gids" }), " volgen om er een te maken."] }), "\n", _jsxs(Info, { children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "Waarom hebben we een achtergrondscript nodig?" }) }), _jsx(_components.p, { children: "Normale extensiepagina's zoals de popup of optiespagina kunnen niet op de achtergrond draaien, en ze kunnen worden gesloten tijdens het authenticatieproces. Een achtergrondscript zorgt ervoor dat het authenticatieproces correct kan worden afgehandeld." })] }), "\n", _jsx(_components.p, { children: "Vervolgens moeten we luisteren naar het bericht van andere extensiepagina's en het authenticatieproces afhandelen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // In de onderstaande code, aangezien we `true` retourneren voor elke actie, moeten we `sendResponse` aanroepen\n // om de afzender op de hoogte te stellen. Je kunt hier ook fouten afhandelen, of andere manieren gebruiken om de afzender op de hoogte te stellen.\n\n if (message.action === 'signIn') {\n const redirectUri = chrome.identity.getRedirectURL('/callback');\n client.signIn(redirectUri).finally(sendResponse);\n return true;\n }\n\n if (message.action === 'signOut') {\n const redirectUri = chrome.identity.getRedirectURL();\n client.signOut(redirectUri).finally(sendResponse);\n return true;\n }\n\n return false;\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Je merkt misschien dat er twee omleidings-URI's worden gebruikt in de bovenstaande code. Ze zijn beide gemaakt door ", _jsx(_components.code, { children: "chrome.identity.getRedirectURL" }), ", wat een ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/reference/api/identity#method-getRedirectURL", children: "ingebouwde Chrome-API" }), " is om een omleidings-URL te genereren voor auth-stromen. De twee URI's zullen zijn:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), " voor inloggen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/" }), " voor uitloggen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Merk op dat deze URI's niet toegankelijk zijn, en ze worden alleen gebruikt voor Chrome om specifieke acties voor het authenticatieproces te activeren." }), "\n", _jsxs(_components.h2, { id: "update-logto-applicatie-instellingen", children: ["Update Logto-applicatie-instellingen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#update-logto-applicatie-instellingen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nu moeten we de Logto-applicatie-instellingen bijwerken om de zojuist gemaakte omleidings-URI's toe te staan." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Ga naar de applicatiepagina in de Logto-console." }), "\n", _jsxs(_components.li, { children: ["Voeg in de sectie \"Redirect URIs\" de URI toe: ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), "."] }), "\n", _jsxs(_components.li, { children: ["Voeg in de sectie \"Na uitloggen omleiden URIs\" de URI toe: ", _jsx(_components.code, { children: "https://.chromiumapp.org/" }), "."] }), "\n", _jsxs(_components.li, { children: ["Voeg in de sectie \"CORS toegestane oorsprongen\" de URI toe: ", _jsx(_components.code, { children: "chrome-extension://" }), ". De SDK in de Chrome-extensie zal deze oorsprong gebruiken om te communiceren met de Logto API's."] }), "\n", _jsxs(_components.li, { children: ["Klik op ", _jsx(_components.strong, { children: "Wijzigingen opslaan" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Vergeet niet ", _jsx(_components.code, { children: "" }), " te vervangen door je eigenlijke extensie-ID. Je kunt de extensie-ID vinden op de ", _jsx(_components.code, { children: "chrome://extensions" }), "-pagina."] }), "\n", _jsx(_components.p, { children: "Na het bijwerken van de instellingen, zouden je Logto-applicatie-instellingen er als volgt uit moeten zien:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/app_settings_f30c24be38.webp", alt: "Applicatie-instellingen" }) }), "\n", _jsxs(_components.h2, { id: "voeg-inlog--en-uitlogknoppen-toe-aan-de-popup", children: ["Voeg inlog- en uitlogknoppen toe aan de popup", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#voeg-inlog--en-uitlogknoppen-toe-aan-de-popup", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "We zijn er bijna! Laten we de inlog- en uitlogknoppen en andere noodzakelijke logica toevoegen aan de popuppagina." }), "\n", _jsxs(_components.p, { children: ["In het ", _jsx(_components.code, { children: "popup.html" }), "-bestand:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["In het ", _jsx(_components.code, { children: "popup.js" }), "-bestand (ervan uitgaande dat ", _jsx(_components.code, { children: "popup.js" }), " is opgenomen in de ", _jsx(_components.code, { children: "popup.html" }), "):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n // Inloggen voltooid (of mislukt), je kunt hier de UI bijwerken.\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n // Uitloggen voltooid (of mislukt), je kunt hier de UI bijwerken.\n});\n" }) }), "\n", _jsxs(_components.h2, { id: "controlepunt-test-de-authenticatiestroom", children: ["Controlepunt: Test de authenticatiestroom", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#controlepunt-test-de-authenticatiestroom", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nu kun je de authenticatiestroom in je Chrome-extensie testen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Open de extensie-popup." }), "\n", _jsx(_components.li, { children: "Klik op de \"Inloggen\"-knop." }), "\n", _jsx(_components.li, { children: "Je wordt omgeleid naar de Logto inlogpagina." }), "\n", _jsx(_components.li, { children: "Log in met je Logto-account." }), "\n", _jsx(_components.li, { children: "Je wordt teruggeleid naar Chrome." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "controleer-authenticatiestatus", children: ["Controleer authenticatiestatus", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#controleer-authenticatiestatus", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Omdat Chrome uniforme opslag-API's biedt, kunnen, in plaats van de inlog- en uitlogstroom, alle andere Logto SDK-methoden direct op de popuppagina worden gebruikt." }), "\n", _jsxs(_components.p, { children: ["In je ", _jsx(_components.code, { children: "popup.js" }), " kun je de ", _jsx(_components.code, { children: "LogtoClient" }), "-instantie hergebruiken die in het achtergrondscript is gemaakt, of een nieuwe maken met dezelfde configuratie:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nimport LogtoClient from '@logto/chrome-extension';\n\nconst client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n\n// Of hergebruik de cliëntinstantie gemaakt in het achtergrondscript\nimport { client } van './service-worker.js';\n" }) }), "\n", _jsx(_components.p, { children: "Dan kun je een functie maken om de authenticatiestatus en het gebruikersprofiel te laden:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nconst loadAuthenticationState = async () => {\n const isAuthenticated = await client.isAuthenticated();\n // Update de UI op basis van de authenticatiestatus\n\n if (isAuthenticated) {\n const user = await client.getIdTokenClaims(); // { sub: '...', email: '...', ... }\n // Update de UI met het gebruikersprofiel\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Je kunt ook de ", _jsx(_components.code, { children: "loadAuthenticationState" }), "-functie combineren met de inlog- en uitloglogica:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n await loadAuthenticationState();\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n await loadAuthenticationState();\n});\n" }) }), "\n", _jsx(_components.p, { children: "Hier is een voorbeeld van de popuppagina met de authenticatiestatus:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/extension_popup_03b2ad10b2.webp", alt: "Popuppagina" }) }), "\n", _jsxs(_components.p, { children: ["Voor meer informatie over de SDK kun je de ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/vanilla-js/", children: "officiële documentatie van de browser-SDK" }), " raadplegen. De browser-SDK heeft dezelfde API's als de Chrome extensie SDK."] }), "\n", _jsxs(_components.h2, { id: "andere-overwegingen", children: ["Andere overwegingen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#andere-overwegingen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Servicewerkerbundeling" }), ": Als je een bundeler zoals Webpack of Rollup gebruikt, moet je expliciet de target op ", _jsx(_components.code, { children: "browser" }), " of vergelijkbaar instellen om onnodige bundeling van Node.js-modules te vermijden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Module-resolutie" }), ": Logto Chrome-extensie SDK is een ESM-only module."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Bekijk ons ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "voorbeeldproject" }), " voor een volledig voorbeeld met TypeScript, Rollup en andere configuraties."] }), "\n", _jsxs(_components.h2, { id: "conclusie", children: ["Conclusie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Met geauthenticeerde gebruikers kun je nu veilig betaalde functies aanbieden in je Chrome-extensie. Je kunt bijvoorbeeld de abonnementensatus van de gebruiker opslaan in het gebruikersprofiel en dit controleren wanneer de gebruiker de extensie opent." }), "\n", _jsx(_components.p, { children: "Door de kracht van Chrome-extensies en Logto te combineren, kun je een flexibeler en aanpasbaarere extensie bouwen die zowel jij als je gebruikers zullen waarderen." }), "\n", _jsx(LogtoCloudButton, {})] }); } 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."); }