{"record":{"id":"78fcc95ad116481c","repo":"nextauthjs/next-auth","slug":"form-formid-not-found","errorCode":null,"errorMessage":"Form '${formID}' not found","messagePattern":"Form '(.+?)' not found","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/lib/utils/webauthn-client.js","lineNumber":66,"sourceCode":"    if (!res.ok) {\n      console.error(\"Failed to fetch options\", res)\n\n      return\n    }\n\n    return res.json()\n  }\n\n  /**\n   * Get the webauthn form from the page\n   *\n   * @returns {HTMLFormElement}\n   */\n  function getForm() {\n    const formID = `#${providerID}-form`\n    /** @type {HTMLFormElement | null} */\n    const form = document.querySelector(formID)\n    if (!form) throw new Error(`Form '${formID}' not found`)\n\n    return form\n  }\n\n  /**\n   * Get formFields from the form\n   *\n   * @returns {HTMLInputElement[]}\n   */\n  function getFormFields() {\n    const form = getForm()\n    /** @type {HTMLInputElement[]} */\n    const formFields = Array.from(\n      form.querySelectorAll(\"input[data-form-field]\")\n    )\n\n    return formFields\n  }","sourceCodeStart":48,"sourceCodeEnd":84,"githubUrl":"https://github.com/nextauthjs/next-auth/blob/a1a16a5a7780488c7449feece410033f445d0b31/packages/core/src/lib/utils/webauthn-client.js#L48-L84","documentation":"The WebAuthn client injects per-provider forms into the page and getForm() queries the DOM for #<providerID>-form; if the form element is missing it throws. The client script cannot find the markup it needs to submit the WebAuthn flow.","triggerScenarios":"Rendering the WebAuthn page without the required form element with id '<providerID>-form', a mismatched provider id between markup and configuration, or the script running before the DOM is rendered.","commonSituations":"Custom sign-in pages that omit the WebAuthn form markup; typos/different casing in the provider id used in the element id; script loaded in <head> without defer so the form does not exist yet.","solutions":["Include the form with id `${providerID}-form` (e.g. id=\"passkey-form\") in the page markup","Verify the provider id in the client setup matches the id used in the DOM element","Load the script with defer or run it on DOMContentLoaded so the form exists when queried","If using a custom page, copy the required WebAuthn form markup from the default page"],"exampleFix":"// before\n<div id=\"passkey-widget\"></div> <!-- no form -->\n// after\n<form id=\"passkey-form\"><input type=\"hidden\" name=\"username\" /></form>","handlingStrategy":"type-guard","validationCode":"const form = document.querySelector(`#${providerID}-form`);\nif (!(form instanceof HTMLFormElement)) throw new Error(`WebAuthn form missing for provider \"${providerID}\"`);","typeGuard":"function getWebAuthnForm(providerID: string): HTMLFormElement | null { const el = document.querySelector(`#${providerID}-form`); return el instanceof HTMLFormElement ? el : null; }","tryCatchPattern":"try { const form = getForm(); await webAuthnFlow(form) } catch (e) { if (String(e.message).includes(\"not found\")) { console.error(`Add <form id=\"${providerID}-form\"> to the page`); return; } throw e; }","preventionTips":["Render the required form markup before the WebAuthn client script runs (use defer/DOMContentLoaded)","Keep the element id exactly `${providerID}-form` in sync with provider config","When using custom pages, verify all WebAuthn markup is present in your template"],"tags":["webauthn","dom","missing-element"],"backgroundTag":"missing-dom-element","analyzedSha":"a1a16a5a7780488c7449feece410033f445d0b31","analyzedAt":"2026-08-28T21:52:38.200Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}