@indusaction/cms-auth 0.1.0

package/README.md

@@ -0,0 +1,82 @@
+# @indusaction/cms-auth
+
+Shared OTP + cookie JWT authentication for IndusAction CMS **web** (`campaign-fe`) and **mobile** (`case-fe`).
+
+Works with **campaign-be**: HttpOnly `{appSource}_cms_token` cookies, `withCredentials`, 401 → refresh.
+
+## Install
+
+```bash
+npm install @indusaction/cms-auth axios js-cookie antd react react-dom react-router-dom
+
+# Optional — wrap the app with ThemeProvider from the UI package for brand colors
+npm install @indusaction/cms-design-system
+```
+
+## Quick start
+
+```tsx
+import {
+  createAuthClient,
+  AuthProvider,
+  IdentifierForm,
+  OtpForm,
+  ProtectedRoute,
+  GuestRoute,
+  MOBILE_SEND_OTP_PATH,
+} from "@indusaction/cms-auth";
+import { ThemeProvider } from "@indusaction/cms-design-system";
+```
+
+```tsx
+// campaign-fe (web)
+const authClient = createAuthClient({
+  baseURL: import.meta.env.VITE_IA_CMS_BASEURL,
+  appSource: import.meta.env.VITE_APP_SOURCE, // e.g. campaign-local
+  profilePrefix: "campaign",
+});
+
+// case-fe (mobile) — only send-otp path differs
+const caseAuthClient = createAuthClient({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  appSource: import.meta.env.VITE_APP_SOURCE, // e.g. case-local
+  profilePrefix: "case",
+  paths: {
+    sendOtp: MOBILE_SEND_OTP_PATH,
+    login: "auth/login/",
+    refresh: "auth/token/refresh/",
+    logout: "auth/logout/",
+  },
+  loginPath: "/auth/login",
+});
+
+function App() {
+  return (
+    <ThemeProvider>
+      <AuthProvider
+        client={authClient}
+        onLoginSuccess={() => {
+          window.location.assign("/");
+        }}
+      >
+        {/* routes */}
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+Use `authClient.api` for authenticated API calls (same Axios instance with refresh interceptor).
+
+## Package surface
+
+| Export | Role |
+|--------|------|
+| `createAuthClient` | Axios + OTP/login/logout/refresh + cookie helpers |
+| `AuthProvider` / `useAuth` | `signIn`, `verifyOtp`, `logout` |
+| `ProtectedRoute` / `GuestRoute` | Cookie-based route guards |
+| `IdentifierForm` / `OtpForm` | Shared login UI (Ant Design; themed via app `ThemeProvider`) |
+| `useAutoLogout` | Optional expiry-cookie logout (case-fe) |
+| `buildCookieKeys` / storage helpers | Low-level cookie/localStorage |
+
+App-specific flows (permissions routes, Glific, public Bearer session, offline sync) stay in each app.

package/dist/index.cjs

@@ -0,0 +1,558 @@
+'use strict';
+
+var Cookies = require('js-cookie');
+var axios = require('axios');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactRouterDom = require('react-router-dom');
+var antd = require('antd');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Cookies__default = /*#__PURE__*/_interopDefault(Cookies);
+var axios__default = /*#__PURE__*/_interopDefault(axios);
+
+// src/types.ts
+var DEFAULT_AUTH_PATHS = {
+  sendOtp: "api/v1/users/send-otp/",
+  login: "api/v1/auth/login/",
+  refresh: "api/v1/auth/token/refresh/",
+  logout: "api/v1/auth/logout/"
+};
+var MOBILE_SEND_OTP_PATH = "users/send-otp-mobile/";
+
+// src/cookies.ts
+function buildCookieKeys(appSource, profilePrefix) {
+  return {
+    isLoggedIn: `${appSource}_is_logged_in`,
+    tokenExpiry: `${appSource}_cms_token_expiry`,
+    userId: `${profilePrefix}_user_id`,
+    userRole: `${profilePrefix}_user_role`,
+    userType: `${profilePrefix}_user_type`,
+    userFirstName: `${profilePrefix}_user_first_name`,
+    userLastName: `${profilePrefix}_user_last_name`,
+    userPermissions: `${profilePrefix}_user_permissions`,
+    notification: `${profilePrefix}_notification`
+  };
+}
+function authCookieKeyList(keys) {
+  return Object.values(keys);
+}
+function isLoggedIn(keys) {
+  return Cookies__default.default.get(keys.isLoggedIn) === "true";
+}
+function getTokenExpiry(keys) {
+  const raw = Cookies__default.default.get(keys.tokenExpiry);
+  if (!raw) return null;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+function getSessionProfile(keys, permissionsStorageKey) {
+  const idx = Cookies__default.default.get(keys.userId);
+  const role = Cookies__default.default.get(keys.userRole);
+  const userType = Cookies__default.default.get(keys.userType);
+  if (!idx || !role || !userType) return null;
+  let permissions = [];
+  try {
+    const raw = localStorage.getItem(permissionsStorageKey);
+    if (raw) permissions = JSON.parse(raw);
+  } catch {
+    permissions = [];
+  }
+  return {
+    idx,
+    role,
+    userType,
+    firstName: Cookies__default.default.get(keys.userFirstName),
+    lastName: Cookies__default.default.get(keys.userLastName),
+    permissions
+  };
+}
+function persistSessionProfile(user, keys, permissionsStorageKey) {
+  const permissions = user.user_permissions ?? [];
+  localStorage.setItem(permissionsStorageKey, JSON.stringify(permissions));
+  Cookies__default.default.set(keys.userId, user.idx);
+  Cookies__default.default.set(keys.userRole, user.role);
+  Cookies__default.default.set(keys.userType, user.user_type);
+  if (user.first_name) Cookies__default.default.set(keys.userFirstName, user.first_name);
+  if (user.last_name) Cookies__default.default.set(keys.userLastName, user.last_name);
+  if (permissions.length) {
+    Cookies__default.default.set(keys.userPermissions, JSON.stringify(permissions));
+  }
+}
+function clearAuthStorage(keys, permissionsStorageKey, extraClearKeys = []) {
+  authCookieKeyList(keys).forEach((key) => Cookies__default.default.remove(key));
+  localStorage.removeItem(permissionsStorageKey);
+  extraClearKeys.forEach((key) => {
+    localStorage.removeItem(key);
+    sessionStorage.removeItem(key);
+    Cookies__default.default.remove(key);
+  });
+}
+function joinPath(baseURL, path) {
+  const base = baseURL.replace(/\/+$/, "");
+  const normalized = path.replace(/^\/+/, "");
+  return `${base}/${normalized}`;
+}
+function createAuthClient(options) {
+  const paths = {
+    ...DEFAULT_AUTH_PATHS,
+    ...options.paths
+  };
+  const cookieKeys = buildCookieKeys(options.appSource, options.profilePrefix);
+  const permissionsStorageKey = options.permissionsStorageKey ?? `${options.profilePrefix}_user_permissions`;
+  const extraClearKeys = options.extraClearKeys ?? [];
+  const loginPath = options.loginPath ?? "/login";
+  const api = axios__default.default.create({
+    baseURL: options.baseURL,
+    withCredentials: true
+  });
+  let refreshPromise = null;
+  const refresh = async () => {
+    if (!refreshPromise) {
+      refreshPromise = api.post(paths.refresh).then(() => void 0).finally(() => {
+        refreshPromise = null;
+      });
+    }
+    return refreshPromise;
+  };
+  const clearSession = async (clearOptions = {}) => {
+    const shouldRedirect = clearOptions.redirect !== false;
+    try {
+      await api.post(paths.logout);
+    } catch {
+    }
+    clearAuthStorage(cookieKeys, permissionsStorageKey, extraClearKeys);
+    options.onSessionCleared?.();
+    if (shouldRedirect && typeof window !== "undefined" && window.location.pathname !== loginPath) {
+      window.location.replace(loginPath);
+    }
+  };
+  api.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+      const originalRequest = error.config;
+      const status = error.response?.status;
+      const url = originalRequest?.url ?? "";
+      if (status === 401 && originalRequest && !originalRequest._retry && !url.includes(paths.refresh)) {
+        originalRequest._retry = true;
+        try {
+          await refresh();
+          return api(originalRequest);
+        } catch {
+          await clearSession();
+        }
+      }
+      return Promise.reject(error);
+    }
+  );
+  const sendOtp = async (payload) => {
+    const { data } = await api.post(paths.sendOtp, payload);
+    return data;
+  };
+  const login = async (payload) => {
+    const { data } = await api.post(
+      paths.login,
+      payload
+    );
+    const user = data.data;
+    persistSessionProfile(user, cookieKeys, permissionsStorageKey);
+    return user;
+  };
+  const logout = async (clearOptions = {}) => {
+    await clearSession(clearOptions);
+  };
+  return {
+    api,
+    paths,
+    cookieKeys,
+    permissionsStorageKey,
+    options: {
+      ...options,
+      loginPath,
+      extraClearKeys
+    },
+    sendOtp,
+    login,
+    logout,
+    refresh,
+    clearSession,
+    isLoggedIn: () => isLoggedIn(cookieKeys),
+    getTokenExpiry: () => getTokenExpiry(cookieKeys),
+    getSessionProfile: () => getSessionProfile(cookieKeys, permissionsStorageKey)
+  };
+}
+var AuthContext = react.createContext(null);
+function defaultMapError(error, phase) {
+  if (phase === "verifyOtp") return "Invalid OTP";
+  if (phase === "logout") return "Error logging out";
+  const err = error;
+  const data = err?.response?.data?.data;
+  if (data && typeof data === "object" && "identifier" in data) {
+    const identifier = data.identifier;
+    if (Array.isArray(identifier)) return identifier.join("");
+  }
+  return "An error occurred";
+}
+function AuthProvider({
+  client,
+  children,
+  onLoginSuccess,
+  onLogout,
+  mapError = defaultMapError
+}) {
+  const [status, setStatus] = react.useState("IDLE");
+  const [error, setError] = react.useState(null);
+  const [user, setUser] = react.useState(null);
+  const signIn = react.useCallback(
+    async (payload) => {
+      try {
+        setStatus("PENDING");
+        setError(null);
+        const response = await client.sendOtp(payload);
+        setStatus("SUCCESS");
+        return response;
+      } catch (err) {
+        const message = mapError(err, "signIn");
+        setStatus("ERROR");
+        setError(message);
+        throw err;
+      }
+    },
+    [client, mapError]
+  );
+  const verifyOtp = react.useCallback(
+    async (payload) => {
+      try {
+        setStatus("PENDING");
+        setError(null);
+        const nextUser = await client.login(payload);
+        setUser(nextUser);
+        setStatus("SUCCESS");
+        await onLoginSuccess?.(nextUser);
+        return nextUser;
+      } catch (err) {
+        const message = mapError(err, "verifyOtp");
+        setStatus("ERROR");
+        setError(message);
+        throw err;
+      }
+    },
+    [client, mapError, onLoginSuccess]
+  );
+  const logout = react.useCallback(async () => {
+    try {
+      setStatus("PENDING");
+      await client.logout();
+      setUser(null);
+      setStatus("IDLE");
+      setError(null);
+      await onLogout?.();
+    } catch (err) {
+      const message = mapError(err, "logout");
+      setStatus("ERROR");
+      setError(message);
+      throw err;
+    }
+  }, [client, mapError, onLogout]);
+  const value = react.useMemo(
+    () => ({
+      client,
+      status,
+      error,
+      user,
+      signIn,
+      verifyOtp,
+      logout,
+      isAuthenticated: client.isLoggedIn()
+    }),
+    [client, status, error, user, signIn, verifyOtp, logout]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
+}
+function useAuth() {
+  const ctx = react.useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return ctx;
+}
+function ProtectedRoute({
+  client,
+  redirectTo,
+  children
+}) {
+  const location = reactRouterDom.useLocation();
+  const loginPath = redirectTo ?? client.options.loginPath;
+  if (!client.isLoggedIn()) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: loginPath, replace: true, state: { from: location } });
+  }
+  return children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {});
+}
+function GuestRoute({
+  client,
+  redirectTo = "/",
+  children
+}) {
+  if (client.isLoggedIn()) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: redirectTo, replace: true });
+  }
+  return children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {});
+}
+function useAutoLogout({
+  client,
+  intervalMs = 3e4,
+  enabled = true
+}) {
+  const loggingOut = react.useRef(false);
+  react.useEffect(() => {
+    if (!enabled) return;
+    const tick = async () => {
+      if (!client.isLoggedIn() || loggingOut.current) return;
+      const expiry = client.getTokenExpiry();
+      if (expiry == null) return;
+      const expiryMs = expiry < 1e12 ? expiry * 1e3 : expiry;
+      if (Date.now() >= expiryMs) {
+        loggingOut.current = true;
+        try {
+          await client.logout();
+        } finally {
+          loggingOut.current = false;
+        }
+      }
+    };
+    void tick();
+    const id = window.setInterval(tick, intervalMs);
+    return () => window.clearInterval(id);
+  }, [client, intervalMs, enabled]);
+}
+var headerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 4,
+  marginBottom: 24
+};
+var titleStyle = {
+  margin: 0,
+  textAlign: "center",
+  fontWeight: 600
+};
+var descriptionStyle = {
+  margin: 0,
+  textAlign: "center"
+};
+var inputStyle = {
+  height: 48,
+  borderRadius: 6
+};
+var formGapStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 16
+};
+function defaultPlaceholder(mode) {
+  if (mode === "mobile") return "Enter Your Mobile Number";
+  if (mode === "email") return "Enter Your Email";
+  return "Enter Your Email / Phone";
+}
+function validateIdentifier(mode, value) {
+  const trimmed = value.trim();
+  if (!trimmed) return Promise.reject(new Error("Required"));
+  if (mode === "mobile") {
+    if (!/^\d{10}$/.test(trimmed)) {
+      return Promise.reject(new Error("Enter a valid 10-digit mobile number"));
+    }
+  } else if (mode === "email") {
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+      return Promise.reject(new Error("Enter a valid email"));
+    }
+  } else {
+    const isMobile = /^\d{10}$/.test(trimmed);
+    const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed);
+    if (!isMobile && !isEmail) {
+      return Promise.reject(new Error("Enter a valid email or 10-digit mobile"));
+    }
+  }
+  return Promise.resolve();
+}
+function IdentifierForm({
+  onSubmit,
+  loading = false,
+  mode = "either",
+  submitLabel = "Continue",
+  title = "Sign in to Indus Action",
+  description = "Please Enter Your Email / Phone",
+  placeholder,
+  initialIdentifier = "",
+  label = null
+}) {
+  const [form] = antd.Form.useForm();
+  const inputPlaceholder = placeholder ?? defaultPlaceholder(mode);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: formGapStyle, children: [
+    title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Title, { level: 3, style: titleStyle, children: title }) : null,
+      description ? /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Paragraph, { type: "secondary", style: descriptionStyle, children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      antd.Form,
+      {
+        form,
+        layout: "vertical",
+        initialValues: { identifier: initialIdentifier },
+        onFinish: onSubmit,
+        requiredMark: false,
+        style: { width: "100%" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.Form.Item,
+            {
+              name: "identifier",
+              label: label ?? void 0,
+              rules: [
+                {
+                  validator: async (_, value) => validateIdentifier(mode, value ?? "")
+                }
+              ],
+              style: { marginBottom: 16 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                antd.Input,
+                {
+                  size: "large",
+                  placeholder: inputPlaceholder,
+                  autoComplete: mode === "mobile" ? "tel" : "username",
+                  inputMode: mode === "mobile" ? "numeric" : "text",
+                  style: inputStyle
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.Button,
+            {
+              type: "primary",
+              htmlType: "submit",
+              loading,
+              block: true,
+              size: "large",
+              style: { height: 48, borderRadius: 6 },
+              children: submitLabel
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function OtpForm({
+  onSubmit,
+  onResend,
+  loading = false,
+  resendLoading = false,
+  length = 6,
+  title = "Check your email / phone for a code",
+  description = "Please enter OTP to continue to your account.",
+  submitLabel = "Continue",
+  label = null,
+  resendSeconds = 120
+}) {
+  const [form] = antd.Form.useForm();
+  const [secondsLeft, setSecondsLeft] = react.useState(resendSeconds);
+  react.useEffect(() => {
+    if (secondsLeft <= 0) return;
+    const id = window.setTimeout(() => setSecondsLeft((s) => s - 1), 1e3);
+    return () => window.clearTimeout(id);
+  }, [secondsLeft]);
+  const handleResend = async () => {
+    if (!onResend || secondsLeft > 0) return;
+    await onResend();
+    setSecondsLeft(resendSeconds);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: formGapStyle, children: [
+    title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Title, { level: 3, style: titleStyle, children: title }) : null,
+      description ? /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Paragraph, { type: "secondary", style: descriptionStyle, children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      antd.Form,
+      {
+        form,
+        layout: "vertical",
+        onFinish: onSubmit,
+        requiredMark: false,
+        style: { width: "100%" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.Form.Item,
+            {
+              name: "otp",
+              label: label ?? void 0,
+              rules: [
+                { required: true, message: "Enter OTP" },
+                {
+                  len: length,
+                  message: `OTP must be ${length} digits`
+                }
+              ],
+              style: { marginBottom: 16 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                antd.Input.OTP,
+                {
+                  length,
+                  size: "large",
+                  style: { display: "flex", width: "100%" }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.Button,
+            {
+              type: "primary",
+              htmlType: "submit",
+              loading,
+              block: true,
+              size: "large",
+              style: { height: 48, borderRadius: 6 },
+              children: submitLabel
+            }
+          )
+        ]
+      }
+    ),
+    onResend ? /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Paragraph, { style: { marginTop: 8, textAlign: "center" }, children: secondsLeft > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(antd.Typography.Text, { type: "secondary", children: [
+      "Resend OTP in ",
+      secondsLeft,
+      "s"
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Button,
+      {
+        type: "link",
+        loading: resendLoading,
+        onClick: () => void handleResend(),
+        children: "Resend OTP"
+      }
+    ) }) : null
+  ] });
+}
+
+exports.AuthProvider = AuthProvider;
+exports.DEFAULT_AUTH_PATHS = DEFAULT_AUTH_PATHS;
+exports.GuestRoute = GuestRoute;
+exports.IdentifierForm = IdentifierForm;
+exports.MOBILE_SEND_OTP_PATH = MOBILE_SEND_OTP_PATH;
+exports.OtpForm = OtpForm;
+exports.ProtectedRoute = ProtectedRoute;
+exports.authCookieKeyList = authCookieKeyList;
+exports.buildCookieKeys = buildCookieKeys;
+exports.clearAuthStorage = clearAuthStorage;
+exports.createAuthClient = createAuthClient;
+exports.getSessionProfile = getSessionProfile;
+exports.getTokenExpiry = getTokenExpiry;
+exports.isLoggedIn = isLoggedIn;
+exports.joinPath = joinPath;
+exports.persistSessionProfile = persistSessionProfile;
+exports.useAuth = useAuth;
+exports.useAutoLogout = useAutoLogout;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map