@sanvika/auth 1.0.0

package/SanvikaAccountButton.jsx

@@ -0,0 +1,295 @@
+"use client";
+// ============================================================
+// SanvikaAccountButton — Drop-in navbar button for all Sanvika apps
+//
+// States:
+//   loading       → skeleton placeholder (no flash)
+//   guest         → "Account" button → redirects to Sanvika SSO
+//   logged-in     → user image + firstName → dropdown (Dashboard + Logout)
+//
+// Requirements:
+//   1. Wrap your root layout with <SanvikaAuthProvider ...>
+//   2. Drop <SanvikaAccountButton /> anywhere in your navbar
+//   No other setup needed.
+//
+// Props:
+//   text              — button label when guest (default: "Account")
+//   hideTextOnMobile  — hides text on small screens (default: false)
+//   onLoginClick      — optional override for login click (default: redirectToSSO)
+//   onProfileClick    — optional override for profile click (default: dashboardPath)
+//   onboardingPath    — where to redirect if user.status === "onboarding" (default: null)
+//   className         — extra CSS class for outer wrapper
+// ============================================================
+
+import { useEffect, useRef, useState } from "react";
+import { useSanvikaAuth } from "./SanvikaAuthProvider.jsx";
+import { DEFAULT_AVATAR_SVG } from "./constants.js";
+import styles from "./SanvikaAccountButton.module.css";
+
+// ─── SVG Icons ─────────────────────────────────────────────────────────────
+
+function UserIcon({ size = 18 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ open }) {
+  return (
+    <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",
+      }}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function DashboardIcon() {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    >
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+    </svg>
+  );
+}
+
+function LogoutIcon() {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    >
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </svg>
+  );
+}
+
+// ─── Main Component ────────────────────────────────────────────────────────
+
+export default function SanvikaAccountButton({
+  text = "Account",
+  hideTextOnMobile = false,
+  onLoginClick,
+  onProfileClick,
+  onboardingPath = null,
+  className = "",
+}) {
+  const {
+    user,
+    loading,
+    isLoggedIn,
+    logout,
+    redirectToLogin,
+    dashboardPath,
+    updateUser,
+  } = useSanvikaAuth();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [imgError, setImgError] = useState(false);
+  const [prevImage, setPrevImage] = useState(user?.image);
+  const wrapperRef = useRef(null);
+
+  // Derived state — reset imgError when image changes
+  if (user?.image !== prevImage) {
+    setPrevImage(user?.image);
+    setImgError(false);
+  }
+
+  // Listen for profileUpdated event → refresh user in context
+  useEffect(() => {
+    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 {
+        /* ignore */
+      }
+    };
+    window.addEventListener("profileUpdated", handleProfileUpdated);
+    return () => {
+      disposed = true;
+      window.removeEventListener("profileUpdated", handleProfileUpdated);
+    };
+  }, [user, updateUser]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    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]);
+
+  // ── Loading skeleton ─────────────────────────────────────────────────
+  if (loading) {
+    return <div className={styles.skeleton} aria-hidden="true" />;
+  }
+
+  // ── Guest state ──────────────────────────────────────────────────────
+  if (!isLoggedIn) {
+    return (
+      <button
+        className={`${styles.guestBtn} ${className}`}
+        onClick={() => {
+          if (onLoginClick) {
+            onLoginClick();
+          } else {
+            redirectToLogin(window.location.pathname);
+          }
+        }}
+        aria-label="Login or Sign Up"
+      >
+        <span className={styles.iconWrap}>
+          <UserIcon size={18} />
+        </span>
+        <span
+          className={
+            hideTextOnMobile ? styles.hideTextOnMobile : styles.textWrap
+          }
+        >
+          {text}
+        </span>
+      </button>
+    );
+  }
+
+  // ── Logged-in state ──────────────────────────────────────────────────
+  const displayName = user.firstName || user.mobile?.slice(-4) || "Me";
+  const imageSrc = !imgError && user.image ? user.image : DEFAULT_AVATAR_SVG;
+
+  // Profile click — onboarding check
+  const handleProfileClick = () => {
+    if (onProfileClick) return onProfileClick();
+    if (onboardingPath && user.status === "onboarding") {
+      window.location.href = onboardingPath;
+    } else {
+      window.location.href = dashboardPath;
+    }
+  };
+
+  return (
+    <div ref={wrapperRef} className={`${styles.wrapper} ${className}`}>
+      {/* Avatar + Name button */}
+      <button
+        className={styles.profileBtn}
+        onClick={() => setDropdownOpen((o) => !o)}
+        onDoubleClick={handleProfileClick}
+        aria-label="Account menu"
+        aria-expanded={dropdownOpen}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={imageSrc}
+          alt={displayName}
+          className={styles.avatar}
+          onError={() => setImgError(true)}
+        />
+        <span
+          className={
+            hideTextOnMobile ? styles.hideTextOnMobile : styles.textWrap
+          }
+        >
+          {displayName}
+        </span>
+        <ChevronIcon open={dropdownOpen} />
+      </button>
+
+      {/* Dropdown */}
+      {dropdownOpen && (
+        <div className={styles.dropdown} role="menu">
+          {/* User info header */}
+          <div className={styles.dropdownHeader}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={imageSrc}
+              alt={displayName}
+              className={styles.dropdownAvatar}
+              onError={() => setImgError(true)}
+            />
+            <div>
+              <div className={styles.dropdownName}>
+                {[user.firstName, user.lastName].filter(Boolean).join(" ")}
+              </div>
+              <div className={styles.dropdownMobile}>+91 {user.mobile}</div>
+            </div>
+          </div>
+          <div className={styles.divider} />
+
+          {/* Dashboard link */}
+          <a
+            href={
+              onboardingPath && user.status === "onboarding"
+                ? onboardingPath
+                : dashboardPath
+            }
+            className={styles.dropdownItem}
+            role="menuitem"
+            onClick={() => setDropdownOpen(false)}
+          >
+            <DashboardIcon />
+            <span>Dashboard</span>
+          </a>
+
+          {/* Logout */}
+          <button
+            className={`${styles.dropdownItem} ${styles.logoutItem}`}
+            role="menuitem"
+            onClick={async () => {
+              setDropdownOpen(false);
+              await logout();
+              window.location.href = "/";
+            }}
+          >
+            <LogoutIcon />
+            <span>Logout</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/SanvikaAccountButton.module.css

@@ -0,0 +1,418 @@
+/* ============================================================
+   SanvikaAccountButton — Component Styles
+   
+   DESIGN DECISION:
+   - Guest button (Login/Account): Sanvika brand colors HARDCODED
+     → Always purple, regardless of host project's theme
+     → CSS var with fallback: var(--sanvika-brand-color, #4f46e5)
+   - Profile button + Dropdown: host project theme vars + fallbacks
+     → var(--card-bg, #fff) — adapts if host has theme system
+   
+   clamp() for fluid sizing, 44px touch targets, CSS Modules only.
+   ============================================================ */
+
+/* ── Shimmer keyframe ───────────────────────────────────────── */
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ── Loading Skeleton ───────────────────────────────────────── */
+.skeleton {
+  width: clamp(72px, 20vw, 96px);
+  height: clamp(34px, 8vw, 40px);
+  border-radius: 8px;
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base-color, #d0d0d0) 25%,
+    var(--skeleton-highlight-color, #f0f0f0) 50%,
+    var(--skeleton-base-color, #d0d0d0) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  display: inline-block;
+}
+
+/* ── Wrapper (logged-in state relative anchor) ──────────────── */
+.wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* ── Guest Button ───────────────────────────────────────────── */
+/* Sanvika brand identity — always purple, self-contained */
+.guestBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);
+  min-height: 44px; /* Touch target rule */
+  min-width: 44px;
+  background: var(--sanvika-brand-color, #4f46e5);
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  font-size: clamp(13px, 3vw, 14px);
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  white-space: nowrap;
+}
+
+.guestBtn:hover {
+  background: var(--sanvika-brand-hover, #4338ca);
+}
+
+.iconWrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ── Profile Button (logged-in) ─────────────────────────────── */
+/* Adapts to host project theme via vars + fallbacks */
+.profileBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 10px 5px 5px;
+  min-height: 44px; /* Touch target rule */
+  background: var(--muted-bg, #f5f5f5);
+  border: 1px solid var(--border-color-light, #e5e7eb);
+  border-radius: 99px;
+  font-size: clamp(13px, 3vw, 14px);
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--text-color, #1a1a1a);
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    color 0.3s ease;
+  white-space: nowrap;
+}
+
+.profileBtn:hover {
+  background: var(--hover-color, #ebebeb);
+}
+
+/* ── Avatar (nav button) ────────────────────────────────────── */
+.avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--sanvika-brand-color, #4f46e5);
+  flex-shrink: 0;
+}
+
+/* ── Text spans ─────────────────────────────────────────────── */
+.textWrap {
+  display: inline;
+}
+
+.hideTextOnMobile {
+  display: none;
+}
+
+@media (min-width: 500px) {
+  .hideTextOnMobile {
+    display: inline;
+  }
+}
+
+/* ── Dropdown ───────────────────────────────────────────────── */
+/* Adapts to host project theme */
+.dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: clamp(200px, 60vw, 240px);
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--border-color-light, #e5e7eb);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px var(--shadow-color, rgba(0, 0, 0, 0.12));
+  z-index: 9999;
+  overflow: hidden;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+.dropdownHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--section-bg, #fafafa);
+  transition: background-color 0.3s ease;
+}
+
+.dropdownAvatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--sanvika-brand-color, #4f46e5);
+  flex-shrink: 0;
+}
+
+.dropdownName {
+  font-size: clamp(13px, 3vw, 14px);
+  font-weight: 700;
+  color: var(--text-color, #1a1a1a);
+  line-height: 1.3;
+  transition: color 0.3s ease;
+}
+
+.dropdownMobile {
+  font-size: clamp(11px, 2.5vw, 12px);
+  color: var(--secondary-text-color, #888888);
+  margin-top: 2px;
+  transition: color 0.3s ease;
+}
+
+.divider {
+  height: 1px;
+  background: var(--muted-border, #f0f0f0);
+  transition: background-color 0.3s ease;
+}
+
+/* ── Dropdown Items ─────────────────────────────────────────── */
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 11px 16px;
+  min-height: 44px; /* Touch target rule */
+  background: none;
+  border: none;
+  font-size: clamp(13px, 3vw, 14px);
+  color: var(--text-color, #333333);
+  cursor: pointer;
+  text-decoration: none;
+  text-align: left;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.dropdownItem:hover {
+  background: var(--hover-color, #f7f7f7);
+}
+
+.logoutItem {
+  color: var(--error-color, #c0392b);
+}
+
+.logoutItem:hover {
+  background: var(--error-bg, #fff5f5);
+}
+
+/* ── Shimmer keyframe ───────────────────────────────────────── */
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ── Loading Skeleton ───────────────────────────────────────── */
+.skeleton {
+  width: clamp(72px, 20vw, 96px);
+  height: clamp(34px, 8vw, 40px);
+  border-radius: 8px;
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base-color) 25%,
+    var(--skeleton-highlight-color) 50%,
+    var(--skeleton-base-color) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  display: inline-block;
+}
+
+/* ── Wrapper (logged-in state relative anchor) ──────────────── */
+.wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* ── Guest Button ───────────────────────────────────────────── */
+.guestBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 16px);
+  min-height: 44px; /* Touch target rule */
+  min-width: 44px;
+  background: var(--sanvika-brand-color);
+  color: var(--btn-primary-text);
+  border: none;
+  border-radius: 8px;
+  font-size: clamp(13px, 3vw, 14px);
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  white-space: nowrap;
+}
+
+.guestBtn:hover {
+  background: var(--sanvika-brand-hover);
+}
+
+.iconWrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ── Profile Button (logged-in) ─────────────────────────────── */
+.profileBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 10px 5px 5px;
+  min-height: 44px; /* Touch target rule */
+  background: var(--muted-bg);
+  border: 1px solid var(--border-color-light);
+  border-radius: 99px;
+  font-size: clamp(13px, 3vw, 14px);
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--text-color);
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    color 0.3s ease;
+  white-space: nowrap;
+}
+
+.profileBtn:hover {
+  background: var(--hover-color);
+}
+
+/* ── Avatar (nav button) ────────────────────────────────────── */
+.avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--sanvika-brand-color);
+  flex-shrink: 0;
+}
+
+/* ── Text spans ─────────────────────────────────────────────── */
+.textWrap {
+  display: inline;
+}
+
+.hideTextOnMobile {
+  display: none;
+}
+
+/* clamp-based show — 500px+ par text dikhao */
+@media (min-width: 500px) {
+  .hideTextOnMobile {
+    display: inline;
+  }
+}
+
+/* ── Dropdown ───────────────────────────────────────────────── */
+.dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: clamp(200px, 60vw, 240px);
+  background: var(--card-bg);
+  border: 1px solid var(--border-color-light);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px var(--shadow-color);
+  z-index: 9999;
+  overflow: hidden;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+.dropdownHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--section-bg);
+  transition: background-color 0.3s ease;
+}
+
+.dropdownAvatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--sanvika-brand-color);
+  flex-shrink: 0;
+}
+
+.dropdownName {
+  font-size: clamp(13px, 3vw, 14px);
+  font-weight: 700;
+  color: var(--text-color);
+  line-height: 1.3;
+  transition: color 0.3s ease;
+}
+
+.dropdownMobile {
+  font-size: clamp(11px, 2.5vw, 12px);
+  color: var(--secondary-text-color);
+  margin-top: 2px;
+  transition: color 0.3s ease;
+}
+
+.divider {
+  height: 1px;
+  background: var(--muted-border);
+  transition: background-color 0.3s ease;
+}
+
+/* ── Dropdown Items ─────────────────────────────────────────── */
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 11px 16px;
+  min-height: 44px; /* Touch target rule */
+  background: none;
+  border: none;
+  font-size: clamp(13px, 3vw, 14px);
+  color: var(--text-color);
+  cursor: pointer;
+  text-decoration: none;
+  text-align: left;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.dropdownItem:hover {
+  background: var(--hover-color);
+}
+
+.logoutItem {
+  color: var(--error-color);
+}
+
+.logoutItem:hover {
+  background: var(--error-bg);
+}

