ACUL webauthn-platform enroll forwarding

Get Help
,
1

I am working on an ACUL implementation and want to rework the mfa-begin-enroll-options page to accommodate Biometrics, but there doesn’t seem to be support in the enroll library function for ‘webauthn-platform’. I know there is the mfa-webauthn-platform-enrollment screen but I’d like to push users there only when they select the option on mfa-begin-enroll-options I’ve been researching the docs and am trying to figure out the best way to forward users from the options page to the corresponding mfa factor.

1 Like
3

Hi @daenzer.gabriel

Please allow me some time to look into the issue and I will come back to you ASAP!

Kind Regards,
Nik

4

Hi again!

Could you please let me know what ACUL SDK are you using? ACUL JS or React?

Also, are you only customizing the enrollment options page for MFA? If so, you should be able to redirect the user to the mfa-webauth prompt instead of the next screen(depending on their selection). Since MFA and Biometrics enrollments are different prompts, you will need to do a full redirect/change of the prompt instead of forwarding the user to the appropriate screen.

How are you currently performing the redirect/forwarding of users for the other MFA options?

Kind Regards,
Nik

5

Hello!

I am working in the React SDK.

I was planning on using the provided hook function handleEnroll and subsequent library function enroll:

I anticipated this library function behind the scenes manages processing the user to the appropriate next screen/prompt.

For something like forwarding the user, would that be something like sending the user back to my app and sending them back into a post-login action with added arguments for factor selection?

1 Like
6

Hi again!

Thanks for letting me know!

Regarding the issue at hand, I would recommend to override the default behavior of the “Continue with Biometrics” button on your custom mfa-begin-enroll-options page. Instead of letting it submit to Auth0’s default handler by using the enroll() function which is a helper within that sample’s code, you will be bypassing the it with a new handleContinue function.

Your enrollment screen buttons should look something like this:

<div class="radio-group">
  <!-- Your current Enrollment options (Email/SMS/Authenticator) -->
  <label>
    <input type="radio" name="authenticator_type" value="otp">
    Authenticator App
  </label>
  
  <!-- The radio button you will be using for the biometrics enrollment -->
  <label>
    <input type="radio" name="authenticator_type" value="webauthn-platform">
    Continue with Biometrics(Face/Fingerprint)
  </label>
</div>

After that, instead of calling the handleEnroll hook directly on form submission, you’ll create your own handler that contains the necessary logic. Inside the React component file is where we adapt the solution (the new function proposed above). It will check the user’s selection and calls the appropriate SDK method. I believe it should look something like this:

import React, { useState } from 'react';

const MfaBeginEnrollOptionsComponent = () => {
  const { texts } = useMfaBeginEnrollOptionsManager();
  
  const [selectedFactor, setSelectedFactor] = useState<string>('otp');

  const handleContinue = (event: React.FormEvent) => {
    event.preventDefault();

    if (window.auth0) {
      if (selectedFactor === 'webauthn-platform') {
        window.auth0.challenge('webauthn-platform', {
          challenge_type: 'webauthn-platform'
        });

      } else if (selectedFactor === 'otp') {
        window.auth0.challenge('otp', {
          challenge_type: 'otp'
        });
      }

    } else {
      handleEnroll({ authenticator_type: selectedFactor });
    }
  };

 return (
    <form onSubmit={handleContinue}>
      <div className="radio-group" onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedFactor(e.target.value)}>
        <label>
          <input type="radio" name="authenticator_type" value="otp" defaultChecked />
          Authenticator App
        </label>
        <label>
          <input type="radio" name="authenticator_type" value="webauthn-platform" />
          This Device (Face/Fingerprint)
        </label>
      </div>

      <button type="submit">Continue</button>
    </form>
  );
};

export default MfaBeginEnrollOptionsComponent;

(I have separated the code blocks due to format vizualisation issues)

Let me know if the suggestion above is suitable for your ACUL implementation!

Kind Regards,
Nik