Overview

The @abpjs/core package provides the foundational infrastructure for ABP React applications. It includes authentication, configuration management, localization, permissions, REST services, and session management.

Installation

npm install @abpjs/core

Features

• Authentication - OAuth2/OIDC support with oidc-client-ts
• Configuration - ABP application configuration management
• Localization - Multi-language support with dynamic resource loading
• Permissions - Fine-grained permission checking
• REST Service - Axios-based HTTP client with interceptors
• Session Management - User session state handling
• Loading Strategies - Strategy-based script/style loading (v2.4.0)
• Standard DTOs - ABP-standard DTO classes for entities and pagination (v2.4.0)

Main Exports

Hooks

Hook	Description
useAuth()	Authentication state and methods (login, logout, isAuthenticated)
useConfig()	Access ABP application configuration
useDirection()	RTL/LTR direction based on current language
useLocalization()	Translation functions (t() and instant())
usePermission()	Permission checking utilities
useProfile()	User profile management
useRestService()	HTTP client for API calls
useSession()	Session state management

Services

Service	Description
ApplicationConfigurationService	Fetch ABP configuration from backend
ConfigService	Runtime configuration state
ProfileService	User profile API operations
LocalizationService	Translation services
RestService	HTTP client with ABP interceptors
LazyLoadService	Dynamic module/script loading
DomInsertionService	DOM content insertion with tracking (v2.4.0)

Redux Slices

Slice	Description
configSlice	Application configuration state
profileSlice	User profile state
sessionSlice	Session and authentication state

Quick Example

import { useAuth, useLocalization, usePermission } from '@abpjs/core';

function MyComponent() {
  const { isAuthenticated, login, logout } = useAuth();
  const { t } = useLocalization();
  const { hasPermission } = usePermission();

  if (!isAuthenticated) {
    return <button onClick={login}>{t('Login')}</button>;
  }

  return (
    <div>
      <h1>{t('Welcome')}</h1>
      {hasPermission('AbpIdentity.Users') && (
        <a href="/users">{t('ManageUsers')}</a>
      )}
      <button onClick={logout}>{t('Logout')}</button>
    </div>
  );
}

NPM Package

View on npm: @abpjs/core

Documentation

• Authentication - OAuth2/OIDC setup and hooks
• Configuration - Application configuration
• Localization - Multi-language support
• Permissions - Permission system
• REST Service - HTTP client
• Session - Session management