@loka-sms/sso 1.1.0 → 1.1.6

package/README.md

@@ -2,7 +2,7 @@
 
 SSO utilities, hooks, and components for Loka SMS modules.
 
-**Cookie-first auth** for same-domain apps. **OAuth2 PKCE** for third-party/external apps.
+**Ticket exchange + localStorage auth** for cross-app navigation. **OAuth2 PKCE** for third-party/external apps.
 
 ## Install
 
@@ -10,9 +10,67 @@ SSO utilities, hooks, and components for Loka SMS modules.
 npm install @loka-sms/sso
 ```
 
-## Quick Start — Same-Domain App (Cookie-First)
+## Quick Start — Cross-App Ticket Transfer
 
-App runs on same domain as Gateway (e.g. `10.7.1.82`). Cookie `sms_ac_token` shared across all ports.
+Gateway issues a short one-time ticket. The target app receives `/auth/transfer?ticket=...`, exchanges it for `accessToken` + `refreshToken`, stores both in `localStorage`, then redirects.
+
+### 1. Navigate from source app
+
+```ts
+import { navigateToApp } from '@loka-sms/sso';
+
+await navigateToApp({
+  targetUrl: import.meta.env.VITE_ADMIN_URL,
+  apiBase: import.meta.env.VITE_API_URL || '/api',
+  clientId: 'core',
+  targetBlank: true,
+});
+```
+
+`navigateToApp()` matches the current Gateway contract:
+
+| Step | Request |
+|------|---------|
+| Issue ticket | `POST /api/sso/issue-ticket` with body `{ client_id, redirect }` and `Authorization: Bearer <accessToken>` |
+| Open app | `<target-origin>/auth/transfer?ticket=<uuid>&next=<path>` |
+
+The helper opens `about:blank` synchronously first when `targetBlank=true`, so browser popup blockers do not block the cross-app navigation.
+
+Use the lower-level helper if you only need a ticket:
+
+```ts
+import { issueTicket } from '@loka-sms/sso';
+
+const { ticket, expiresIn } = await issueTicket({
+  apiBase: '/api',
+  clientId: 'core',
+  redirect: 'https://admin.example.com',
+});
+```
+
+### 2. Handle transfer in target app
+
+```tsx
+import { OAuthTransfer } from '@loka-sms/sso';
+
+<Route
+  path="/auth/transfer"
+  element={<OAuthTransfer apiBase="/api" clientId="administrasi" />}
+/>
+```
+
+Supported URL formats:
+
+| URL | Behavior |
+|-----|----------|
+| `/auth/transfer?ticket=<uuid>&next=/` | Exchanges ticket at `POST /sso/exchange`, stores tokens, redirects to `next` |
+| `/auth/transfer?token=<jwt>&refreshToken=<jwt>` | Legacy fallback, stores URL tokens directly |
+
+The component is guarded with `useRef`, so React dev-mode double effects do not consume single-use tickets twice.
+
+## Quick Start — Same-Domain App
+
+App runs on same domain as Gateway (e.g. `10.7.1.82`). Cookie `sms_ac_token` can still be used, but `localStorage` is now the primary app-side cache.
 
 ### 1. Setup API client
 
@@ -150,6 +208,17 @@ function AuthCallback() {
 |--------|-------------|
 | `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 }`. |
+| `useIssueTicket(apiBase)` | Issues a one-time ticket using current localStorage/cookie access token. |
+| `useNavigateToApp(apiBase)` | React state wrapper for `navigateToApp()`. |
+
+### Ticket Utilities
+
+| Export | Description |
+|--------|-------------|
+| `issueTicket(options)` | Calls `POST /sso/issue-ticket` with `{ client_id, redirect }`. |
+| `exchangeTicket(options)` | Calls `POST /sso/exchange` with `{ ticket, clientId }`. |
+| `navigateToApp(options)` | Issues ticket, opens target `/auth/transfer?ticket=...&next=...`. |
+| `buildTransferUrl(targetUrl, ticket, next?)` | Builds the target app transfer URL without network calls. |
 
 **`useOAuthCallback` input:**
 
@@ -164,7 +233,7 @@ function AuthCallback() {
 | Export | Description |
 |--------|-------------|
 | `<OAuthCallback clientId />` | Drop-in OAuth2 PKCE callback page. Wraps `useOAuthCallback`. |
-| `<OAuthTransfer />` | **Deprecated.** Legacy token-in-URL handler. Use cookie-first auth instead. |
+| `<OAuthTransfer />` | Handles ticket exchange (`?ticket=`) and legacy token-in-URL fallback. |
 
 ### PKCE Utilities
 
@@ -186,8 +255,9 @@ function AuthCallback() {
 ## Architecture
 
 ```
