authtara-sdk 1.0.0 → 1.1.1

package/dist/react.d.mts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface User {
+    id: string;
+    email: string;
+    name?: string | null;
+    avatar?: string | null;
+}
+interface AuthTaraConfig {
+    appId: string;
+    apiUrl: string;
+}
+interface AuthTaraContextValue {
+    isAuthenticated: boolean;
+    user: User | null;
+    isLoading: boolean;
+    signIn: (provider: 'google' | 'github' | 'credentials', options?: SignInOptions) => Promise<void>;
+    signOut: () => Promise<void>;
+    refreshSession: () => Promise<void>;
+}
+interface SignInOptions {
+    email?: string;
+    password?: string;
+    redirectPath?: string;
+}
+declare function AuthTaraProvider({ children, appId, apiUrl, }: {
+    children: React.ReactNode;
+} & AuthTaraConfig): react_jsx_runtime.JSX.Element;
+declare function useAuth(): AuthTaraContextValue;
+
+/**
+ * AuthTaraAuth Component
+ *
+ * Embeddable login/register component
+ * Renders social login buttons and handles OAuth popup flow
+ */
+interface AuthTaraAuthProps {
+    mode?: 'modal' | 'redirect';
+    appearance?: {
+        theme?: 'light' | 'dark';
+        variables?: Record<string, string>;
+    };
+    redirectUrl?: string;
+    onSuccess?: (session: {
+        user: any;
+    }) => void;
+    onError?: (error: Error) => void;
+}
+declare function AuthTaraAuth({ appearance, redirectUrl, onSuccess, onError, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
+
+export { AuthTaraAuth, type AuthTaraAuthProps, type AuthTaraConfig, type AuthTaraContextValue, AuthTaraProvider, type SignInOptions, type User, useAuth };

package/dist/react.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface User {
+    id: string;
+    email: string;
+    name?: string | null;
+    avatar?: string | null;
+}
+interface AuthTaraConfig {
+    appId: string;
+    apiUrl: string;
+}
+interface AuthTaraContextValue {
+    isAuthenticated: boolean;
+    user: User | null;
+    isLoading: boolean;
+    signIn: (provider: 'google' | 'github' | 'credentials', options?: SignInOptions) => Promise<void>;
+    signOut: () => Promise<void>;
+    refreshSession: () => Promise<void>;
+}
+interface SignInOptions {
+    email?: string;
+    password?: string;
+    redirectPath?: string;
+}
+declare function AuthTaraProvider({ children, appId, apiUrl, }: {
+    children: React.ReactNode;
+} & AuthTaraConfig): react_jsx_runtime.JSX.Element;
+declare function useAuth(): AuthTaraContextValue;
+
+/**
+ * AuthTaraAuth Component
+ *
+ * Embeddable login/register component
+ * Renders social login buttons and handles OAuth popup flow
+ */
+interface AuthTaraAuthProps {
+    mode?: 'modal' | 'redirect';
+    appearance?: {
+        theme?: 'light' | 'dark';
+        variables?: Record<string, string>;
+    };
+    redirectUrl?: string;
+    onSuccess?: (session: {
+        user: any;
+    }) => void;
+    onError?: (error: Error) => void;
+}
+declare function AuthTaraAuth({ appearance, redirectUrl, onSuccess, onError, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
+
+export { AuthTaraAuth, type AuthTaraAuthProps, type AuthTaraConfig, type AuthTaraContextValue, AuthTaraProvider, type SignInOptions, type User, useAuth };

package/dist/react.js

@@ -0,0 +1,460 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  AuthTaraAuth: () => AuthTaraAuth,
+  AuthTaraProvider: () => AuthTaraProvider,
+  useAuth: () => useAuth
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/components/providers/AuthTaraProvider.tsx
+var React = __toESM(require("react"));
+
+// src/oauth/popup.ts
+var OAuthPopup = class {
+  constructor(apiUrl) {
+    this.popup = null;
+    try {
+      const url = new URL(apiUrl);
+      this.expectedOrigin = url.origin;
+    } catch {
+      this.expectedOrigin = apiUrl;
+    }
+  }
+  /**
+   * Open popup window for OAuth flow
+   */
+  async open(url) {
+    const width = 500;
+    const height = 700;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+    this.popup = window.open(
+      url,
+      "authtara-oauth",
+      `width=${width},height=${height},left=${left},top=${top},popup=1,scrollbars=1`
+    );
+    if (!this.popup) {
+      throw new Error("Popup blocked. Please allow popups for this site.");
+    }
+    this.popup.focus();
+    return new Promise((resolve, reject) => {
+      this.messageListener = (event) => {
+        if (event.origin !== this.expectedOrigin) {
+          console.warn("Received message from unexpected origin:", event.origin);
+          return;
+        }
+        const { type, payload, error } = event.data;
+        if (type === "OAUTH_SUCCESS" && payload) {
+          this.cleanup();
+          resolve(payload);
+        } else if (type === "OAUTH_ERROR") {
+          this.cleanup();
+          reject(new Error(error || "OAuth authentication failed"));
+        } else if (type === "OAUTH_CANCEL") {
+          this.cleanup();
+          reject(new Error("Authentication cancelled by user"));
+        }
+      };
+      window.addEventListener("message", this.messageListener);
+      this.pollTimer = setInterval(() => {
+        if (this.popup?.closed) {
+          this.cleanup();
+          reject(new Error("Authentication window was closed"));
+        }
+      }, 500);
+      setTimeout(() => {
+        if (this.popup && !this.popup.closed) {
+          this.cleanup();
+          reject(new Error("Authentication timed out"));
+        }
+      }, 5 * 60 * 1e3);
+    });
+  }
+  /**
+   * Cleanup resources
+   */
+  cleanup() {
+    if (this.messageListener) {
+      window.removeEventListener("message", this.messageListener);
+      this.messageListener = void 0;
+    }
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = void 0;
+    }
+    if (this.popup && !this.popup.closed) {
+      this.popup.close();
+    }
+    this.popup = null;
+  }
+  /**
+   * Manually close popup
+   */
+  close() {
+    this.cleanup();
+  }
+};
+
+// src/components/providers/AuthTaraProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AuthTaraContext = React.createContext(null);
+function AuthTaraProvider({
+  children,
+  appId,
+  apiUrl
+}) {
+  const [user, setUser] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    loadSession();
+  }, []);
+  const loadSession = React.useCallback(async () => {
+    try {
+      const response = await fetch("/api/auth/me", {
+        credentials: "include"
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+      } else {
+        setUser(null);
+      }
+    } catch (error) {
+      console.error("[AuthTara] Failed to load session:", error);
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  const signIn = React.useCallback(
+    async (provider, options) => {
+      try {
+        setIsLoading(true);
+        if (provider === "credentials") {
+          throw new Error("Credentials flow not yet implemented in popup mode");
+        }
+        const callbackUrl = `${window.location.origin}/api/sso/callback`;
+        const state = btoa(JSON.stringify({
+          redirectPath: options?.redirectPath || "/dashboard",
+          timestamp: Date.now()
+        }));
+        const params = new URLSearchParams({
+          response_type: "code",
+          provider,
+          // ← NEW: Pass provider for Clerk-style direct redirect
+          client_id: appId,
+          redirect_uri: callbackUrl,
+          state,
+          scope: "read write"
+        });
+        const authorizeUrl = `${apiUrl}/api/oauth/authorize?${params.toString()}`;
+        const popup = new OAuthPopup(apiUrl);
+        const { code: authCode, state: returnedState } = await popup.open(authorizeUrl);
+        const exchangeResponse = await fetch("/api/sso/callback", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({
+            code: authCode,
+            state: returnedState
+          })
+        });
+        if (!exchangeResponse.ok) {
+          const error = await exchangeResponse.json();
+          throw new Error(error.message || "Token exchange failed");
+        }
+        await loadSession();
+      } catch (error) {
+        console.error("[AuthTara] Sign in failed:", error);
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [appId, apiUrl, loadSession]
+  );
+  const signOut = React.useCallback(async () => {
+    try {
+      await fetch("/api/auth/logout", {
+        method: "POST",
+        credentials: "include"
+      });
+      setUser(null);
+    } catch (error) {
+      console.error("[AuthTara] Sign out failed:", error);
+      throw error;
+    }
+  }, []);
+  const refreshSession = React.useCallback(async () => {
+    await loadSession();
+  }, [loadSession]);
+  const value = {
+    isAuthenticated: !!user,
+    user,
+    isLoading,
+    signIn,
+    signOut,
+    refreshSession
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthTaraContext.Provider, { value, children });
+}
+function useAuth() {
+  const context = React.useContext(AuthTaraContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthTaraProvider");
+  }
+  return context;
+}
+
+// src/components/AuthTaraAuth.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AuthTaraAuth({
+  // mode = 'modal', // Reserved for future use
+  appearance,
+  redirectUrl = "/dashboard",
+  onSuccess,
+  onError
+}) {
+  const { signIn, isLoading, user } = useAuth();
+  const [error, setError] = React2.useState(null);
+  const [provider, setProvider] = React2.useState(null);
+  async function handleSignIn(selectedProvider) {
+    setError(null);
+    setProvider(selectedProvider);
+    try {
+      await signIn(selectedProvider, { redirectPath: redirectUrl });
+      onSuccess?.({ user });
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Authentication failed";
+      setError(message);
+      onError?.(err);
+    } finally {
+      setProvider(null);
+    }
+  }
+  const isProviderLoading = (p) => isLoading && provider === p;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "authtara-auth-container", style: { maxWidth: "400px", margin: "0 auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: "authtara-auth-card",
+        style: {
+          padding: "2rem",
+          border: "1px solid #e5e7eb",
+          borderRadius: "0.5rem",
+          backgroundColor: appearance?.theme === "dark" ? "#1f2937" : "#ffffff"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "h2",
+            {
+              style: {
+                fontSize: "1.5rem",
+                fontWeight: "bold",
+                marginBottom: "1.5rem",
+                color: appearance?.theme === "dark" ? "#ffffff" : "#111827"
+              },
+              children: "Sign in to continue"
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                padding: "0.75rem",
+                marginBottom: "1rem",
+                backgroundColor: "#fee2e2",
+                color: "#991b1b",
+                borderRadius: "0.375rem",
+                fontSize: "0.875rem"
+              },
+              children: error
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "button",
+              {
+                onClick: () => handleSignIn("google"),
+                disabled: isLoading,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.5rem",
+                  padding: "0.75rem 1rem",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "0.375rem",
+                  backgroundColor: "#ffffff",
+                  color: "#374151",
+                  fontSize: "0.875rem",
+                  fontWeight: "500",
+                  cursor: isLoading ? "not-allowed" : "pointer",
+                  opacity: isLoading ? 0.6 : 1,
+                  transition: "all 0.2s"
+                },
+                onMouseOver: (e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.backgroundColor = "#f9fafb";
+                  }
+                },
+                onMouseOut: (e) => {
+                  e.currentTarget.style.backgroundColor = "#ffffff";
+                },
+                children: [
+                  isProviderLoading("google") ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      style: {
+                        width: "1rem",
+                        height: "1rem",
+                        border: "2px solid #d1d5db",
+                        borderTopColor: "#3b82f6",
+                        borderRadius: "50%",
+                        animation: "spin 1s linear infinite"
+                      }
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "path",
+                      {
+                        fill: "#4285F4",
+                        d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "path",
+                      {
+                        fill: "#34A853",
+                        d: "M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.837.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "path",
+                      {
+                        fill: "#FBBC05",
+                        d: "M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "path",
+                      {
+                        fill: "#EA4335",
+                        d: "M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z"
+                      }
+                    )
+                  ] }),
+                  "Continue with Google"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "button",
+              {
+                onClick: () => handleSignIn("github"),
+                disabled: isLoading,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.5rem",
+                  padding: "0.75rem 1rem",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "0.375rem",
+                  backgroundColor: "#24292e",
+                  color: "#ffffff",
+                  fontSize: "0.875rem",
+                  fontWeight: "500",
+                  cursor: isLoading ? "not-allowed" : "pointer",
+                  opacity: isLoading ? 0.6 : 1,
+                  transition: "all 0.2s"
+                },
+                onMouseOver: (e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.backgroundColor = "#1b1f23";
+                  }
+                },
+                onMouseOut: (e) => {
+                  e.currentTarget.style.backgroundColor = "#24292e";
+                },
+                children: [
+                  isProviderLoading("github") ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      style: {
+                        width: "1rem",
+                        height: "1rem",
+                        border: "2px solid #ffffff40",
+                        borderTopColor: "#ffffff",
+                        borderRadius: "50%",
+                        animation: "spin 1s linear infinite"
+                      }
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
+                  "Continue with GitHub"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "p",
+            {
+              style: {
+                marginTop: "1.5rem",
+                fontSize: "0.75rem",
+                color: appearance?.theme === "dark" ? "#9ca3af" : "#6b7280",
+                textAlign: "center"
+              },
+              children: "By continuing, you agree to our Terms of Service and Privacy Policy"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      ` })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthTaraAuth,
+  AuthTaraProvider,
+  useAuth
+});

package/dist/react.mjs

@@ -0,0 +1,421 @@
+// src/components/providers/AuthTaraProvider.tsx
+import * as React from "react";
+
+// src/oauth/popup.ts
+var OAuthPopup = class {
+  constructor(apiUrl) {
+    this.popup = null;
+    try {
+      const url = new URL(apiUrl);
+      this.expectedOrigin = url.origin;
+    } catch {
+      this.expectedOrigin = apiUrl;
+    }
+  }
+  /**
+   * Open popup window for OAuth flow
+   */
+  async open(url) {
+    const width = 500;
+    const height = 700;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+    this.popup = window.open(
+      url,
+      "authtara-oauth",
+      `width=${width},height=${height},left=${left},top=${top},popup=1,scrollbars=1`
+    );
+    if (!this.popup) {
+      throw new Error("Popup blocked. Please allow popups for this site.");
+    }
+    this.popup.focus();
+    return new Promise((resolve, reject) => {
+      this.messageListener = (event) => {
+        if (event.origin !== this.expectedOrigin) {
+          console.warn("Received message from unexpected origin:", event.origin);
+          return;
+        }
+        const { type, payload, error } = event.data;
+        if (type === "OAUTH_SUCCESS" && payload) {
+          this.cleanup();
+          resolve(payload);
+        } else if (type === "OAUTH_ERROR") {
+          this.cleanup();
+          reject(new Error(error || "OAuth authentication failed"));
+        } else if (type === "OAUTH_CANCEL") {
+          this.cleanup();
+          reject(new Error("Authentication cancelled by user"));
+        }
+      };
+      window.addEventListener("message", this.messageListener);
+      this.pollTimer = setInterval(() => {
+        if (this.popup?.closed) {
+          this.cleanup();
+          reject(new Error("Authentication window was closed"));
+        }
+      }, 500);
+      setTimeout(() => {
+        if (this.popup && !this.popup.closed) {
+          this.cleanup();
+          reject(new Error("Authentication timed out"));
+        }
+      }, 5 * 60 * 1e3);
+    });
+  }
+  /**
+   * Cleanup resources
+   */
+  cleanup() {
+    if (this.messageListener) {
+      window.removeEventListener("message", this.messageListener);
+      this.messageListener = void 0;
+    }
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = void 0;
+    }
+    if (this.popup && !this.popup.closed) {
+      this.popup.close();
+    }
+    this.popup = null;
+  }
+  /**
+   * Manually close popup
+   */
+  close() {
+    this.cleanup();
+  }
+};
+
+// src/components/providers/AuthTaraProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var AuthTaraContext = React.createContext(null);
+function AuthTaraProvider({
+  children,
+  appId,
+  apiUrl
+}) {
+  const [user, setUser] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    loadSession();
+  }, []);
+  const loadSession = React.useCallback(async () => {
+    try {
+      const response = await fetch("/api/auth/me", {
+        credentials: "include"
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+      } else {
+        setUser(null);
+      }
+    } catch (error) {
+      console.error("[AuthTara] Failed to load session:", error);
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  const signIn = React.useCallback(
+    async (provider, options) => {
+      try {
+        setIsLoading(true);
+        if (provider === "credentials") {
+          throw new Error("Credentials flow not yet implemented in popup mode");
+        }
+        const callbackUrl = `${window.location.origin}/api/sso/callback`;
+        const state = btoa(JSON.stringify({
+          redirectPath: options?.redirectPath || "/dashboard",
+          timestamp: Date.now()
+        }));
+        const params = new URLSearchParams({
+          response_type: "code",
+          provider,
+          // ← NEW: Pass provider for Clerk-style direct redirect
+          client_id: appId,
+          redirect_uri: callbackUrl,
+          state,
+          scope: "read write"
+        });
+        const authorizeUrl = `${apiUrl}/api/oauth/authorize?${params.toString()}`;
+        const popup = new OAuthPopup(apiUrl);
+        const { code: authCode, state: returnedState } = await popup.open(authorizeUrl);
+        const exchangeResponse = await fetch("/api/sso/callback", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({
+            code: authCode,
+            state: returnedState
+          })
+        });
+        if (!exchangeResponse.ok) {
+          const error = await exchangeResponse.json();
+          throw new Error(error.message || "Token exchange failed");
+        }
+        await loadSession();
+      } catch (error) {
+        console.error("[AuthTara] Sign in failed:", error);
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [appId, apiUrl, loadSession]
+  );
+  const signOut = React.useCallback(async () => {
+    try {
+      await fetch("/api/auth/logout", {
+        method: "POST",
+        credentials: "include"
+      });
+      setUser(null);
+    } catch (error) {
+      console.error("[AuthTara] Sign out failed:", error);
+      throw error;
+    }
+  }, []);
+  const refreshSession = React.useCallback(async () => {
+    await loadSession();
+  }, [loadSession]);
+  const value = {
+    isAuthenticated: !!user,
+    user,
+    isLoading,
+    signIn,
+    signOut,
+    refreshSession
+  };
+  return /* @__PURE__ */ jsx(AuthTaraContext.Provider, { value, children });
+}
+function useAuth() {
+  const context = React.useContext(AuthTaraContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthTaraProvider");
+  }
+  return context;
+}
+
+// src/components/AuthTaraAuth.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AuthTaraAuth({
+  // mode = 'modal', // Reserved for future use
+  appearance,
+  redirectUrl = "/dashboard",
+  onSuccess,
+  onError
+}) {
+  const { signIn, isLoading, user } = useAuth();
+  const [error, setError] = React2.useState(null);
+  const [provider, setProvider] = React2.useState(null);
+  async function handleSignIn(selectedProvider) {
+    setError(null);
+    setProvider(selectedProvider);
+    try {
+      await signIn(selectedProvider, { redirectPath: redirectUrl });
+      onSuccess?.({ user });
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Authentication failed";
+      setError(message);
+      onError?.(err);
+    } finally {
+      setProvider(null);
+    }
+  }
+  const isProviderLoading = (p) => isLoading && provider === p;
+  return /* @__PURE__ */ jsxs("div", { className: "authtara-auth-container", style: { maxWidth: "400px", margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "authtara-auth-card",
+        style: {
+          padding: "2rem",
+          border: "1px solid #e5e7eb",
+          borderRadius: "0.5rem",
+          backgroundColor: appearance?.theme === "dark" ? "#1f2937" : "#ffffff"
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "h2",
+            {
+              style: {
+                fontSize: "1.5rem",
+                fontWeight: "bold",
+                marginBottom: "1.5rem",
+                color: appearance?.theme === "dark" ? "#ffffff" : "#111827"
+              },
+              children: "Sign in to continue"
+            }
+          ),
+          error && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                padding: "0.75rem",
+                marginBottom: "1rem",
+                backgroundColor: "#fee2e2",
+                color: "#991b1b",
+                borderRadius: "0.375rem",
+                fontSize: "0.875rem"
+              },
+              children: error
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleSignIn("google"),
+                disabled: isLoading,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.5rem",
+                  padding: "0.75rem 1rem",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "0.375rem",
+                  backgroundColor: "#ffffff",
+                  color: "#374151",
+                  fontSize: "0.875rem",
+                  fontWeight: "500",
+                  cursor: isLoading ? "not-allowed" : "pointer",
+                  opacity: isLoading ? 0.6 : 1,
+                  transition: "all 0.2s"
+                },
+                onMouseOver: (e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.backgroundColor = "#f9fafb";
+                  }
+                },
+                onMouseOut: (e) => {
+                  e.currentTarget.style.backgroundColor = "#ffffff";
+                },
+                children: [
+                  isProviderLoading("google") ? /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        width: "1rem",
+                        height: "1rem",
+                        border: "2px solid #d1d5db",
+                        borderTopColor: "#3b82f6",
+                        borderRadius: "50%",
+                        animation: "spin 1s linear infinite"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+                    /* @__PURE__ */ jsx2(
+                      "path",
+                      {
+                        fill: "#4285F4",
+                        d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "path",
+                      {
+                        fill: "#34A853",
+                        d: "M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.837.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "path",
+                      {
+                        fill: "#FBBC05",
+                        d: "M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "path",
+                      {
+                        fill: "#EA4335",
+                        d: "M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z"
+                      }
+                    )
+                  ] }),
+                  "Continue with Google"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleSignIn("github"),
+                disabled: isLoading,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "0.5rem",
+                  padding: "0.75rem 1rem",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "0.375rem",
+                  backgroundColor: "#24292e",
+                  color: "#ffffff",
+                  fontSize: "0.875rem",
+                  fontWeight: "500",
+                  cursor: isLoading ? "not-allowed" : "pointer",
+                  opacity: isLoading ? 0.6 : 1,
+                  transition: "all 0.2s"
+                },
+                onMouseOver: (e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.backgroundColor = "#1b1f23";
+                  }
+                },
+                onMouseOut: (e) => {
+                  e.currentTarget.style.backgroundColor = "#24292e";
+                },
+                children: [
+                  isProviderLoading("github") ? /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        width: "1rem",
+                        height: "1rem",
+                        border: "2px solid #ffffff40",
+                        borderTopColor: "#ffffff",
+                        borderRadius: "50%",
+                        animation: "spin 1s linear infinite"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
+                  "Continue with GitHub"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "p",
+            {
+              style: {
+                marginTop: "1.5rem",
+                fontSize: "0.75rem",
+                color: appearance?.theme === "dark" ? "#9ca3af" : "#6b7280",
+                textAlign: "center"
+              },
+              children: "By continuing, you agree to our Terms of Service and Privacy Policy"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("style", { children: `
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      ` })
+  ] });
+}
+export {
+  AuthTaraAuth,
+  AuthTaraProvider,
+  useAuth
+};

package/package.json

@@ -1,72 +1,91 @@
-{
-    "name": "authtara-sdk",
-    "version": "1.0.0",
-    "description": "SDK Client untuk integrasi dengan DigitalSolution Platform - SSO, Billing, dan Metering",
-    "main": "./dist/index.js",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        }
-    },
-    "files": [
-        "dist",
-        "README.md",
-        "LICENSE"
-    ],
-    "scripts": {
-        "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-        "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
-        "test": "vitest",
-        "test:run": "vitest run",
-        "test:coverage": "vitest run --coverage",
-        "typecheck": "tsc --noEmit",
-        "prepublishOnly": "bun run build && bun test:run",
-        "release": "bun run build && bun test:run && npm version patch",
-        "release:minor": "bun run build && bun test:run && npm version minor",
-        "release:major": "bun run build && bun test:run && npm version major"
-    },
-    "keywords": [
-        "digitalsolution",
-        "authtara",
-        "sdk",
-        "sso",
-        "authentication",
-        "billing",
-        "metering",
-        "oauth",
-        "jwt",
-        "saas"
-    ],
-    "author": "DigitalSolution Team",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/digitalsolution/authtara-sdk.git"
-    },
-    "bugs": {
-        "url": "https://github.com/digitalsolution/authtara-sdk/issues",
-        "email": "support@digitalsolution.com"
-    },
-    "homepage": "https://docs.digitalsolution.com/sdk",
-    "dependencies": {
-        "jose": "^6.0.11"
-    },
-    "devDependencies": {
-        "@types/node": "^24.0.0",
-        "@vitest/coverage-v8": "^4.0.15",
-        "tsup": "^8.5.0",
-        "typescript": "^5.9.3",
-        "vitest": "^4.0.15"
-    },
-    "engines": {
-        "node": ">=18.0.0"
-    },
-    "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
-    }
+{
+    "name": "authtara-sdk",
+    "version": "1.1.1",
+    "description": "SDK Client untuk integrasi dengan DigitalSolution Platform - SSO, Billing, dan Metering",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        },
+        "./react": {
+            "types": "./dist/react.d.ts",
+            "import": "./dist/react.mjs",
+            "require": "./dist/react.js"
+        }
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "build": "tsup src/index.ts src/react.ts --format cjs,esm --dts --clean",
+        "dev": "tsup src/index.ts src/react.ts --format cjs,esm --dts --watch",
+        "test": "vitest",
+        "test:run": "vitest run",
+        "test:coverage": "vitest run --coverage",
+        "typecheck": "tsc --noEmit",
+        "prepublishOnly": "bun run build && bun test:run",
+        "release": "bun run build && bun test:run && npm version patch",
+        "release:minor": "bun run build && bun test:run && npm version minor",
+        "release:major": "bun run build && bun test:run && npm version major"
+    },
+    "keywords": [
+        "digitalsolution",
+        "authtara",
+        "sdk",
+        "sso",
+        "authentication",
+        "billing",
+        "metering",
+        "oauth",
+        "jwt",
+        "saas"
+    ],
+    "author": "DigitalSolution Team",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/digitalsolution/authtara-sdk.git"
+    },
+    "bugs": {
+        "url": "https://github.com/digitalsolution/authtara-sdk/issues",
+        "email": "support@digitalsolution.com"
+    },
+    "homepage": "https://docs.digitalsolution.com/sdk",
+    "dependencies": {
+        "jose": "^6.0.11"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@types/node": "^24.0.0",
+        "@types/react": "^19.2.8",
+        "@types/react-dom": "^19.2.3",
+        "@vitest/coverage-v8": "^4.0.15",
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.3",
+        "vitest": "^4.0.15"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    }
 }