diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 926255ab..49068445 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -146,6 +146,16 @@ class LoginPage extends React.Component {
   }
 
   onFinish(values) {
+    if (this.state.loginMethod === "webAuthn") {
+      let username = this.state.username;
+      if (username === null || username === "") {
+        username = values["username"];
+      }
+
+      this.signInWithWebAuthn(username);
+      return;
+    }
+
     const application = this.getApplicationObj();
     const ths = this;
 
@@ -499,9 +509,14 @@ class LoginPage extends React.Component {
                   </Button>
                 ) :
                 (
-                  <Button type="primary" style={{width: "100%", marginBottom: "5px"}} onClick={() => this.signInWithWebAuthn()}>
-                    {i18next.t("login:Sign in with WebAuthn")}
-                  </Button>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  style={{width: "100%", marginBottom: "5px"}}
+                  disabled={!application.enablePassword}
+                >
+                  {i18next.t("login:Sign in with WebAuthn")}
+                </Button>
                 )
             }
             {
@@ -639,14 +654,14 @@ class LoginPage extends React.Component {
     );
   }
 
-  signInWithWebAuthn() {
-    if (this.state.username === null || this.state.username === "") {
+  signInWithWebAuthn(username) {
+    if (username === null || username === "") {
       Setting.showMessage("error", "username is required for webauthn login");
       return;
     }
 
     let application = this.getApplicationObj();
-    return fetch(`${Setting.ServerUrl}/api/webauthn/signin/begin?owner=${application.organization}&name=${this.state.username}`, {
+    return fetch(`${Setting.ServerUrl}/api/webauthn/signin/begin?owner=${application.organization}&name=${username}`, {
       method: "GET",
       credentials: "include"
     })
@@ -657,13 +672,13 @@ class LoginPage extends React.Component {
           throw credentialRequestOptions.status.msg;
         }
 
-        credentialRequestOptions.certificate.challenge = UserWebauthnBackend.webAuthnBufferDecode(credentialRequestOptions.certificate.challenge);
-        credentialRequestOptions.certificate.allowCredentials.forEach(function(listItem) {
+        credentialRequestOptions.publicKey.challenge = UserWebauthnBackend.webAuthnBufferDecode(credentialRequestOptions.publicKey.challenge);
+        credentialRequestOptions.publicKey.allowCredentials.forEach(function(listItem) {
           listItem.id = UserWebauthnBackend.webAuthnBufferDecode(listItem.id);
         });
 
         return navigator.credentials.get({
-          certificate: credentialRequestOptions.certificate
+          publicKey: credentialRequestOptions.publicKey
         });
       })
       .then((assertion) => {
diff --git a/web/src/backend/UserWebauthnBackend.js b/web/src/backend/UserWebauthnBackend.js
index 3ff1d360..94fbdc05 100644
--- a/web/src/backend/UserWebauthnBackend.js
+++ b/web/src/backend/UserWebauthnBackend.js
@@ -21,15 +21,15 @@ export function registerWebauthnCredential() {
   })
     .then(res => res.json())
     .then((credentialCreationOptions) => {
-      credentialCreationOptions.certificate.challenge = webAuthnBufferDecode(credentialCreationOptions.certificate.challenge);
-      credentialCreationOptions.certificate.user.id = webAuthnBufferDecode(credentialCreationOptions.certificate.user.id);
-      if (credentialCreationOptions.certificate.excludeCredentials) {
-        for (var i = 0; i < credentialCreationOptions.certificate.excludeCredentials.length; i++) {
-          credentialCreationOptions.certificate.excludeCredentials[i].id = webAuthnBufferDecode(credentialCreationOptions.certificate.excludeCredentials[i].id);
+      credentialCreationOptions.publicKey.challenge = webAuthnBufferDecode(credentialCreationOptions.publicKey.challenge);
+      credentialCreationOptions.publicKey.user.id = webAuthnBufferDecode(credentialCreationOptions.publicKey.user.id);
+      if (credentialCreationOptions.publicKey.excludeCredentials) {
+        for (var i = 0; i < credentialCreationOptions.publicKey.excludeCredentials.length; i++) {
+          credentialCreationOptions.publicKey.excludeCredentials[i].id = webAuthnBufferDecode(credentialCreationOptions.publicKey.excludeCredentials[i].id);
         }
       }
       return navigator.credentials.create({
-        certificate: credentialCreationOptions.certificate
+        publicKey: credentialCreationOptions.publicKey
       });
     })
     .then((credential) => {