-Same-domain apps (10.7.1.82:*) → cookie sms_ac_token shared → auto-login
+Cross-app modules → short ticket in URL → `/sso/exchange` → localStorage tokens
+Same-domain apps (10.7.1.82:*) → cookie/localStorage token → auto-login
 Third-party apps (external domain) → OAuth2 PKCE → code exchange → token
 ```
 
-Cookie `sms_ac_token` is the single source of truth for authentication on same domain. `localStorage` is cache only. See [docs/flow_baru.md](../../docs/flow_baru.md) for full architecture.
+Ticket URLs should carry only a short one-time ticket, never the full JWT. See [docs/flow_baru.md](../../docs/flow_baru.md) for full architecture.

package/dist/auth.d.ts

@@ -0,0 +1,39 @@
+import { type IssueTicketResponse } from './ticket';
+export interface AuthUser {
+    id?: string;
+    sub?: string;
+    name?: string;
+    fullName?: string;
+    email?: string;
+    role?: string;
+    schoolId?: string;
+    [key: string]: any;
+}
+interface AuthContextValue {
+    user: AuthUser | null;
+    token: string | null;
+    refreshToken: string | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    login: (email: string, password: string) => Promise<void>;
+    logout: () => Promise<void>;
+    refreshAuth: () => void;
+    issueTicket: (redirect?: string) => Promise<IssueTicketResponse>;
+    navigateToApp: (targetUrl: string, targetBlank?: boolean) => Promise<void>;
+}
+interface AuthProviderProps {
+    apiUrl?: string;
+    gatewayUrl?: string;
+    coreUrl?: string;
+    clientId?: string;
+    children: React.ReactNode;
+}
+export interface AuthAppProps extends Omit<AuthProviderProps, 'children'> {
+    children: React.ReactNode;
+}
+export declare function useAuth(): AuthContextValue;
+export declare function ProtectedRoute({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AuthApp({ apiUrl, gatewayUrl, coreUrl, clientId, children, }: AuthAppProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/auth.js

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAuth = useAuth;
+exports.ProtectedRoute = ProtectedRoute;
+exports.AuthApp = AuthApp;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const OAuthCallback_1 = require("./components/OAuthCallback");
+const OAuthTransfer_1 = require("./components/OAuthTransfer");
+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]));
+    }
+    catch {
+        return null;
+    }
+}
+function isExpired(token) {
+    const payload = decodeJwt(token);
+    if (!payload?.exp)
+        return false;
+    return payload.exp * 1000 <= Date.now();
+}
+function userFromToken(token) {
+    const payload = decodeJwt(token);
+    if (!payload)
+        return null;
+    return {
+        id: payload.sub,
+        sub: payload.sub,
+        name: payload.fullName || payload.name || payload.email,
+        fullName: payload.fullName || payload.name,
+        email: payload.email,
+        role: payload.role,
+        schoolId: payload.schoolId,
+        accessibleSchools: payload.accessibleSchools || [],
+        features: payload.features || [],
+        capabilities: payload.capabilities || [],
+    };
+}
+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);
+    }
+}
+function clearAuthStorage() {
+    localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.ACCESS_TOKEN);
+    localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.REFRESH_TOKEN);
+    localStorage.removeItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE);
+    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;
+    try {
+        const cached = localStorage.getItem(constants_1.SSO_STORAGE_KEYS.USER_PROFILE);
+        if (cached)
+            user = JSON.parse(cached);
+    }
+    catch {
+        user = null;
+    }
+    user = user || userFromToken(token);
+    persistAuth(token, refreshToken || undefined, user);
+    return { token, refreshToken, user };
+}
+function broadcast(type, payload) {
+    try {
+        const channel = new BroadcastChannel(type === 'login' ? constants_1.SSO_CHANNELS.LOGIN : constants_1.SSO_CHANNELS.LOGOUT);
+        channel.postMessage(payload || { type });
+        channel.close();
+    }
+    catch {
+        // BroadcastChannel is optional.
+    }
+}
+function SignInPage({ apiUrl, coreUrl }) {
+    const { login } = useAuth();
+    const navigate = (0, react_router_1.useNavigate)();
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setLoading(true);
+        setError('');
+        try {
+            await login(email, password);
+            navigate('/', { replace: true });
+        }
+        catch (err) {
+            setError(err?.message || 'Login gagal. Periksa email dan password.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleCoreLogin = () => {
+        window.location.href = `${coreUrl || '/'}${coreUrl?.includes('?') ? '&' : '?'}redirect=${encodeURIComponent(window.location.href)}`;
+    };
+    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 refreshAuth = () => {
+        const stored = readStoredAuth();
+        setState((prev) => ({ ...prev, ...stored, isLoading: false }));
+    };
+    (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)
+                refreshAuth();
+        };
+        window.addEventListener('storage', onStorage);
+        let loginChannel = null;
+        let logoutChannel = null;
+        try {
+            loginChannel = new BroadcastChannel(constants_1.SSO_CHANNELS.LOGIN);
+            loginChannel.onmessage = refreshAuth;
+            logoutChannel = new BroadcastChannel(constants_1.SSO_CHANNELS.LOGOUT);
+            logoutChannel.onmessage = () => setState({ user: null, token: null, refreshToken: null, isLoading: false });
+        }
+        catch {
+            // BroadcastChannel is optional.
+        }
+        return () => {
+            window.removeEventListener('storage', onStorage);
+            loginChannel?.close();
+            logoutChannel?.close();
+        };
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({
+        user: state.user,
+        token: state.token,
+        refreshToken: state.refreshToken,
+        isAuthenticated: Boolean(state.token && state.user),
+        isLoading: state.isLoading,
+        refreshAuth,
+        issueTicket: async (redirect) => (0, ticket_1.issueTicket)({
+            apiBase: apiUrl,
+            accessToken: state.token || undefined,
+            clientId,
+            redirect,
+        }),
+        navigateToApp: async (targetUrl, targetBlank = true) => (0, navigation_1.navigateToApp)({
+            targetUrl,
+            apiBase: apiUrl,
+            accessToken: state.token || undefined,
+            clientId,
+            targetBlank,
+        }),
+        login: async (email, password) => {
+            const response = await fetch(`${apiUrl}/auth/login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ email, password }),
+            });
+            const body = await response.json().catch(() => ({}));
+            if (!response.ok)
+                throw new Error(body.message || 'Login gagal.');
+            const data = body?.data ?? body;
+            const token = data.token || data.accessToken;
+            const refreshToken = data.refreshToken;
+            const user = data.user || userFromToken(token);
+            if (!token || !refreshToken)
+                throw new Error('Token login tidak lengkap.');
+            persistAuth(token, refreshToken, user);
+            setState({ user, token, refreshToken, isLoading: false });
+            broadcast('login', { token, user });
+        },
+        logout: async () => {
+            clearAuthStorage();
+            setState({ user: null, token: null, refreshToken: null, isLoading: false });
+            broadcast('logout');
+            fetch(`${apiUrl}/auth/logout`, { method: 'POST', credentials: 'include' }).catch(() => { });
+        },
+    }), [apiUrl, clientId, state]);
+    return (0, jsx_runtime_1.jsx)(AuthContext.Provider, { value: value, children: children });
+}
+function useAuth() {
+    const value = (0, react_1.useContext)(AuthContext);
+    if (!value)
+        throw new Error('useAuth must be used inside AuthApp');
+    return value;
+}
+function ProtectedRoute({ children }) {
+    const { isAuthenticated, isLoading } = useAuth();
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)("div", { className: "flex min-h-screen items-center justify-center", children: "Memuat..." });
+    if (!isAuthenticated)
+        return (0, jsx_runtime_1.jsx)(react_router_1.Navigate, { to: "/signin", replace: true });
+    return children ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : (0, jsx_runtime_1.jsx)(react_router_1.Outlet, {});
+}
+function AuthApp({ apiUrl = '/api', gatewayUrl, coreUrl, clientId = 'loka-app', children, }) {
+    const transferApiBase = apiUrl || (gatewayUrl ? `${gatewayUrl.replace(/\/$/, '')}/api` : '/api');
+    return ((0, jsx_runtime_1.jsx)(AuthProvider, { apiUrl: apiUrl, gatewayUrl: gatewayUrl, coreUrl: coreUrl, clientId: clientId, children: (0, jsx_runtime_1.jsx)(react_router_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_1.Route, { path: "/signin", element: (0, jsx_runtime_1.jsx)(SignInPage, { apiUrl: apiUrl, coreUrl: coreUrl }) }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: "/login", element: (0, jsx_runtime_1.jsx)(SignInPage, { apiUrl: apiUrl, coreUrl: coreUrl }) }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: "/auth/transfer", element: (0, jsx_runtime_1.jsx)(OAuthTransfer_1.OAuthTransfer, { apiBase: transferApiBase, clientId: clientId }) }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: "/auth/callback", element: (0, jsx_runtime_1.jsx)(OAuthCallback_1.OAuthCallback, { apiBase: apiUrl, clientId: clientId }) }), children] }) }) }));
+}

