How to troubleshoot a challenge mismatch

[Tsjippy]

Hi all,

not sure this is the right place to aks but my challnges always are different during registration:

CreationCeremony:

PublicKeyCredentialCreationOptions::create(
                $this->getRpEntity(),
                $this->getUserIdentity(),
                $this->getChallenge(),
                pubKeyCredParams: $publicKeyCredentialParametersList,
                //excludeCredentials: $excludedPublicKeyDescriptors,
                authenticatorSelection: $authenticatorSelectionCriteria
            )

The challenge will be something like this: "d2d268bdc4"

I process it in js:

const optionsJSON			= await FormSubmit.fetchRestApi('login/fingerprint_options');

	// Update the message
	message.textContent  	= 'Please authenticate...';

	// Show the modal
	document.getElementById(`register-biometrics-modal`).classList.remove('hidden');

	let attResp;
	try {
		// Pass the options to the authenticator and wait for a response
		attResp = await startRegistration({ optionsJSON });
	} catch (error) {
		// Some basic error handling
		if (error.name === 'InvalidStateError') {
			console.log('Error: Authenticator was probably already registered by user');
		} else {
			console.error(error);
		}

		return;
	}

	message.textContent  	= 'Registering Authenticator';

	let formData			= new FormData();
	formData.append('identifier', identifier);
	formData.append('publicKeyCredential', btoa(JSON.stringify(attResp)));

	let response				= await FormSubmit.fetchRestApi('login/store_fingerprint', formData);

But when I sent it back to my sever the challenge will be something like "��\w���" and "941cd4b29w' in the rawData property of the publicKeyCredential->response

public function verifyResponse($response, $identifier){
        $authenticatorAttestationResponseValidator = AuthenticatorAttestationResponseValidator::create(
            $this->ceremonyRequestManager
        );

        // Parse the response to PublicKeyCredential Instance
        $this->loadPublicKey($response);
        
        // Check if the right class
        if (!$this->publicKeyCredential->response instanceof AuthenticatorAttestationResponse) {
            //e.g. process here with a redirection to the public key creation page. 
            return new \WP_Error('sim-login', 'Invalid response try again');
        }

        // validate the response
        try{
            $publicKeyCredentialSource = $authenticatorAttestationResponseValidator->check(
                $this->publicKeyCredential->response,
                getFromTransient('publicKeyCredentialCreationOptions'),
                $this->domain
            );
        }catch(\Exception $e){
            SIM\printArray($e->getMessage());

            return new \WP_Error('sim-login', $e->getMessage());
        }
        
        // store in db
        $this->storeCredential( $publicKeyCredentialSource, $identifier);
    }

All this runs on localhost.

See complete code on https://github.com/tsjippy/login