WebAuth Using FaceID/TouchID

main1.js

// https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential
// isUserVerifyingPlatformAuthenticatorAvailable() tells you if you can use a platform to authenticate the user
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
.then((isAvailable) => {
    // Do Stuff with TouchID / Face ID
})
.catch(e => {
    // Doesnt support, bad :(
});

main2.js

const options = {
    publicKey: {
        rp: { name: 'https://prateekjadhwani.github.io/touchidtest/' }, // Name of the website
        user: {
            name: 'username',
            id: new Uint8Array(16),
            displayName: 'Your Name'
        },
        identifier: 'username',
        pubKeyCredParams: [ { type: 'public-key', alg: -7 }],
        challenge: serverChallenge,
        authenticatorSelection: { authenticatorAttachement: 'platform' }
    }
};

navigator.credentials.create(options)
.then((newCredentialInfo) => {
    // Do Stuff with Creds info
}).catch(function (err) {
    console.error(err);
});

main3.js

const options = {
    publicKey: {
        challenge: serverChallenge2,
        allowCredentials: [{
            type: 'public-key',
            id: rawIDReceivedInNewCredentialInfo,
            transports: ['internal'],
        }],
        userVerification: 'preferred'
    }
};

navigator.credentials.get(options)
.then((credentialInfoAssertion) => {
    // Success with login
}).catch(function (err) {
    console.error(err);
});