Implementing Google reCaptcha

Overview

Google reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep malicious software from engaging in abusive activities on your website. Meanwhile, legitimate users will be able to login, make purchases, view pages, or create accounts and fake users will be blocked.
Implementing this service in your application sign up flow will ensure that no bots are creating accounts.

Implementation steps

1. Install the Bubble reCAPTCHA plugin

2. Register your site at Google reCAPTCHA

Select:
  • reCAPTCHA v2
  • I'm not a robot Checkbox
  • Enter the bubble app domain without the https://
  • Enter your client custom domain
  • Enter your client email address

3. Copy your app keys

4. Paste your keys into the plugin at your app Bubble's editor

5. Go to the reusable signup/login and add the 'reCaptcha form' element

  • Search the 'Signup 1 - Button'
  • Add the 'reCaptcha form' element just above the button.

6. Set up the element

  • In its Appearance tab you can change the theme from Light to Dark if it suits your app design better:
  • In its Layout tab enter the following values:

7. Set up the button so it's clickable if the reCaptcha is clicked

Now we need to block the button if the reCaptcha element is not clicked. To do so, duplicate the last condition in the 'Signup 1 - Button' button, and enter the following When field content in the duplicated condition:
And that's it, your sign up form should be:

Demo