Ensure your site key is registered to the correct type of reCAPTCHA version
This sample below provides details around the client-side verification. Though it's worth noting that Okta does have it's own threat detection engine (ThreatInsights) to prevent malicious attacks and spam on authentication evaluations.
We recommend this user flow as it's the simplest to implement and also prevents unwanted registration in the process.
- Lands on Sign In Page
- Display reCaptcha, Hide Sign In Widget
- Validate reCaptcha
- Display reCaptcha
Ensure a reCAPTCHA widget is available on the same page as the SIW container.
Make sure to import script with the correct parameters and
deferattribute!<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
While the simple flow is the preferred implementation, there are circumstances where you want to embed reCAPTCHA into the sign in widget. Note, this does require a more complex implementation and requires a bit of DOM manipulation.
It's important to mention that the embedded flow can be rather difficult when combining it with a modern front-end framework especially with a virtual DOM. Thus, you'll want to make sure to perform your logic within your encapsulated / wrapper over the widget.