Passcode UI Component

Weavr supports 2 types of end-user passwords:

• Password made up of at least 8 alphanumeric and symbol characters
• Passcode made up of 4 digits

If you already require your customers to authenticate to use your application, you can authenticate your customers with Weavr using a passcode instead of a password.

info

Contact our support team if you are interested to set up your application to use passcodes instead of a passwords.

1 Embed the passcode UI Component

The Passcode UI component lets you collect your customer’s passcode securely and converts it into a token, which you can safely send to Weavr using the API.

tip

To use Weavr UI components, you must first set up the Weavr UI library in your application.

warning

Due to requirements related to strong customer authentication, your authentication token is required to be stepped-up when calling this UI to update the passcode.

<!-- Define a form in which you will ask your customer to input their passcode -->
<form onSubmit="onSubmit(); return false;">
  <!-- Normal input to accept the user name-->
  Username: <input type="input" name="user" />
  <!-- Div to be replaced with the pass code component -->
  Passcode:
  <div id="passcode"></div>

  <input type="submit" value="Login" />
</form>

<script>
  const passcodeComponent = weavrComponents.capture.passCode(
    "{{ component name }}",
    {
      placeholder: "Pass Code",
    }
  );

  passcodeComponent.mount("#passcode");

  function onSubmit() {
    passcodeComponent
      .createToken()
      .then((res) => {
        // Successfully created token
        console.log(res);

        // Outputs:
        // {
        //   "tokens": {
        //     "{{ component name }}": "{{ token }}"
        //   }
        // }
      })
      .catch((e) => {
        // Error while creating the token
      });
  }
</script>

2 Authenticate the user

Now that you have the tokenised passcode, you can authenticate the user using the tokenised passcode.

caution

You must perform this step on the server side of your application.

POST/login_with_passwordTry it

After a successful login you will receive the user authentication token as token in the response. You must then use this token to authenticate the user in all subsequent API calls.