Rendering the form

📜Displaying the Auth Armor form

The Auth Armor SDK comes with a pre-built, highly-customizable form which handles several edge cases out of the box, you can render this form anywhere throughout your site by writing just a single line of code!

// Once the SDK is initialized, you can use the SDK instance to mount the form
AuthArmor.form.mount(".example-form-class-name", {
  // Specify form settings here...
});

✨ Customizing the form

The form has a couple of other options as well for advanced users, such as styling the form to use the same color scheme as your site, choosing which options you'd like to allow users to use for registration and authentication on your site, modifying the AuthArmor form's messages to be more specific to your site's use case, and integrating ReCaptcha Enterprise directly into your Auth Armor form!

Property

Accepted Values

Default value

usernameless
Toggle rendering the Usernameless Authentication QR Code in the "Login" tab

true|false

true

methods
Specify methods you'd like to enable/display in the form

['authenticator' | 'magiclink' | 'webauthn']
An array consisting of at least one of the methods listed above

['authenticator', 'magiclink', 'webauthn']

styles
Customize the form's color scheme to match your site, this is also modifiable using CSS which allows for greater control over the form's color scheme

{   accentColor: string;   backgroundColor: string;   tabColor: string;   qrCodeBackground: string;   highlightColor: string;   inputBackground: string;   appBtn: string; }
{   accentColor: "#0bdbdb",   backgroundColor: "#2a2d35",   tabColor: "#363a46",   qrCodeBackground: "#202020",   highlightColor: "#434857",   inputBackground: "#212329",   appBtn: "#41baba" }

preferences
Customize authentication/registration specific settings such as the authentication timeout, action name and more!

Refer to the Preferences page of the documentation

visualVerify
Enables visual verify for the current authentication request

true|false

false

If you'd like to support using different color schemes depending on the user's current OS color mode (Dark/Light mode), you can modify the colors using CSS directly:

/* Light mode */
:root {
    --autharmor-accent-color: #2e67ff;
    --autharmor-background-color: #183687;
    --autharmor-tab-color: #152554;
    --autharmor-highlight-color: #2b4db1;
    --autharmor-input-background: #172c68;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --autharmor-accent-color: #2e67ff;
    --autharmor-background-color: #183687;
    --autharmor-tab-color: #152554;
    --autharmor-highlight-color: #2b4db1;
    --autharmor-input-background: #172c68;
  }
}

Did this page help you?