package/dist/components/OAuthTransfer.d.ts

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

package/dist/components/OAuthTransfer.js

@@ -2,59 +2,84 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OAuthTransfer = OAuthTransfer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// DEPRECATED: Cookie-based auth replaces token-in-URL transfer.
-// Kept for backward compatibility with external SSO clients.
 const react_1 = require("react");
-function OAuthTransfer({ apiBase, redirectPath = '/', loginPath = '/signin', }) {
+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 [error, setError] = (0, react_1.useState)('');
+    const hasProcessed = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
+        if (hasProcessed.current)
+            return;
+        hasProcessed.current = true;
         const params = new URLSearchParams(window.location.search);
+        const ticket = params.get('ticket');
         const token = params.get('token');
-        const refreshToken = params.get('refreshToken');
+        const refreshToken = params.get('refreshToken') || params.get('refresh_token');
+        const next = params.get('next') || redirectPath;
         const base = apiBase || '/api';
-        if (!token) {
-            setError('Token tidak ditemukan.');
-            return;
+        async function fetchProfile(accessToken) {
+            try {
+                const profileRes = await fetch(`${base}/auth/me`, {
+                    headers: { Authorization: `Bearer ${accessToken}` },
+                    credentials: 'include',
+                });
+                const profileData = await profileRes.json();
+                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.
+            }
         }
-        // 1. Save JWT immediately (no network needed)
-        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 || '');
-            if (payload.schoolId)
-                localStorage.setItem('school_sms_id', payload.schoolId);
+        async function handleTicketExchange() {
+            if (!ticket)
+                return;
+            if (processedTickets.has(ticket))
+                return;
+            processedTickets.add(ticket);
+            try {
+                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);
+            }
+            catch (e) {
+                processedTickets.delete(ticket);
+                setState('error');
+                setError(e.message || 'Gagal menukar ticket.');
+            }
         }
