@k3-universe/react-kit 0.0.28 → 0.0.29

package/src/kit/builder/auth/client-adapters.ts

@@ -0,0 +1,398 @@
+import type {
+  AuthAdapterConfig,
+  AuthSession,
+  GraphQLAuthClient,
+  RESTAuthClient,
+} from './types';
+
+// ============================================================================
+// GraphQL Client Adapter
+// ============================================================================
+
+export type GraphQLClientAdapterOptions<
+  TUser = unknown,
+  TRole extends string = string,
+  TPermission extends string = string,
+  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
+    TUser,
+    TRole,
+    TPermission
+  >,
+  TCredentials = unknown,
+> = {
+  client: GraphQLAuthClient<TSession, TCredentials>;
+  resolveUser?: (session: TSession | null) => TUser | null;
+  resolveRoles?: (session: TSession | null) => TRole[];
+  resolvePermissions?: (session: TSession | null) => TPermission[];
+};
+
+/**
+ * Creates an auth adapter config for GraphQL clients
+ * Works with Apollo Client, urql, graphql-request, etc.
+ *
+ * @example
+ * ```tsx
+ * import { ApolloClient } from '@apollo/client';
+ * import { createGraphQLAuthAdapter } from '@k3mart/react-kit/auth2';
+ *
+ * const apolloClient = new ApolloClient({ ... });
+ *
+ * const authConfig = createGraphQLAuthAdapter({
+ *   client: {
+ *     login: async (credentials) => {
+ *       const result = await apolloClient.mutate({
+ *         mutation: LOGIN_MUTATION,
+ *         variables: credentials,
+ *       });
+ *       return result.data.login;
+ *     },
+ *     logout: async () => {
+ *       await apolloClient.mutate({ mutation: LOGOUT_MUTATION });
+ *     },
+ *     refresh: async (refreshToken) => {
+ *       const result = await apolloClient.mutate({
+ *         mutation: REFRESH_MUTATION,
+ *         variables: { refreshToken },
+ *       });
+ *       return result.data.refresh;
+ *     },
+ *     getCurrentUser: async () => {
+ *       const result = await apolloClient.query({
+ *         query: GET_CURRENT_USER_QUERY,
+ *       });
+ *       return result.data.currentUser;
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export function createGraphQLAuthAdapter<
+  TUser = unknown,
+  TRole extends string = string,
+  TPermission extends string = string,
+  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
+    TUser,
+    TRole,
+    TPermission
+  >,
+  TCredentials = unknown,
+>(
+  options: GraphQLClientAdapterOptions<
+    TUser,
+    TRole,
+    TPermission,
+    TSession,
+    TCredentials
+  >,
+): Partial<
+  AuthAdapterConfig<TUser, TRole, TPermission, TSession, TCredentials>
+> {
+  return {
+    login: options.client.login,
+    logout: options.client.logout,
+    refresh: options.client.refresh
+      ? async (session: TSession) => {
+          if (!session.refreshToken) {
+            throw new Error('No refresh token available');
+          }
+          if (!options.client.refresh) {
+            throw new Error('Refresh function not provided');
+          }
+          return await options.client.refresh(session.refreshToken);
+        }
+      : undefined,
+    loadSession: options.client.getCurrentUser,
+    resolveUser: options.resolveUser,
+    resolveRoles: options.resolveRoles,
+    resolvePermissions: options.resolvePermissions,
+  };
+}
+
+// ============================================================================
+// REST Client Adapter
+// ============================================================================
+
+export type RESTClientAdapterOptions<
+  TUser = unknown,
+  TRole extends string = string,
+  TPermission extends string = string,
+  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
+    TUser,
+    TRole,
+    TPermission
+  >,
+  TCredentials = unknown,
+> = {
+  client: RESTAuthClient<TSession, TCredentials>;
+  resolveUser?: (session: TSession | null) => TUser | null;
+  resolveRoles?: (session: TSession | null) => TRole[];
+  resolvePermissions?: (session: TSession | null) => TPermission[];
+};
+
+/**
+ * Creates an auth adapter config for REST API clients
+ * Works with fetch, axios, ky, etc.
+ *
+ * @example
+ * ```tsx
+ * import axios from 'axios';
+ * import { createRESTAuthAdapter } from '@k3mart/react-kit/auth2';
+ *
+ * const api = axios.create({ baseURL: 'https://api.example.com' });
+ *
+ * const authConfig = createRESTAuthAdapter({
+ *   client: {
+ *     login: async (credentials) => {
+ *       const response = await api.post('/auth/login', credentials);
+ *       return response.data;
+ *     },
+ *     logout: async () => {
+ *       await api.post('/auth/logout');
+ *     },
+ *     refresh: async (refreshToken) => {
+ *       const response = await api.post('/auth/refresh', { refreshToken });
+ *       return response.data;
+ *     },
+ *     getCurrentUser: async () => {
+ *       const response = await api.get('/auth/me');
+ *       return response.data;
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export function createRESTAuthAdapter<
+  TUser = unknown,
+  TRole extends string = string,
+  TPermission extends string = string,
+  TSession extends AuthSession<TUser, TRole, TPermission> = AuthSession<
+    TUser,
+    TRole,
+    TPermission
+  >,
+  TCredentials = unknown,
+>(
+  options: RESTClientAdapterOptions<
+    TUser,
+    TRole,
+    TPermission,
+    TSession,
+    TCredentials
+  >,
+): Partial<
+  AuthAdapterConfig<TUser, TRole, TPermission, TSession, TCredentials>
+> {
+  return {
+    login: options.client.login,
+    logout: options.client.logout,
+    refresh: options.client.refresh
+      ? async (session: TSession) => {
+          if (!session.refreshToken) {
+            throw new Error('No refresh token available');
+          }
+          if (!options.client.refresh) {
+            throw new Error('Refresh function not provided');
+          }
+          return await options.client.refresh(session.refreshToken);
+        }
+      : undefined,
+    loadSession: options.client.getCurrentUser,
+    resolveUser: options.resolveUser,
+    resolveRoles: options.resolveRoles,
+    resolvePermissions: options.resolvePermissions,
+  };
+}
+
+// ============================================================================
+// HTTP Interceptor Utilities
+// ============================================================================
+
+/**
+ * Helper to create an axios interceptor that automatically adds auth token
+ *
+ * @example
+ * ```tsx
+ * import axios from 'axios';
+ * import { createAxiosAuthInterceptor } from '@k3mart/react-kit/auth2';
+ *
+ * const api = axios.create({ baseURL: 'https://api.example.com' });
+ *
+ * createAxiosAuthInterceptor(api, authAdapter);
+ * ```
+ */
+export function createAxiosAuthInterceptor(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  axiosInstance: any,
+  getToken: () => string | null,
+  options?: {
+    tokenType?: string;
+    onTokenExpired?: () => void;
+    refreshToken?: () => Promise<void>;
+  },
+) {
+  const tokenType = options?.tokenType ?? 'Bearer';
+
+  // Request interceptor
+  axiosInstance.interceptors.request.use(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async (config: any) => {
+      const token = getToken();
+      if (token) {
+        config.headers.Authorization = `${tokenType} ${token}`;
+      }
+      return config;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (error: any) => Promise.reject(error),
+  );
+
+  // Response interceptor for token refresh
+  if (options?.refreshToken) {
+    axiosInstance.interceptors.response.use(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (response: any) => response,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      async (error: any) => {
+        const originalRequest = error.config;
+
+        // If token expired and we haven't retried yet
+        if (
+          error.response?.status === 401 &&
+          !originalRequest._retry &&
+          options.refreshToken
+        ) {
+          originalRequest._retry = true;
+
+          try {
+            await options.refreshToken();
+            const token = getToken();
+            if (token) {
+              originalRequest.headers.Authorization = `${tokenType} ${token}`;
+            }
+            return axiosInstance(originalRequest);
+          } catch (refreshError) {
+            options.onTokenExpired?.();
+            return Promise.reject(refreshError);
+          }
+        }
+
+        return Promise.reject(error);
+      },
+    );
+  }
+}
+
+/**
+ * Helper to create a fetch wrapper with auth token injection
+ *
+ * @example
+ * ```tsx
+ * import { createAuthFetch } from '@k3mart/react-kit/auth2';
+ *
+ * const authenticatedFetch = createAuthFetch(
+ *   () => authAdapter.getToken(),
+ *   {
+ *     onTokenExpired: () => authAdapter.logout(),
+ *     refreshToken: () => authAdapter.refresh(),
+ *   }
+ * );
+ *
+ * // Use it like regular fetch
+ * const response = await authenticatedFetch('/api/users');
+ * ```
+ */
+export function createAuthFetch(
+  getToken: () => string | null,
+  options?: {
+    tokenType?: string;
+    onTokenExpired?: () => void;
+    refreshToken?: () => Promise<void>;
+  },
+): typeof fetch {
+  const tokenType = options?.tokenType ?? 'Bearer';
+
+  return async (
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> => {
+    const token = getToken();
+    const headers = new Headers(init?.headers);
+
+    if (token) {
+      headers.set('Authorization', `${tokenType} ${token}`);
+    }
+
+    const response = await fetch(input, {
+      ...init,
+      headers,
+    });
+
+    // Handle token expiration
+    if (response.status === 401 && options?.refreshToken) {
+      try {
+        await options.refreshToken();
+        const newToken = getToken();
+
+        if (newToken) {
+          headers.set('Authorization', `${tokenType} ${newToken}`);
+          return await fetch(input, {
+            ...init,
+            headers,
+          });
+        }
+      } catch (error) {
+        options.onTokenExpired?.();
+        throw error;
+      }
+    }
+
+    return response;
+  };
+}
+
+/**
+ * Helper to create Apollo Link with auth token injection
+ *
+ * @example
+ * ```tsx
+ * import { ApolloClient, InMemoryCache, from } from '@apollo/client';
+ * import { createApolloAuthLink } from '@k3mart/react-kit/auth2';
+ *
+ * const authLink = createApolloAuthLink(() => authAdapter.getToken());
+ *
+ * const client = new ApolloClient({
+ *   link: from([authLink, httpLink]),
+ *   cache: new InMemoryCache(),
+ * });
+ * ```
+ */
+export function createApolloAuthLink(
+  getToken: () => string | null,
+  options?: {
+    tokenType?: string;
+  },
+) {
+  const tokenType = options?.tokenType ?? 'Bearer';
+
+  // This requires @apollo/client to be installed
+  // We'll return a function that creates the link to avoid direct dependency
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (ApolloLink: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return new ApolloLink((operation: any, forward: any) => {
+      const token = getToken();
+
+      if (token) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        operation.setContext(({ headers = {} }: any) => ({
+          headers: {
+            ...headers,
+            authorization: `${tokenType} ${token}`,
+          },
+        }));
+      }
+
+      return forward(operation);
+    });
+  };
+}

package/src/kit/builder/auth/components.tsx

@@ -0,0 +1,221 @@
+import type { ComponentType } from 'react';
+import type {
+  CanProps,
+  RequireAuthProps,
+  WithPermissionOptions,
+} from './types';
+import { useAuthContext } from './AuthProvider';
+import { useCan } from './hooks';
+
+// ============================================================================
+// RequireAuth Component
+// ============================================================================
+
+/**
+ * Component that requires authentication
+ * Optionally checks for specific roles and permissions
+ *
+ * @example
+ * ```tsx
+ * // Basic authentication check
+ * <RequireAuth fallback={<Login />}>
+ *   <Dashboard />
+ * </RequireAuth>
+ *
+ * // With role check
+ * <RequireAuth
+ *   roles="admin"
+ *   fallback={<Forbidden />}
+ *   loadingFallback={<Spinner />}
+ * >
+ *   <AdminPanel />
+ * </RequireAuth>
+ *
+ * // With permission check
+ * <RequireAuth
+ *   permissions={['post:edit', 'post:delete']}
+ *   fallback={<Forbidden />}
+ * >
+ *   <PostEditor />
+ * </RequireAuth>
+ *
+ * // Complex rule
+ * <RequireAuth
+ *   roles={['admin', 'moderator']}
+ *   permissions={{
+ *     operator: 'OR',
+ *     permissions: ['post:edit', 'post:delete']
+ *   }}
+ *   requireAll={false}
+ *   fallback={<Forbidden />}
+ * >
+ *   <ContentManager />
+ * </RequireAuth>
+ * ```
+ */
+export function RequireAuth<
+  TRole extends string = string,
+  TPermission extends string = string,
+>({
+  children,
+  fallback = null,
+  loadingFallback = null,
+  roles,
+  permissions,
+  requireAll = true,
+}: RequireAuthProps<TRole, TPermission>) {
+  const { status, can } = useAuthContext();
+
+  if (status === 'loading' || status === 'idle') {
+    return loadingFallback;
+  }
+
+  if (status !== 'authenticated') {
+    return fallback;
+  }
+
+  // If no specific roles/permissions required, just check authentication
+  if (!roles && !permissions) {
+    return children;
+  }
+
+  // Check role/permission rules
+  const allowed = can({ roles, permissions, requireAll });
+
+  if (!allowed) {
+    return fallback;
+  }
+
+  return children;
+}
+
+// ============================================================================
+// Can Component
+// ============================================================================
+
+/**
+ * Component for conditional rendering based on permissions
+ * More flexible than RequireAuth - doesn't check authentication status
+ *
+ * @example
+ * ```tsx
+ * // Show button only if user can edit
+ * <Can permissions="post:edit" fallback={<ReadOnlyView />}>
+ *   <EditButton />
+ * </Can>
+ *
+ * // Show admin panel if user is admin
+ * <Can roles="admin">
+ *   <AdminPanel />
+ * </Can>
+ *
+ * // Complex permission check
+ * <Can
+ *   roles={['admin', 'moderator']}
+ *   permissions={{
+ *     operator: 'OR',
+ *     permissions: ['post:edit', 'post:delete']
+ *   }}
+ *   requireAll={false}
+ * >
+ *   <ManageButton />
+ * </Can>
+ * ```
+ */
+export function Can<
+  TRole extends string = string,
+  TPermission extends string = string,
+>({
+  children,
+  fallback = null,
+  roles,
+  permissions,
+  requireAll = true,
+}: CanProps<TRole, TPermission>) {
+  const allowed = useCan({ roles, permissions, requireAll });
+  if (!allowed) return fallback;
+  return children;
+}
+
+// ============================================================================
+// Higher-Order Component
+// ============================================================================
+
+/**
+ * Higher-order component that wraps a component with permission checks
+ *
+ * @example
+ * ```tsx
+ * const AdminButton = withPermission(Button, {
+ *   roles: 'admin'
+ * });
+ *
+ * const EditButton = withPermission(Button, {
+ *   permissions: 'post:edit'
+ * });
+ *
+ * // Use like regular component
+ * <AdminButton onClick={handleAdmin}>Admin Action</AdminButton>
+ * <EditButton onClick={handleEdit}>Edit Post</EditButton>
+ * ```
+ */
+export function withPermission<
+  TRole extends string = string,
+  TPermission extends string = string,
+  TProps extends Record<string, unknown> = Record<string, unknown>,
+>(
+  Component: ComponentType<TProps>,
+  options: WithPermissionOptions<TRole, TPermission>,
+): ComponentType<TProps> {
+  const WithPermissionWrapper = (props: TProps) => {
+    const allowed = useCan(options);
+    if (!allowed) return null;
+    return <Component {...props} />;
+  };
+  WithPermissionWrapper.displayName = `WithPermission(${Component.displayName ?? Component.name ?? 'Component'})`;
+  return WithPermissionWrapper as ComponentType<TProps>;
+}
+
+// ============================================================================
+// Show/Hide Components
+// ============================================================================
+
+/**
+ * Component that shows children only when authenticated
+ */
+export function ShowWhenAuthenticated({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { status } = useAuthContext();
+  return status === 'authenticated' ? children : null;
+}
+
+/**
+ * Component that shows children only when NOT authenticated
+ */
+export function ShowWhenUnauthenticated({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { status } = useAuthContext();
+  return status === 'unauthenticated' ? children : null;
+}
+
+/**
+ * Component that shows children only while loading
+ */
+export function ShowWhenLoading({ children }: { children: React.ReactNode }) {
+  const { status } = useAuthContext();
+  return status === 'loading' ? children : null;
+}
+
+/**
+ * Component that shows children only when there's an error
+ */
+export function ShowWhenError({ children }: { children: React.ReactNode }) {
+  const { status } = useAuthContext();
+  return status === 'error' ? children : null;
+}