From cdb2946b7018e628c53dfd80b69ae822fbc2ec57 Mon Sep 17 00:00:00 2001
From: Michael Derynck <michael.derynck@grafana.com>
Date: Fri, 14 Feb 2025 07:30:08 -0700
Subject: [PATCH] fix: disable recaptcha when site key is not set (#5451)

# What this PR does
Although recaptcha verification is disabled by default on the backend
for OSS installs, the plugin was still making use of the site key and
trying to load recaptcha. As that recaptcha site was removed this no
longer works. The updated plugin code will skip recaptcha verification
if it does not have a site key set.

## Which issue(s) this PR closes

Related to #5449

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.

---------

Co-authored-by: GitHub Actions <actions@github.com>
---
 .../PhoneVerification/PhoneVerification.tsx   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx
index 87dcff14..3e0fbd24 100644
--- a/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx
+++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx
@@ -108,10 +108,7 @@ export const PhoneVerification = observer((props: PhoneVerificationProps) => {
         await UserHelper.verifyPhone(userPk, code);
         userStore.fetchItemById({ userPk });
       } else {
-        window.grecaptcha.ready(async function () {
-          const token = await window.grecaptcha.execute(rootStore.recaptchaSiteKey, {
-            action: 'mobile_verification_code',
-          });
+        async function start_verification(token) {
           await userStore.updateUser({
             pk: userPk,
             email: user.email,
@@ -121,20 +118,31 @@ export const PhoneVerification = observer((props: PhoneVerificationProps) => {
           switch (type) {
             case 'verification_call':
               await UserHelper.fetchVerificationCall(userPk, token);
-              setState({ isPhoneCallInitiated: true });
+              setState({isPhoneCallInitiated: true});
               if (codeInputRef.current) {
                 codeInputRef.current.focus();
               }
               break;
             case 'verification_sms':
               await UserHelper.fetchVerificationCode(userPk, token);
-              setState({ isCodeSent: true });
+              setState({isCodeSent: true});
               if (codeInputRef.current) {
                 codeInputRef.current.focus();
               }
               break;
           }
-        });
+        }
+
+        if (!rootStore.recaptchaSiteKey?.trim()) {
+          await start_verification(null)
+        } else {
+          window.grecaptcha.ready(async function () {
+          const token = await window.grecaptcha.execute(rootStore.recaptchaSiteKey, {
+            action: 'mobile_verification_code',
+          });
+            await start_verification(token);
+          });
+        }
       }
     },
     [