From 56fe70708060fc5a196e8c6f81cdd338ea4ddd02 Mon Sep 17 00:00:00 2001
From: Luis Marsiglia <marsiglia.business@gmail.com>
Date: Thu, 31 Aug 2023 17:02:47 -0400
Subject: [PATCH] fix: Fix script injection issues

Fix #32
---
 packages/lib/src/lib.tsx               | 10 +++++-----
 packages/lib/src/use-observe-script.ts |  3 +--
 packages/lib/src/utils.ts              |  6 +++++-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/lib/src/lib.tsx b/packages/lib/src/lib.tsx
index 8e8f70f..dc8276a 100644
--- a/packages/lib/src/lib.tsx
+++ b/packages/lib/src/lib.tsx
@@ -45,9 +45,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 	const scriptLoaded = useObserveScript(scriptId)
 	const containerId = id ?? DEFAULT_CONTAINER_ID
 
-	const onLoadCallbackName = `${
-		scriptOptions?.onLoadCallbackName || DEFAULT_ONLOAD_NAME
-	}#${containerId}`
+	const onLoadCallbackName = scriptOptions?.onLoadCallbackName
+		? `${scriptOptions.onLoadCallbackName}#${containerId}`
+		: DEFAULT_ONLOAD_NAME
 
 	const renderConfig = useMemo(
 		(): RenderOptions => ({
@@ -187,10 +187,10 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 	and set turnstileLoaded to true. Different from the case when handle the injection,
 	where we set turnstileLoaded in the script.onload callback */
 	useEffect(() => {
-		if (!injectScript && scriptLoaded && !turnstileLoaded && window.turnstile) {
+		if (scriptLoaded && !turnstileLoaded && window.turnstile) {
 			setTurnstileLoaded(true)
 		}
-	}, [injectScript, turnstileLoaded, scriptLoaded])
+	}, [turnstileLoaded, scriptLoaded])
 
 	useEffect(() => {
 		if (!siteKey) {
diff --git a/packages/lib/src/use-observe-script.ts b/packages/lib/src/use-observe-script.ts
index 97f0a35..29f2501 100644
--- a/packages/lib/src/use-observe-script.ts
+++ b/packages/lib/src/use-observe-script.ts
@@ -6,8 +6,7 @@ export default function useObserveScript(scriptId = DEFAULT_SCRIPT_ID) {
 
 	useEffect(() => {
 		const checkScriptExists = () => {
-			const script = isScriptInjected(scriptId)
-			if (script) {
+			if (isScriptInjected(scriptId)) {
 				setScriptLoaded(true)
 			}
 		}
diff --git a/packages/lib/src/utils.ts b/packages/lib/src/utils.ts
index 87cb092..26f4d6b 100644
--- a/packages/lib/src/utils.ts
+++ b/packages/lib/src/utils.ts
@@ -2,8 +2,8 @@ import { ContainerSizeSet, InjectTurnstileScriptParams, RenderOptions } from './
 
 export const SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
 export const DEFAULT_SCRIPT_ID = 'cf-turnstile-script'
-export const DEFAULT_ONLOAD_NAME = 'onloadTurnstileCallback'
 export const DEFAULT_CONTAINER_ID = 'cf-turnstile'
+export const DEFAULT_ONLOAD_NAME = `onloadTurnstileCallback#${DEFAULT_CONTAINER_ID}`
 
 /**
  * Function to check if script has already been injected
@@ -26,6 +26,10 @@ export const injectTurnstileScript = ({
 }: InjectTurnstileScriptParams) => {
 	const scriptId = id || DEFAULT_SCRIPT_ID
 
+	if (isScriptInjected(scriptId)) {
+		return
+	}
+
 	const script = document.createElement('script')
 	script.id = scriptId