WebAuthn Android Prompt

[PixelNinja132]

Hey, @MasterKale I really appreciate all the work you have been doing for the WebAuthn community, it has been a huge help.

The issue I am having while implementing WebAuthn through plain JS and through the SimpleWebAuthn module is that the prompt on my Android phone displays something different than other examples I have seen on other modules.

My expected result for using WebAuthn is to see a popup similar to this when I use my phone:

But instead, I get a general message looking something like: Site X needs to verify that it's you with no display of the username which has been set.

An example of the expected behavior can be seen at https://webauthn.io/ where I do indeed get that popup that rules out an Android versioning difference.

Do you know if there is a setting that should be changed in my implementation or if there is something wrong with Android overall? Thanks.

PasswordlessID:

import { client } from 'https://unpkg.com/@passwordless-id/webauthn'

async function register() {
	const registration = await client.register("Test", "a7c61ef9-dc23-4806-b486-2428938a547e", {
	  "authenticatorType": "both",
	  "userVerification": "required",
	  "timeout": 60000,
	  "attestation": true,
	  "debug": true
	})
}

document.getElementById("register").addEventListener("click", register, false)

Vanilla:

const publicKey = {
    challenge: Uint8Array.from([1,2,3,4]),
    rp: {
      name: "Pixel Website",
			id: window.location.hostname,
    },
    user: {
      id: Uint8Array.from("UZSL85T9AFC", c => c.charCodeAt(0)),
			name: "[email protected]",
			displayName: "Lee",
    },
	  pubKeyCredParams: [
			{alg: -7, type: "public-key"},   // ES256 (Webauthn's default algorithm)
			{alg: -257, type: "public-key"}, // RS256 (for Windows Hello and others)
		],
    authenticatorSelection: {
			userVerification: "required", // Webauthn default is "preferred"
			authenticatorAttachment: "auto",
		},
    timeout: 60000,
    attestation: "direct"
	};

	navigator.credentials
	  .create({ publicKey })
	  .then((newCredentialInfo) => {
	    const attestationResponse = newCredentialInfo.response;
			console.log(attestationResponse)
	  })
	  .catch((err) => console.error(err));

[MasterKale]

Hello @PixelNinja132, passkey support on Android is "opt-in" and requires you to set residentKey: "required" in your authenticatorSelection options during registration:

const publicKey = {
  challenge: Uint8Array.from([1, 2, 3, 4]),
  rp: {
    name: "Pixel Website",
    id: window.location.hostname,
  },
  user: {
    id: Uint8Array.from("UZSL85T9AFC", c => c.charCodeAt(0)),
    name: "[email protected]",
    displayName: "Lee",
  },
  pubKeyCredParams: [
    { alg: -7, type: "public-key" },   // ES256 (Webauthn's default algorithm)
    { alg: -257, type: "public-key" }, // RS256 (for Windows Hello and others)
  ],
  authenticatorSelection: {
    userVerification: "required", // Webauthn default is "preferred"
    authenticatorAttachment: "auto",
    residentKey: "required", // <-- This will trigger passkey support in Android
  },
  timeout: 60000,
  attestation: "direct"
};

navigator.credentials
  .create({ publicKey })
  .then((newCredentialInfo) => {
    const attestationResponse = newCredentialInfo.response;
    console.log(attestationResponse)
  })
  .catch((err) => console.error(err));

Without that option you get the "legacy" WebAuthn experience that creates a device-bound credential that won't ever sync between devices.

I'm going to turn this into a discussion since it's a general question about WebAuthn as opposed to reporting an issue about my libraries.

[PixelNinja132]

Ah, thank you so much! This works perfectly, I have added it to my SimpleWebAuthn Demo project. Thanks again!