+
+- ${
+- this._errorMsg
+- ? html`${this._errorMsg}`
+- : ""
+- }
+- ${
+- this._statusMsg
+- ? html`${this._statusMsg}`
+- : ""
+- }
+-
++ ${this.passkeys!.map(
++ (passkey) =>
++ html`
++ ${passkey.name}
++ ${passkey.id}
++ `
++ )}
+
+ ${this.hass.localize("ui.panel.profile.setup_passkey.add")}
+
+@@ -67,28 +50,6 @@ class HaSetupPasskeyCard extends LitElement {
+ `;
+ }
+
+- private _currentPasswordChanged(ev) {
+- this._currentPassword = ev.target.value;
+- }
+-
+- private _newPasswordChanged(ev) {
+- this._password = ev.target.value;
+- }
+-
+- private _newPasswordConfirmChanged(ev) {
+- this._passwordConfirm = ev.target.value;
+- }
+-
+- protected firstUpdated(changedProps: PropertyValues) {
+- super.firstUpdated(changedProps);
+- this.addEventListener("keypress", (ev) => {
+- this._statusMsg = undefined;
+- if (ev.key === "Enter") {
+- this._changePassword();
+- }
+- });
+- }
+-
+ private _base64url = {
+ encode: function (buffer) {
+ const base64 = window.btoa(
+@@ -107,7 +68,7 @@ class HaSetupPasskeyCard extends LitElement {
+ },
+ };
+
+- private async _createPasskey(flow_id: string, options: any) {
++ private async _createPasskey(options: any) {
+ console.log(options);
+
+ // Base64URL decode some values
+@@ -160,8 +121,7 @@ class HaSetupPasskeyCard extends LitElement {
+
+ this.hass
+ .callWS({
+- type: "auth/passkey_register",
+- flow_id: flow_id,
++ type: "config/auth_provider/passkey/register_validate",
+ credential: credential,
+ })
+ .then(() => {
+@@ -169,15 +129,14 @@ class HaSetupPasskeyCard extends LitElement {
+ });
+ }
+
+- private async _changePassword() {
++ private async _generatePasskey() {
+ this.hass
+ .callWS({
+- type: "auth/passkey_register",
+- passkey_module_id: "webauthn",
++ type: "config/auth_provider/passkey/register",
+ })
+ .then((data) => {
+ console.log("passkey setup! ", data);
+- this._createPasskey(data["flow_id"], data["options"]);
++ this._createPasskey(data["options"]);
+ });
+ }
+
+diff --git a/src/types.ts b/src/types.ts
+index 8d0d37ee8..bf4b6a8c9 100644
+--- a/src/types.ts
++++ b/src/types.ts
+@@ -12,6 +12,7 @@ import { LocalizeFunc } from "./common/translations/localize";
+ import { AreaRegistryEntry } from "./data/area_registry";
+ import { DeviceRegistryEntry } from "./data/device_registry";
+ import { EntityRegistryDisplayEntry } from "./data/entity_registry";
++import { Passkey } from "./data/passkey";
+ import { CoreFrontendUserData } from "./data/frontend";
+ import { FrontendLocaleData, getHassTranslations } from "./data/translation";
+ import { Themes } from "./data/ws-themes";
+@@ -99,6 +100,7 @@ export interface CurrentUser {
+ name: string;
+ credentials: Credential[];
+ mfa_modules: MFAModule[];
++ passkeys: Passkey[];
+ }
+
+ // Currently selected theme and its settings. These are the values stored in local storage.