@pixygon/auth 1.0.0

package/src/components/styles.ts

@@ -0,0 +1,282 @@
+/**
+ * @pixygon/auth - Component Styles
+ * CSS-in-JS styles for auth components
+ */
+
+export const colors = {
+  // Brand colors
+  primary: '#6366f1', // Indigo
+  primaryHover: '#4f46e5',
+  primaryLight: '#818cf8',
+
+  // Neutrals
+  background: '#0f0f0f',
+  backgroundLight: '#1a1a1a',
+  surface: '#262626',
+  surfaceHover: '#333333',
+  border: '#404040',
+  borderFocus: '#6366f1',
+
+  // Text
+  text: '#ffffff',
+  textSecondary: '#a3a3a3',
+  textMuted: '#737373',
+
+  // States
+  error: '#ef4444',
+  errorLight: '#fca5a5',
+  success: '#22c55e',
+  successLight: '#86efac',
+  warning: '#f59e0b',
+};
+
+export const styles = {
+  // Container
+  container: `
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: ${colors.background};
+    color: ${colors.text};
+    padding: 2rem;
+    border-radius: 1rem;
+    max-width: 400px;
+    width: 100%;
+    margin: 0 auto;
+  `,
+
+  // Header
+  header: `
+    text-align: center;
+    margin-bottom: 2rem;
+  `,
+
+  logo: `
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 1rem;
+    display: block;
+  `,
+
+  title: `
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem;
+    color: ${colors.text};
+  `,
+
+  subtitle: `
+    font-size: 0.875rem;
+    color: ${colors.textSecondary};
+    margin: 0;
+  `,
+
+  // Form
+  form: `
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  `,
+
+  inputGroup: `
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  `,
+
+  label: `
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: ${colors.textSecondary};
+  `,
+
+  input: `
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    color: ${colors.text};
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  `,
+
+  inputFocus: `
+    border-color: ${colors.borderFocus};
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  `,
+
+  inputError: `
+    border-color: ${colors.error};
+  `,
+
+  // Buttons
+  button: `
+    background: ${colors.primary};
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s, transform 0.1s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  `,
+
+  buttonHover: `
+    background: ${colors.primaryHover};
+  `,
+
+  buttonDisabled: `
+    opacity: 0.6;
+    cursor: not-allowed;
+  `,
+
+  buttonSecondary: `
+    background: transparent;
+    color: ${colors.textSecondary};
+    border: 1px solid ${colors.border};
+  `,
+
+  buttonSecondaryHover: `
+    background: ${colors.surface};
+    color: ${colors.text};
+  `,
+
+  // Links
+  link: `
+    color: ${colors.primary};
+    text-decoration: none;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: color 0.2s;
+  `,
+
+  linkHover: `
+    color: ${colors.primaryLight};
+    text-decoration: underline;
+  `,
+
+  // Messages
+  error: `
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid ${colors.error};
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: ${colors.errorLight};
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  `,
+
+  success: `
+    background: rgba(34, 197, 94, 0.1);
+    border: 1px solid ${colors.success};
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: ${colors.successLight};
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  `,
+
+  // Divider
+  divider: `
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: ${colors.textMuted};
+    font-size: 0.75rem;
+    margin: 0.5rem 0;
+  `,
+
+  dividerLine: `
+    flex: 1;
+    height: 1px;
+    background: ${colors.border};
+  `,
+
+  // Footer
+  footer: `
+    text-align: center;
+    margin-top: 1.5rem;
+    font-size: 0.875rem;
+    color: ${colors.textSecondary};
+  `,
+
+  // Loading spinner
+  spinner: `
+    width: 20px;
+    height: 20px;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  `,
+
+  // Branding
+  brandingContainer: `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+  `,
+
+  brandingText: `
+    font-size: 0.75rem;
+    color: ${colors.textMuted};
+  `,
+
+  brandingLogo: `
+    height: 16px;
+    width: auto;
+  `,
+
+  // Verification code input
+  codeInputContainer: `
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+  `,
+
+  codeInput: `
+    width: 3rem;
+    height: 3.5rem;
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 600;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 0.5rem;
+    color: ${colors.text};
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  `,
+
+  // Password strength
+  passwordStrength: `
+    display: flex;
+    gap: 0.25rem;
+    margin-top: 0.5rem;
+  `,
+
+  passwordStrengthBar: `
+    flex: 1;
+    height: 4px;
+    border-radius: 2px;
+    background: ${colors.border};
+    transition: background 0.3s;
+  `,
+};
+
+// CSS keyframes (to be injected)
+export const keyframes = `
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;

package/src/hooks/index.ts

@@ -0,0 +1,284 @@
+/**
+ * @pixygon/auth - Custom Hooks
+ * Convenient hooks for accessing auth state and actions
+ */
+
+import { useCallback, useMemo, useEffect } from 'react';
+import { useAuthContext } from '../providers/AuthProvider';
+import type { User, UserRole, AuthStatus, AuthError } from '../types';
+
+// ============================================================================
+// useAuth - Main auth hook
+// ============================================================================
+
+export interface UseAuthReturn {
+  // State
+  user: User | null;
+  status: AuthStatus;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  isVerified: boolean;
+  error: AuthError | null;
+
+  // Actions
+  login: ReturnType<typeof useAuthContext>['login'];
+  register: ReturnType<typeof useAuthContext>['register'];
+  logout: ReturnType<typeof useAuthContext>['logout'];
+  verify: ReturnType<typeof useAuthContext>['verify'];
+  resendVerification: ReturnType<typeof useAuthContext>['resendVerification'];
+  forgotPassword: ReturnType<typeof useAuthContext>['forgotPassword'];
+  recoverPassword: ReturnType<typeof useAuthContext>['recoverPassword'];
+
+  // Utilities
+  hasRole: (role: UserRole | UserRole[]) => boolean;
+}
+
+/**
+ * Main auth hook providing all auth state and actions
+ */
+export function useAuth(): UseAuthReturn {
+  const context = useAuthContext();
+
+  return useMemo(
+    () => ({
+      // State
+      user: context.user,
+      status: context.status,
+      isLoading: context.isLoading,
+      isAuthenticated: context.isAuthenticated,
+      isVerified: context.isVerified,
+      error: context.error,
+
+      // Actions
+      login: context.login,
+      register: context.register,
+      logout: context.logout,
+      verify: context.verify,
+      resendVerification: context.resendVerification,
+      forgotPassword: context.forgotPassword,
+      recoverPassword: context.recoverPassword,
+
+      // Utilities
+      hasRole: context.hasRole,
+    }),
+    [context]
+  );
+}
+
+// ============================================================================
+// useUser - User data hook
+// ============================================================================
+
+export interface UseUserReturn {
+  user: User | null;
+  isAuthenticated: boolean;
+  isVerified: boolean;
+  role: UserRole | null;
+  hasRole: (role: UserRole | UserRole[]) => boolean;
+
+  // User properties shortcuts
+  userId: string | null;
+  userName: string | null;
+  email: string | null;
+  profilePicture: string | null;
+  subscriptionTier: User['subscriptionTier'] | null;
+
+  // Token info
+  dailyTokens: number;
+  purchasedTokens: number;
+  bonusTokens: number;
+  subscriptionTokens: number;
+  totalTokens: number;
+}
+
+/**
+ * Hook for accessing user data with convenient shortcuts
+ */
+export function useUser(): UseUserReturn {
+  const { user, isAuthenticated, isVerified, hasRole } = useAuthContext();
+
+  return useMemo(() => {
+    const dailyTokens = user?.dailyTokens ?? 0;
+    const purchasedTokens = user?.purchasedTokens ?? 0;
+    const bonusTokens = user?.bonusTokens ?? 0;
+    const subscriptionTokens = user?.subscriptionTokens ?? 0;
+
+    return {
+      user,
+      isAuthenticated,
+      isVerified,
+      role: user?.role ?? null,
+      hasRole,
+
+      // Shortcuts
+      userId: user?._id ?? null,
+      userName: user?.userName ?? null,
+      email: user?.email ?? null,
+      profilePicture: user?.profilePicture ?? null,
+      subscriptionTier: user?.subscriptionTier ?? null,
+
+      // Tokens
+      dailyTokens,
+      purchasedTokens,
+      bonusTokens,
+      subscriptionTokens,
+      totalTokens: dailyTokens + purchasedTokens + bonusTokens + subscriptionTokens,
+    };
+  }, [user, isAuthenticated, isVerified, hasRole]);
+}
+
+// ============================================================================
+// useToken - Token management hook
+// ============================================================================
+
+export interface UseTokenReturn {
+  accessToken: string | null;
+  refreshToken: string | null;
+  getAccessToken: () => string | null;
+  refreshTokens: () => Promise<void>;
+  isAuthenticated: boolean;
+}
+
+/**
+ * Hook for accessing and managing auth tokens
+ */
+export function useToken(): UseTokenReturn {
+  const { accessToken, refreshToken, getAccessToken, refreshTokens, isAuthenticated } =
+    useAuthContext();
+
+  return useMemo(
+    () => ({
+      accessToken,
+      refreshToken,
+      getAccessToken,
+      refreshTokens,
+      isAuthenticated,
+    }),
+    [accessToken, refreshToken, getAccessToken, refreshTokens, isAuthenticated]
+  );
+}
+
+// ============================================================================
+// useAuthStatus - Status-specific hook
+// ============================================================================
+
+export interface UseAuthStatusReturn {
+  status: AuthStatus;
+  isIdle: boolean;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  isUnauthenticated: boolean;
+  isVerifying: boolean;
+}
+
+/**
+ * Hook for auth status checks
+ */
+export function useAuthStatus(): UseAuthStatusReturn {
+  const { status, isLoading } = useAuthContext();
+
+  return useMemo(
+    () => ({
+      status,
+      isIdle: status === 'idle',
+      isLoading,
+      isAuthenticated: status === 'authenticated',
+      isUnauthenticated: status === 'unauthenticated',
+      isVerifying: status === 'verifying',
+    }),
+    [status, isLoading]
+  );
+}
+
+// ============================================================================
+// useRequireAuth - Protected route hook
+// ============================================================================
+
+export interface UseRequireAuthOptions {
+  /** Redirect path when not authenticated */
+  redirectTo?: string;
+  /** Required roles (any of) */
+  roles?: UserRole[];
+  /** Callback when auth check fails */
+  onUnauthorized?: () => void;
+}
+
+export interface UseRequireAuthReturn {
+  isAuthorized: boolean;
+  isLoading: boolean;
+  user: User | null;
+}
+
+/**
+ * Hook for protected routes/components
+ * Returns authorization state and user
+ */
+export function useRequireAuth(options: UseRequireAuthOptions = {}): UseRequireAuthReturn {
+  const { roles, onUnauthorized } = options;
+  const { user, isAuthenticated, isLoading, hasRole } = useAuthContext();
+
+  const isAuthorized = useMemo(() => {
+    if (!isAuthenticated) return false;
+    if (roles && roles.length > 0 && !hasRole(roles)) return false;
+    return true;
+  }, [isAuthenticated, roles, hasRole]);
+
+  // Call onUnauthorized when auth check is complete and user is not authorized
+  useEffect(() => {
+    if (!isLoading && !isAuthorized && onUnauthorized) {
+      onUnauthorized();
+    }
+  }, [isLoading, isAuthorized, onUnauthorized]);
+
+  return useMemo(
+    () => ({
+      isAuthorized,
+      isLoading,
+      user,
+    }),
+    [isAuthorized, isLoading, user]
+  );
+}
+
+// ============================================================================
+// useProfileSync - Profile synchronization hook
+// ============================================================================
+
+export { useProfileSync } from './useProfileSync';
+export type { UserProfile, UseProfileSyncReturn } from './useProfileSync';
+
+// ============================================================================
+// useAuthError - Error handling hook
+// ============================================================================
+
+export interface UseAuthErrorReturn {
+  error: AuthError | null;
+  hasError: boolean;
+  errorMessage: string | null;
+  errorCode: AuthError['code'] | null;
+  clearError: () => void;
+}
+
+/**
+ * Hook for auth error handling
+ */
+export function useAuthError(): UseAuthErrorReturn {
+  const context = useAuthContext();
+
+  // Note: clearError would need to be added to the context
+  // For now, errors clear on next action
+
+  return useMemo(
+    () => ({
+      error: context.error,
+      hasError: !!context.error,
+      errorMessage: context.error?.message ?? null,
+      errorCode: context.error?.code ?? null,
+      clearError: () => {
+        // Errors are cleared on next action
+        // Could be enhanced with explicit clear in context
+      },
+    }),
+    [context.error]
+  );
+}