@loka-sms/sso 1.1.7 → 1.2.0

package/README.md

@@ -206,8 +206,8 @@ function AuthCallback() {
 
 | Export | Description |
 |--------|-------------|
-| `useCrossAppLogout()` | Listens on BroadcastChannel `loka-sso-logout`. Clears auth state and redirects to `/signin`. |
-| `useOAuthCallback(input)` | Handles OAuth2 PKCE code exchange. Returns `{ error, loading, phase }`. |
+| `useCrossAppLogout()` | Listens on BroadcastChannel `loka-sso-logout`. Clears auth state and redirects to `/signin`. Built-in 2-second dedup to prevent re-broadcast loops. |
+| `useOAuthCallback(input)` | Handles OAuth2 PKCE code exchange. Returns `{ error, loading, phase }`. Awaits cookie sync before redirect to prevent landing-page race. |
 | `useIssueTicket(apiBase)` | Issues a one-time ticket using current localStorage/cookie access token. |
 | `useNavigateToApp(apiBase)` | React state wrapper for `navigateToApp()`. |
 

package/dist/auth.js

@@ -12,13 +12,6 @@ const constants_1 = require("./constants");
 const navigation_1 = require("./navigation");
 const ticket_1 = require("./ticket");
 const AuthContext = (0, react_1.createContext)(null);
-function getCookie(name) {
-    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
-    return match ? decodeURIComponent(match[2]) : '';
-}
-function clearCookie(name) {
-    document.cookie = `${name}=; path=/; Max-Age=0; SameSite=Lax`;
-}
 function decodeJwt(token) {
     try {
         return JSON.parse(atob(token.split('.')[1]));
@@ -51,17 +44,7 @@ function userFromToken(token) {
     };
 }
 function persistAuth(token, refreshToken, user) {
-    localStorage.setItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN, token);
-    if (refreshToken)
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.REFRESH_TOKEN, refreshToken);
-    const nextUser = user || userFromToken(token);
-    if (nextUser) {
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE, JSON.stringify(nextUser));
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_ID, nextUser.sub || nextUser.id || '');
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_ROLE, (nextUser.role || '').toLowerCase());
-        if (nextUser.schoolId)
-            localStorage.setItem(constants_1.SSO_STORAGE_KEYS.SCHOOL_ID, nextUser.schoolId);
-    }
+    localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE, JSON.stringify(user || userFromToken(token) || {}));
 }
 function clearAuthStorage() {
     localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN);
@@ -70,29 +53,34 @@ function clearAuthStorage() {
     localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.USER_ID);
     localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.USER_ROLE);
     localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.SCHOOL_ID);
-    clearCookie('sms_ac_token');
-    clearCookie('sms_refresh_token');
-    clearCookie('sms_user_profile');
-    clearCookie('sms_school_id');
 }
-function readStoredAuth() {
-    const token = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN) || getCookie(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN);
-    const refreshToken = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.REFRESH_TOKEN) || getCookie(constants_1.SSO_STORAGE_KEYS.REFRESH_TOKEN);
-    if (!token || isExpired(token))
-        return { token: null, refreshToken: null, user: null };
-    let user = null;
+async function readStoredAuth(apiUrl) {
     try {
-        const cached = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE);
-        if (cached)
-            user = JSON.parse(cached);
+        const res = await fetch(`${apiUrl}/auth/me`, { credentials: 'include' });
+        if (!res.ok)
+            return { token: null, refreshToken: null, user: null };
+        const body = await res.json();
+        const data = body?.data ?? body;
+        const user = {
+            id: data.id || data.sub,
+            sub: data.sub || data.id,
+            name: data.fullName || data.name || data.email,
+            fullName: data.fullName || data.name,
+            email: data.email,
+            role: data.role,
+            schoolId: data.schoolId,
+            accessibleSchools: data.schools || [],
+            features: data.features || [],
+            capabilities: data.capabilities || [],
+        };
+        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE, JSON.stringify(user));
+        return { token: 'cookie-based', refreshToken: null, user };
     }
     catch {
-        user = null;
+        return { token: null, refreshToken: null, user: null };
     }