-        catch { /* decode non-critical */ }
-        // 2. Redirect immediately
-        window.location.href = redirectPath;
-        // 3. API calls — fire-and-forget
-        fetch(`${base}/auth/set-cookie`, {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            credentials: 'include',
-            body: JSON.stringify({ token, refreshToken }),
-        }).catch(() => { });
-        fetch(`${base}/auth/me`, {
-            headers: { Authorization: `Bearer ${token}` },
-            credentials: 'include',
-        }).then(r => r.json()).then(d => {
-            const p = d?.data ?? d;
-            if (p) {
-                localStorage.setItem('sms_user_profile', JSON.stringify(p));
-                document.cookie = `sms_user_profile=${encodeURIComponent(JSON.stringify(p))}; path=/; SameSite=Lax`;
+        function handleLegacyToken() {
+            if (!token) {
+                setState('error');
+                setError('Parameter tidak valid. Ticket atau token diperlukan.');
+                return;
             }
-        }).catch(() => { });
-    }, []);
-    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: error }), (0, jsx_runtime_1.jsx)("a", { href: loginPath, children: "Kembali ke login" })] }) }));
-    }
-    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: "Menyelesaikan login..." }) }));
+            (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);
+        }
+        if (ticket) {
+            handleTicketExchange();
+            return;
+        }
+        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" })] }))] }) }));
 }