package/SanvikaAuthProvider.jsx

@@ -0,0 +1,171 @@
+"use client";
+// ============================================================
+// SanvikaAuthProvider — Context + global auth state manager
+// Wrap your root layout with this provider.
+//
+// Usage:
+//   <SanvikaAuthProvider
+//     clientId="sanvika_XXXXXXXXXX"
+//     redirectUri="https://yourapp.com/auth/callback"
+//     iamUrl="https://accounts.sanvikaproduction.com"   // optional
+//     dashboardPath="/dashboard"                         // optional
+//   >
+//     {children}
+//   </SanvikaAuthProvider>
+// ============================================================
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+import { STORAGE_KEYS, DEFAULT_IAM_URL } from "./constants.js";
+
+// ─── Context ──────────────────────────────────────────────────────────────
+export const SanvikaAuthContext = createContext(null);
+
+// ─── Provider ─────────────────────────────────────────────────────────────
+export 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); // true during initial localStorage read
+
+  // ── Hydrate from localStorage on mount ────────────────────────────────
+  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 {
+      // corrupted storage — clear it
+      localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
+      localStorage.removeItem(STORAGE_KEYS.USER);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ── Cross-tab sync: ek tab logout kare → sab tabs logout ──────────────
+  useEffect(() => {
+    function onStorage(e) {
+      if (e.key === STORAGE_KEYS.ACCESS_TOKEN && !e.newValue) {
+        setUser(null);
+        setToken(null);
+      }
+      // New login in another tab
+      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 {
+          /* ignore */
+        }
+      }
+    }
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  // ── login: called after callback route gets tokens ────────────────────
+  const login = useCallback((token, userData) => {
+    localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token);
+    localStorage.setItem(STORAGE_KEYS.USER, JSON.stringify(userData));
+    setToken(token);
+    setUser(userData);
+  }, []);
+
+  // ── logout: clear state + localStorage ────────────────────────────────
+  const logout = useCallback(async () => {
+    const token = localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+    // Optionally revoke on server (fire-and-forget)
+    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]);
+
+  // ── updateUser: partial state update (e.g. image changed) ─────────────
+  const updateUser = useCallback((partial) => {
+    setUser((prev) => {
+      if (!prev) return prev;
+      const merged = { ...prev, ...partial };
+      localStorage.setItem(STORAGE_KEYS.USER, JSON.stringify(merged));
+      return merged;
+    });
+  }, []);
+
+  // ── Redirect to Sanvika SSO ────────────────────────────────────────────
+  const redirectToLogin = useCallback(
+    (returnPath) => {
+      // Save current path so we can return after login
+      if (returnPath) {
+        localStorage.setItem(STORAGE_KEYS.RETURN_PATH, returnPath);
+      }
+      // CSRF state
+      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);
+      // Pass app's current theme so SA authorize page can match it
+      const appTheme = localStorage.getItem("theme");
+      if (appTheme === "light" || appTheme === "dark") {
+        url.searchParams.set("theme", appTheme);
+      }
+      window.location.href = url.toString();
+    },
+    [iamUrl, clientId, redirectUri],
+  );
+
+  return (
+    <SanvikaAuthContext.Provider
+      value={{
+        user,
+        accessToken,
+        loading,
+        isLoggedIn: !!user,
+        login,
+        logout,
+        updateUser,
+        redirectToLogin,
+        clientId,
+        redirectUri,
+        iamUrl,
+        dashboardPath,
+      }}
+    >
+      {children}
+    </SanvikaAuthContext.Provider>
+  );
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────
+export function useSanvikaAuth() {
+  const ctx = useContext(SanvikaAuthContext);
+  if (!ctx)
+    throw new Error("useSanvikaAuth must be used inside <SanvikaAuthProvider>");
+  return ctx;
+}

