existing-style.js

//
// Registration
//
navigator.authentication.makeCredential({
  rpDisplayName: "Acme",
  displayName: "John P. Smith",
  name: "johnpsmith@example.com",
  id: "1098237235409872",
  imageURL: "https://pics.acme.com/00/p/aBjjjpqPb.png"
}, [
  {
    type: "ScopedCred",
    algorithm: "ES256"
  },
  {
    type: "ScopedCred",
    algorithm: "RS256"
  }
], "Y2xpbWIgYSBtb3VudGFpbg", {
  timeoutSeconds: 300,
  excludeList: [],
  extensions: {
    "webauthn.location": true
  }
})
  .then(credentialInfo => {
    // Send new credential info to server for verification and registration.
  })
  .catch(e => {
    // No acceptable authenticatior, or user refused.
  });

//
// Authentication, with no hint.
//
navigator.authentication.getAssertion(
  "Y2xpbWIgYSBtb3VudGFpbg",
  {
    timeoutSeconds: 300,
    allowList: [{
      type: "ScopedCred"
    }]
  })
    .then(assertion => {
      // Send |assertion| to server for verification.
    })
    .catch(e => {
      // Handle |e| gracefully.
    });

//
// Authentication, with hint.
//
navigator.authentication.getAssertion(
  "Y2xpbWIgYSBtb3VudGFpbg",
  {
    timeoutSeconds: 300,
    allowList: [
      {
        type: "ScopedCred",
        id: "ISEhISEhIWhpIHRoZXJlISEhISEhIQo="
      },
      {
        type: "ScopedCred",
        id: "cm9zZXMgYXJlIHJlZCwgdmlvbGV0cyBhcmUgYmx1ZQo="
      }
    ],
    extensions: {
      'webauthn.txauth.simple': "Wave your hands in the air like you just don’t care"
    }
  })
    .then(function (assertion) {
      // Send assertion to server for verification
    }).catch(function (err) {
      // No acceptable credential or user refused consent. Handle appropriately.
    });

potential-style.js

// Assumign something like the following IDL:
interface AwesomeNewCredential : Credential {
  readonly attribute AwesomeNewCredentialAssertion? assertion;
  static Promise<AwesomeNewCredential> register(AwesomeNewCredentialData data);
};

dictionary AwesomeNewCredentialData : CredentialData {
  required DOMString relyingParty;
  required DOMString displayName;
  required DOMString id;
  DOMString name;
  USVString imageURL;
  
  sequence<AlgorithmIdentifier> algorithm;
  BufferSource challenge;
  ScopedCredentialOptions options;
};
    
interface AwesomeNewCredentialAssertion {
  readonly attribute ArrayBuffer clientDataJSON;
  readonly attribute ArrayBuffer attestationObject;
  readonly attribute ArrayBuffer? signature;
};

dictionary AwesomeNewCredentialRequestOptions : CredentialRequestOptions {
  BufferSource challenge;
  unsigned long timeoutSeconds;
  USVString rpId;
  sequence <ScopedCredentialDescriptor> allowList;
  WebAuthnExtensions extensions;
};

partial dictionary CredentialRequestOptions {
  AwesomeNewCredentialRequestOptions AwesomeNew; 
};

// Registration
try {
  var c = await AwesomeNewCredential.register({
    relyingParty: "Acme",
    displayName: "John P. Smith",
    name: "johnpsmith@example.com",
    id: "1098237235409872",
    imageURL: "https://pics.acme.com/00/p/aBjjjpqPb.png",
    
    algorithms: [ "ES256", "RS256" ],
    
    challenge: "Y2xpbWIgYSBtb3VudGFpbg",
    
    options: {
      timeoutSeconds: 300,
      excludeList: [],
      extensions: {
        "webauthn.location": true 
      }
    }
  });
  // Send |c.assertion| to the server to bind it to an account.
} catch (e) {
  // Handle |e| gracefully. 
}

// Authentication, with no hint:
try {
  var c = await navigator.credentials.get({
    AwesomeNew: {
      challenge: "Y2xpbWIgYSBtb3VudGFpbg",
      timeoutSeconds: 300
    }
  });
  // Send |c.assertion| to server for verification.
} catch (e) {
  // Handle |e| gracefully. 
}

// Authentication, with hint:
try {
  var c = await navigator.credentials.get({
    AwesomeNew: {
      challenge: "Y2xpbWIgYSBtb3VudGFpbg",
      timeoutSeconds: 300,
      allowList: [ "ISEhISEhIWhpIHRoZXJlISEhISEhIQo=", "cm9zZXMgYXJlIHJlZCwgdmlvbGV0cyBhcmUgYmx1ZQo=" ],
      extensions: {
        'webauthn.txauth.simple': "Wave your hands in the air like you just don’t care"
      }
    }
  });
  // Send |c.assertion| to server for verification.
} catch (e) {
  // Handle |e| gracefully. 
}