===========================
Enable CAPTCHA verification
===========================

.. important::

    Feature works with solutions compatible with reCAPTCHA V2

Staff can enable CAPTCHA verification on end-user login and/or sign-up pages.

In order to configure CAPTCHA verification you will first have to:

1. Obtain the `site key` and `secret key` credentials from your chosen solution
   (e.g. Google reCAPTCHA or Cloudflare Turnstile).

2. Add the site key in the enduser.config.json file:

.. code-block:: bash

    fleio edit enduser.config.json
    ...
        "logoutRedirect": null,
        "usernameInputLabel": null,
        "reCaptchaSiteKey" : "HERE WE PASTE THE SITE KEY"
      }

3. Add the secret key at the end of the settings.py file:

.. code-block:: bash

    fleio edit settings.py
    RECAPTCHA_SECRET = 'HERE WE PASTE THE SECRET KEY'

After saving the file, you will be asked if you want to restart Fleio with the new changes, choose to do so.

4. Insert the CAPTCHA script into the enduser index.html file.

When using Google reCAPTCHA, we need to add the following script inside
the ``/var/webapps/fleio/frontend/enduser/index.html``:

.. code-block:: bash

    <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

Or, if using Cloudflare Turnstile, add this code in the same file:

.. code-block:: bash

    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script>

This needs to be done by following :ref:`this example<change-docker-files>`.

Now you can require end-users to complete CAPTCHA verification.

For login page configuration, go to staff panel's **Settings** - **General** - **Authentication** tab and configure
the following settings:

.. image:: /_static/images/staff/settings/authentication/login-captcha-settings.png


For sign-up page configuration, go to staff panel's **Settings** - **General** - **Sign up** tab and configure
the following settings:

.. image:: /_static/images/staff/settings/authentication/sign-up-captcha-settings.png

If you are using a custom solution that is not present in the **CAPTCHA solution** dropdown, you must also fill in the
**CAPTCHA site verify URL** field with the URL where the end-user CAPTCHA will be validated.


.. note::

    The CAPTCHA solution configured for login page must be the same as the one chosen for sign-up page. This means that
    you cannot use Google reCAPTCHA on login page while using Cloudflare Turnstile on sign-up page.


If everything was properly configured, you should be able to see the CAPTCHA verification on the page you configured:

On login page:

.. image:: /_static/images/staff/settings/authentication/login-captcha-demo.png

On sign-up page:

.. image:: /_static/images/staff/settings/authentication/sign-up-captcha-demo.png