package/constants.js

@@ -0,0 +1,32 @@
+// ============================================================
+// Sanvika Auth SDK — Storage Keys & Constants
+// ============================================================
+
+// localStorage keys — use these everywhere (never hardcode strings)
+export const 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
+};
+
+// Default Sanvika Accounts base URL
+export const DEFAULT_IAM_URL = "https://accounts.sanvikaproduction.com";
+
+// Token key in response body from /api/auth/token
+export const TOKEN_RESPONSE_KEYS = {
+  ACCESS_TOKEN: "access_token",
+  REFRESH_TOKEN: "refresh_token",
+  USER: "user",
+};
+
+// User statuses (matches Sanvika Accounts User schema)
+export const USER_STATUS = {
+  ONBOARDING: "onboarding",
+  ACTIVE: "active",
+  SUSPENDED: "suspended",
+  DELETED: "deleted",
+};
+
+// Default avatar shown when user has no image
+export const 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`;

package/index.js

@@ -0,0 +1,16 @@
+// ============================================================
+// Sanvika Auth SDK — Main Barrel Export
+// Export all public SDK components and utilities
+// ============================================================
+
+export {
+  SanvikaAuthProvider,
+  SanvikaAuthContext,
+  useSanvikaAuth,
+} from "./SanvikaAuthProvider.jsx";
+export { default as SanvikaAccountButton } from "./SanvikaAccountButton.jsx";
+export {
+  STORAGE_KEYS,
+  DEFAULT_IAM_URL,
+  DEFAULT_AVATAR_SVG,
+} from "./constants.js";

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@sanvika/auth",
+  "version": "1.0.0",
+  "description": "Sanvika Auth SDK — React components and hooks for Sanvika SSO integration",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "SanvikaAuthProvider.jsx",
+    "SanvikaAccountButton.jsx",
+    "SanvikaAccountButton.module.css",
+    "constants.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "next": ">=14"
+  },
+  "keywords": [
+    "sanvika",
+    "auth",
+    "sso",
+    "oauth",
+    "react",
+    "nextjs"
+  ],
+  "author": "sanvika",
+  "license": "MIT"
+}