@sanvika/auth 1.0.4 → 1.0.5

package/dist/index.js

@@ -0,0 +1,435 @@
+// SanvikaAuthProvider.jsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback
+} from "react";
+
+// constants.js
+var STORAGE_KEYS = {
+  ACCESS_TOKEN: "sanvika_access_token",
+  USER: "sanvika_user",
+  STATE: "sanvika_oauth_state",
+  // CSRF state for OAuth flow
+  RETURN_PATH: "sanvika_return_path"
+  // Page to redirect back after login
+};
+var DEFAULT_IAM_URL = "https://accounts.sanvikaproduction.com";
+var DEFAULT_AVATAR_SVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e5e7eb'/%3E%3Ccircle cx='20' cy='15' r='7' fill='%23adb5bd'/%3E%3Cellipse cx='20' cy='35' rx='12' ry='8' fill='%23adb5bd'/%3E%3C/svg%3E`;
+
+// SanvikaAuthProvider.jsx
+import { jsx } from "react/jsx-runtime";
+var SanvikaAuthContext = createContext(null);
+function SanvikaAuthProvider({
+  children,
+  clientId,
+  redirectUri,
+  iamUrl = DEFAULT_IAM_URL,
+  dashboardPath = "/dashboard"
+}) {
+  const [user, setUser] = useState(null);
+  const [accessToken, setToken] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    try {
+      const storedToken = localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+      const storedUser = localStorage.getItem(STORAGE_KEYS.USER);
+      if (storedToken && storedUser) {
+        setToken(storedToken);
+        setUser(JSON.parse(storedUser));
+      }
+    } catch {
+      localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
+      localStorage.removeItem(STORAGE_KEYS.USER);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    function onStorage(e) {
+      if (e.key === STORAGE_KEYS.ACCESS_TOKEN && !e.newValue) {
+        setUser(null);
+        setToken(null);
+      }
+      if (e.key === STORAGE_KEYS.ACCESS_TOKEN && e.newValue) {
+        try {
+          const u = localStorage.getItem(STORAGE_KEYS.USER);
+          if (u) setUser(JSON.parse(u));
+          setToken(e.newValue);
+        } catch {
+        }
+      }
+    }
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+  const login = useCallback((token, userData) => {
+    localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token);
+    localStorage.setItem(STORAGE_KEYS.USER, JSON.stringify(userData));
+    setToken(token);
+    setUser(userData);
+  }, []);
+  const logout = useCallback(async () => {
+    const token = localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+    if (token) {
+      fetch(`${iamUrl}/api/auth/logout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ logout_all: false }),
+        credentials: "include"
+      }).catch(() => {
+      });
+    }
+    localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
+    localStorage.removeItem(STORAGE_KEYS.USER);
+    setUser(null);
+    setToken(null);
+  }, [iamUrl]);
+  const updateUser = useCallback((partial) => {
+    setUser((prev) => {
+      if (!prev) return prev;
+      const merged = { ...prev, ...partial };
+      localStorage.setItem(STORAGE_KEYS.USER, JSON.stringify(merged));
+      return merged;
+    });
+  }, []);
+  const redirectToLogin = useCallback(
+    (returnPath) => {
+      if (returnPath) {
+        localStorage.setItem(STORAGE_KEYS.RETURN_PATH, returnPath);
+      }
+      const state = Math.random().toString(36).slice(2);
+      localStorage.setItem(STORAGE_KEYS.STATE, state);
+      const url = new URL(`${iamUrl}/authorize`);
+      url.searchParams.set("client_id", clientId);
+      url.searchParams.set("redirect_uri", redirectUri);
+      url.searchParams.set("response_type", "code");
+      url.searchParams.set("state", state);
+      const appTheme = localStorage.getItem("theme");
+      if (appTheme === "light" || appTheme === "dark") {
+        url.searchParams.set("theme", appTheme);
+      }
+      window.location.href = url.toString();
+    },
+    [iamUrl, clientId, redirectUri]
+  );
+  return /* @__PURE__ */ jsx(
+    SanvikaAuthContext.Provider,
+    {
+      value: {
+        user,
+        accessToken,
+        loading,
+        isLoggedIn: !!user,
+        login,
+        logout,
+        updateUser,
+        redirectToLogin,
+        clientId,
+        redirectUri,
+        iamUrl,
+        dashboardPath
+      },
+      children
+    }
+  );
+}
+function useSanvikaAuth() {
+  const ctx = useContext(SanvikaAuthContext);
+  if (!ctx)
+    throw new Error("useSanvikaAuth must be used inside <SanvikaAuthProvider>");
+  return ctx;
+}
+
+// SanvikaAccountButton.jsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// SanvikaAccountButton.css
+styleInject("@keyframes snvk-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n.snvk-skeleton {\n  width: clamp(72px, 20vw, 96px);\n  height: clamp(34px, 8vw, 40px);\n  border-radius: 8px;\n  background:\n    linear-gradient(\n      90deg,\n      var(--skeleton-base-color, #d0d0d0) 25%,\n      var(--skeleton-highlight-color, #f0f0f0) 50%,\n      var(--skeleton-base-color, #d0d0d0) 75%);\n  background-size: 200% 100%;\n  animation: snvk-shimmer 1.4s infinite;\n  display: inline-block;\n}\n.snvk-wrapper {\n  position: relative;\n  display: inline-block;\n}\n.snvk-guestBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);\n  min-height: 44px;\n  min-width: 44px;\n  background: var(--sanvika-brand-color, #4f46e5);\n  color: #ffffff;\n  border: none;\n  border-radius: 8px;\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  white-space: nowrap;\n}\n.snvk-guestBtn:hover {\n  background: var(--sanvika-brand-hover, #4338ca);\n}\n.snvk-iconWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.snvk-profileBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 5px;\n  min-height: 44px;\n  background: var(--muted-bg, #f5f5f5);\n  border: 1px solid var(--border-color-light, #e5e7eb);\n  border-radius: 99px;\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 600;\n  cursor: pointer;\n  color: var(--text-color, #1a1a1a);\n  transition:\n    background-color 0.3s ease,\n    border-color 0.3s ease,\n    color 0.3s ease;\n  white-space: nowrap;\n}\n.snvk-profileBtn:hover {\n  background: var(--hover-color, #ebebeb);\n}\n.snvk-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sanvika-brand-color, #4f46e5);\n  flex-shrink: 0;\n}\n.snvk-textWrap {\n  display: inline;\n}\n.snvk-hideTextOnMobile {\n  display: none;\n}\n@media (min-width: 500px) {\n  .snvk-hideTextOnMobile {\n    display: inline;\n  }\n}\n.snvk-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: clamp(200px, 60vw, 240px);\n  background: var(--card-bg, #ffffff);\n  border: 1px solid var(--border-color-light, #e5e7eb);\n  border-radius: 12px;\n  box-shadow: 0 8px 24px var(--shadow-color, rgba(0, 0, 0, 0.12));\n  z-index: 9999;\n  overflow: hidden;\n  transition: background-color 0.3s ease, border-color 0.3s ease;\n}\n.snvk-dropdownHeader {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px 16px;\n  background: var(--section-bg, #fafafa);\n  transition: background-color 0.3s ease;\n}\n.snvk-dropdownAvatar {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sanvika-brand-color, #4f46e5);\n  flex-shrink: 0;\n}\n.snvk-dropdownName {\n  font-size: clamp(13px, 3vw, 14px);\n  font-weight: 700;\n  color: var(--text-color, #1a1a1a);\n  line-height: 1.3;\n  transition: color 0.3s ease;\n}\n.snvk-dropdownMobile {\n  font-size: clamp(11px, 2.5vw, 12px);\n  color: var(--secondary-text-color, #888888);\n  margin-top: 2px;\n  transition: color 0.3s ease;\n}\n.snvk-divider {\n  height: 1px;\n  background: var(--muted-border, #f0f0f0);\n  transition: background-color 0.3s ease;\n}\n.snvk-dropdownItem {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 11px 16px;\n  min-height: 44px;\n  background: none;\n  border: none;\n  font-size: clamp(13px, 3vw, 14px);\n  color: var(--text-color, #333333);\n  cursor: pointer;\n  text-decoration: none;\n  text-align: left;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.snvk-dropdownItem:hover {\n  background: var(--hover-color, #f7f7f7);\n}\n.snvk-logoutItem {\n  color: var(--error-color, #c0392b);\n}\n.snvk-logoutItem:hover {\n  background: var(--error-bg, #fff5f5);\n}\n");
+
+// SanvikaAccountButton.jsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function UserIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "7", r: "4" })
+      ]
+    }
+  );
+}
+function ChevronIcon({ open }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      style: {
+        transform: open ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform 0.2s"
+      },
+      children: /* @__PURE__ */ jsx2("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function DashboardIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      children: [
+        /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7" }),
+        /* @__PURE__ */ jsx2("rect", { x: "14", y: "3", width: "7", height: "7" }),
+        /* @__PURE__ */ jsx2("rect", { x: "3", y: "14", width: "7", height: "7" }),
+        /* @__PURE__ */ jsx2("rect", { x: "14", y: "14", width: "7", height: "7" })
+      ]
+    }
+  );
+}
+function LogoutIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ jsx2("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ jsx2("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+      ]
+    }
+  );
+}
+function SanvikaAccountButton({
+  text = "Account",
+  hideTextOnMobile = false,
+  onLoginClick,
+  onProfileClick,
+  onboardingPath = null,
+  className = ""
+}) {
+  var _a;
+  const {
+    user,
+    loading,
+    isLoggedIn,
+    logout,
+    redirectToLogin,
+    dashboardPath,
+    updateUser
+  } = useSanvikaAuth();
+  const [dropdownOpen, setDropdownOpen] = useState2(false);
+  const [imgError, setImgError] = useState2(false);
+  const [prevImage, setPrevImage] = useState2(user == null ? void 0 : user.image);
+  const wrapperRef = useRef(null);
+  if ((user == null ? void 0 : user.image) !== prevImage) {
+    setPrevImage(user == null ? void 0 : user.image);
+    setImgError(false);
+  }
+  useEffect2(() => {
+    if (!user) return;
+    let disposed = false;
+    const handleProfileUpdated = async () => {
+      if (disposed) return;
+      try {
+        const stored = localStorage.getItem("sanvika_user");
+        if (stored) updateUser(JSON.parse(stored));
+      } catch {
+      }
+    };
+    window.addEventListener("profileUpdated", handleProfileUpdated);
+    return () => {
+      disposed = true;
+      window.removeEventListener("profileUpdated", handleProfileUpdated);
+    };
+  }, [user, updateUser]);
+  useEffect2(() => {
+    if (!dropdownOpen) return;
+    function handleOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [dropdownOpen]);
+  if (loading) {
+    return /* @__PURE__ */ jsx2("div", { className: "snvk-skeleton", "aria-hidden": "true" });
+  }
+  if (!isLoggedIn) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: `snvk-guestBtn ${className}`,
+        onClick: () => {
+          if (onLoginClick) {
+            onLoginClick();
+          } else {
+            redirectToLogin(window.location.pathname);
+          }
+        },
+        "aria-label": "Login or Sign Up",
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "snvk-iconWrap", children: /* @__PURE__ */ jsx2(UserIcon, { size: 18 }) }),
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: hideTextOnMobile ? "snvk-hideTextOnMobile" : "snvk-textWrap",
+              children: text
+            }
+          )
+        ]
+      }
+    );
+  }
+  const displayName = user.firstName || ((_a = user.mobile) == null ? void 0 : _a.slice(-4)) || "Me";
+  const imageSrc = !imgError && user.image ? user.image : DEFAULT_AVATAR_SVG;
+  const handleProfileClick = () => {
+    if (onProfileClick) return onProfileClick();
+    if (onboardingPath && user.status === "onboarding") {
+      window.location.href = onboardingPath;
+    } else {
+      window.location.href = dashboardPath;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: `snvk-wrapper ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "snvk-profileBtn",
+        onClick: () => setDropdownOpen((o) => !o),
+        onDoubleClick: handleProfileClick,
+        "aria-label": "Account menu",
+        "aria-expanded": dropdownOpen,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: imageSrc,
+              alt: displayName,
+              className: "snvk-avatar",
+              onError: () => setImgError(true)
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: hideTextOnMobile ? "snvk-hideTextOnMobile" : "snvk-textWrap",
+              children: displayName
+            }
+          ),
+          /* @__PURE__ */ jsx2(ChevronIcon, { open: dropdownOpen })
+        ]
+      }
+    ),
+    dropdownOpen && /* @__PURE__ */ jsxs("div", { className: "snvk-dropdown", role: "menu", children: [
+      /* @__PURE__ */ jsxs("div", { className: "snvk-dropdownHeader", children: [
+        /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: imageSrc,
+            alt: displayName,
+            className: "snvk-dropdownAvatar",
+            onError: () => setImgError(true)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2("div", { className: "snvk-dropdownName", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
+          /* @__PURE__ */ jsxs("div", { className: "snvk-dropdownMobile", children: [
+            "+91 ",
+            user.mobile
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "snvk-divider" }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: onboardingPath && user.status === "onboarding" ? onboardingPath : dashboardPath,
+          className: "snvk-dropdownItem",
+          role: "menuitem",
+          onClick: () => setDropdownOpen(false),
+          children: [
+            /* @__PURE__ */ jsx2(DashboardIcon, {}),
+            /* @__PURE__ */ jsx2("span", { children: "Dashboard" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "snvk-dropdownItem snvk-logoutItem",
+          role: "menuitem",
+          onClick: async () => {
+            setDropdownOpen(false);
+            await logout();
+            window.location.href = "/";
+          },
+          children: [
+            /* @__PURE__ */ jsx2(LogoutIcon, {}),
+            /* @__PURE__ */ jsx2("span", { children: "Logout" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  DEFAULT_AVATAR_SVG,
+  DEFAULT_IAM_URL,
+  STORAGE_KEYS,
+  SanvikaAccountButton,
+  SanvikaAuthContext,
+  SanvikaAuthProvider,
+  useSanvikaAuth
+};

package/package.json

@@ -1,22 +1,29 @@
 {
   "name": "@sanvika/auth",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Sanvika Auth SDK — React components and hooks for Sanvika SSO integration",
   "type": "module",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "files": [
-    "index.js",
-    "SanvikaAuthProvider.jsx",
-    "SanvikaAccountButton.jsx",
-    "SanvikaAccountButton.module.css",
-    "constants.js"
+    "dist"
   ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "next": ">=14"
+    "next": ">=14",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
   },
   "keywords": [
     "sanvika",