package/dist/hooks/useIssueTicket.d.ts

@@ -0,0 +1,8 @@
+import { type IssueTicketOptions, type IssueTicketResponse } from '../ticket';
+export interface UseIssueTicketState {
+    ticket: IssueTicketResponse | null;
+    loading: boolean;
+    error: string | null;
+    issue: (options?: Omit<IssueTicketOptions, 'apiBase'>) => Promise<IssueTicketResponse>;
+}
+export declare function useIssueTicket(apiBase?: string): UseIssueTicketState;

package/dist/hooks/useIssueTicket.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIssueTicket = useIssueTicket;
+const react_1 = require("react");
+const ticket_1 = require("../ticket");
+function useIssueTicket(apiBase = '/api') {
+    const [ticket, setTicket] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const issue = (0, react_1.useCallback)(async (options = {}) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await (0, ticket_1.issueTicket)({ ...options, apiBase });
+            setTicket(result);
+            return result;
+        }
+        catch (err) {
+            const message = err?.message || 'Gagal membuat ticket SSO.';
+            setError(message);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiBase]);
+    return { ticket, loading, error, issue };
+}

package/dist/hooks/useNavigateToApp.d.ts

@@ -0,0 +1,7 @@
+import { type NavigateToAppOptions } from '../navigation';
+export interface UseNavigateToAppState {
+    loading: boolean;
+    error: string | null;
+    navigate: (options: Omit<NavigateToAppOptions, 'apiBase'>) => Promise<void>;
+}
+export declare function useNavigateToApp(apiBase?: string): UseNavigateToAppState;

