Skip to content

Commit

Permalink
tests: fixing bug with 'excludeCredentials', improving instructions, …
Browse files Browse the repository at this point in the history 
…format/style
  • Loading branch information
@getify
getify committed Mar 14, 2024
1 parent f0bce7b commit 7bdf419
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 18 deletions.
38 changes: 27 additions & 11 deletions test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,57 @@
<style>
.modal-btn { display: inline-block; color: white; background-color: black; border: 0; border-radius: 0.25em; font-size: 1rem; }
.toast-popup .swal2-html-container { white-space: nowrap; }
ul { list-style-type: none; padding: 0; }
ul li { margin: 0.7rem; }
</style>
</head>
<body>

<main>
<h1>WebAuthn Local Client: Tests</h1>

<h2><a href="https://github.com/mylofi/webauthn-local-client">Github</a></h2>
<h3><a href="https://github.com/mylofi/webauthn-local-client">Github</a></h3>

<p>
Before running these tests, make sure you're on a device that supports <a href="https://webauthn.io/" target="_blank">Web Authentication</a>, or alternatively use browser DevTools to <a href="https://developer.chrome.com/docs/devtools/webauthn" target="_blank">setup a virtual authenticator in Chrome</a>, or similar in Safari, or <a href="https://addons.mozilla.org/en-US/firefox/addon/webdevauthn/" target="_blank">this Firefox add-on</a>.
</p>
<p>
<strong>NOTE:</strong> This test-bed does not store anything (LocalStorage, server, etc), so to prevent confusion, on each page load you should reset the authenticator by removing any credentials created on a previous page load and run of these tests.
</p>
<h3>Steps To Run All 4 Authentication Tests:</h3>
<h2>Steps To Run (Re-)Registration [2] and Authentication [4] Tests:</h2>
<ol>
<li>Register a new credential. Enter any username you like. Also put in any text you want for User ID, or click the "Generate Random" button. Make sure to copy the User ID to your clipboard <strong>before</strong> clicking the "Register" button.</li>
<li>Now, the newly registered credential will appear in the list below (with a credential ID and Count), with an "authenticate" button next to it.</li>
<li>Click that "authenticate" button, and choose your passkey (Touch-ID, Face-ID, etc). Notice the count in the list will go up upon successful authentication.</li>
<li>Register <em>another</em> new credential, with the same or different name, but with the <strong>same User ID</strong> (pasted from your clipboard). Notice this will fail with an error message.</li>
<li>Now, <strong>re-register the credential</strong>, with the same or different name, but with the <strong>same User ID</strong> (pasted from your clipboard). Notice this will succeed, and that the "Credential ID" for that entry will change in the list below (as does the underlying "publicKey").</li>
<li>Click that "authenticate" button in the credentials list below, and choose your passkey (Touch-ID, Face-ID, etc). Notice the count in the list will go up upon successful authentication.</li>
<li>Now click the "choose authentication method" button that appears above the credentials list.</li>
<li>Click the "Pick my user ID" button, and select your passkey from the browser modal prompt. Notice the count will go up again on success.</li>
<li>Click the "Pick my passkey" button, and select your passkey from the browser modal prompt. Notice the count will go up again on success.</li>
<li>Click "choose authentication" again, then click "Provide my user ID".</li>
<li>Click into the empty User ID text box, and notice the browser autofill shows the option to choose your passkey. Notice the count goes up again on success.</li>
<li>Click "choose authentication" yet again, then "Provide my user ID" again. Click into the input box, and paste in the User ID you copied to the clipboard in step (1). Click "Authenticate". Notice one last time, the count goes up on success.</li>
<li>Click "choose authentication" one final time, then "Provide my user ID" again. Click into the input box, and paste in the User ID from your clipboard (from step 1). Click "Authenticate". Notice one last time, the count goes up on success.</li>
</ol>
<p>
<button type="button" id="register-btn">register new credential</button> (or <button type="button" id="reregister-btn">re-register credential</button>)
</p>
<p>
<button type="button" id="auth-btn">choose authentication method</button>
</p>

<hr>

<h2>Actions:</h2>

<ul>
<li>
<button type="button" id="register-btn">register new credential</button>
</li>
<li>
<button type="button" id="reregister-btn">re-register credential</button>
</li>
<li>
<button type="button" id="auth-btn">choose authentication method</button>
</li>
</ul>

<hr>

<h2>Registered Credentials:</h2>

<ul id="registered-credentials"></ul>

</main>
Expand Down
18 changes: 11 additions & 7 deletions test/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ async function promptRegister(newRegistration = true) {
});

if (result.isConfirmed) {
return registerNewCredential(
return registerCredential(
result.value.registerName,
result.value.registerID,
newRegistration
Expand Down Expand Up @@ -162,7 +162,7 @@ async function promptRegister(newRegistration = true) {
}
}

async function registerNewCredential(name,userIDStr,newRegistration = true) {
async function registerCredential(name,userIDStr,newRegistration = true) {
var userID = sodium.from_string(userIDStr);
var regOptions = regDefaults({
user: {
Expand All @@ -175,10 +175,12 @@ async function registerNewCredential(name,userIDStr,newRegistration = true) {
// on a re-registration
...(
(newRegistration) ? {
excludeCredentials: Object.values(credentialsByUserID).map(entry => ({
type: "public-key",
id: entry.credentialID,
})),
excludeCredentials: Object.entries(credentialsByUserID)
.filter(([userID,entry]) => (userID == userIDStr))
.map(([userID,entry]) => ({
type: "public-key",
id: entry.credentialID,
})),
} :

null
Expand Down Expand Up @@ -214,6 +216,8 @@ async function registerNewCredential(name,userIDStr,newRegistration = true) {
registeredCredentialsEl.appendChild(li);
}

registeredCredentialsEl.scrollIntoView({ behavior: "smooth", block: "center", });

// keep registered credential info in memory only
// (no persistence)
credentialsByUserID[userIDStr] = {
Expand Down Expand Up @@ -260,7 +264,7 @@ async function promptAuth() {
title: "Authenticate",
html: `
<p>
<button type="button" id="auth-1-btn" class="swal2-styled swal2-default-outline modal-btn">Pick my user ID</button>
<button type="button" id="auth-1-btn" class="swal2-styled swal2-default-outline modal-btn">Pick my passkey</button>
</p>
<p>
<button type="button" id="auth-2-btn" class="swal2-styled swal2-default-outline modal-btn">Provide my user ID</button>
Expand Down

0 comments on commit 7bdf419

Please sign in to comment.