@appocus/auth-react-router 0.2.0

package/LICENCE.md

@@ -0,0 +1,11 @@
+# Released under MIT License
+
+Copyright (c) 2013 Mark Otto.
+
+Copyright (c) 2017 Andrew Fong.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# @appocus/auth-react-router
+
+OAuth login plumbing for Appocus apps built on React Router 7 + `@zauru-sdk/webapp-services`.
+
+## What's inside
+
+- `authMiddleware`, `loginMiddleware`, `sessionRefreshMiddleware`
+- `buildOAuthAuthorizeURL(requestUrl, { state })`
+- `authenticatedFetch(input, init)` — `credentials: "include"` fetch that opens a popup on `401 { code: "UNAUTHORIZED" }` and retries once
+- `requestReauthInPopup()` — promise-based popup orchestrator
+- `createReauthConstants(appKey)` + `configureAuthRuntime({ reauthConstants, popupWindowName })`
+- `AuthShellLayout`, `RedirectIfAuthenticated`
+- Route module factories: `createLoginRoute`, `createLoginPopupRoute`, `createLogoutRoute`, `createCallbackRoute`, `createReauthPopupDoneRoute`
+
+## Install
+
+```bash
+pnpm add @appocus/auth-react-router
+```
+
+Peer deps: `react`, `react-router`, `sonner`, `@zauru-sdk/webapp-services`, `@zauru-sdk/webapp-config`.
+
+## Configure once
+
+```ts
+// app/root.tsx (or any client entry that runs early)
+import {
+  configureAuthRuntime,
+  createReauthConstants,
+} from "@appocus/auth-react-router";
+import { appocusConfig } from "@/appocus.config";
+
+configureAuthRuntime({
+  reauthConstants: createReauthConstants("4pinos-agrocreditos"),
+  popupWindowName: appocusConfig.oauth.reauthPopupWindowName,
+});
+```
+
+## Wire routes
+
+```tsx
+// app/pages/login.tsx
+import { createLoginRoute } from "@appocus/auth-react-router";
+import { LoginForm } from "@appocus/ui";
+
+const route = createLoginRoute({ LoginForm });
+
+export const middleware = route.middleware;
+export const action = route.action;
+export default route.default;
+```
+
+For `/callback`, supply the `onSuccess` callback so domain-specific persistence
+(employees, agencies, …) stays in your app:
+
+```tsx
+// app/pages/callback.tsx
+import { createCallbackRoute } from "@appocus/auth-react-router";
+import { LoginForm } from "@appocus/ui";
+import { EmployeesRepository } from "@/db/employees/repository.server";
+import { UsersRepository } from "@/db/users/repository.server";
+
+const route = createCallbackRoute({
+  LoginForm,
+  async onSuccess({ session }) {
+    const employeeId = Number(session.get("employee_id"));
+    const selectedEntity = Number(session.get("selected_entity"));
+    const userName = String(session.get("name") ?? "Usuario");
+    const userEmail = String(session.get("username") ?? "usuario@example.com");
+
+    const employee = await EmployeesRepository.getById(employeeId);
+    const agencyId = employee?.agency_id ?? null;
+    if (!agencyId) {
+      return {
+        error:
+          "No se pudo determinar la agencia del empleado. Contacta al administrador.",
+      };
+    }
+
+    await UsersRepository.upsertFromLogin({
+      employee_id: employeeId,
+      agency_id: agencyId,
+      selected_entity: selectedEntity,
+      name: userName,
+      email: userEmail,
+    });
+
+    return {
+      queryParams: new URLSearchParams({
+        name: userName,
+        email: userEmail,
+        employee_id: String(employeeId),
+        agency_id: String(agencyId),
+        selected_entity: String(selectedEntity),
+      }),
+    };
+  },
+});
+
+export const middleware = route.middleware;
+export const action = route.action;
+export default route.default;
+```
+
+## Authenticated client fetch
+
+```ts
+import { authenticatedFetch } from "@appocus/auth-react-router";
+
+const res = await authenticatedFetch("/api/things");
+```

