This guide covers how to deploy credential defense on registration and password reset pages. There are numerous variables to take into account for a deployment, and we will try to cover as much as possible in this guide.

Upon completion of deployment onto registration and password reset pages, you will have visibility into and/or control over the complexity requirements and different weaknesses the credentials of your user base use to access your web app.
Due to the uniqueness of each web app, it is not possible to cover every scenario in this guide. However, a best effort will be made. It is possible to leverage the Cymatic SDK to perform different actions on a registration or password reset page. One such action is to enable the submit button upon all password criteria being met and the password and confirm password field matching. How to enable the submit button in this scenario is out of scope for this guide. However, how Cymatic presents the data that can be used to make this decision will be discussed.
In the unlikely event that you run out of credits or the Cymatic service is not operating as expected and your web app is configured to enable the submit button on the registration and/or password reset page once the password criteria have all been met, your users may not be able to use these forms on your web app. Implementing a safeguard within your web app for this scenario is recommended.
Snippet deployment

As covered in the other deployment guides, the snippet should be injected into the head section of the HTML code for the registration and password reset pages.

SDK initialization

Due to the flexibility of the Cymatic SDK on registration and password reset forms, it is highly recommended to deploy the initialization process via a separate file. For this guide, we will create a file called registration_new.js that exists in the js folder on the web app and call this file from the registration page as follows:

Some browsers have the tendency to cache the contents of js files even when caching is disabled or the page is refreshed. When this occurs, changes made in the js files may not be updated in the browser. For testing purposes, it may help to make the file name dynamic. For example, if using PHP on the app, the following can be used to ensure a fresh copy each time the page is accessed.
<script src="js/registration_new.js?version=<?= time() ?>"></script>

The contents of this file will be responsible for the initialization of the Cymatic snippet along with how you want your web application to behave when the credential requirements are or are not met. For this guide, the samples provided below will be put into the js/registration_new.js file

To initialize the Cymatic snippet and define the selectors for the password field on the form, please refer to the cymatic.js file in the attachment at the bottom of this article.
For assistance in determining the correct selectors on your registration or password reset form, please refer to step 4 of the deployment for login forms guide.
Credential defense requirements configuration

The configuration of credential defense is performed within the Cymatic app at settings > Cymatic > credential defense. In this section, you can configure complexity, repeated characters, sequential characters, dark web, and dictionary lookups individually. You can leverage any of the checks you would like with the respective toggle switch. To configure the text displayed for each check, expand the section, enter the text you would like, and save the changes.
When you enable or disable individual checks within the credential defense section, the help text present to the user of the form will automatically be updated to reflect the new configuration. No further changes need to be completed on your web app.

Display samples

The following are two different samples that can be used as templates to display the requirements to the user interacting with your form. Please remember these are samples only and you are free to customize them, or implement your own unique design.
Depending on the presentation format you choose, changing of the message as discussed in the previous step may be required.
Sample 1

Sample 2

Sample collection

This zip file contains the files used to create the two above samples. Within the zip file is two folders, sample_1 and sample_2. They will respectively give you the look of the above two screenshots provided to show the help text. Within each folder, there are five files. Index.html can be used for testing, but is not meant to replace your form. The png file is a screenshot of what the sample text looks like. Form.css and cymatic.js are the same in each folder. Criterias.css is unique for each folder and what controls how the help text appears. Form.css, criterias.css, and cymatic.js are meant to be linked to your registration and password reset forms as discussed above in the SDK initialization section.
Both samples in the zip file contain a form.css file. This file defines how certain attributes work on the form page. If you decide to use these samples, please keep in mind that your form page will need to be updated with these attributes for proper operation. Here are the class attributes you will need to define in your HTML and what elements they should be linked to, along with an example for each.
cy-form: form element
<form class="cy-form">

cy-form-group: div element
<div class="cy-form-group">

cy-form-label: label element
<label for="username" class="cy-form-label">

cy-form-input: input element
<input name="username" type="username" class="cy-form-input">

cy-form-submit: submit button input element
<input type="submit" value="Submit" class="cy-form-submit cy-form-submit-disabled">

cy-form-submit-disabled: submit button input element
<input type="submit" value="Submit" class="cy-form-submit cy-form-submit-disabled">

To display the help text for the user interacting with your form, place the following line in the HTML where you would like the text to appear.
<div class="cy-criterias"></div>
Was this article helpful?
Thank you!