diff --git a/BTCPayServer/Views/UIAccount/LoginWithFido2.cshtml b/BTCPayServer/Views/UIAccount/LoginWithFido2.cshtml
index 75c756886..90a82eec1 100644
--- a/BTCPayServer/Views/UIAccount/LoginWithFido2.cshtml
+++ b/BTCPayServer/Views/UIAccount/LoginWithFido2.cshtml
@@ -11,10 +11,11 @@
FIDO2 Authentication
-
+
Insert your security key into your computer's USB port. If it has a button, tap on it.
+
diff --git a/BTCPayServer/Views/UIFido2/Create.cshtml b/BTCPayServer/Views/UIFido2/Create.cshtml
index d0bc85070..46d2fd0db 100644
--- a/BTCPayServer/Views/UIFido2/Create.cshtml
+++ b/BTCPayServer/Views/UIFido2/Create.cshtml
@@ -4,8 +4,8 @@
}
@@ -13,6 +13,7 @@
Insert your security device into your computer's USB port. If it has a button, tap on it.
+
Retry
@@ -23,5 +24,5 @@
// send to server for registering
window.makeCredentialOptions = @Json.Serialize(Model);
-
-
+
+
diff --git a/BTCPayServer/wwwroot/js/webauthn/helpers.js b/BTCPayServer/wwwroot/js/webauthn/helpers.js
index bbebeadf0..fc32b2972 100644
--- a/BTCPayServer/wwwroot/js/webauthn/helpers.js
+++ b/BTCPayServer/wwwroot/js/webauthn/helpers.js
@@ -110,3 +110,7 @@ function value(selector) {
}
return el.value;
}
+function isSafari(){
+ //https://stackoverflow.com/a/23522755/275504
+ return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
diff --git a/BTCPayServer/wwwroot/js/webauthn/login.js b/BTCPayServer/wwwroot/js/webauthn/login.js
index 439f238ba..3dec177cd 100644
--- a/BTCPayServer/wwwroot/js/webauthn/login.js
+++ b/BTCPayServer/wwwroot/js/webauthn/login.js
@@ -1,8 +1,3 @@
-
-if (detectFIDOSupport() && makeAssertionOptions){
- login(makeAssertionOptions);
-}
-
async function login(makeAssertionOptions) {
const challenge = makeAssertionOptions.challenge.replace(/-/g, "+").replace(/_/g, "/");
makeAssertionOptions.challenge = Uint8Array.from(atob(challenge), c => c.charCodeAt(0));
@@ -56,3 +51,22 @@ async function verifyAssertionWithServer(assertedCredential) {
}
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (detectFIDOSupport() && makeAssertionOptions) {
+ if (isSafari()) {
+ const infoMessage= document.getElementById("info-message");
+ infoMessage.classList.add("d-none");
+ const startButton = document.getElementById("btn-start");
+ startButton.addEventListener("click", ev => {
+ login(makeAssertionOptions);
+ infoMessage.classList.remove("d-none");
+ startButton.classList.add("d-none");
+ });
+ startButton.classList.remove("d-none");
+ } else {
+ login(makeAssertionOptions);
+ }
+ }
+})
+
diff --git a/BTCPayServer/wwwroot/js/webauthn/register.js b/BTCPayServer/wwwroot/js/webauthn/register.js
index 36bfec1d5..f379649b4 100644
--- a/BTCPayServer/wwwroot/js/webauthn/register.js
+++ b/BTCPayServer/wwwroot/js/webauthn/register.js
@@ -1,8 +1,3 @@
-
-if (detectFIDOSupport() && makeCredentialOptions){
- register(makeCredentialOptions);
-}
-
async function register(makeCredentialOptions) {
console.log("Credential Options Object", makeCredentialOptions);
// Turn the challenge back into the accepted format of padded base64
@@ -65,3 +60,21 @@ async function registerNewCredential(newCredential) {
document.getElementById("data").value = JSON.stringify(data);
document.getElementById("registerForm").submit();
}
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (detectFIDOSupport() && makeCredentialOptions) {
+ if (isSafari()) {
+ const infoMessage= document.getElementById("info-message");
+ infoMessage.classList.add("d-none");
+ const startButton = document.getElementById("btn-start");
+ startButton.addEventListener("click", ev => {
+ register(makeCredentialOptions);
+ infoMessage.classList.remove("d-none");
+ startButton.classList.add("d-none");
+ });
+ startButton.classList.remove("d-none");
+ } else {
+ register(makeCredentialOptions);
+ }
+ }
+})