Error Pages

Learn how you can customize each error screen for error events that might appear during your customer's login step

When an error occurs, you are sent to an error page which returns the title and description of the error as well as its error code. You can customize error pages by providing a liquid template around the

The fallback content to display on prerendering

.

You have access to the same variables as for the login screens, which helps you implement a consistent experience. You'll also have access to variables specific to error screens that will help you display relevant information about the error encountered.

Custom error page

The liquid error theme file contains the following blocks:

• Global html: This block controls the layout of your theme, it's your own code around the
  The fallback content to display on prerendering
  that will make up the design.
• Widget: This block returns the error parameters {{cryptr:widget}}

Global markup and widget

Here is an example of a error page, each error page is designed in the same way:

<div>
  <style>/* Your CSS Style */</style>
  <div>
    <div class="wrapper">
      <!-- Image -->
      <div class="image-wrapper">
        <img class="cover-image" src="{{ site.background_url }}" alt="{{ site.background_alt_text }}"/>
      </div>
      <div class="content">
        <div class="card">
          <div>
            <p>
              {{ http_code }} {{ error_code }}
            </p>
            <h1>
              {{ event_title }}
            </h1>
          </div>
          <div>
            <p>{{ description }}</p>
            <!-- Widget -->
            {{cryptr:widget}}
          </div>
          <a href="{{ site.company_url }}" target="_blank">
            <img class="logo" src="{{ site.logo_url }}" alt="{{ site.logo_alt_text }}">
          </a>
        </div>
        <a class="badge" href="https://www.cryptr.co/" target="_blank">
          <img class="cryptr-badge" src="https://res.cloudinary.com/cryptr/image/upload/v1669976239/Cryptr%20badge/badge_protected_by_cryptr_color_gwulm0.svg">
        </a>
      </div>
    </div>
  </div>
</div>

note

To know more about liquid, we advise you to read the documentation:
https://liquidjs.com/tutorials/intro-to-liquid.html

Available variables

Here are some examples of variables you can access to customize your error screens:

• {{ http_code }} : This variable contains the HTTP status code associated with the error. HTTP status codes are standardized numbers that indicate the status of the HTTP request.

• {{ error_code }} : This variable contains the specific error code. It can be used to identify the error programmatically and take appropriate action.

• {{ event_title }} : This variable contains the error title. It represents the title of the specific error that occurred.

• {{ description }} : This variable contains the description of the error. It provides additional information about what happened and can help

  The fallback content to display on prerendering
  understand the error.

note

These variables contain specific information about the error and can be freely placed in your liquid template, but cannot be modified. They are generated automatically by Cryptr according to the error that has occurred.

By using these variables, you can customize the content of your error screens to provide a consistent and informative

The fallback content to display on prerendering

experience.

Example

The error page includes a

The fallback content to display on prerendering

, and apart from this, you can insert non-customizable variables anywhere you like in your template:

Key	Text
http_code	422
error_code	magic_link_expired
event_title	Link expired
description	The magic link has expired. You can create a new one by clicking on the request button.

note

The content of the quoted variables varies depending on the type of error. Above we took the example of magic_link_expired error

Error screen types

This section presents the different error screens available for each feature. You can explore each accordion menu to view screenshots of specific error screens.

Depending on your

The fallback content to display on prerendering

, the accordion menus are grouped by categories such as

The fallback content to display on prerendering

,

The fallback content to display on prerendering

, TOTP, Password, Login, etc. Each accordion menu will include screenshots illustrating the corresponding error screens.

Feel free to click on each accordion menu to discover the specific error screens associated with each feature.

info

Please note that screenshots are provided for illustrative purposes and may differ from the actual appearance of your brand.

Login

incompatible_browser

---

too_many_attempts

---

unauthorized

---

user_not_found

---

user_email_locked

Password

password_leaked

---

too_many_requests

---

invalid_email_password

---

fallback_error

Magic Link

magic_link_expired

---

magic_link_sending_failed

---

invalid_magic_link

---

magic_link_already_used

Single Sign-on

sso_authentication_failed

---

unauthorized_user

---

sso_validation_failed

---

service_unavailable

---

authorization_denied

TOTP

totp_registration_required

---

totp_invalid_code

Troubleshooting

If you're having trouble customizing error screens, or if you're having problems displaying error messages, here are some troubleshooting tips:

• Check that you are using the variables available in your liquid model correctly.
• If you encounter problems displaying error messages, make sure the
  The fallback content to display on prerendering
  is integrated into your liquid template.

If problems persist, please contact our support team for further assistance.

Conclusion

Customizing error screens is an essential part of providing a consistent and informative

The fallback content to display on prerendering

experience. By using the variables available, you can provide clear and useful error messages to

The fallback content to display on prerendering

and developers when they encounter problems.

note

Don't forget to test your error screens in different scenarios to ensure that they display correctly and provide the appropriate information.

If you have any further questions or need additional help, please don't hesitate to contact us. We're here to help you improve your authentication

The fallback content to display on prerendering

experience and resolve error issues efficiently.