-    user = user || userFromToken(token);
-    persistAuth(token, refreshToken || undefined, user);
-    return { token, refreshToken, user };
 }
+let refreshAuthPromise = null;
 function broadcast(type, payload) {
     try {
         const channel = new BroadcastChannel(type === 'login' ? constants_1.SSO_CHANNELS.LOGIN : constants_1.SSO_CHANNELS.LOGOUT);
@@ -131,19 +119,24 @@ function SignInPage({ apiUrl, coreUrl }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: "flex min-h-screen items-center justify-center bg-gray-50 px-4", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "w-full max-w-md rounded-2xl bg-white p-8 shadow-lg", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-semibold text-gray-900", children: "Masuk ke Loka SMS" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: "Gunakan akun sekolah Anda untuk melanjutkan." }), error && (0, jsx_runtime_1.jsx)("p", { className: "mt-4 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600", children: error }), (0, jsx_runtime_1.jsxs)("label", { className: "mt-6 block text-sm font-medium text-gray-700", children: ["Email", (0, jsx_runtime_1.jsx)("input", { value: email, onChange: (event) => setEmail(event.target.value), type: "email", required: true, className: "mt-2 w-full rounded-lg border border-gray-300 px-3 py-2 outline-none focus:border-blue-500" })] }), (0, jsx_runtime_1.jsxs)("label", { className: "mt-4 block text-sm font-medium text-gray-700", children: ["Password", (0, jsx_runtime_1.jsx)("input", { value: password, onChange: (event) => setPassword(event.target.value), type: "password", required: true, className: "mt-2 w-full rounded-lg border border-gray-300 px-3 py-2 outline-none focus:border-blue-500" })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: loading, className: "mt-6 w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:opacity-60", children: loading ? 'Memproses...' : 'Masuk' }), apiUrl && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleCoreLogin, className: "mt-3 w-full rounded-lg border border-gray-300 px-4 py-2 font-medium text-gray-700 hover:bg-gray-50", children: "Masuk via Core" }))] }) }));
 }
 function AuthProvider({ apiUrl = '/api', clientId, children }) {
-    const [state, setState] = (0, react_1.useState)(() => {
-        const stored = readStoredAuth();
-        return {
-            user: stored.user,
-            token: stored.token,
-            refreshToken: stored.refreshToken,
-            isLoading: false,
-        };
+    const [state, setState] = (0, react_1.useState)({
+        user: null,
+        token: null,
+        refreshToken: null,
+        isLoading: true,
     });
-    const refreshAuth = () => {
-        const stored = readStoredAuth();
-        setState((prev) => ({ ...prev, ...stored, isLoading: false }));
+    const refreshAuth = async () => {
+        if (refreshAuthPromise)
+            return refreshAuthPromise;
+        refreshAuthPromise = (async () => {
+            const stored = await readStoredAuth(apiUrl);
+            setState((prev) => ({ ...prev, ...stored, isLoading: false }));
+        })().finally(() => { refreshAuthPromise = null; });
+        return refreshAuthPromise;
     };
+    (0, react_1.useEffect)(() => {
+        refreshAuth();
+    }, [apiUrl]);
     (0, react_1.useEffect)(() => {
         const onStorage = (event) => {
             if (event.key === constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN || event.key === constants_1.SSO_STORAGE_KEYS.USER_PROFILE)
@@ -201,8 +194,15 @@ function AuthProvider({ apiUrl = '/api', clientId, children }) {
             const token = data.token || data.accessToken;
             const refreshToken = data.refreshToken;
             const user = data.user || userFromToken(token);
-            if (!token || !refreshToken)
+            if (!token)
                 throw new Error('Token login tidak lengkap.');
+            if (refreshToken) {
+                await fetch(`${apiUrl}/auth/set-cookie`, {
+                    method: 'POST', headers: { 'Content-Type': 'application/json' },
+                    credentials: 'include',
+                    body: JSON.stringify({ token, refreshToken }),
+                }).catch(() => { });
+            }
             persistAuth(token, refreshToken, user);
             setState({ user, token, refreshToken, isLoading: false });
             broadcast('login', { token, user });

package/dist/components/OAuthCallback.d.ts

@@ -7,4 +7,4 @@ export interface OAuthCallbackProps extends Omit<OAuthCallbackInput, 'apiBase' |
     loginLinkText?: string;
     loginPath?: string;
 }
-export declare function OAuthCallback({ clientId, apiBase, redirectPath, loadingText, errorText, loginLinkText, loginPath, }: OAuthCallbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function OAuthCallback({ clientId, apiBase, redirectPath, loadingText, errorText, loginLinkText, loginPath, }: OAuthCallbackProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/OAuthCallback.js

@@ -6,7 +6,10 @@ const useOAuthCallback_1 = require("../hooks/useOAuthCallback");
 function OAuthCallback({ clientId, apiBase, redirectPath, loadingText = 'Menyelesaikan login...', errorText, loginLinkText = 'Kembali ke login', loginPath = '/signin', }) {
     const { error, loading, phase } = (0, useOAuthCallback_1.useOAuthCallback)({ clientId, apiBase, redirectPath });
     if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-red-500 mb-4", children: errorText || error }), (0, jsx_runtime_1.jsx)("a", { href: loginPath, className: "text-brand-500 hover:text-brand-600", children: loginLinkText })] }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-sm text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center w-16 h-16 rounded-2xl bg-red-100 dark:bg-red-900/30", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-8 h-8 text-red-600 dark:text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" }) }) }) }), (0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", children: "Login Gagal" }), (0, jsx_runtime_1.jsx)("div", { className: "rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4 mb-4 text-left", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorText || error }) }), (0, jsx_runtime_1.jsx)("a", { href: loginPath, className: "inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-brand-500 text-white text-sm font-medium hover:bg-brand-600 transition", children: loginLinkText })] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500", children: loadingText }) }));
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-sm text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center w-16 h-16 rounded-2xl bg-brand-500", children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-8 h-8 text-white animate-spin", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }) }) }), (0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-1", children: "Login" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: loadingText })] }) }));
+    }
+    return null;
 }

