jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(encryptid): detect missing WebAuthn in QR scanner WebViews 

When scanning a device-link QR code, many phone apps open the URL in
an embedded WebView that lacks PublicKeyCredential support, causing
"user agent does not support public key credentials". Now the /link
page checks for WebAuthn early and shows a helpful fallback with a
Copy Link button so the user can open it in Safari/Chrome instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-13 10:59:36 -04:00
parent efbd0f040c
commit 97bf0504cb
1 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/encryptid/server.ts
View File

@ -3714,6 +3714,9 @@ app.get('/link', (c) => {
.btn { display: inline-block; padding: 0.75rem 2rem; background: linear-gradient(90deg, #00d4ff, #7c3aed); color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-copy { display: inline-block; padding: 0.6rem 1.5rem; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; font-size: 0.85rem; cursor: pointer; margin-top: 0.75rem; }
.btn-copy:active { background: rgba(255,255,255,0.2); }
.browser-hint { color: #94a3b8; font-size: 0.8rem; margin-top: 0.75rem; line-height: 1.5; }
.hidden { display: none; }
</style>
</head>
@ -3723,6 +3726,11 @@ app.get('/link', (c) => {
<h1>Link This Device</h1>
<div id="status" class="status loading">Loading...</div>
<button id="link-btn" class="btn hidden" onclick="linkDevice()">Create Passkey on This Device</button>
<div id="no-webauthn" class="hidden">
<p class="browser-hint">Passkeys require a full browser.<br>Open this link in <strong>Safari</strong> (iOS) or <strong>Chrome</strong> (Android):</p>
<button class="btn-copy" onclick="copyLink()">Copy Link</button>
<p id="copy-confirm" class="browser-hint hidden" style="color:#22c55e;">Copied!</p>
</div>
<div id="done" class="hidden">
<p style="color:#94a3b8;margin-top:1rem;font-size:0.9rem;">You can now sign in from this device using your passkey.</p>
</div>
@ -3736,12 +3744,37 @@ app.get('/link', (c) => {
let linkInfo = null;
function copyLink() {
const url = window.location.href;
if (navigator.clipboard) {
navigator.clipboard.writeText(url).then(() => {
document.getElementById('copy-confirm').classList.remove('hidden');
});
} else {
// Fallback for WebViews without clipboard API
const ta = document.createElement('textarea');
ta.value = url;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
document.getElementById('copy-confirm').classList.remove('hidden');
}
}
async function init() {
if (!linkToken) {
statusEl.className = 'status error';
statusEl.textContent = 'No link token found.';
return;
}
// Check WebAuthn support early — QR scanners often use WebViews that lack it
const webauthnSupported = window.PublicKeyCredential &&
typeof navigator.credentials?.create === 'function';
try {
const res = await fetch('/api/device-link/' + encodeURIComponent(linkToken) + '/info');
const data = await res.json();
@ -3751,6 +3784,14 @@ app.get('/link', (c) => {
return;
}
linkInfo = data;
if (!webauthnSupported) {
statusEl.className = 'status error';
statusEl.textContent = 'This browser does not support passkeys.';
document.getElementById('no-webauthn').classList.remove('hidden');
return;
}
statusEl.className = 'status success';
statusEl.textContent = 'Link this device to ' + data.username + String.fromCharCode(39) + 's account';
btn.classList.remove('hidden');