provide sample JS code

[raylu]

the docs currently say

The examples also include demonstrations of how to pass JSON-ified responses, using base64url encoding for ArrayBuffer values, into parse_registration_credential_json and parse_authentication_credential_json to be automatically parsed by the methods in this library. An RP can pair this with corresponding custom front end logic, or one of several frontend-specific libraries (like @simplewebauthn/browser, for example) to handle encoding and decoding such values to and from JSON.

it would be helpful to include code that creates the JSON because there is no documentation anywhere about how to encode each of the fields. through inspecting the code, I was able to come up with

async function register() {
	const challengeResponse = await postJSON('/endpoint/that/calls/generate_registration_options');
	const pkOpts = await challengeResponse.json();
	pkOpts['challenge'] = decodeUrlSafeBase64(pkOpts['challenge']);
	pkOpts['user']['id'] = decodeUrlSafeBase64(pkOpts['user']['id']);
	const credential = await navigator.credentials.create({'publicKey': pkOpts}) as PublicKeyCredential;
	if (credential === null)
		return;

	const credResponse = credential.response as AuthenticatorAttestationResponse;
	const credObj = {
		'type': credential.type,
		'id': credential.id,
		'rawId': encodeBase64(credential.rawId),
		'response': {
			'attestationObject': encodeBase64(credResponse.attestationObject),
			'clientDataJSON': encodeBase64(credResponse.clientDataJSON),
			'transports': credResponse.getTransports(),
		}
	};
	const attestationResponse = await postJSON('/endpoint/that/calls/verify_registration_response',
			{'credential': credObj});
	if (attestationResponse.ok)
		// registration successful
}

async function login(username: string) {
	const challengeResponse = await postJSON('/endpoint/that/calls/generate_authentication_options', {username});
	const loginReq = await challengeResponse.json();
	loginReq['challenge'] = decodeUrlSafeBase64(loginReq['challenge']);
	const assertion = await navigator.credentials.get({'publicKey': loginReq}) as PublicKeyCredential;
	if (assertion === null)
		return;

	const assertObj = {
		'id': assertion.id,
		'rawId': encodeBase64(assertion.rawId),
		'type': assertion.type,
		'response': {} as any,
		'authenticatorAttachment': assertion.authenticatorAttachment,
		'clientExtensionResults': assertion.getClientExtensionResults(),
	};
	for (const prop in assertion.response)
		assertObj['response'][prop] = encodeBase64((assertion.response as any)[prop]);
	const assertionResponse = await postJSON('/api/login/assert',
			{'username': username, 'assertion': assertObj});
	if (assertionResponse.ok)
		// login successful
}

function postJSON(path: RequestInfo, body: any): Promise<Response> {
	return fetch(path, {
		'method': 'POST',
		'headers': {'Content-Type': 'application/json'},
		'body': JSON.stringify(body),
	});
}

function decodeUrlSafeBase64(urlsafeb64: string): Uint8Array {
	const b64 = urlsafeb64.replace(/-/g, '+').replace(/_/g, '/');
	return Uint8Array.from(atob(b64), (b) => b.codePointAt(0) as number);
}

function encodeBase64(bytes: ArrayBuffer): string {
	return btoa(String.fromCharCode(...new Uint8Array(bytes)));
}

every client is going to need to send data in pretty much exactly this format, so it would be great to both document the format and provide this sample code