Web Authentification API

• Web Authentication API - Web APIs | MDN

Parts

• 🌐 Relying party
  • Your website
• 🔑 Public key credential
• 💾 Authenticator
  • like an iPhone
• 🪪 Attestation (optional)
  • Checking that the device is real

// check if service is available on current device
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
 
// create a new credential
navigator.credentials.create()
 
// use an existing credential (when signing in)
navigator.credentials.get()

Face ID and Touch ID

• Meet Face ID and Touch ID for the web - WWDC20 - Videos - Apple Developer
• This is essentially multi-factor authentification: something you are (biometrics) and something you have (your phone)

Onboard user

1. User to sign in with regular email and password
2. Ask user if they want to use TouchId from now on

Enrollment

const options = {
  publicKey: {
    // your website
    rp: { name: "example.com" },
    // user information
    user: {
      name: "[email protected]",
      id: userIdBuffer,
      displayName: "John Appleseed",
    },
    pubKeyCredParams: [ { type: "public-key", alg: -7} ],
    challenge: challengeBuffer,
    // using a platform as authentificator
    authentificatorSelection: { authenticatorAttachment: "platform" },
    // optional, if specific security requirements
    attestation: "direct"
  }
}
 
const publicKeyCredential = await navigator.credentials.create(options)

Handling response on server

1. Validate all metadata
2. Validate the attestation (optional)
3. Save the credential ID and the public key data
4. Set a server-side cookie (optional)

Sign in

const options = {
publicKey: {
challenge: challengeBuffer,
allowCredentials: [{
type: "public-key",
id: credentialIdBuffer,
transports: ["internal"]
}
]
}};
 
const publicKeyCredential = await navigator.credentials.get(options);