@tidecloak/react 0.13.11 → 0.13.14

package/dist/cjs/hooks/useAuthCallback.js

@@ -0,0 +1,161 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { IAMService } from '@tidecloak/js';
+/**
+ * Parse OAuth callback data from URL and sessionStorage.
+ */
+function parseCallback() {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get('code');
+    const state = params.get('state') || '';
+    const error = params.get('error');
+    const errorDescription = params.get('error_description');
+    const isCallback = !!(code || error);
+    // Parse state parameter (format: verifier__url_returnUrl or just returnUrl)
+    let verifier = sessionStorage.getItem('kc_pkce_verifier');
+    let returnUrl = sessionStorage.getItem('kc_return_url');
+    // Also try to extract return URL from state if it contains __url_
+    if (state && state.includes('__url_')) {
+        const urlStart = state.indexOf('__url_') + 6;
+        returnUrl = state.substring(urlStart) || returnUrl;
+    }
+    return {
+        code,
+        state,
+        verifier,
+        returnUrl,
+        error,
+        errorDescription,
+        isCallback,
+    };
+}
+/**
+ * Hook for handling OAuth callback pages in hybrid mode.
+ *
+ * Automatically detects if the current page is an OAuth callback and processes it.
+ *
+ * @example
+ * ```tsx
+ * function OAuthCallback() {
+ *   const { isProcessing, isSuccess, error, returnUrl } = useAuthCallback({
+ *     onSuccess: (url) => navigate(url || '/'),
+ *     onError: (err) => console.error(err),
+ *   });
+ *
+ *   if (isProcessing) return <Spinner />;
+ *   if (error) return <ErrorMessage error={error} />;
+ *   return null;
+ * }
+ * ```
+ */
+export function useAuthCallback(options = {}) {
+    const { autoProcess = true, onSuccess, onError, onMissingVerifierRedirectTo, } = options;
+    const [state, setState] = useState(() => {
+        const parsed = parseCallback();
+        return {
+            isCallback: parsed.isCallback,
+            isProcessing: false,
+            isSuccess: false,
+            error: null,
+            returnUrl: parsed.returnUrl,
+            code: parsed.code,
+            idpError: parsed.error,
+            idpErrorDescription: parsed.errorDescription,
+        };
+    });
+    // Track if we've already processed to prevent double-execution in StrictMode
+    const processedRef = useRef(false);
+    const onSuccessRef = useRef(onSuccess);
+    const onErrorRef = useRef(onError);
+    // Keep refs updated
+    useEffect(() => {
+        onSuccessRef.current = onSuccess;
+        onErrorRef.current = onError;
+    }, [onSuccess, onError]);
+    const processCallback = useCallback(async () => {
+        var _a, _b, _c, _d, _e, _f;
+        // Guard against double processing
+        if (processedRef.current)
+            return;
+        processedRef.current = true;
+        setState(s => ({ ...s, isProcessing: true }));
+        try {
+            const parsed = parseCallback();
+            // Check for IdP error first
+            if (parsed.error) {
+                const error = new Error(parsed.errorDescription || parsed.error);
+                setState(s => ({
+                    ...s,
+                    isProcessing: false,
+                    error,
+                    idpError: parsed.error,
+                    idpErrorDescription: parsed.errorDescription,
+                }));
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+                return;
+            }
+            if (!parsed.code) {
+                setState(s => ({ ...s, isProcessing: false }));
+                return;
+            }
+            // Check for missing verifier (page was refreshed)
+            if (!parsed.verifier) {
+                if (onMissingVerifierRedirectTo) {
+                    window.location.assign(onMissingVerifierRedirectTo);
+                    return;
+                }
+                const error = new Error('Session expired. Please try logging in again.');
+                setState(s => ({ ...s, isProcessing: false, error }));
+                (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, error);
+                return;
+            }
+            // Get config and let IAMService handle the callback
+            const config = IAMService.getConfig();
+            if (!config) {
+                const error = new Error('IAMService not configured. Call loadConfig() first.');
+                setState(s => ({ ...s, isProcessing: false, error }));
+                (_c = onErrorRef.current) === null || _c === void 0 ? void 0 : _c.call(onErrorRef, error);
+                return;
+            }
+            // Initialize IAMService which will handle the token exchange
+            const authenticated = await IAMService.initIAM(config);
+            if (authenticated) {
+                // Try to get return URL from sessionStorage since we can't access internal state
+                const returnUrl = sessionStorage.getItem('kc_return_url') || parsed.returnUrl;
+                setState(s => ({
+                    ...s,
+                    isProcessing: false,
+                    isSuccess: true,
+                    returnUrl,
+                }));
+                (_d = onSuccessRef.current) === null || _d === void 0 ? void 0 : _d.call(onSuccessRef, returnUrl);
+            }
+            else {
+                const error = new Error('Authentication failed');
+                setState(s => ({ ...s, isProcessing: false, error }));
+                (_e = onErrorRef.current) === null || _e === void 0 ? void 0 : _e.call(onErrorRef, error);
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setState(s => ({ ...s, isProcessing: false, error }));
+            (_f = onErrorRef.current) === null || _f === void 0 ? void 0 : _f.call(onErrorRef, error);
+        }
+    }, [onMissingVerifierRedirectTo]);
+    // Auto-process on mount if enabled and this is a callback
+    useEffect(() => {
+        if (autoProcess && state.isCallback && !processedRef.current) {
+            processCallback();
+        }
+    }, [autoProcess, state.isCallback, processCallback]);
+    return {
+        ...state,
+        processCallback,
+    };
+}
+/**
+ * Parse OAuth callback data from URL without using IAMService.
+ * Useful for manual token exchange flows.
+ */
+export function parseCallbackUrl() {
+    return parseCallback();
+}

package/dist/cjs/index.js

@@ -1,19 +1,98 @@
-import { useTideCloakContext, } from './contexts/TideCloakContextProvider';
+import React from 'react';
+import { useTideCloakContext } from './contexts/TideCloakContextProvider';
 export { TideCloakContextProvider } from './contexts/TideCloakContextProvider';
-export { RequestEnclave } from "@tidecloak/js";
+// Hybrid mode utilities
+export { useAuthCallback, parseCallbackUrl } from './hooks/useAuthCallback';
+export { AuthCallback, SimpleAuthCallback } from './components/AuthCallback';
+export { RequestEnclave, AdminAPI } from "@tidecloak/js";
 /**
  * Hook to access authentication state and helpers.
+ * Must be used within a TideCloakContextProvider.
  */
 export const useTideCloak = useTideCloakContext;
+/**
+ * Renders children only when user is authenticated.
+ */
 export function Authenticated({ children }) {
     const { authenticated, isInitializing } = useTideCloakContext();
     if (isInitializing)
         return null;
     return authenticated ? children : null;
 }
+/**
+ * Renders children only when user is NOT authenticated.
+ */
 export function Unauthenticated({ children }) {
     const { authenticated, isInitializing } = useTideCloakContext();
     if (isInitializing)
         return null;
     return !authenticated ? children : null;
 }
+/**
+ * Renders children only when user has the specified realm role.
+ */
+export function HasRealmRole({ role, children, fallback = null }) {
+    const { authenticated, isInitializing, hasRealmRole } = useTideCloakContext();
+    if (isInitializing)
+        return null;
+    if (!authenticated)
+        return fallback;
+    return hasRealmRole(role) ? children : fallback;
+}
+/**
+ * Renders children only when user has the specified client/resource role.
+ */
+export function HasClientRole({ role, resource, children, fallback = null }) {
+    const { authenticated, isInitializing, hasClientRole } = useTideCloakContext();
+    if (isInitializing)
+        return null;
+    if (!authenticated)
+        return fallback;
+    return hasClientRole(role, resource) ? children : fallback;
+}
+/**
+ * Renders children only when user is offline.
+ */
+export function Offline({ children }) {
+    const { isOffline } = useTideCloakContext();
+    return isOffline ? children : null;
+}
+/**
+ * Renders children only when user is online.
+ */
+export function Online({ children }) {
+    const { isOffline } = useTideCloakContext();
+    return !isOffline ? children : null;
+}
+/**
+ * Renders children when the user was offline at some point during the session.
+ * Useful for showing "sync needed" banners.
+ */
+export function WasOffline({ children, onReset }) {
+    const { wasOffline, resetWasOffline } = useTideCloakContext();
+    const handleReset = React.useCallback(() => {
+        resetWasOffline();
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    }, [resetWasOffline, onReset]);
+    if (!wasOffline)
+        return null;
+    // If children is a function, pass the reset handler
+    if (typeof children === 'function') {
+        return children(handleReset);
+    }
+    return children;
+}
+/**
+ * Renders children when re-authentication is needed (e.g., after 401).
+ */
+export function NeedsReauth({ children }) {
+    const { needsReauth } = useTideCloakContext();
+    return needsReauth ? children : null;
+}
+/**
+ * Renders loading state during login/logout operations.
+ */
+export function AuthLoading({ children }) {
+    const { isLoading } = useTideCloakContext();
+    return isLoading ? children : null;
+}

package/dist/esm/components/AuthCallback.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuthCallback } from '../hooks/useAuthCallback';
+/**
+ * Component for handling OAuth callback pages in hybrid mode.
+ *
+ * Drop this component into your callback route and it handles everything:
+ * - Detecting if this is a callback page
+ * - Processing the authorization code
+ * - Exchanging tokens with your backend
+ * - Calling onSuccess/onError callbacks
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with navigation
+ * function OAuthCallbackPage() {
+ *   const navigate = useNavigate();
+ *
+ *   return (
+ *     <AuthCallback
+ *       onSuccess={(returnUrl) => navigate(returnUrl || '/')}
+ *       onError={(error) => console.error(error)}
+ *       loadingComponent={<Spinner />}
+ *       errorComponent={({ error }) => <Alert status="error">{error.message}</Alert>}
+ *     />
+ *   );
+ * }
+ *
+ * // Or in routes directly
+ * <Route path="/auth/callback" element={
+ *   <AuthCallback
+ *     onSuccess={(url) => window.location.assign(url || '/')}
+ *     loadingComponent={<LoadingScreen />}
+ *   />
+ * } />
+ * ```
+ */
+export function AuthCallback({ loadingComponent = null, errorComponent, successComponent, children, ...options }) {
+    const { isCallback, isProcessing, isSuccess, error, returnUrl } = useAuthCallback(options);
+    // Not a callback page - render children or nothing
+    if (!isCallback) {
+        return children !== null && children !== void 0 ? children : null;
+    }
+    // Processing
+    if (isProcessing) {
+        return loadingComponent;
+    }
+    // Error
+    if (error) {
+        if (errorComponent) {
+            if (typeof errorComponent === 'function') {
+                const ErrorComponent = errorComponent;
+                return _jsx(ErrorComponent, { error: error });
+            }
+            return errorComponent;
+        }
+        return null;
+    }
+    // Success
+    if (isSuccess) {
+        if (successComponent) {
+            if (typeof successComponent === 'function') {
+                const SuccessComponent = successComponent;
+                return _jsx(SuccessComponent, { returnUrl: returnUrl });
+            }
+            return successComponent;
+        }
+        return null;
+    }
+    return null;
+}
+/**
+ * Simple callback page that auto-redirects on success.
+ * Use this when you just want the callback handled with minimal UI.
+ *
+ * @example
+ * ```tsx
+ * <Route path="/auth/callback" element={
+ *   <SimpleAuthCallback
+ *     defaultRedirect="/"
+ *     loginPage="/login"
+ *     loadingComponent={<FullPageSpinner />}
+ *   />
+ * } />
+ * ```
+ */
+export function SimpleAuthCallback({ defaultRedirect = '/', loginPage = '/login', loadingComponent, errorComponent, }) {
+    return (_jsx(AuthCallback, { onSuccess: (returnUrl) => {
+            window.location.assign(returnUrl || defaultRedirect);
+        }, onMissingVerifierRedirectTo: loginPage, loadingComponent: loadingComponent, errorComponent: errorComponent }));
+}