package/dist/auth-shell-layout.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * Standard wrapper used by the auth pages: muted-background, vertically centered,
+ * responsive max-width column. Pure layout — does not depend on any specific
+ * design-system primitives.
+ */
+export declare function AuthShellLayout({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/authenticated-fetch.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Like `fetch` with `credentials: "include"`, but on a 401 carrying
+ * `{ code: "UNAUTHORIZED" }` opens the reauth popup and retries **once**.
+ */
+export declare function authenticatedFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;

package/dist/esm/auth-shell-layout.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Standard wrapper used by the auth pages: muted-background, vertically centered,
+ * responsive max-width column. Pure layout — does not depend on any specific
+ * design-system primitives.
+ */
+export function AuthShellLayout({ children, className, }) {
+    return (_jsx("div", { className: "bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10", children: _jsx("div", { className: className ?? "w-full max-w-sm md:max-w-4xl", children: children }) }));
+}

package/dist/esm/authenticated-fetch.js

@@ -0,0 +1,37 @@
+function isUnauthorizedPayload(body) {
+    return (typeof body === "object" &&
+        body !== null &&
+        body.code === "UNAUTHORIZED");
+}
+/**
+ * Like `fetch` with `credentials: "include"`, but on a 401 carrying
+ * `{ code: "UNAUTHORIZED" }` opens the reauth popup and retries **once**.
+ */
+export async function authenticatedFetch(input, init) {
+    const merged = {
+        ...init,
+        credentials: init?.credentials ?? "include",
+    };
+    let res = await fetch(input, merged);
+    if (res.status !== 401 || typeof window === "undefined") {
+        return res;
+    }
+    let body;
+    try {
+        body = await res.clone().json();
+    }
+    catch {
+        return res;
+    }
+    if (!isUnauthorizedPayload(body)) {
+        return res;
+    }
+    try {
+        const { requestReauthInPopup } = await import("./reauth-popup.client.js");
+        await requestReauthInPopup();
+    }
+    catch {
+        return res;
+    }
+    return fetch(input, merged);
+}

package/dist/esm/index.js

@@ -0,0 +1,14 @@
+export * from "./middleware.js";
+export * from "./oauth-authorize-url.js";
+export * from "./authenticated-fetch.js";
+export * from "./reauth-constants.js";
+export * from "./runtime-config.js";
+export * from "./reauth-popup.client.js";
+export * from "./auth-shell-layout.js";
+export * from "./redirect-if-authenticated.js";
+export * from "./route-types.js";
+export * from "./routes/login.js";
+export * from "./routes/login-popup.js";
+export * from "./routes/logout.js";
+export * from "./routes/callback.js";
+export * from "./routes/reauth-popup-done.js";

package/dist/esm/middleware.js

@@ -0,0 +1,55 @@
+import { redirect } from "react-router";
+import { getSession, getRefreshSession } from "@zauru-sdk/webapp-services";
+/**
+ * Throws a redirect to `/login` if the request has no OAuth session cookie.
+ * Attach as a route middleware on authenticated routes.
+ */
+export const authMiddleware = async ({ request }) => {
+    const cookie = request.headers.get("Cookie") ?? "";
+    const session = await getSession(cookie);
+    if (!session.has("code")) {
+        console.log("[appocus/auth] User is not authenticated, redirecting to login.");
+        throw redirect("/login");
+    }
+};
+/**
+ * Throws a redirect to `/` if the request already has an OAuth session cookie.
+ * Attach to `/login`, `/callback` etc. to bounce already-logged-in users home.
+ */
+export const loginMiddleware = async ({ request }) => {
+    const cookie = request.headers.get("Cookie") ?? "";
+    const session = await getSession(cookie);
+    if (session.has("code")) {
+        console.log("[appocus/auth] User is already authenticated, redirecting to home.");
+        throw redirect("/");
+    }
+};
+/**
+ * After-handler middleware that bumps the session cookie / Redis TTL when a
+ * `code` cookie is present. Errors are swallowed so a failed refresh never breaks
+ * the underlying response.
+ */
+export async function sessionRefreshMiddleware({ request }, next) {
+    const response = await next();
+    try {
+        const cookie = request.headers.get("Cookie") ?? "";
+        const session = await getSession(cookie);
+        if (!session.has("code")) {
+            return response;
+        }
+        const setCookie = await getRefreshSession(request);
+        if (!setCookie || typeof setCookie !== "string") {
+            return response;
+        }
+        const headers = new Headers(response.headers);
+        headers.append("Set-Cookie", setCookie);
+        return new Response(response.body, {
+            status: response.status,
+            statusText: response.statusText,
+            headers,
+        });
+    }
+    catch {
+        return response;
+    }
+}

package/dist/esm/oauth-authorize-url.js

@@ -0,0 +1,19 @@
+import { config } from "@zauru-sdk/webapp-config";
+/**
+ * Build the Zauru OAuth `dialog/authorize` URL using the host's `request.url` to
+ * derive the `redirect_uri`. Pass `options.state` to mark this authorization as
+ * coming from a reauth popup.
+ */
+export function buildOAuthAuthorizeURL(requestUrl, options) {
+    const origin = new URL(requestUrl).origin;
+    const params = new URLSearchParams({
+        client_id: String(config.oauthClientID ?? ""),
+        response_type: "code",
+        redirect_uri: `${origin}/callback`,
+    });
+    if (options?.state) {
+        params.set("state", options.state);
+    }
+    const base = config.oauthBaseURL?.replace(/\/$/, "") ?? "";
+    return `${base}/dialog/authorize?${params.toString()}`;
+}

package/dist/esm/reauth-constants.js

@@ -0,0 +1,17 @@
+/**
+ * Build per-app reauth constants with a deployment-unique prefix so multiple
+ * Appocus apps on the same origin can't interfere with each other's popups.
+ *
+ * ```ts
+ * const reauthConstants = createReauthConstants("4pinos-agrocreditos");
+ * ```
+ */
+export function createReauthConstants(appKey) {
+    return {
+        REAUTH_POPUP_OAUTH_STATE: `${appKey}_reauth_popup`,
+        ZAURU_REAUTH_MESSAGE_TYPE: `${appKey}:reauth-success`,
+        ZAURU_REAUTH_FAILURE_TYPE: `${appKey}:reauth-failure`,
+    };
+}
+/** Sensible defaults used when the host app never calls `configureAuthRuntime`. */
+export const DEFAULT_REAUTH_CONSTANTS = createReauthConstants("appocus");

package/dist/esm/reauth-popup.client.js

@@ -0,0 +1,91 @@
+"use client";
+import { toast } from "sonner";
+import { getAuthRuntime } from "./runtime-config.js";
+const POPUP_FEATURES = "popup=yes,width=520,height=720,scrollbars=yes,resizable=yes";
+const REAUTH_TIMEOUT_MS = 5 * 60 * 1000;
+const CLOSED_POLL_MS = 400;
+let reauthPromise = null;
+function waitForReauthPopup(origin) {
+    const { reauthConstants, popupWindowName } = getAuthRuntime();
+    return new Promise((resolve, reject) => {
+        const popupUrl = `${origin}/login-popup`;
+        const w = window.open(popupUrl, popupWindowName, POPUP_FEATURES);
+        if (!w) {
+            reject(new Error("El navegador bloqueó la ventana emergente. Permite ventanas para este sitio e intenta de nuevo."));
+            return;
+        }
+        let settled = false;
+        const started = Date.now();
+        const cleanup = () => {
+            window.removeEventListener("message", onMessage);
+            clearInterval(closedPoll);
+            clearTimeout(timeoutId);
+        };
+        const finishError = (err) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            try {
+                if (!w.closed)
+                    w.close();
+            }
+            catch {
+                /* ignore */
+            }
+            reject(err);
+        };
+        const finishOk = () => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            resolve();
+        };
+        const onMessage = (ev) => {
+            if (ev.origin !== origin)
+                return;
+            const d = ev.data;
+            if (d?.type === reauthConstants.ZAURU_REAUTH_MESSAGE_TYPE) {
+                finishOk();
+            }
+            if (d?.type === reauthConstants.ZAURU_REAUTH_FAILURE_TYPE) {
+                finishError(new Error(d.error ?? "No se pudo renovar la sesión."));
+            }
+        };
+        window.addEventListener("message", onMessage);
+        const closedPoll = setInterval(() => {
+            if (Date.now() - started > REAUTH_TIMEOUT_MS) {
+                finishError(new Error("Tiempo de espera del inicio de sesión agotado."));
+                return;
+            }
+            if (w.closed) {
+                finishError(new Error("Inicio de sesión cancelado."));
+            }
+        }, CLOSED_POLL_MS);
+        const timeoutId = setTimeout(() => {
+            finishError(new Error("Tiempo de espera del inicio de sesión agotado."));
+        }, REAUTH_TIMEOUT_MS);
+    });
+}
+/**
+ * Open the OAuth popup and resolve once the session cookie has been refreshed.
+ * Concurrent callers share a single in-flight promise.
+ */
+export function requestReauthInPopup() {
+    if (typeof window === "undefined") {
+        return Promise.reject(new Error("Reauth solo disponible en el navegador."));
+    }
+    if (reauthPromise) {
+        return reauthPromise;
+    }
+    const origin = window.location.origin;
+    toast.message("Sesión expirada", {
+        description: "Completa el inicio de sesión en la ventana emergente para continuar.",
+        duration: 12_000,
+    });
+    reauthPromise = waitForReauthPopup(origin).finally(() => {
+        reauthPromise = null;
+    });
+    return reauthPromise;
+}

