refactor: replace WebauthnJSON calls with native API calls

Author: joaquintomas2003

lib/generators/webauthn/rails/templates/app/javascript/controllers/webauthn/rails/add_credential_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus";
-import * as WebAuthnJSON from "@github/webauthn-json";
 
 export default class extends Controller {
   static targets = ["errorElement"]
@@ -14,7 +13,7 @@ export default class extends Controller {
         const nickname = event.target.querySelector("input[name='credential[nickname]']")?.value || "";
         const callbackUrl = `/webauthn-rails/credentials/callback?credential_nickname=${encodeURIComponent(nickname)}`;
 
-        WebAuthnJSON.create({ publicKey: data })
+        navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
           .then((credential) => this.#submitCredential(callbackUrl, credential))
           .catch((error) => this.#showError(error));
       } else {

lib/generators/webauthn/rails/templates/app/javascript/controllers/webauthn/rails/new_registration_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus";
-import * as WebAuthnJSON from "@github/webauthn-json";
 
 export default class extends Controller {
   static targets = ["errorElement"]
@@ -14,7 +13,7 @@ export default class extends Controller {
         const nickname = event.target.querySelector("input[name='registration[nickname]']")?.value || "";
         const callbackUrl = `/webauthn-rails/registration/callback?credential_nickname=${encodeURIComponent(nickname)}`;
 
-        WebAuthnJSON.create({ publicKey: data })
+        navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
           .then((credential) => this.#submitRegistration(callbackUrl, credential))
           .catch((error) => this.#showError(error));
       } else {

lib/generators/webauthn/rails/templates/app/javascript/controllers/webauthn/rails/new_session_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus";
-import * as WebAuthnJSON from "@github/webauthn-json";
 
 export default class extends Controller {
   static targets = ["errorElement"]
@@ -11,7 +10,7 @@ export default class extends Controller {
 
     fetchResponse.response.json().then((data) => {
       if (fetchResponse.succeeded) {
-        WebAuthnJSON.get({ publicKey: data })
+        navigator.credentials.get({ publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(data) })
           .then((credential) => this.#submitCredential(credential))
           .catch((error) => this.#showError(error));
       } else {

test/dummy/app/javascript/controllers/webauthn/rails/add_credential_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus";
-import * as WebAuthnJSON from "@github/webauthn-json";
 
 export default class extends Controller {
   static targets = ["errorElement"]
@@ -14,7 +13,7 @@ export default class extends Controller {
         const nickname = event.target.querySelector("input[name='credential[nickname]']")?.value || "";
         const callbackUrl = `/webauthn-rails/credentials/callback?credential_nickname=${encodeURIComponent(nickname)}`;
 
-        WebAuthnJSON.create({ publicKey: data })
+        navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
           .then((credential) => this.#submitCredential(callbackUrl, credential))
           .catch((error) => this.#showError(error));
       } else {

test/dummy/app/javascript/controllers/webauthn/rails/new_registration_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus";
-import * as WebAuthnJSON from "@github/webauthn-json";
 
 export default class extends Controller {
   static targets = ["errorElement"]
@@ -14,7 +13,7 @@ export default class extends Controller {
         const nickname = event.target.querySelector("input[name='registration[nickname]']")?.value || "";
         const callbackUrl = `/webauthn-rails/registration/callback?credential_nickname=${encodeURIComponent(nickname)}`;
 
-        WebAuthnJSON.create({ publicKey: data })
+        navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
           .then((credential) => this.#submitRegistration(callbackUrl, credential))
           .catch((error) => this.#showError(error));
       } else {

test/dummy/app/javascript/controllers/webauthn/rails/new_session_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus";
-import * as WebAuthnJSON from "@github/webauthn-json";
 
 export default class extends Controller {
   static targets = ["errorElement"]
@@ -11,7 +10,7 @@ export default class extends Controller {
 
     fetchResponse.response.json().then((data) => {
       if (fetchResponse.succeeded) {
-        WebAuthnJSON.get({ publicKey: data })
+        navigator.credentials.get({ publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(data) })
           .then((credential) => this.#submitCredential(credential))
           .catch((error) => this.#showError(error));
       } else {