authtara-sdk 1.1.20 → 1.1.22

package/dist/react.d.mts

@@ -62,10 +62,12 @@ interface AuthTaraAuthProps {
     onError?: (error: Error) => void;
     /** Custom API URL for credentials login (defaults to /api/auth/login) */
     credentialsApiUrl?: string;
-    /** Custom API URL for registration (defaults to /api/auth/register) */
+    /** URL to redirect users for registration */
     signupUrl?: string;
+    /** CloudFlare Turnstile site key (optional - enables CAPTCHA) */
+    turnstileSiteKey?: string;
 }
-declare function AuthTaraAuth({ showCredentials, appearance, redirectUrl, onSuccess, onError, credentialsApiUrl, signupUrl, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
+declare function AuthTaraAuth({ showCredentials, appearance, redirectUrl, onSuccess, onError, credentialsApiUrl, signupUrl, turnstileSiteKey, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
 
 interface AuthTaraBillingProps {
     tenantId: string;

package/dist/react.d.ts

@@ -62,10 +62,12 @@ interface AuthTaraAuthProps {
     onError?: (error: Error) => void;
     /** Custom API URL for credentials login (defaults to /api/auth/login) */
     credentialsApiUrl?: string;
-    /** Custom API URL for registration (defaults to /api/auth/register) */
+    /** URL to redirect users for registration */
     signupUrl?: string;
+    /** CloudFlare Turnstile site key (optional - enables CAPTCHA) */
+    turnstileSiteKey?: string;
 }
-declare function AuthTaraAuth({ showCredentials, appearance, redirectUrl, onSuccess, onError, credentialsApiUrl, signupUrl, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
+declare function AuthTaraAuth({ showCredentials, appearance, redirectUrl, onSuccess, onError, credentialsApiUrl, signupUrl, turnstileSiteKey, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
 
 interface AuthTaraBillingProps {
     tenantId: string;

package/dist/react.js

@@ -273,14 +273,44 @@ function AuthTaraAuth({
   onSuccess,
   onError,
   credentialsApiUrl = "/api/auth/login",
-  signupUrl = "/register"
+  signupUrl = "/register",
+  turnstileSiteKey
 }) {
   const { signIn, isLoading: oauthLoading, user } = useAuth();
   const [error, setError] = React2.useState(null);
   const [isCredentialsLoading, setIsCredentialsLoading] = React2.useState(false);
+  const [turnstileToken, setTurnstileToken] = React2.useState(null);
+  const turnstileContainerRef = React2.useRef(null);
+  const turnstileWidgetId = React2.useRef(null);
   const [email, setEmail] = React2.useState("");
   const [password, setPassword] = React2.useState("");
   const isLoading = oauthLoading || isCredentialsLoading;
+  const isDark = appearance?.theme === "dark";
+  React2.useEffect(() => {
+    if (!turnstileSiteKey || !turnstileContainerRef.current) return;
+    if (typeof window === "undefined" || !window.turnstile) return;
+    if (turnstileWidgetId.current) return;
+    const widgetId = window.turnstile.render(turnstileContainerRef.current, {
+      sitekey: turnstileSiteKey,
+      theme: isDark ? "dark" : "light",
+      callback: (token) => setTurnstileToken(token),
+      "expired-callback": () => setTurnstileToken(null),
+      "error-callback": () => setTurnstileToken(null)
+    });
+    turnstileWidgetId.current = widgetId;
+    return () => {
+      if (turnstileWidgetId.current && window.turnstile) {
+        window.turnstile.remove(turnstileWidgetId.current);
+        turnstileWidgetId.current = null;
+      }
+    };
+  }, [turnstileSiteKey, isDark]);
+  function resetTurnstile() {
+    if (turnstileWidgetId.current && window.turnstile) {
+      window.turnstile.reset(turnstileWidgetId.current);
+      setTurnstileToken(null);
+    }
+  }
   async function handleOAuthSignIn(selectedProvider) {
     setError(null);
     try {
@@ -303,6 +333,9 @@ function AuthTaraAuth({
       if (!email || !password) {
         throw new Error("Email and password are required");
       }
+      if (turnstileSiteKey && !turnstileToken) {
+        throw new Error("Please complete the CAPTCHA verification");
+      }
       const response = await fetch(credentialsApiUrl, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -310,7 +343,8 @@ function AuthTaraAuth({
         body: JSON.stringify({
           email,
           password,
-          redirectUrl
+          redirectUrl,
+          turnstileToken: turnstileToken || void 0
         })
       });
       const result = await response.json();
@@ -325,11 +359,11 @@ function AuthTaraAuth({
       const message = err instanceof Error ? err.message : "Authentication failed";
       setError(message);
       onError?.(err);
+      resetTurnstile();
     } finally {
       setIsCredentialsLoading(false);
     }
   }
-  const isDark = appearance?.theme === "dark";
   const cardBgColor = isDark ? "#111111" : "#ffffff";
   const cardBorderColor = isDark ? "#222222" : "#e5e7eb";
   const textColor = isDark ? "#ffffff" : "#111827";
@@ -544,11 +578,12 @@ function AuthTaraAuth({
                     }
                   )
                 ] }),
+                turnstileSiteKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "center", marginTop: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: turnstileContainerRef }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "button",
                   {
                     type: "submit",
-                    disabled: isLoading,
+                    disabled: isLoading || (turnstileSiteKey ? !turnstileToken : false),
                     style: {
                       width: "100%",
                       padding: "0.875rem 1rem",
@@ -558,8 +593,8 @@ function AuthTaraAuth({
                       color: primaryBtnText,
                       fontSize: "0.9375rem",
                       fontWeight: "700",
-                      cursor: isLoading ? "not-allowed" : "pointer",
-                      opacity: isLoading ? 0.7 : 1,
+                      cursor: isLoading || turnstileSiteKey && !turnstileToken ? "not-allowed" : "pointer",
+                      opacity: isLoading || turnstileSiteKey && !turnstileToken ? 0.7 : 1,
                       transition: "all 0.15s ease-in-out",
                       marginTop: "0.5rem"
                     },

package/dist/react.mjs

@@ -237,14 +237,44 @@ function AuthTaraAuth({
   onSuccess,
   onError,
   credentialsApiUrl = "/api/auth/login",
-  signupUrl = "/register"
+  signupUrl = "/register",
+  turnstileSiteKey
 }) {
   const { signIn, isLoading: oauthLoading, user } = useAuth();
   const [error, setError] = React2.useState(null);
   const [isCredentialsLoading, setIsCredentialsLoading] = React2.useState(false);
+  const [turnstileToken, setTurnstileToken] = React2.useState(null);
+  const turnstileContainerRef = React2.useRef(null);
+  const turnstileWidgetId = React2.useRef(null);
   const [email, setEmail] = React2.useState("");
   const [password, setPassword] = React2.useState("");
   const isLoading = oauthLoading || isCredentialsLoading;
+  const isDark = appearance?.theme === "dark";
+  React2.useEffect(() => {
+    if (!turnstileSiteKey || !turnstileContainerRef.current) return;
+    if (typeof window === "undefined" || !window.turnstile) return;
+    if (turnstileWidgetId.current) return;
+    const widgetId = window.turnstile.render(turnstileContainerRef.current, {
+      sitekey: turnstileSiteKey,
+      theme: isDark ? "dark" : "light",
+      callback: (token) => setTurnstileToken(token),
+      "expired-callback": () => setTurnstileToken(null),
+      "error-callback": () => setTurnstileToken(null)
+    });
+    turnstileWidgetId.current = widgetId;
+    return () => {
+      if (turnstileWidgetId.current && window.turnstile) {
+        window.turnstile.remove(turnstileWidgetId.current);
+        turnstileWidgetId.current = null;
+      }
+    };
+  }, [turnstileSiteKey, isDark]);
+  function resetTurnstile() {
+    if (turnstileWidgetId.current && window.turnstile) {
+      window.turnstile.reset(turnstileWidgetId.current);
+      setTurnstileToken(null);
+    }
+  }
   async function handleOAuthSignIn(selectedProvider) {
     setError(null);
     try {
@@ -267,6 +297,9 @@ function AuthTaraAuth({
       if (!email || !password) {
         throw new Error("Email and password are required");
       }
+      if (turnstileSiteKey && !turnstileToken) {
+        throw new Error("Please complete the CAPTCHA verification");
+      }
       const response = await fetch(credentialsApiUrl, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -274,7 +307,8 @@ function AuthTaraAuth({
         body: JSON.stringify({
           email,
           password,
-          redirectUrl
+          redirectUrl,
+          turnstileToken: turnstileToken || void 0
         })
       });
       const result = await response.json();
@@ -289,11 +323,11 @@ function AuthTaraAuth({
       const message = err instanceof Error ? err.message : "Authentication failed";
       setError(message);
       onError?.(err);
+      resetTurnstile();
     } finally {
       setIsCredentialsLoading(false);
     }
   }
-  const isDark = appearance?.theme === "dark";
   const cardBgColor = isDark ? "#111111" : "#ffffff";
   const cardBorderColor = isDark ? "#222222" : "#e5e7eb";
   const textColor = isDark ? "#ffffff" : "#111827";
@@ -508,11 +542,12 @@ function AuthTaraAuth({
                     }
                   )
                 ] }),
+                turnstileSiteKey && /* @__PURE__ */ jsx2("div", { style: { display: "flex", justifyContent: "center", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsx2("div", { ref: turnstileContainerRef }) }),
                 /* @__PURE__ */ jsx2(
                   "button",
                   {
                     type: "submit",
-                    disabled: isLoading,
+                    disabled: isLoading || (turnstileSiteKey ? !turnstileToken : false),
                     style: {
                       width: "100%",
                       padding: "0.875rem 1rem",
@@ -522,8 +557,8 @@ function AuthTaraAuth({
                       color: primaryBtnText,
                       fontSize: "0.9375rem",
                       fontWeight: "700",
-                      cursor: isLoading ? "not-allowed" : "pointer",
-                      opacity: isLoading ? 0.7 : 1,
+                      cursor: isLoading || turnstileSiteKey && !turnstileToken ? "not-allowed" : "pointer",
+                      opacity: isLoading || turnstileSiteKey && !turnstileToken ? 0.7 : 1,
                       transition: "all 0.15s ease-in-out",
                       marginTop: "0.5rem"
                     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "authtara-sdk",
-    "version": "1.1.20",
+    "version": "1.1.22",
     "description": "SDK Client untuk integrasi dengan DigitalSolution Platform - SSO, Billing, dan Metering",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",