package/dist/esm/redirect-if-authenticated.js

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+/**
+ * Probes `/api/auth/me` and, on success, navigates to `/`.
+ * Reinforces the server-side redirect for SPA flows where the URL isn't updated
+ * after the route module's middleware runs.
+ */
+export function RedirectIfAuthenticated({ meEndpoint = "/api/auth/me", redirectTo = "/", } = {}) {
+    const navigate = useNavigate();
+    useEffect(() => {
+        let cancelled = false;
+        fetch(meEndpoint, { credentials: "include" })
+            .then((res) => {
+            if (!cancelled && res.ok) {
+                navigate(redirectTo, { replace: true });
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [navigate, meEndpoint, redirectTo]);
+    return null;
+}

package/dist/esm/route-types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/routes/callback.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { redirect, useNavigate, useSearchParams, useSubmit, } from "react-router";
+import { toast } from "sonner";
+import { commitSession, getSession, nativeLogin, } from "@zauru-sdk/webapp-services";
+import { config } from "@zauru-sdk/webapp-config";
+import { loginMiddleware } from "../middleware.js";
+import { AuthShellLayout } from "../auth-shell-layout.js";
+import { getAuthRuntime } from "../runtime-config.js";
+export function createCallbackRoute({ LoginForm, onSuccess, onLoginError, isMobile: isMobileFn, }) {
+    const action = async ({ request, }) => {
+        const formData = await request.formData();
+        const isPopupReauth = formData.get("popup") === "1";
+        const rawCode = formData.get("code");
+        const codeValue = rawCode === "null" || rawCode === "undefined" || rawCode == null
+            ? null
+            : String(rawCode);
+        const cookie = request.headers.get("Cookie") ?? null;
+        const session = (await getSession(cookie));
+        if (session.has("code")) {
+            console.log("[appocus/auth] User is already logged in, redirecting to home.");
+            if (isPopupReauth) {
+                const reqUrl = new URL(request.url);
+                return redirect(`${reqUrl.origin}/auth/reauth-popup-done`);
+            }
+            return redirect("/");
+        }
+        if (!codeValue) {
+            console.error("[appocus/auth] Authorization code is missing in the callback URL.");
+            return {
+                error: "Authorization code is missing.",
+            };
+        }
+        const loginResponse = await nativeLogin(session, codeValue);
+        if (loginResponse.error) {
+            console.error("[appocus/auth] Login failed:", loginResponse.userMsg);
+            return { error: String(loginResponse.userMsg ?? "Login failed.") };
+        }
+        let onSuccessResult;
+        try {
+            onSuccessResult = await onSuccess({
+                session,
+                codeValue,
+                request,
+            });
+        }
+        catch (e) {
+            console.error("[appocus/auth] onSuccess threw:", e);
+            return {
+                error: e instanceof Error
+                    ? e.message
+                    : "Error completando el inicio de sesión.",
+            };
+        }
+        if ("error" in onSuccessResult) {
+            return { error: onSuccessResult.error };
+        }
+        const expires = new Date();
+        expires.setSeconds(expires.getSeconds() + Number(config.expirationDurationInSeconds));
+        const setCookie = await commitSession(session, { expires });
+        const reqUrl = new URL(request.url);
+        if (isPopupReauth) {
+            return redirect(`${reqUrl.origin}/auth/reauth-popup-done`, {
+                headers: { "Set-Cookie": setCookie },
+            });
+        }
+        const params = onSuccessResult.queryParams?.toString();
+        return redirect(params ? `/?${params}` : `/`, {
+            headers: { "Set-Cookie": setCookie },
+        });
+    };
+    function CallbackPage({ actionData }) {
+        const [isClient, setIsClient] = useState(false);
+        const submit = useSubmit();
+        const [params] = useSearchParams();
+        const navigate = useNavigate();
+        const mobile = isMobileFn?.() ?? false;
+        const { reauthConstants } = getAuthRuntime();
+        const oauthCode = params.get("code");
+        const isReauthPopupFlow = params.get("state") === reauthConstants.REAUTH_POPUP_OAUTH_STATE;
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        useEffect(() => {
+            if (!isClient || !oauthCode)
+                return;
+            submit({
+                code: oauthCode,
+                ...(isReauthPopupFlow ? { popup: "1" } : {}),
+            }, { method: "post", action: "/callback" });
+        }, [isClient, submit, oauthCode, isReauthPopupFlow]);
+        useEffect(() => {
+            if (!actionData ||
+                !("error" in actionData) ||
+                !actionData.error) {
+                return;
+            }
+            const description = actionData.error;
+            if (isReauthPopupFlow) {
+                window.opener?.postMessage({
+                    type: reauthConstants.ZAURU_REAUTH_FAILURE_TYPE,
+                    error: description,
+                }, window.location.origin);
+                window.close();
+                return;
+            }
+            if (onLoginError?.(description))
+                return;
+            toast.error("Error", {
+                description,
+                position: mobile ? "bottom-center" : "bottom-right",
+                duration: 4000,
+            });
+            navigate("/login");
+        }, [actionData, mobile, navigate, isReauthPopupFlow, reauthConstants]);
+        return (_jsx(AuthShellLayout, { children: _jsx(LoginForm, { isLoading: true }) }));
+    }
+    return {
+        middleware: [loginMiddleware],
+        action: action,
+        default: CallbackPage,
+    };
+}

package/dist/esm/routes/login-popup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { redirect } from "react-router";
+import { buildOAuthAuthorizeURL } from "../oauth-authorize-url.js";
+import { getAuthRuntime } from "../runtime-config.js";
+export function createLoginPopupRoute(options = {}) {
+    const message = options.redirectingMessage ?? "Redirigiendo al inicio de sesión…";
+    const loader = async ({ request }) => {
+        const { reauthConstants } = getAuthRuntime();
+        throw redirect(buildOAuthAuthorizeURL(request.url, {
+            state: reauthConstants.REAUTH_POPUP_OAUTH_STATE,
+        }));
+    };
+    function LoginPopupPage() {
+        return (_jsx("div", { className: "bg-muted flex min-h-svh items-center justify-center p-6 text-center text-sm text-muted-foreground", children: message }));
+    }
+    return {
+        loader,
+        default: LoginPopupPage,
+    };
+}

package/dist/esm/routes/login.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { redirect } from "react-router";
+import { loginMiddleware } from "../middleware.js";
+import { buildOAuthAuthorizeURL } from "../oauth-authorize-url.js";
+import { AuthShellLayout } from "../auth-shell-layout.js";
+import { RedirectIfAuthenticated } from "../redirect-if-authenticated.js";
+export function createLoginRoute({ LoginForm, onAction, }) {
+    const action = async ({ request }) => {
+        if (onAction)
+            return onAction(request);
+        return redirect(buildOAuthAuthorizeURL(request.url));
+    };
+    function LoginPage() {
+        return (_jsxs(AuthShellLayout, { children: [_jsx(RedirectIfAuthenticated, {}), _jsx(LoginForm, {})] }));
+    }
+    return {
+        middleware: [loginMiddleware],
+        action,
+        default: LoginPage,
+    };
+}

package/dist/esm/routes/logout.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { redirect, useSubmit } from "react-router";
+import { getSession, destroySession } from "@zauru-sdk/webapp-services";
+import { config } from "@zauru-sdk/webapp-config";
+import { AuthShellLayout } from "../auth-shell-layout.js";
+/** Module-scope flag to avoid double-submission under React Strict Mode. */
+let logoutAutoSubmitStarted = false;
+export function createLogoutRoute({ LoginForm, clearUserData, copy, }) {
+    const action = async ({ request }) => {
+        const cookie = request.headers.get("Cookie");
+        const session = await getSession(cookie || "");
+        return redirect(`${config.oauthBaseURL}/logout`, {
+            headers: {
+                "Set-Cookie": await destroySession(session),
+            },
+        });
+    };
+    function LogoutPage() {
+        const submit = useSubmit();
+        useEffect(() => {
+            clearUserData?.();
+            if (logoutAutoSubmitStarted)
+                return;
+            logoutAutoSubmitStarted = true;
+            submit(null, { method: "post", action: "/logout" });
+        }, [submit]);
+        return (_jsx(AuthShellLayout, { children: _jsx(LoginForm, { isLoading: true, mode: "logout", title: copy?.title ?? "Cerrando sesión", loadingText: copy?.loadingText ?? "Cerrando sesión...", buttonText: copy?.buttonText ?? "Cerrar sesión" }) }));
+    }
+    return {
+        action,
+        default: LogoutPage,
+    };
+}

package/dist/esm/routes/reauth-popup-done.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { getAuthRuntime } from "../runtime-config.js";
+export function createReauthPopupDoneRoute(options = {}) {
+    const message = options.message ?? "Sesión renovada. Esta ventana se cerrará sola.";
+    function ReauthPopupDonePage() {
+        useEffect(() => {
+            const origin = window.location.origin;
+            const { reauthConstants } = getAuthRuntime();
+            try {
+                window.opener?.postMessage({ type: reauthConstants.ZAURU_REAUTH_MESSAGE_TYPE }, origin);
+            }
+            finally {
+                window.close();
+            }
+        }, []);
+        return (_jsx("div", { className: "bg-muted flex min-h-svh items-center justify-center p-6 text-center text-sm text-muted-foreground", children: message }));
+    }
+    return { default: ReauthPopupDonePage };
+}

package/dist/esm/runtime-config.js

@@ -0,0 +1,20 @@
+import { DEFAULT_REAUTH_CONSTANTS, } from "./reauth-constants.js";
+let runtime = {
+    reauthConstants: DEFAULT_REAUTH_CONSTANTS,
+    popupWindowName: "appocus-reauth",
+};
+/**
+ * Configure the runtime singletons used by `authenticatedFetch`,
+ * `requestReauthInPopup`, and the bundled route factories. Call this once at
+ * client startup (e.g. from `root.tsx`).
+ */
+export function configureAuthRuntime(opts) {
+    runtime = {
+        reauthConstants: opts.reauthConstants ?? runtime.reauthConstants,
+        popupWindowName: opts.popupWindowName ?? runtime.popupWindowName,
+    };
+    return runtime;
+}
+export function getAuthRuntime() {
+    return runtime;
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./middleware.js";
+export * from "./oauth-authorize-url.js";
+export * from "./authenticated-fetch.js";
+export * from "./reauth-constants.js";
+export * from "./runtime-config.js";
+export * from "./reauth-popup.client.js";
+export * from "./auth-shell-layout.js";
+export * from "./redirect-if-authenticated.js";
+export * from "./route-types.js";
+export * from "./routes/login.js";
+export * from "./routes/login-popup.js";
+export * from "./routes/logout.js";
+export * from "./routes/callback.js";
+export * from "./routes/reauth-popup-done.js";

package/dist/middleware.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Throws a redirect to `/login` if the request has no OAuth session cookie.
+ * Attach as a route middleware on authenticated routes.
+ */
+export declare const authMiddleware: ({ request }: {
+    request: Request;
+}) => Promise<void>;
+/**
+ * Throws a redirect to `/` if the request already has an OAuth session cookie.
+ * Attach to `/login`, `/callback` etc. to bounce already-logged-in users home.
+ */
+export declare const loginMiddleware: ({ request }: {
+    request: Request;
+}) => Promise<void>;
+/**
+ * After-handler middleware that bumps the session cookie / Redis TTL when a
+ * `code` cookie is present. Errors are swallowed so a failed refresh never breaks
+ * the underlying response.
+ */
+export declare function sessionRefreshMiddleware({ request }: {
+    request: Request;
+}, next: () => Promise<Response>): Promise<Response>;

package/dist/oauth-authorize-url.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Build the Zauru OAuth `dialog/authorize` URL using the host's `request.url` to
+ * derive the `redirect_uri`. Pass `options.state` to mark this authorization as
+ * coming from a reauth popup.
+ */
+export declare function buildOAuthAuthorizeURL(requestUrl: string, options?: {
+    state?: string;
+}): string;

package/dist/reauth-constants.d.ts

@@ -0,0 +1,19 @@
+export type ReauthConstants = {
+    /** OAuth `state` value used when the login is happening inside a popup. */
+    REAUTH_POPUP_OAUTH_STATE: string;
+    /** `postMessage` type emitted by the popup after a successful re-login. */
+    ZAURU_REAUTH_MESSAGE_TYPE: string;
+    /** `postMessage` type emitted by the popup when re-login fails. */
+    ZAURU_REAUTH_FAILURE_TYPE: string;
+};
+/**
+ * Build per-app reauth constants with a deployment-unique prefix so multiple
+ * Appocus apps on the same origin can't interfere with each other's popups.
+ *
+ * ```ts
+ * const reauthConstants = createReauthConstants("4pinos-agrocreditos");
+ * ```
+ */
+export declare function createReauthConstants(appKey: string): ReauthConstants;
+/** Sensible defaults used when the host app never calls `configureAuthRuntime`. */
+export declare const DEFAULT_REAUTH_CONSTANTS: ReauthConstants;

package/dist/reauth-popup.client.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Open the OAuth popup and resolve once the session cookie has been refreshed.
+ * Concurrent callers share a single in-flight promise.
+ */
+export declare function requestReauthInPopup(): Promise<void>;

package/dist/redirect-if-authenticated.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Probes `/api/auth/me` and, on success, navigates to `/`.
+ * Reinforces the server-side redirect for SPA flows where the URL isn't updated
+ * after the route module's middleware runs.
+ */
+export declare function RedirectIfAuthenticated({ meEndpoint, redirectTo, }?: {
+    meEndpoint?: string;
+    redirectTo?: string;
+}): null;

package/dist/route-types.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+/**
+ * Loose component contract every Appocus app's `LoginForm` is expected to
+ * implement. Keeps the auth route factories independent from `@appocus/ui`.
+ */
+export type LoginFormProps = {
+    isLoading?: boolean;
+    mode?: "login" | "logout";
+    title?: string;
+    loadingText?: string;
+    buttonText?: string;
+};
+export type LoginFormComponent = React.ComponentType<LoginFormProps>;
+export type RouteMiddlewareFn = (args: {
+    request: Request;
+}) => Promise<unknown> | unknown;
+export type RouteActionFn<T = unknown> = (args: {
+    request: Request;
+}) => Promise<T>;
+export type RouteLoaderFn<T = unknown> = (args: {
+    request: Request;
+}) => Promise<T>;
+export type RouteModule<TActionData = unknown> = {
+    middleware?: RouteMiddlewareFn[];
+    action?: RouteActionFn<TActionData>;
+    loader?: RouteLoaderFn;
+    default: React.ComponentType<{
+        actionData?: TActionData;
+    }>;
+};

package/dist/routes/callback.d.ts

@@ -0,0 +1,46 @@
+import type { LoginFormComponent, RouteModule } from "../route-types.js";
+/**
+ * Minimal session contract this route depends on. Re-typed locally so we don't
+ * pull `@zauru-sdk/webapp-services` types into the consumer surface.
+ */
+type ZauruSession = {
+    get: (key: string) => unknown;
+    has: (key: string) => boolean;
+};
+export type CallbackSuccessArgs = {
+    session: ZauruSession;
+    codeValue: string;
+    request: Request;
+};
+export type CallbackSuccessResult = {
+    /**
+     * Query params appended to the post-login redirect (`/?<queryParams>`). Used
+     * by apps to seed their local user context with names, ids, etc.
+     */
+    queryParams?: URLSearchParams;
+};
+export type CallbackErrorResult = {
+    error: string;
+};
+export type CallbackActionData = CallbackErrorResult | {
+    ok: true;
+};
+export type CreateCallbackRouteOptions = {
+    /** Your app's `LoginForm` (used as the splash while the action runs). */
+    LoginForm: LoginFormComponent;
+    /**
+     * Called after `nativeLogin` succeeds. Use it to persist domain-specific user
+     * records (employees, agencies, etc.) and to assemble redirect query params.
+     * Throw or return `{ error }` to surface an error to the page.
+     */
+    onSuccess: (args: CallbackSuccessArgs) => Promise<CallbackSuccessResult | CallbackErrorResult>;
+    /**
+     * Optional hook for handling client-side login errors before the default toast
+     * + navigate fallback runs. Return `true` to skip the default behavior.
+     */
+    onLoginError?: (description: string) => boolean | void;
+    /** Optional override for the position of the error toast. */
+    isMobile?: () => boolean;
+};
+export declare function createCallbackRoute({ LoginForm, onSuccess, onLoginError, isMobile: isMobileFn, }: CreateCallbackRouteOptions): RouteModule<CallbackActionData>;
+export {};

package/dist/routes/login-popup.d.ts

@@ -0,0 +1,6 @@
+import type { RouteModule } from "../route-types.js";
+export type CreateLoginPopupRouteOptions = {
+    /** Message shown while the page is redirecting to the OAuth dialog. */
+    redirectingMessage?: string;
+};
+export declare function createLoginPopupRoute(options?: CreateLoginPopupRouteOptions): RouteModule;

package/dist/routes/login.d.ts

@@ -0,0 +1,11 @@
+import type { LoginFormComponent, RouteModule } from "../route-types.js";
+export type CreateLoginRouteOptions = {
+    /** Your app's `LoginForm` (e.g. from `@appocus/ui`). */
+    LoginForm: LoginFormComponent;
+    /**
+     * Override the default action (e.g. to log analytics). Defaults to redirecting
+     * to the OAuth authorize URL derived from `request.url`.
+     */
+    onAction?: (request: Request) => Promise<Response> | Response;
+};
+export declare function createLoginRoute({ LoginForm, onAction, }: CreateLoginRouteOptions): RouteModule;

package/dist/routes/logout.d.ts

@@ -0,0 +1,14 @@
+import type { LoginFormComponent, RouteModule } from "../route-types.js";
+export type CreateLogoutRouteOptions = {
+    /** Your app's `LoginForm` (used in the "Cerrando sesión" splash). */
+    LoginForm: LoginFormComponent;
+    /** Clear app-local user state on the client (e.g. context cache). */
+    clearUserData?: () => void;
+    /** Copy override for the splash (defaults are Spanish to match the rest of the suite). */
+    copy?: {
+        title?: string;
+        loadingText?: string;
+        buttonText?: string;
+    };
+};
+export declare function createLogoutRoute({ LoginForm, clearUserData, copy, }: CreateLogoutRouteOptions): RouteModule;

package/dist/routes/reauth-popup-done.d.ts

@@ -0,0 +1,5 @@
+import type { RouteModule } from "../route-types.js";
+export type CreateReauthPopupDoneRouteOptions = {
+    message?: string;
+};
+export declare function createReauthPopupDoneRoute(options?: CreateReauthPopupDoneRouteOptions): RouteModule;

package/dist/runtime-config.d.ts

@@ -0,0 +1,16 @@
+import { type ReauthConstants } from "./reauth-constants.js";
+export type AuthRuntimeConfig = {
+    reauthConstants: ReauthConstants;
+    /**
+     * Window name passed to `window.open` for the reauth popup. Setting this to a
+     * stable per-app value lets users reuse an already-open popup.
+     */
+    popupWindowName: string;
+};
+/**
+ * Configure the runtime singletons used by `authenticatedFetch`,
+ * `requestReauthInPopup`, and the bundled route factories. Call this once at
+ * client startup (e.g. from `root.tsx`).
+ */
+export declare function configureAuthRuntime(opts: Partial<AuthRuntimeConfig>): AuthRuntimeConfig;
+export declare function getAuthRuntime(): AuthRuntimeConfig;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@appocus/auth-react-router",
+  "version": "0.2.0",
+  "description": "OAuth login flow building blocks for Appocus React Router apps: middlewares, OAuth URL builder, authenticated fetch with reauth popup, and route factories for /login, /logout, /login-popup, /callback and the reauth-popup-done page.",
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "npm run build:esm",
+    "build:esm": "tsc -p tsconfig.esm.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Oscar Cuellar",
+    "email": "usackoka@gmail.com"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@zauru-sdk/webapp-config": "*",
+    "@zauru-sdk/webapp-services": "*",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-router": "^7.0.0",
+    "sonner": "^1.0.0 || ^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@zauru-sdk/webapp-config": "^5.0.3",
+    "@zauru-sdk/webapp-services": "^5.0.3",
+    "react": "^19.0.0",
+    "react-router": "^7.10.1",
+    "sonner": "^2.0.7",
+    "typescript": "^5.1.6"
+  },
+  "gitHead": "51b05d54842786418df070ccbcc9b190d29c88bb"
+}