package/dist/components/OAuthTransfer.d.ts

@@ -3,5 +3,6 @@ export interface OAuthTransferProps {
     redirectPath?: string;
     loginPath?: string;
     clientId?: string;
+    coreFrontendUrl?: string;
 }
-export declare function OAuthTransfer({ apiBase, redirectPath, loginPath, clientId, }: OAuthTransferProps): import("react/jsx-runtime").JSX.Element;
+export declare function OAuthTransfer({ apiBase, redirectPath, loginPath, clientId, coreFrontendUrl, }: OAuthTransferProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/OAuthTransfer.js

@@ -6,9 +6,42 @@ const react_1 = require("react");
 const constants_1 = require("../constants");
 const ticket_1 = require("../ticket");
 const processedTickets = new Set();
-function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', clientId, }) {
-    const [state, setState] = (0, react_1.useState)('loading');
+const APP_NAMES = {
+    core: 'Portal Utama',
+    administrasi: 'Administrasi',
+    elearning: 'E-Learning',
+    presensi: 'Presensi Digital',
+    erapor: 'E-Rapor',
+    keuangan: 'Keuangan',
+    ppdb: 'PPDB',
+    notifikasi: 'Notifikasi',
+    cms: 'CMS Platform',
+};
+function resolveAppName(clientId) {
+    return (clientId && APP_NAMES[clientId]) || 'Aplikasi';
+}
+function isSafeRedirect(destination, origin) {
+    if (!destination || destination === '' || destination === '/')
+        return true;
+    if (destination.startsWith('/') && !destination.startsWith('//'))
+        return true;
+    try {
+        const url = new URL(destination, origin);
+        return url.origin === origin;
+    }
+    catch {
+        return false;
+    }
+}
+function stripQueryParams() {
+    const url = new URL(window.location.href);
+    url.search = '';
+    window.history.replaceState({}, '', url.toString());
+}
+function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', clientId, coreFrontendUrl = '/', }) {
+    const [phase, setPhase] = (0, react_1.useState)('init');
     const [error, setError] = (0, react_1.useState)('');
+    const [destApp, setDestApp] = (0, react_1.useState)(resolveAppName(clientId));
     const hasProcessed = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         if (hasProcessed.current)
@@ -18,9 +51,12 @@ function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', cli
         const ticket = params.get('ticket');
         const token = params.get('token');
         const refreshToken = params.get('refreshToken') || params.get('refresh_token');
-        const next = params.get('next') || redirectPath;
+        const rawNext = params.get('next') || redirectPath;
         const base = apiBase || '/api';
+        const next = isSafeRedirect(rawNext, window.location.origin) ? rawNext : '/';
+        stripQueryParams();
         async function fetchProfile(accessToken) {
+            setPhase('fetching-profile');
             try {
                 const profileRes = await fetch(`${base}/auth/me`, {
                     headers: { Authorization: `Bearer ${accessToken}` },
@@ -30,11 +66,10 @@ function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', cli
                 const profile = profileData?.data ?? profileData;
                 if (profile) {
                     localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE, JSON.stringify(profile));
-                    document.cookie = `sms_user_profile=${encodeURIComponent(JSON.stringify(profile))}; path=/; SameSite=Lax`;
                 }
             }
             catch {
-                // Profile sync is non-critical; token already exists in localStorage.
+                // Profile sync is non-critical
             }
         }
         async function handleTicketExchange() {
@@ -44,36 +79,43 @@ function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', cli
                 return;
             processedTickets.add(ticket);
             try {
+                setPhase('exchanging');
                 const data = await (0, ticket_1.exchangeTicket)({ apiBase: base, ticket, clientId });
                 (0, ticket_1.persistTicketAuth)(data.accessToken, data.refreshToken, data.user);
                 (0, ticket_1.broadcastTicketLogin)(data.accessToken, data.user);
-                fetchProfile(data.accessToken);
-                setState('success');
-                setTimeout(() => { window.location.href = next; }, 500);
+                await fetchProfile(data.accessToken);
+                setDestApp(resolveAppName(clientId));
+                setPhase('redirecting');
+                setTimeout(() => { window.location.href = next; }, 800);
             }
             catch (e) {
                 processedTickets.delete(ticket);
-                setState('error');
+                setPhase('error');
                 setError(e.message || 'Gagal menukar ticket.');
             }
         }
-        function handleLegacyToken() {
+        async function handleLegacyToken() {
             if (!token) {
-                setState('error');
+                setPhase('error');
                 setError('Parameter tidak valid. Ticket atau token diperlukan.');
                 return;
             }
+            setPhase('exchanging');
             (0, ticket_1.persistTicketAuth)(token, refreshToken || undefined);
             (0, ticket_1.broadcastTicketLogin)(token);
-            fetch(`${base}/auth/set-cookie`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ token, refreshToken }),
-            }).catch(() => { });
-            fetchProfile(token);
-            setState('success');
-            setTimeout(() => { window.location.href = next; }, 500);
+            try {
+                await fetch(`${base}/auth/set-cookie`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'include',
+                    body: JSON.stringify({ token, refreshToken }),
+                });
+            }
+            catch { /* non-critical */ }
+            await fetchProfile(token);
+            setDestApp(resolveAppName(clientId));
+            setPhase('redirecting');
+            setTimeout(() => { window.location.href = next; }, 800);
         }
         if (ticket) {
             handleTicketExchange();
@@ -81,5 +123,20 @@ function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', cli
         }
         handleLegacyToken();
     }, [apiBase, clientId, redirectPath]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [state === 'loading' && (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500", children: "Menyelesaikan login..." }), state === 'success' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-green-600 font-medium", children: "Login berhasil!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "Mengalihkan..." })] })), state === 'error' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-red-500 mb-2", children: "Login gagal" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mb-4", children: error }), (0, jsx_runtime_1.jsx)("a", { href: loginPath, children: "Kembali ke login" })] }))] }) }));
+    const steps = [
+        { key: 'exchanging', label: 'Memvalidasi sesi' },
+        { key: 'fetching-profile', label: 'Memuat profil' },
+        { key: 'redirecting', label: `Mengalihkan ke ${destApp}` },
+    ];
+    const isError = phase === 'error';
+    const isDone = phase === 'redirecting' || phase === 'success';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950 px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-sm text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: `flex items-center justify-center w-16 h-16 rounded-2xl ${isError ? 'bg-red-100 dark:bg-red-900/30' : isDone ? 'bg-green-100 dark:bg-green-900/30' : 'bg-brand-500'}`, children: isError ? ((0, jsx_runtime_1.jsx)("svg", { className: "w-8 h-8 text-red-600 dark:text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" }) })) : isDone ? ((0, jsx_runtime_1.jsx)("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : ((0, jsx_runtime_1.jsxs)("svg", { className: "w-8 h-8 text-white animate-spin", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] })) }) }), (0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-1", children: isError ? 'Login Gagal' : isDone ? 'Login Berhasil' : 'Menyelesaikan Login' }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-6", children: isError ? 'Terjadi kesalahan saat memproses sesi Anda' : `Mengalihkan Anda ke ${destApp}` }), !isError && !isDone && ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3 mb-6", children: steps.map((step, i) => {
+                        const active = phase === step.key;
+                        const completed = steps.findIndex(s => s.key === phase) > i;
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium shrink-0 ${completed ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' :
+                                        active ? 'bg-brand-100 text-brand-600 dark:bg-brand-900/30 dark:text-brand-400' :
+                                            'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500'}`, children: completed ? '✓' : i + 1 }), (0, jsx_runtime_1.jsx)("span", { className: `text-sm ${completed ? 'text-green-600 dark:text-green-400' :
+                                        active ? 'text-brand-600 dark:text-brand-400 font-medium' :
+                                            'text-gray-400 dark:text-gray-500'}`, children: step.label }), active && ((0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-brand-500 border-t-transparent ml-auto" }))] }, step.key));
+                    }) })), isDone && ((0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2 text-sm text-green-600 dark:text-green-400", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-green-500 border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { children: "Mengalihkan..." })] }) })), isError && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4 text-left", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-700 dark:text-red-300", children: error }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("a", { href: coreFrontendUrl, className: "inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-brand-500 text-white text-sm font-medium hover:bg-brand-600 transition", children: "Kembali ke Portal Utama" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => window.location.reload(), className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition", children: "Coba lagi" })] })] }))] }) }));
 }

package/dist/hooks/useCrossAppLogout.js

@@ -2,20 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCrossAppLogout = useCrossAppLogout;
 const react_1 = require("react");
+const LOGOUT_EVENT_WINDOW_MS = 2000;
+let lastLogoutEventAt = 0;
 function useCrossAppLogout(options) {
     const redirectPath = options?.redirectPath || '/signin';
     (0, react_1.useEffect)(() => {
         const cleanup = [];
-        const bc = new BroadcastChannel('loka-sso-logout');
-        bc.onmessage = () => {
+        const processRemoteLogout = () => {
+            const now = Date.now();
+            if (now - lastLogoutEventAt < LOGOUT_EVENT_WINDOW_MS)
+                return;
+            lastLogoutEventAt = now;
             options?.onLogout?.();
             window.location.href = redirectPath;
         };
+        const bc = new BroadcastChannel('loka-sso-logout');
+        bc.onmessage = processRemoteLogout;
         cleanup.push(() => bc.close());
         const handler = (event) => {
             if (event.key === 'sms_ac_token' && !event.newValue) {
-                options?.onLogout?.();
-                window.location.href = redirectPath;
+                processRemoteLogout();
             }
         };
         window.addEventListener('storage', handler);

package/dist/hooks/useOAuthCallback.js

@@ -4,19 +4,13 @@ exports.useOAuthCallback = useOAuthCallback;
 const react_1 = require("react");
 const processedMarkers = new Set();
 function saveJwt(token, refreshToken) {
-    localStorage.setItem('sms_ac_token', token);
-    if (refreshToken)
-        localStorage.setItem('sms_refresh_token', refreshToken);
     try {
         const payload = JSON.parse(atob(token.split('.')[1]));
         const userObj = {
             sub: payload.sub, email: payload.email, fullName: payload.fullName,
             name: payload.fullName, role: payload.role, schoolId: payload.schoolId,
-            features: payload.features || [], accessibleSchools: payload.accessibleSchools || [],
         };
-        localStorage.setItem('lms_user', JSON.stringify(userObj));
-        localStorage.setItem('user_role', (payload.role || '').toLowerCase());
-        localStorage.setItem('user_id', payload.sub || '');
+        localStorage.setItem('sms_user_profile', JSON.stringify(userObj));
         if (payload.schoolId)
             localStorage.setItem('school_sms_id', payload.schoolId);
     }
@@ -41,7 +35,7 @@ function useOAuthCallback(input) {
             setState({ error: 'Token tidak ditemukan.', loading: false, phase: 'error' });
             return;
         }
-        // Phase 2 & 3 — Save JWT FIRST, then redirect (API calls fire-and-forget)
+        // Phase 2 & 3 — Save JWT first, then synchronize Gateway cookies before redirect.
         (async () => {
             let accessToken = token || '';
             let refreshTok = refreshToken || '';
@@ -50,6 +44,9 @@ function useOAuthCallback(input) {
                     setState({ error: null, loading: true, phase: 'exchange' });
                     const codeVerifier = sessionStorage.getItem(`oauth_verifier_${oauthState || ''}`) || '';
                     sessionStorage.removeItem(`oauth_verifier_${oauthState || ''}`);
+                    if (!codeVerifier) {
+                        throw new Error('Missing code verifier');
+                    }
                     const res = await fetch(`${apiBase}/oauth/token`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
@@ -75,22 +72,32 @@ function useOAuthCallback(input) {
                 }
                 // 1. Save token from JWT decode FIRST — no network needed
                 saveJwt(accessToken, refreshTok);
-                await fetch(`${apiBase}/auth/set-cookie`, {
-                    method: 'POST', headers: { 'Content-Type': 'application/json' },
-                    credentials: 'include',
-                    body: JSON.stringify({ token: accessToken, refreshToken: refreshTok }),
-                });
-                fetch(`${apiBase}/auth/me`, {
+                // 2. Set cookie before redirecting so the landing app does not race /auth/me.
+                const controller = new AbortController();
+                const timeout = setTimeout(() => controller.abort(), 3000);
+                try {
+                    await fetch(`${apiBase}/auth/set-cookie`, {
+                        method: 'POST', headers: { 'Content-Type': 'application/json' },
+                        credentials: 'include',
+                        body: JSON.stringify({ token: accessToken, refreshToken: refreshTok }),
+                        signal: controller.signal,
+                    });
+                }
+                catch {
+                    // /oauth/token also sets the auth cookie; do not fail the callback if this fallback is slow.
+                }
+                finally {
+                    clearTimeout(timeout);
+                }
+                await fetch(`${apiBase}/auth/me`, {
                     headers: { Authorization: `Bearer ${accessToken}` },
                     credentials: 'include',
                 }).then(r => r.json()).then(d => {
                     const p = d?.data ?? d;
-                    if (p) {
+                    if (p)
                         localStorage.setItem('sms_user_profile', JSON.stringify(p));
-                        document.cookie = `sms_user_profile=${encodeURIComponent(JSON.stringify(p))}; path=/; SameSite=Lax`;
-                    }
                 }).catch(() => { });
-                // 2. Redirect after Gateway cookies are persisted.
+                // 3. Redirect after the cookie/profile sync attempt completes.
                 setState({ error: null, loading: false, phase: 'done' });
                 window.location.href = input.redirectPath || '/';
             }

package/dist/interceptor.js

@@ -2,23 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAuthInterceptor = createAuthInterceptor;
 const constants_1 = require("./constants");
-function getCookie(name) {
-    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
-    return match ? decodeURIComponent(match[2]) : '';
-}
 function createAuthInterceptor() {
     return (config) => {
-        const token = getCookie(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN) || localStorage.getItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN);
-        if (token) {
-            config.headers[constants_1.API_HEADERS.AUTHORIZATION] = `Bearer ${token}`;
-        }
-        const schoolId = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.SCHOOL_ID) || getCookie('sms_school_id');
+        const schoolId = localStorage.getItem('school_sms_id');
         if (schoolId) {
             config.headers[constants_1.API_HEADERS.SCHOOL_ID] = schoolId;
         }
-        config.headers[constants_1.API_HEADERS.USER_ID] = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.USER_ID) || '';
-        config.headers[constants_1.API_HEADERS.USER_ROLE] = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.USER_ROLE) || '';
-        config.headers[constants_1.API_HEADERS.DEVICE_ID] = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.DEVICE_ID) || 'web-unknown';
+        config.headers[constants_1.API_HEADERS.DEVICE_ID] = localStorage.getItem('device_sms_id') || 'web-unknown';
         config.headers[constants_1.API_HEADERS.REQUEST_ID] = crypto.randomUUID();
         return config;
     };

package/dist/navigation.js

@@ -3,11 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildTransferUrl = buildTransferUrl;
 exports.navigateToApp = navigateToApp;
 const ticket_1 = require("./ticket");
-function resolveUrl(url) {
-    return new URL(url, window.location.origin);
+function isTrustedOrigin(origin) {
+    try {
+        const url = new URL(origin);
+        return url.origin === window.location.origin;
+    }
+    catch {
+        return false;
+    }
 }
 function buildTransferUrl(targetUrl, ticket, next) {
-    const target = resolveUrl(targetUrl);
+    const target = new URL(targetUrl, window.location.origin);
+    if (!isTrustedOrigin(target.origin)) {
+        throw new Error('Target origin tidak dikenal');
+    }
     const transferUrl = new URL('/auth/transfer', target.origin);
     const nextPath = next || `${target.pathname}${target.search}${target.hash}` || '/';
     transferUrl.searchParams.set('ticket', ticket);
@@ -28,6 +37,8 @@ function openDestination(url, targetBlank, existingTab) {
 async function navigateToApp({ targetUrl, apiBase = '/api', accessToken, clientId, targetBlank = true, next, fallbackToPlainUrl = true, }) {
     const token = accessToken || (0, ticket_1.getStoredAccessToken)();
     if (!token) {
+        if (!fallbackToPlainUrl)
+            throw new Error('Token tidak ditemukan');
         openDestination(targetUrl, targetBlank);
         return;
     }
@@ -40,6 +51,10 @@ async function navigateToApp({ targetUrl, apiBase = '/api', accessToken, clientI
         }
     }
     try {
+        const target = new URL(targetUrl, window.location.origin);
+        if (!isTrustedOrigin(target.origin)) {
+            throw new Error('Target origin tidak dikenal');
+        }
         const issued = await (0, ticket_1.issueTicket)({
             apiBase,
             accessToken: token,

package/dist/oauthRedirect.js

@@ -6,11 +6,6 @@ const pkce_1 = require("./pkce");
 function trimTrailingSlash(value) {
     return value.replace(/\/+$/, '');
 }
-function getCookie(name) {
-    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const match = document.cookie.match(new RegExp(`(^| )${escaped}=([^;]+)`));
-    return match ? decodeURIComponent(match[2]) : '';
-}
 function decodeJwt(token) {
     try {
         const parts = token.split('.');
@@ -28,35 +23,26 @@ function isTokenExpired(token) {
         return false;
     return payload.exp * 1000 <= Date.now();
 }
-function hasCompleteAuth() {
-    return hasSsoToken();
+async function hasCompleteAuth(apiBase) {
+    try {
+        const res = await fetch(`${trimTrailingSlash(apiBase)}/auth/me`, {
+            credentials: 'include',
+        });
+        return res.ok;
+    }
+    catch {
+        return false;
+    }
 }
 function hasSsoToken() {
-    const token = getCookie('sms_ac_token') || localStorage.getItem('sms_ac_token');
-    if (!token)
-        return false;
-    if (isTokenExpired(token))
-        return false;
-    return true;
+    return false;
 }
 async function redirectToOAuthLogin({ clientId, apiBase = '/api', callbackPath = '/auth/callback', authenticatedPath = '/', }) {
-    if (hasCompleteAuth()) {
+    const authed = await hasCompleteAuth(apiBase);
+    if (authed) {
         window.location.href = authenticatedPath;
         return;
     }
-    // Only clear an expired token. A valid token without a cached profile can
-    // still bootstrap the target app through /auth/me.
-    const staleToken = getCookie('sms_ac_token') || localStorage.getItem('sms_ac_token');
-    if (staleToken && isTokenExpired(staleToken)) {
-        localStorage.removeItem('sms_ac_token');
-        localStorage.removeItem('sms_refresh_token');
-        localStorage.removeItem('lms_user');
-        localStorage.removeItem('user_role');
-        localStorage.removeItem('user_id');
-        localStorage.removeItem('school_sms_id');
-        document.cookie = 'sms_ac_token=; path=/; Max-Age=0; SameSite=Lax';
-        document.cookie = 'sms_refresh_token=; path=/; Max-Age=0; SameSite=Lax';
-    }
     const state = (0, pkce_1.generateState)();
     const codeVerifier = (0, pkce_1.generateCodeVerifier)();
     const codeChallenge = await (0, pkce_1.generateCodeChallenge)(codeVerifier);

package/dist/ticket.js

@@ -10,13 +10,8 @@ const constants_1 = require("./constants");
 function trimTrailingSlash(value) {
     return value.replace(/\/+$/, '');
 }
-function getCookie(name) {
-    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const match = document.cookie.match(new RegExp(`(^| )${escaped}=([^;]+)`));
-    return match ? decodeURIComponent(match[2]) : '';
-}
 function getStoredAccessToken() {
-    return localStorage.getItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN) || getCookie(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN);
+    return '';
 }
 function getApiBase(apiBase) {
     return trimTrailingSlash(apiBase || '/api');
@@ -29,14 +24,10 @@ async function parseJsonResponse(response) {
     return body?.data ?? body;
 }
 async function issueTicket(options = {}) {
-    const accessToken = options.accessToken || getStoredAccessToken();
-    if (!accessToken)
-        throw new Error('Not authenticated');
     const response = await fetch(`${getApiBase(options.apiBase)}/sso/issue-ticket`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${accessToken}`,
         },
         credentials: 'include',
         signal: options.signal,
@@ -94,18 +85,11 @@ function decodeUserFromToken(token) {
     }
 }
 function persistTicketAuth(accessToken, refreshToken, user) {
-    localStorage.setItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN, accessToken);
-    if (refreshToken)
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.REFRESH_TOKEN, refreshToken);
     const profile = user || decodeUserFromToken(accessToken);
     if (profile) {
         localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE, JSON.stringify(profile));
-        localStorage.setItem('lms_user', JSON.stringify(profile));
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_ROLE, (profile.role || '').toLowerCase());
-        localStorage.setItem(constants_1.SSO_STORAGE_KEYS.USER_ID, profile.sub || profile.id || '');
         if (profile.schoolId)
             localStorage.setItem(constants_1.SSO_STORAGE_KEYS.SCHOOL_ID, profile.schoolId);
-        document.cookie = `sms_user_profile=${encodeURIComponent(JSON.stringify(profile))}; path=/; SameSite=Lax`;
     }
 }
 function broadcastTicketLogin(accessToken, user) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loka-sms/sso",
-  "version": "1.1.7",
-  "description": "SSO utilities, hooks, and components for Loka SMS modules (OAuth2 PKCE, cross-app logout)",
+  "version": "1.2.0",
+  "description": "SSO utilities, hooks, and components for Loka SMS modules (OAuth2 PKCE, cross-app logout, infinite-loop protection)",
   "license": "MIT",
   "type": "commonjs",
   "main": "dist/index.js",