"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "предварительные-условия", "hProperties": { "id": "предварительные-условия" } }, "depth": 2, "value": "Предварительные условия" }, { "data": { "id": "реализация-сессионного-хранилища-с-kv-от-vercel", "hProperties": { "id": "реализация-сессионного-хранилища-с-kv-от-vercel" } }, "depth": 2, "value": "Реализация сессионного хранилища с KV от Vercel" }, { "data": { "id": "настройка-хранилища-kv", "hProperties": { "id": "настройка-хранилища-kv" } }, "depth": 3, "value": "Настройка хранилища KV" }, { "data": { "id": "реализация-функций-управления-сессиями", "hProperties": { "id": "реализация-функций-управления-сессиями" } }, "depth": 3, "value": "Реализация функций управления сессиями" }, { "data": { "id": "реализация-базы-данных-пользователей-с-kv-от-vercel", "hProperties": { "id": "реализация-базы-данных-пользователей-с-kv-от-vercel" } }, "depth": 2, "value": "Реализация базы данных пользователей с KV от Vercel" }, { "data": { "id": "подготовка-функций-webauthn", "hProperties": { "id": "подготовка-функций-webauthn" } }, "depth": 2, "value": "Подготовка функций WebAuthn" }, { "data": { "id": "построение-веб-страницы", "hProperties": { "id": "построение-веб-страницы" } }, "depth": 2, "value": "Построение веб-страницы" }, { "data": { "id": "заключение", "hProperties": { "id": "заключение" } }, "depth": 2, "value": "Заключение" }, { "data": { "id": "ключевые-соображения-для-развертывания-в-производственной-среде", "hProperties": { "id": "ключевые-соображения-для-развертывания-в-производственной-среде" } }, "depth": 3, "value": "Ключевые соображения для развертывания в производственной среде" }]; const readingTime = { "minutes": 3, "words": 926, "text": "3 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 }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["С возвращением в нашу серию статей о WebAuthn. В предыдущих статьях мы рассмотрели ", _jsx(_components.a, { href: "https://blog.logto.io/webauthn-base-knowledge/", children: "основы WebAuthn" }), " и ", _jsx(_components.a, { href: "https://blog.logto.io/web-authn-and-passkey-101/", children: "путеводитель 101" }), ". Если вы только присоединились к нам, не стесняйтесь ознакомиться с этими базовыми статьями, чтобы наверстать упущенное."] }), "\n", _jsx(_components.p, { children: "Сегодня мы засучим рукава и перейдем от теории к практике. Мы будем использовать мощь Next.js с новой функцией \"Server Actions\". Наша цель? Реализовать WebAuthn в приложении Next.js и подготовиться к WebAuthn." }), "\n", _jsxs(_components.p, { children: ["Прежде чем погрузиться в программирование, вот что ждет вас в конце путешествия - полностью функциональный ", _jsx(_components.a, { href: "https://nextjs-webauthn-alpha.vercel.app/", children: "демо-сайт" }), ". Изучите его, чтобы увидеть WebAuthn в действии и почувствовать, что вы будете создавать. На этом демо-сайте вы можете зарегистрировать новых пользователей и войти в систему с только что зарегистрированными паролями."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/preview_fe67ff2888.webp", alt: "Предварительный просмотр" }) }), "\n", _jsxs(_components.p, { children: ["А для тех, кто предпочитает держать карту в руках, у нас есть решение для вас! Весь код, который мы будем обсуждать, доступен в открытом ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-webauthn", children: "репозитории GitHub" }), ". Этот репозиторий - ваш путеводитель, предлагающий полный исходный код нашей реализации."] }), "\n", _jsx(_components.p, { children: "Готовы отправиться в это захватывающее приключение? Давайте начнем!" }), "\n", _jsxs(_components.h2, { id: "предварительные-условия", children: ["Предварительные условия", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#предварительные-условия", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Прежде чем начать, давайте убедимся, что у нас есть все необходимое:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Проект Next.js" }), ": Если вы еще не настроили проект Next.js, вот ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "краткое руководство" }), ", чтобы начать."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "Библиотека Simple WebAuthn" }) }), ": Несколько пакетов, которые помогут сократить объем работы, необходимой для внедрения WebAuthn на веб-сайт. Используйте ваш любимый пакетный менеджер для установки ", _jsx(_components.code, { children: "@simplewebauthn/browser" }), ", ", _jsx(_components.code, { children: "@simplewebauthn/server" }), " и ", _jsx(_components.code, { children: "@simplewebauthn/typescript-types" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Сессионное хранилище" }), ": Мы будем использовать сессионное хранилище для управления вызовами WebAuthn. Мы воспользуемся ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv", children: "KV от Vercel" }), " для этого."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "База данных пользователей" }), ": Место для хранения зарегистрированных паролей наших пользователей. Чтобы упростить задачу, мы также будем использовать KV от Vercel для демонстрации."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Теперь, имея в руках все инструменты и материалы, мы готовы начать создание." }), "\n", _jsxs(_components.h2, { id: "реализация-сессионного-хранилища-с-kv-от-vercel", children: ["Реализация сессионного хранилища с KV от Vercel", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#реализация-сессионного-хранилища-с-kv-от-vercel", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "настройка-хранилища-kv", children: ["Настройка хранилища KV", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#настройка-хранилища-kv", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Легко инициализировать хранилище KV как в производственной среде, так и в локальной разработке, следуйте этому руководству, чтобы подключить хранилище KV к вашему проекту и извлечь значения среды: ", _jsx(_components.a, { href: "https://vercel.com/docs/storage/vercel-kv/quickstart", children: "https://vercel.com/docs/storage/vercel-kv/quickstart" })] }), "\n", _jsxs(_components.h3, { id: "реализация-функций-управления-сессиями", children: ["Реализация функций управления сессиями", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#реализация-функций-управления-сессиями", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { kv } from '@vercel/kv';\nimport { cookies } from 'next/headers';\n\nconst sessionPrefix = 'nextjs-webauthn-example-session-';\n\ntype SessionData = {\n currentChallenge?: string;\n email?: string;\n};\n\nconst getSession = async (id: string) => {\n return kv.get(`${sessionPrefix}${id}`);\n};\n\nconst createSession = async (id: string, data: SessionData) => {\n return kv.set(`${sessionPrefix}${id}`, JSON.stringify(data));\n};\n\nexport const getCurrentSession = async (): Promise<{\n sessionId: string;\n data: SessionData;\n}> => {\n const cookieStore = cookies();\n const sessionId = cookieStore.get('session-id');\n\n if (sessionId?.value) {\n const session = await getSession(sessionId.value);\n\n if (session) {\n return { sessionId: sessionId.value, data: session };\n }\n }\n\n const newSessionId = Math.random().toString(36).slice(2);\n const newSession = { currentChallenge: undefined };\n cookieStore.set('session-id', newSessionId);\n\n await createSession(newSessionId, newSession);\n\n return { sessionId: newSessionId, data: newSession };\n};\n\nexport const updateCurrentSession = async (data: SessionData): Promise => {\n const { sessionId, data: oldData } = await getCurrentSession();\n\n await createSession(sessionId, { ...oldData, ...data });\n};\n" }) }), "\n", _jsx(_components.p, { children: "Мы экспортировали 2 функции:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "getCurrentSession" }), ": использует помощник cookie в Next.js для создания сессии для текущего запроса и возвращает значение."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "updateCurrentSession" }), ": сохраняет данные в текущую сессию."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "реализация-базы-данных-пользователей-с-kv-от-vercel", children: ["Реализация базы данных пользователей с KV от Vercel", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#реализация-базы-данных-пользователей-с-kv-от-vercel", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Аналогично реализации сессий, давайте реализуем простую базу данных пользователей." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { AuthenticatorDevice } from '@simplewebauthn/typescript-types';\nimport { kv } from '@vercel/kv';\nimport { cookies } from 'next/headers';\n\nconst userPrefix = 'nextjs-webauthn-example-user-';\n\n// Оригинальные типы - это \"Buffer\", который не поддерживается KV\nexport type UserDevice = Omit & {\n credentialID: string;\n credentialPublicKey: string;\n};\n\ntype User = {\n email: string;\n devices: UserDevice[];\n};\n\nexport const findUser = async (email: string): Promise => {\n const user = await kv.get(`${userPrefix}${email}`);\n\n return user;\n};\n\nexport const createUser = async (email: string, devices: UserDevice[]): Promise => {\n const user = await findUser(email);\n\n if (user) {\n throw new Error('Пользователь уже существует');\n }\n\n await kv.set(`${userPrefix}${email}`, { email, devices });\n return { email, devices };\n};\n" }) }), "\n", _jsx(_components.p, { children: "Мы создали функции для поиска пользователя по электронной почте и обновления данных пользователя по электронной почте. Помните, что это лишь демонстрация, в реальном продукте данные о пользователе обычно хранятся в базе данных." }), "\n", _jsxs(_components.h2, { id: "подготовка-функций-webauthn", children: ["Подготовка функций WebAuthn", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#подготовка-функций-webauthn", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Прежде чем мы продолжим, давайте посмотрим на диаграмму процесса регистрации и аутентификации:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n\tparticipant User\n participant WebPage\n participant API Server\n\n User->>WebPage: Запрос на регистрацию нового ключа\n WebPage->>API Server: Получение опций регистрации (generateWebAuthnRegistrationOptions)\n API Server->>WebPage: опции\n WebPage->>WebPage: Вызов API WebAuthn\n WebPage->>User: Запрос на аутентификацию\n User->>WebPage: Выполнение аутентификации\n WebPage->>API Server: Отправка ответа API WebAuthn\n API Server->>API Server: Верификация и сохранение (verifyWebAuthnRegistration)\n API Server->>WebPage: Возвращение результата\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Как видите, нам нужно подготовить 2 функции:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "generateWebAuthnRegistrationOptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "verifyWebAuthnRegistration" }) }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n\tparticipant User\n participant WebPage\n participant API Server\n\n User->>WebPage: Запрос входа по электронной почте\n WebPage->>API Server: Получение опций аутентификации (generateWebAuthnLoginOptions)\n API Server->>WebPage: опции\n WebPage->>WebPage: Вызов API WebAuthn\n WebPage->>User: Запрос на аутентификацию\n User->>WebPage: Выполнение аутентификации\n WebPage->>API Server: Отправка ответа API WebAuthn\n API Server->>API Server: Верификация (verifyWebAuthnLogin)\n API Server->>WebPage: Возвращение результата\n WebPage->>User: ✅\n" }) }), "\n", _jsx(_components.p, { children: "Похожее на регистрацию, вход также требует 2 функции:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "generateWebAuthnLoginOptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "verifyWebAuthnLogin" }) }), "\n"] }), "\n", _jsx(_components.p, { children: "Вот код:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport {\n GenerateAuthenticationOptionsOpts,\n GenerateRegistrationOptionsOpts,\n VerifyAuthenticationResponseOpts,\n VerifyRegistrationResponseOpts,\n generateAuthenticationOptions,\n generateRegistrationOptions,\n verifyAuthenticationResponse,\n verifyRegistrationResponse,\n} from '@simplewebauthn/server';\nimport { UserDevice, createUser, findUser, getCurrentSession, updateCurrentSession } from './user';\nimport { origin, rpId } from './constants';\nimport {\n AuthenticationResponseJSON,\n RegistrationResponseJSON,\n} from '@simplewebauthn/typescript-types';\nimport { isoBase64URL } from '@simplewebauthn/server/helpers';\n\nexport const generateWebAuthnRegistrationOptions = async (email: string) => {\n const user = await findUser(email);\n\n if (user) {\n return {\n success: false,\n message: 'Пользователь уже существует',\n };\n }\n\n const opts: GenerateRegistrationOptionsOpts = {\n rpName: 'Пример SimpleWebAuthn',\n rpID: rpId,\n userID: email,\n userName: email,\n timeout: 60000,\n attestationType: 'none',\n excludeCredentials: [],\n authenticatorSelection: {\n residentKey: 'discouraged',\n },\n /**\n * Поддержка двух наиболее популярных алгоритмов: ES256 и RS256\n */\n supportedAlgorithmIDs: [-7, -257],\n };\n\n const options = await generateRegistrationOptions(opts);\n\n await updateCurrentSession({ currentChallenge: options.challenge, email });\n\n return {\n success: true,\n data: options,\n };\n};\n\nexport const verifyWebAuthnRegistration = async (data: RegistrationResponseJSON) => {\n const {\n data: { email, currentChallenge },\n } = await getCurrentSession();\n\n if (!email || !currentChallenge) {\n return {\n success: false,\n message: 'Сессия истекла',\n };\n }\n\n const expectedChallenge = currentChallenge;\n\n const opts: VerifyRegistrationResponseOpts = {\n response: data,\n expectedChallenge: `${expectedChallenge}`,\n expectedOrigin: origin,\n expectedRPID: rpId,\n requireUserVerification: false,\n };\n const verification = await verifyRegistrationResponse(opts);\n\n const { verified, registrationInfo } = verification;\n\n if (!verified || !registrationInfo) {\n return {\n success: false,\n message: 'Регистрация не удалась',\n };\n }\n\n const { credentialPublicKey, credentialID, counter } = registrationInfo;\n\n /**\n * Добавление возвращенного устройства в список устройств пользователя\n */\n const newDevice: UserDevice = {\n credentialPublicKey: isoBase64URL.fromBuffer(credentialPublicKey),\n credentialID: isoBase64URL.fromBuffer(credentialID),\n counter,\n transports: data.response.transports,\n };\n\n await updateCurrentSession({});\n\n try {\n await createUser(email, [newDevice]);\n } catch {\n return {\n success: false,\n message: 'Пользователь уже существует',\n };\n }\n\n return {\n success: true,\n };\n};\n\nexport const generateWebAuthnLoginOptions = async (email: string) => {\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'Пользователь не существует',\n };\n }\n\n const opts: GenerateAuthenticationOptionsOpts = {\n timeout: 60000,\n allowCredentials: user.devices.map((dev) => ({\n id: isoBase64URL.toBuffer(dev.credentialID),\n type: 'public-key',\n transports: dev.transports,\n })),\n userVerification: 'required',\n rpID: rpId,\n };\n const options = await generateAuthenticationOptions(opts);\n\n await updateCurrentSession({ currentChallenge: options.challenge, email });\n\n return {\n success: true,\n data: options,\n };\n};\n\nexport const verifyWebAuthnLogin = async (data: AuthenticationResponseJSON) => {\n const {\n data: { email, currentChallenge },\n } = await getCurrentSession();\n\n if (!email || !currentChallenge) {\n return {\n success: false,\n message: 'Сессия истекла',\n };\n }\n\n const user = await findUser(email);\n\n if (!user) {\n return {\n success: false,\n message: 'Пользователь не существует',\n };\n }\n\n const dbAuthenticator = user.devices.find((dev) => dev.credentialID === data.rawId);\n\n if (!dbAuthenticator) {\n return {\n success: false,\n message: 'Аутентификатор не зарегистрирован на этом сайте',\n };\n }\n\n const opts: VerifyAuthenticationResponseOpts = {\n response: data,\n expectedChallenge: `${currentChallenge}`,\n expectedOrigin: origin,\n expectedRPID: rpId,\n authenticator: {\n ...dbAuthenticator,\n credentialID: isoBase64URL.toBuffer(dbAuthenticator.credentialID),\n credentialPublicKey: isoBase64URL.toBuffer(dbAuthenticator.credentialPublicKey),\n },\n requireUserVerification: true,\n };\n const verification = await verifyAuthenticationResponse(opts);\n\n await updateCurrentSession({});\n\n return {\n success: verification.verified,\n };\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "построение-веб-страницы", children: ["Построение веб-страницы", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#построение-веб-страницы", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Мы завершили подготовку, давайте создадим страницу:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { startAuthentication, startRegistration } from '@simplewebauthn/browser';\nimport {\n generateWebAuthnLoginOptions,\n generateWebAuthnRegistrationOptions,\n verifyWebAuthnLogin,\n verifyWebAuthnRegistration,\n} from '@/libraries/webauthn';\nimport styles from './page.module.css';\n\nexport default function Home() {\n const handleSubmit = async (event: React.FormEvent) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const email = formData.get('email')?.toString();\n const type = formData.get('type')?.toString();\n\n if (!email) {\n return;\n }\n\n if (type === 'register') {\n const response = await generateWebAuthnRegistrationOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Что-то пошло не так!');\n return;\n }\n\n const localResponse = await startRegistration(response.data);\n const verifyResponse = await verifyWebAuthnRegistration(localResponse);\n\n if (!verifyResponse.success) {\n alert(verifyResponse.message ?? 'Что-то пошло не так!');\n return;\n }\n\n alert('Регистрация успешна!');\n } else {\n const response = await generateWebAuthnLoginOptions(email);\n\n if (!response.success || !response.data) {\n alert(response.message ?? 'Что-то пошло не так!');\n return;\n }\n\n const localResponse = await startAuthentication(response.data);\n const verifyResponse = await verifyWebAuthnLogin(localResponse);\n\n if (!verifyResponse.success) {\n alert(verifyResponse.message ?? 'Что-то пошло не так!');\n return;\n }\n\n alert('Вход успешен!');\n }\n };\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "заключение", children: ["Заключение", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#заключение", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Поздравляем с прохождением всех тонкостей внедрения WebAuthn в приложение Next.js. В завершение важно рассмотреть некоторые ключевые аспекты развертывания в производственной среде." }), "\n", _jsxs(_components.h3, { id: "ключевые-соображения-для-развертывания-в-производственной-среде", children: ["Ключевые соображения для развертывания в производственной среде", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ключевые-соображения-для-развертывания-в-производственной-среде", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Настройка идентификатора пользователя" }), ": В этом учебном пособии мы использовали адрес электронной почты в качестве идентификатора пользователя. Однако в производственной среде вам может понадобиться использовать другой идентификатор, например, ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "userId" }) }), " или ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "username" }) }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Интеграция базы данных" }), ": Хотя мы использовали KV от Vercel в качестве простого демонстратора управления данными сессии и пользователя, в реальном приложении следует интегрировать более надежную систему баз данных (например, PostgreSQL, MongoDB и т.д.)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Настройка параметров WebAuthn" }), ": Расмотренные параметри WebAuthn являются отправной точкой. В зависимости от требований вашего приложения и политики безопасности, вам может понадобиться настроить эти параметры. Обратитесь к ", _jsx(_components.a, { href: "https://www.w3.org/TR/webauthn/", children: "документации WebAuthn" }), " и ", _jsx(_components.a, { href: "https://github.com/MasterKale/SimpleWebAuthn", children: "документации библиотеки Simple WebAuthn" }), " для получения рекомендаций по настройке параметров под ваши конкретные потребности."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Спасибо, что присоединились к нам в этом образовательном путешествии. Даже в этом минимальном примере интегрировать WebAuthn - не простая задача, есть и другой вариант, попробуйте WebAuthn в MFA от Logto:" }), "\n", _jsx(LogtoCloudButton, { children: "Попробуйте многофакторную аутентификацию Logto" })] }); } 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."); }