package/dist/hooks/useNavigateToApp.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigateToApp = useNavigateToApp;
+const react_1 = require("react");
+const navigation_1 = require("../navigation");
+function useNavigateToApp(apiBase = '/api') {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const navigate = (0, react_1.useCallback)(async (options) => {
+        setLoading(true);
+        setError(null);
+        try {
+            await (0, navigation_1.navigateToApp)({ ...options, apiBase });
+        }
+        catch (err) {
+            const message = err?.message || 'Gagal membuka aplikasi tujuan.';
+            setError(message);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiBase]);
+    return { loading, error, navigate };
+}

package/dist/hooks/useOAuthCallback.js

@@ -50,7 +50,7 @@ function useOAuthCallback(input) {
                     setState({ error: null, loading: true, phase: 'exchange' });
                     const codeVerifier = sessionStorage.getItem(`oauth_verifier_${oauthState || ''}`) || '';
                     sessionStorage.removeItem(`oauth_verifier_${oauthState || ''}`);
-                    let res = await fetch(`${apiBase}/oauth/token`, {
+                    const res = await fetch(`${apiBase}/oauth/token`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         credentials: 'include',
@@ -62,15 +62,6 @@ function useOAuthCallback(input) {
                             redirect_uri: `${window.location.origin}${window.location.pathname}`,
                         }),
                     });
-                    // Development fallback: retry without code_verifier if PKCE fails
-                    if (!res.ok && !codeVerifier) {
-                        res = await fetch(`${apiBase}/oauth/token`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            credentials: 'include',
-                            body: JSON.stringify({ grant_type: 'authorization_code', code, client_id: input.clientId, redirect_uri: `${window.location.origin}${window.location.pathname}` }),
-                        });
-                    }
                     if (!res.ok)
                         throw new Error('Token exchange failed');
                     const d = await res.json();

package/dist/index.d.ts

@@ -4,9 +4,19 @@ export { hasSsoToken, redirectToOAuthLogin } from './oauthRedirect';
 export type { OAuthRedirectOptions } from './oauthRedirect';
 export { SSO_STORAGE_KEYS, SSO_CHANNELS, API_HEADERS, } from './constants';
 export { createAuthInterceptor } from './interceptor';
+export { issueTicket, exchangeTicket, getStoredAccessToken, decodeUserFromToken, persistTicketAuth, broadcastTicketLogin, } from './ticket';
+export type { IssueTicketOptions, IssueTicketResponse, ExchangeTicketOptions, ExchangeTicketResponse } from './ticket';
+export { buildTransferUrl, navigateToApp } from './navigation';
+export type { NavigateToAppOptions } from './navigation';
 export { useOAuthCallback } from './hooks/useOAuthCallback';
 export { useCrossAppLogout } from './hooks/useCrossAppLogout';
+export { useIssueTicket } from './hooks/useIssueTicket';
+export type { UseIssueTicketState } from './hooks/useIssueTicket';
+export { useNavigateToApp } from './hooks/useNavigateToApp';
+export type { UseNavigateToAppState } from './hooks/useNavigateToApp';
 export { OAuthCallback } from './components/OAuthCallback';
 export type { OAuthCallbackProps } from './components/OAuthCallback';
 export { OAuthTransfer } from './components/OAuthTransfer';
 export type { OAuthTransferProps } from './components/OAuthTransfer';
+export { AuthApp, ProtectedRoute, useAuth } from './auth';
+export type { AuthAppProps, AuthUser } from './auth';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OAuthTransfer = exports.OAuthCallback = exports.useCrossAppLogout = exports.useOAuthCallback = exports.createAuthInterceptor = exports.API_HEADERS = exports.SSO_CHANNELS = exports.SSO_STORAGE_KEYS = exports.redirectToOAuthLogin = exports.hasSsoToken = exports.generateState = exports.generateCodeChallenge = exports.generateCodeVerifier = exports.sha256 = void 0;
+exports.useAuth = exports.ProtectedRoute = exports.AuthApp = exports.OAuthTransfer = exports.OAuthCallback = exports.useNavigateToApp = exports.useIssueTicket = exports.useCrossAppLogout = exports.useOAuthCallback = exports.navigateToApp = exports.buildTransferUrl = exports.broadcastTicketLogin = exports.persistTicketAuth = exports.decodeUserFromToken = exports.getStoredAccessToken = exports.exchangeTicket = exports.issueTicket = exports.createAuthInterceptor = exports.API_HEADERS = exports.SSO_CHANNELS = exports.SSO_STORAGE_KEYS = exports.redirectToOAuthLogin = exports.hasSsoToken = exports.generateState = exports.generateCodeChallenge = exports.generateCodeVerifier = exports.sha256 = void 0;
 var sha256_1 = require("./sha256");
 Object.defineProperty(exports, "sha256", { enumerable: true, get: function () { return sha256_1.sha256; } });
 var pkce_1 = require("./pkce");
@@ -16,11 +16,29 @@ Object.defineProperty(exports, "SSO_CHANNELS", { enumerable: true, get: function
 Object.defineProperty(exports, "API_HEADERS", { enumerable: true, get: function () { return constants_1.API_HEADERS; } });
 var interceptor_1 = require("./interceptor");
 Object.defineProperty(exports, "createAuthInterceptor", { enumerable: true, get: function () { return interceptor_1.createAuthInterceptor; } });
+var ticket_1 = require("./ticket");
+Object.defineProperty(exports, "issueTicket", { enumerable: true, get: function () { return ticket_1.issueTicket; } });
+Object.defineProperty(exports, "exchangeTicket", { enumerable: true, get: function () { return ticket_1.exchangeTicket; } });
+Object.defineProperty(exports, "getStoredAccessToken", { enumerable: true, get: function () { return ticket_1.getStoredAccessToken; } });
+Object.defineProperty(exports, "decodeUserFromToken", { enumerable: true, get: function () { return ticket_1.decodeUserFromToken; } });
+Object.defineProperty(exports, "persistTicketAuth", { enumerable: true, get: function () { return ticket_1.persistTicketAuth; } });
+Object.defineProperty(exports, "broadcastTicketLogin", { enumerable: true, get: function () { return ticket_1.broadcastTicketLogin; } });
+var navigation_1 = require("./navigation");
+Object.defineProperty(exports, "buildTransferUrl", { enumerable: true, get: function () { return navigation_1.buildTransferUrl; } });
+Object.defineProperty(exports, "navigateToApp", { enumerable: true, get: function () { return navigation_1.navigateToApp; } });
 var useOAuthCallback_1 = require("./hooks/useOAuthCallback");
 Object.defineProperty(exports, "useOAuthCallback", { enumerable: true, get: function () { return useOAuthCallback_1.useOAuthCallback; } });
 var useCrossAppLogout_1 = require("./hooks/useCrossAppLogout");
 Object.defineProperty(exports, "useCrossAppLogout", { enumerable: true, get: function () { return useCrossAppLogout_1.useCrossAppLogout; } });
+var useIssueTicket_1 = require("./hooks/useIssueTicket");
+Object.defineProperty(exports, "useIssueTicket", { enumerable: true, get: function () { return useIssueTicket_1.useIssueTicket; } });
+var useNavigateToApp_1 = require("./hooks/useNavigateToApp");
+Object.defineProperty(exports, "useNavigateToApp", { enumerable: true, get: function () { return useNavigateToApp_1.useNavigateToApp; } });
 var OAuthCallback_1 = require("./components/OAuthCallback");
 Object.defineProperty(exports, "OAuthCallback", { enumerable: true, get: function () { return OAuthCallback_1.OAuthCallback; } });
 var OAuthTransfer_1 = require("./components/OAuthTransfer");
 Object.defineProperty(exports, "OAuthTransfer", { enumerable: true, get: function () { return OAuthTransfer_1.OAuthTransfer; } });
+var auth_1 = require("./auth");
+Object.defineProperty(exports, "AuthApp", { enumerable: true, get: function () { return auth_1.AuthApp; } });
+Object.defineProperty(exports, "ProtectedRoute", { enumerable: true, get: function () { return auth_1.ProtectedRoute; } });
+Object.defineProperty(exports, "useAuth", { enumerable: true, get: function () { return auth_1.useAuth; } });

package/dist/navigation.d.ts

@@ -0,0 +1,11 @@
+export interface NavigateToAppOptions {
+    targetUrl: string;
+    apiBase?: string;
+    accessToken?: string;
+    clientId?: string;
+    targetBlank?: boolean;
+    next?: string;
+    fallbackToPlainUrl?: boolean;
+}
+export declare function buildTransferUrl(targetUrl: string, ticket: string, next?: string): string;
+export declare function navigateToApp({ targetUrl, apiBase, accessToken, clientId, targetBlank, next, fallbackToPlainUrl, }: NavigateToAppOptions): Promise<void>;

package/dist/navigation.js

@@ -0,0 +1,56 @@
+"use strict";
+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 buildTransferUrl(targetUrl, ticket, next) {
+    const target = resolveUrl(targetUrl);
+    const transferUrl = new URL('/auth/transfer', target.origin);
+    const nextPath = next || `${target.pathname}${target.search}${target.hash}` || '/';
+    transferUrl.searchParams.set('ticket', ticket);
+    transferUrl.searchParams.set('next', nextPath || '/');
+    return transferUrl.toString();
+}
+function openDestination(url, targetBlank, existingTab) {
+    if (targetBlank) {
+        if (existingTab) {
+            existingTab.location.href = url;
+            return;
+        }
+        window.open(url, '_blank', 'noopener,noreferrer');
+        return;
+    }
+    window.location.href = url;
+}
+async function navigateToApp({ targetUrl, apiBase = '/api', accessToken, clientId, targetBlank = true, next, fallbackToPlainUrl = true, }) {
+    const token = accessToken || (0, ticket_1.getStoredAccessToken)();
+    if (!token) {
+        openDestination(targetUrl, targetBlank);
+        return;
+    }
+    let newTab = null;
+    if (targetBlank) {
+        newTab = window.open('about:blank', '_blank');
+        if (!newTab) {
+            window.location.href = targetUrl;
+            return;
+        }
+    }
+    try {
+        const issued = await (0, ticket_1.issueTicket)({
+            apiBase,
+            accessToken: token,
+            clientId,
+            redirect: targetUrl,
+        });
+        openDestination(buildTransferUrl(targetUrl, issued.ticket, next), targetBlank, newTab);
+    }
+    catch (error) {
+        if (!fallbackToPlainUrl)
+            throw error;
+        openDestination(targetUrl, targetBlank, newTab);
+    }
+}

package/dist/ticket.d.ts

@@ -0,0 +1,29 @@
+export interface IssueTicketOptions {
+    apiBase?: string;
+    accessToken?: string;
+    clientId?: string;
+    redirect?: string;
+    signal?: AbortSignal;
+}
+export interface IssueTicketResponse {
+    ticket: string;
+    expiresAt?: number | string;
+    expiresIn: number;
+}
+export interface ExchangeTicketOptions {
+    apiBase?: string;
+    ticket: string;
+    clientId?: string;
+    signal?: AbortSignal;
+}
+export interface ExchangeTicketResponse {
+    accessToken: string;
+    refreshToken: string;
+    user?: any;
+}
+export declare function getStoredAccessToken(): string;
+export declare function issueTicket(options?: IssueTicketOptions): Promise<IssueTicketResponse>;
+export declare function exchangeTicket(options: ExchangeTicketOptions): Promise<ExchangeTicketResponse>;
+export declare function decodeUserFromToken(token: string): any | null;
+export declare function persistTicketAuth(accessToken: string, refreshToken?: string, user?: any): void;
+export declare function broadcastTicketLogin(accessToken: string, user?: any): void;

package/dist/ticket.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStoredAccessToken = getStoredAccessToken;
+exports.issueTicket = issueTicket;
+exports.exchangeTicket = exchangeTicket;
+exports.decodeUserFromToken = decodeUserFromToken;
+exports.persistTicketAuth = persistTicketAuth;
+exports.broadcastTicketLogin = broadcastTicketLogin;
+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);
+}
+function getApiBase(apiBase) {
+    return trimTrailingSlash(apiBase || '/api');
+}
+async function parseJsonResponse(response) {
+    const body = await response.json().catch(() => ({}));
+    if (!response.ok) {
+        throw new Error(body?.message || body?.error || `Request failed (${response.status})`);
+    }
+    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,
+        body: JSON.stringify({
+            client_id: options.clientId,
+            redirect: options.redirect,
+        }),
+    });
+    const data = await parseJsonResponse(response);
+    if (!data?.ticket)
+        throw new Error('No ticket returned');
+    return {
+        ticket: data.ticket,
+        expiresAt: data.expiresAt,
+        expiresIn: Number(data.expiresIn || 60),
+    };
+}
+async function exchangeTicket(options) {
+    if (!options.ticket)
+        throw new Error('ticket required');
+    const response = await fetch(`${getApiBase(options.apiBase)}/sso/exchange`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        signal: options.signal,
+        body: JSON.stringify({ ticket: options.ticket, clientId: options.clientId }),
+    });
+    const data = await parseJsonResponse(response);
+    const accessToken = data.accessToken || data.token || data.access_token;
+    const refreshToken = data.refreshToken || data.refresh_token;
+    if (!accessToken || !refreshToken)
+        throw new Error('Token tidak ditemukan dalam response exchange.');
+    return { accessToken, refreshToken, user: data.user };
+}
+function decodeUserFromToken(token) {
+    try {
+        const payload = JSON.parse(atob(token.split('.')[1]));
+        return {
+            sub: payload.sub,
+            id: payload.sub,
+            email: payload.email,
+            fullName: payload.fullName,
+            name: payload.fullName || payload.name || payload.email,
+            role: payload.role,
+            schoolId: payload.schoolId,
+            schoolType: payload.schoolType,
+            forcePasswordChange: payload.forcePasswordChange,
+            features: payload.features || [],
+            accessibleSchools: payload.accessibleSchools || [],
+            capabilities: payload.capabilities || [],
+        };
+    }
+    catch {
+        return null;
+    }
+}
+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) {
+    try {
+        const channel = new BroadcastChannel(constants_1.SSO_CHANNELS.LOGIN);
+        channel.postMessage({ token: accessToken, user });
+        channel.close();
+    }
+    catch {
+        // BroadcastChannel is optional.
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loka-sms/sso",
-  "version": "1.1.0",
+  "version": "1.1.6",
   "description": "SSO utilities, hooks, and components for Loka SMS modules (OAuth2 PKCE, cross-app logout)",
   "license": "MIT",
   "type": "commonjs",