Safari will ask for security key instead of Touch ID when using Web Authentication

Question

Created Jun ’20

Replies 4

Boosts 0

Views 3.8k

Participants 2

I'm using Safari Technology Preview 109 on the MacOS 11 beta, on a 16" MacBook Pro. Unfortunately, I am unable to get the browser to ask for Touch ID. Instead, Safari will always ask for a security key:

Do you want to allow “localhost” to start using a security key to sign in?
Insert your security key and activate it to continue.

I have the "Web Authentication" and "When Authentication Local Authenticator" experimental features enabled. The web server is running on localhost. I'm using the code as shown in wwdc20-10670, except I'm not using attestation. I've never had a security key connected to this Mac either.

My code is this:

Code Block tsconst challengeBuffer = Uint8Array.from("XXXXXX", c => c.charCodeAt(0))
const options = {
	publicKey: {
		rp: { name: "localhost" },
		user: {
			name: user.email,
			id: Uint8Array.from(String(user.id), c => c.charCodeAt(0)),
			displayName: user.displayName
		},
		pubKeyCredParams: [{ type: "public-key", alg: -7 }],
		challenge: challengeBuffer,
		authenticatorSelection: {
			authenticatorAttachment: "platform"
		},
	}
}
const publicKeyCredential = await navigator.credentials.create(options);

What am I missing to get Safari to ask for Touch ID instead of a security key? If I'm reading the release notes for Preview 109 correctly, Touch ID should be working:

*Web Authentication.* Added a Web Authentication platform authenticator using Touch ID, if that capability is present (macOS Big Sur-only). [...]

Boost

Answer 1

Hanashi OP

Jun ’20

I have the same problem.

1

Answer 2

Hanashi OP

Jun ’20

Accepted Answer

The problem is known. I found this entry in the bugtracker for webkit: https://bugs.webkit.org/show_bug.cgi?id=213595

2

Answer 3

leonkoole OP

Jun ’20

Ah, thanks. So a user event is required to use Face ID or Touch ID. That answers my question, so I guess I'll have to work around that limitation, if there even is a working way around it.

1

Answer 4

Hanashi OP

Jul ’20

This example works for me:

Code Block HTML<input type="submit" id="MyButton">
<script>
		async function webauthnCheck() {
				if (await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()) {
						document.getElementById('MyButton').onclick = async function(event){
								event.preventDefault();
								const options = {
										publicKey: {
												rp: {
														name: 'mydomain.tld'
												},
												user: {
														id: Uint8Array.from("XXXXXX", c => c.charCodeAt(0)),
														name: 'test',
														displayName: 'Test User'
												},
												challenge: Uint8Array.from('XXXXXX', c => c.charCodeAt(0)),
												pubKeyCredParams: [
														{
																type: 'public-key',
																alg: -7
														}
												],
												timeout: 15000
										}
								}
								navigator.credentials.create(options).then(function (publicKeyCredential) {
										console.log(publicKeyCredential);
								})
						}
				}
		}
		webauthnCheck();
</script>

0