chore(loader): RN hcaptcha loader integration

.github/workflows/tests.yaml

@@ -84,10 +84,10 @@ jobs:
         platform: [ android ]
         pm: [ npm, yarn ]
         include:
-        - os: macos-latest
+        - os: macos-15
           platform: ios
           pm: npm
-        - os: macos-latest
+        - os: macos-15
           platform: ios
           pm: yarn
     steps:
@@ -137,7 +137,7 @@ jobs:
         include:
         - os: ubuntu-latest
           platform: android
-        - os: macos-latest
+        - os: macos-15
           platform: ios
     steps:
     - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2

Example.jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  preset: 'react-native',
+  preset: '@react-native/jest-preset',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   testPathIgnorePatterns: ['/node_modules/'],
   modulePathIgnorePatterns: ['<rootDir>/react-native-hcaptcha/'],

Hcaptcha.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import hCaptchaLoaderInlineScript from '@hcaptcha/loader/inline';
 import WebView from 'react-native-webview';
 import { ActivityIndicator, Linking, Platform, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import ReactNativeVersion from 'react-native/Libraries/Core/ReactNativeVersion';
@@ -135,25 +136,42 @@ const buildVerifyData = ({
 const buildVerifyInjectionScript = (payload, resetFirst = false) =>
   `try { ${resetFirst ? 'reset(); ' : ''}setData(${serializeForInlineScript(payload)}); execute(); } catch (e) { window.ReactNativeWebView.postMessage((e && e.name) || 'error'); } true;`;
 
-const buildHcaptchaApiUrl = (jsSrc, siteKey, hl, theme, host, sentry, endpoint, assethost, imghost, reportapi, orientation) => {
-  var url = `${jsSrc || 'https://hcaptcha.com/1/api.js'}?render=explicit&onload=onloadCallback`;
-
-  let effectiveHost;
+const getHcaptchaHost = (host, siteKey) => {
   if (host) {
-    effectiveHost = encodeURIComponent(host);
+    return host;
+  } else if (siteKey) {
+    return `${siteKey}.react-native.hcaptcha.com`;
   } else {
-    effectiveHost = (siteKey || 'missing-sitekey') + '.react-native.hcaptcha.com';
-  }
-
-  for (let [key, value] of Object.entries({ host: effectiveHost, hl, custom: typeof theme === 'object', sentry, endpoint, assethost, imghost, reportapi, orientation })) {
-    if (value) {
-      url += `&${key}=${encodeURIComponent(value)}`;
-    }
+    return 'missing-sitekey.react-native.hcaptcha.com';
   }
-
-  return url;
 };
 
+function buildHcaptchaLoaderConfig({
+  scriptSource,
+  siteKey,
+  hl,
+  theme,
+  host,
+  sentry,
+  endpoint,
+  assethost,
+  imghost,
+  reportapi,
+}) {
+  return {
+    scriptSource: scriptSource || 'https://hcaptcha.com/1/api.js',
+    render: 'explicit',
+    host: getHcaptchaHost(host, siteKey),
+    hl,
+    custom: typeof theme === 'object',
+    sentry,
+    endpoint,
+    assethost,
+    imghost,
+    reportapi,
+  };
+}
+
 /**
  *
  * @param {*} onMessage: callback after receiving response, error, or when user cancels
@@ -217,9 +235,20 @@ const Hcaptcha = ({
   const hasJourneyConsumerRef = useRef(false);
   const normalizedTheme = useMemo(() => normalizeTheme(theme), [theme]);
   const normalizedSize = useMemo(() => normalizeSize(size), [size]);
-  const apiUrl = useMemo(
-    () => buildHcaptchaApiUrl(jsSrc, siteKey, languageCode, normalizedTheme, host, sentry, endpoint, assethost, imghost, reportapi, orientation),
-    [jsSrc, siteKey, languageCode, normalizedTheme, host, sentry, endpoint, assethost, imghost, reportapi, orientation]
+  const loaderConfig = useMemo(
+    () => buildHcaptchaLoaderConfig({
+      scriptSource: jsSrc,
+      siteKey,
+      hl: languageCode,
+      theme: normalizedTheme,
+      host,
+      sentry,
+      endpoint,
+      assethost,
+      imghost,
+      reportapi,
+    }),
+    [jsSrc, siteKey, languageCode, normalizedTheme, host, sentry, endpoint, assethost, imghost, reportapi]
   );
 
   const debugInfo = useMemo(
@@ -229,17 +258,18 @@ const Hcaptcha = ({
 
   const serializedWebViewConfig = useMemo(
     () => serializeForInlineScript({
-      apiUrl,
+      loaderConfig,
       backgroundColor: backgroundColor ?? '',
       debugInfo,
       phoneNumber: phoneNumber ?? null,
       phonePrefix: phonePrefix ?? null,
+      orientation: orientation ?? null,
       rqdata: rqdata ?? null,
       siteKey: siteKey || '',
       size: normalizedSize,
       theme: normalizedTheme,
     }),
-    [apiUrl, backgroundColor, debugInfo, normalizedSize, normalizedTheme, phoneNumber, phonePrefix, rqdata, siteKey]
+    [loaderConfig, backgroundColor, debugInfo, normalizedSize, normalizedTheme, orientation, phoneNumber, phonePrefix, rqdata, siteKey]
   );
 
   const generateTheWebViewContent = useMemo(
@@ -254,13 +284,19 @@ const Hcaptcha = ({
           var hcaptchaConfig = ${serializedWebViewConfig};
           Object.entries(hcaptchaConfig.debugInfo || {}).forEach(function (entry) { window[entry[0]] = entry[1] });
         </script>
+        <script type="text/javascript">
+          ${hCaptchaLoaderInlineScript}
+        </script>
         <script type="text/javascript">
           var loadApiScript = function() {
-            var script = document.createElement('script');
-            script.async = true;
-            script.defer = true;
-            script.src = hcaptchaConfig.apiUrl;
-            document.head.appendChild(script);
+            if (typeof window.hCaptchaLoader !== 'function') {
+              window.ReactNativeWebView.postMessage('error');
+              return;
+            }
+
+            window.hCaptchaLoader(hcaptchaConfig.loaderConfig).then(onloadCallback).catch(function(error) {
+              window.ReactNativeWebView.postMessage((error && error.message) || (error && error.name) || 'error');
+            });
           };
           var hcaptchaWidgetId = null;
           var setData = function(data) {
@@ -275,7 +311,7 @@ const Hcaptcha = ({
           var onloadCallback = function() {
             try {
               console.log("challenge onload starting");
-              hcaptchaWidgetId = hcaptcha.render("hcaptcha-container", getRenderConfig(hcaptchaConfig.siteKey, hcaptchaConfig.theme, hcaptchaConfig.size));
+              hcaptchaWidgetId = hcaptcha.render("hcaptcha-container", getRenderConfig(hcaptchaConfig.siteKey, hcaptchaConfig.theme, hcaptchaConfig.size, hcaptchaConfig.orientation));
               window.ReactNativeWebView.postMessage("${HCAPTCHA_READY_EVENT}");
               // have loaded by this point; render is sync.
               console.log("challenge render complete");
@@ -301,7 +337,7 @@ const Hcaptcha = ({
             console.warn("challenge error callback fired");
             window.ReactNativeWebView.postMessage(error);
           };
-          const getRenderConfig = function(siteKey, theme, size) {
+          const getRenderConfig = function(siteKey, theme, size, orientation) {
             var config = {
               sitekey: siteKey,
               size: size,
@@ -315,6 +351,9 @@ const Hcaptcha = ({
             if (theme) {
               config.theme = theme;
             }
+            if (orientation) {
+              config.orientation = orientation;
+            }
             return config;
           };
           loadApiScript();

__mocks__/global.js

@@ -1,4 +1,7 @@
 jest.mock('react-native-webview');
+jest.mock('@hcaptcha/loader/inline', () => (
+  'window.hCaptchaLoader = function(config) { window.hCaptchaLoaderConfig = config; return Promise.resolve(window.hcaptcha); };'
+));
 jest.mock('react', () => {
   let ActualReact = jest.requireActual('react');
   return {

__scripts__/generate-example.js

@@ -147,8 +147,10 @@ function main({ cliName, projectRelativeProjectPath, projectName, projectTemplat
   const mainPackage = '@hcaptcha/react-native-hcaptcha';
   const libRoot = process.cwd();
   const libPathFromProject = path.relative(projectPath, libRoot);
+  const projectPackage = JSON.parse(fs.readFileSync(path.join(projectPath, 'package.json'), 'utf8'));
+  const reactNativeVersion = projectPackage.dependencies['react-native'];
   const peerPackages = 'react-native-webview';
-  const devPackages = 'typescript @babel/preset-env';
+  const devPackages = `typescript @react-native/jest-preset@${reactNativeVersion}`;
 
   console.warn('Installing dependencies...');
   if (packageManager === 'yarn') {
@@ -161,7 +163,7 @@ function main({ cliName, projectRelativeProjectPath, projectName, projectTemplat
     const excludes = ['__e2e__/host', '__tests__', '__mocks__', 'node_modules', '.git', 'output', '.reassure'].map(e => `--exclude=${e}`).join(' ');
     execSync(`rsync -a ${excludes} ${libRoot}/ ${destLibDir}/`, { stdio: 'inherit' });
     execSync('npm i --save file:./react-native-hcaptcha', packageManagerOptions);
-    execSync(`npm i --save --dev ${devPackages}`, packageManagerOptions);
+    execSync(`npm i --save-dev ${devPackages}`, packageManagerOptions);
     execSync(`npm i --save ${peerPackages}`, packageManagerOptions);
   }