@headless-adminapp/app 0.0.8-0.0.9-alpha.1.0

package/src/auth/AuthProvider.tsx

@@ -0,0 +1,118 @@
+import { FC, PropsWithChildren, useCallback, useEffect, useRef } from 'react';
+
+import {
+  useContextSelectorInternal,
+  useCreateContextStore,
+} from '../mutable/context';
+import { AuthContext, AuthState } from './context';
+import { SessionResolver, UnauthorizeReason } from './types';
+
+export interface AuthProviderProps {
+  onUnauthenticated?: (reason: UnauthorizeReason) => void;
+  sessionResolver: SessionResolver;
+}
+
+export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
+  sessionResolver,
+  onUnauthenticated,
+  children,
+}) => {
+  const onUnauthenticatedRef = useRef(onUnauthenticated);
+  onUnauthenticatedRef.current = onUnauthenticated;
+
+  const onUnauthenticatedInternal = useCallback((reason: UnauthorizeReason) => {
+    onUnauthenticatedRef.current?.(reason);
+  }, []);
+
+  const contextValue = useCreateContextStore<AuthState>({
+    loading: true,
+    loadError: false,
+    initialized: false,
+    loadSession: () => Promise.resolve(),
+    onUnauthenticated: onUnauthenticatedInternal,
+  });
+  const state = useContextSelectorInternal(contextValue, (state) => state);
+  const session = state.initialized && state.authenticated && state.session;
+
+  const sessionResolverRef = useRef(sessionResolver);
+
+  sessionResolverRef.current = sessionResolver;
+
+  const loadSession = useCallback(async () => {
+    contextValue.setValue({ loading: true, loadError: false });
+    try {
+      const data = await sessionResolverRef.current();
+
+      if (!data) {
+        contextValue.setValue({
+          initialized: true,
+          authenticated: false,
+          sessionExpired: false,
+          session: null,
+        });
+
+        onUnauthenticatedRef.current?.('load');
+      } else {
+        contextValue.setValue({
+          initialized: true,
+          authenticated: true,
+          session: data,
+        });
+      }
+    } catch (error) {
+      console.error('Error fetching auth session', error);
+      contextValue.setValue({ loadError: true });
+    } finally {
+      contextValue.setValue({ loading: false });
+    }
+  }, [contextValue]);
+
+  useEffect(() => {
+    contextValue.setValue({ loadSession });
+  }, [contextValue, loadSession]);
+
+  useEffect(() => {
+    loadSession().catch(console.error);
+  }, [loadSession]);
+
+  useEffect(() => {
+    if (!session) {
+      return;
+    }
+
+    const exp = session.exp * 1000;
+
+    const timeout = exp - Date.now();
+
+    if (timeout <= 0) {
+      contextValue.setValue({
+        initialized: true,
+        authenticated: false,
+        sessionExpired: true,
+        session: null,
+      });
+
+      onUnauthenticatedRef.current?.('sessionExpired');
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      contextValue.setValue({
+        initialized: true,
+        authenticated: false,
+        sessionExpired: true,
+        session: null,
+      });
+
+      onUnauthenticatedRef.current?.('sessionExpired');
+    }, timeout);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [contextValue, session]);
+
+  return (
+    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+  );
+};

package/src/auth/context.ts

@@ -0,0 +1,41 @@
+import { createContext } from '../mutable/context';
+
+type UnauthorizeReason = 'sessionExpired' | 'unauthorized' | 'logout' | 'load';
+
+interface AuthStoreLoadingState {
+  initialized: false;
+}
+
+interface AuthStoreUnauthorizedState {
+  initialized: true;
+  authenticated: false;
+  sessionExpired: boolean;
+  session: null;
+}
+
+interface AuthStoreAuthorizedState<T extends AuthSession = AuthSession> {
+  initialized: true;
+  authenticated: true;
+  session: T;
+}
+
+export type AuthState = (
+  | AuthStoreLoadingState
+  | AuthStoreUnauthorizedState
+  | AuthStoreAuthorizedState
+) & {
+  loading: boolean;
+  loadError: boolean;
+  loadSession: () => Promise<void>;
+  onUnauthenticated?: (reason: UnauthorizeReason) => void;
+};
+
+export interface AuthSession {
+  exp: number;
+  fullName: string;
+  email: string;
+  profilePicture?: string;
+  data?: Record<string, any>; // Custom data
+}
+
+export const AuthContext = createContext<AuthState>();

package/src/auth/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useAuthSession';
+export * from './useLogout';

package/src/auth/hooks/useAuthSession.ts

@@ -0,0 +1,17 @@
+import { useContextSelector } from '../../mutable';
+import { AuthContext, AuthSession } from '../context';
+
+export function useAuthSession<
+  T extends AuthSession = AuthSession
+>(): T | null {
+  return useContextSelector(AuthContext, (state) => {
+    if (!state.initialized) {
+      return null;
+    }
+    if (!state.authenticated) {
+      return null;
+    }
+
+    return state.session;
+  }) as T;
+}

package/src/auth/hooks/useLogout.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable/context';
+import { AuthContext } from '../context';
+
+export function useLogout() {
+  const setValue = useContextSetValue(AuthContext);
+  const onUnauthenticated = useContextSelector(
+    AuthContext,
+    (state) => state.onUnauthenticated
+  );
+
+  const logout = useCallback(() => {
+    setValue({
+      initialized: true,
+      authenticated: false,
+      session: null,
+    });
+    onUnauthenticated?.('logout');
+  }, [setValue, onUnauthenticated]);
+
+  return logout;
+}

package/src/auth/index.ts

@@ -0,0 +1,4 @@
+export { AuthContext, type AuthSession, type AuthState } from './context';
+export { AuthProvider, type AuthProviderProps } from './AuthProvider';
+export * from './types';
+export * from './hooks';

package/src/auth/types.ts

@@ -0,0 +1,17 @@
+import { AuthSession } from './context';
+
+export type UnauthorizeReason =
+  | 'sessionExpired'
+  | 'unauthorized'
+  | 'logout'
+  | 'load';
+
+export interface AuthProviderPlaceholderProps {
+  loading?: boolean;
+  loadingError?: boolean;
+  unauthorized?: boolean;
+  sessionExpired?: boolean;
+  retry: () => void;
+}
+
+export type SessionResolver = () => Promise<AuthSession | null>;