Session

ABP React provides session management for tracking user state.

useSession Hook

The useSession hook provides access to session state:

import { useSession } from '@abpjs/core';

function SessionExample() {
  const { session, setSession, clearSession } = useSession();

  return (
    <div>
      <p>Language: {session.language}</p>
      <p>Tenant: {session.tenantId || 'Host'}</p>
      <p>Token Expiry: {session.tokenExpiry}</p>
    </div>
  );
}

API Reference

useSession Returns

Property	Type	Description
session	Session	Current session state
setSession	(session: Partial<Session>) => void	Update session state
clearSession	() => void	Clear the session

Session Object

Property	Type	Description
language	string	Current language/culture
tenantId	string | null	Current tenant ID (null for host)
tokenExpiry	number | null	Access token expiry timestamp

Switching Tenants

Update the session to switch tenants:

import { useSession } from '@abpjs/core';

function TenantSwitcher() {
  const { setSession } = useSession();

  const switchTenant = (tenantId: string | null) => {
    setSession({ tenantId });
    // Reload configuration after tenant switch
    window.location.reload();
  };

  return (
    <div>
      <button onClick={() => switchTenant(null)}>Host</button>
      <button onClick={() => switchTenant('tenant-id-1')}>Tenant 1</button>
      <button onClick={() => switchTenant('tenant-id-2')}>Tenant 2</button>
    </div>
  );
}

Session Persistence

Session data is stored in localStorage. Configure persistence:

// Session is automatically persisted
// Access stored session data
const storedSession = localStorage.getItem('abp-session');

Redux Session Slice

The session state is managed via Redux. Access it directly if needed:

import { useSelector, useDispatch } from 'react-redux';
import { sessionSlice } from '@abpjs/core';

function SessionManager() {
  const session = useSelector((state: any) => state.session);
  const dispatch = useDispatch();

  const updateLanguage = (language: string) => {
    dispatch(sessionSlice.actions.setLanguage(language));
  };

  return (
    <select
      value={session.language}
      onChange={(e) => updateLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="tr">Türkçe</option>
    </select>
  );
}

SessionStateService (v1.1.0)

The SessionStateService provides a service-based API for accessing session state:

import { useAbp } from '@abpjs/core';

function SessionExample() {
  const { sessionStateService } = useAbp();

  const language = sessionStateService.getLanguage();
  const tenant = sessionStateService.getTenant();

  return (
    <div>
      <p>Language: {language}</p>
      <p>Tenant: {tenant?.name || 'Host'}</p>
    </div>
  );
}

SessionStateService Methods

Method	Returns	Description
getLanguage()	string	Get current language/culture
getTenant()	CurrentTenantDto	Get current tenant info (v4.0.0: returns CurrentTenantDto instead of ABP.BasicItem)
getSessionDetail()	SessionDetail	Get session detail info (v2.0.0)
setTenant(tenant)	void	Set the current tenant (v4.0.0)
setLanguage(language)	void	Set the current language (v4.0.0)

ProfileStateService (v1.1.0)

The ProfileStateService provides access to the current user's profile:

import { useAbp } from '@abpjs/core';

function ProfileExample() {
  const { profileStateService } = useAbp();

  const profile = profileStateService.getProfile();

  return (
    <div>
      <p>Username: {profile?.userName}</p>
      <p>Email: {profile?.email}</p>
      <p>Name: {profile?.name} {profile?.surname}</p>
    </div>
  );
}

ProfileStateService Methods

Method	Returns	Description
getProfile()	Profile | undefined	Get current user profile

Session Detail (v2.0.0)

The session now includes detailed tracking information for multi-tab support:

import { useAbp } from '@abpjs/core';

function SessionDetailExample() {
  const { sessionStateService } = useAbp();
  const detail = sessionStateService.getSessionDetail();

  return (
    <div>
      <p>Open tabs: {detail.openedTabCount}</p>
      <p>Last exit: {new Date(detail.lastExitTime).toLocaleString()}</p>
      <p>Remember me: {detail.remember ? 'Yes' : 'No'}</p>
    </div>
  );
}

SessionDetail Object

Property	Type	Description
openedTabCount	number	Number of currently opened tabs/windows
lastExitTime	number	Timestamp of last exit time
remember	boolean	Whether to remember the session

Session Actions (v2.0.0)

New Redux actions for session management:

import { useDispatch } from 'react-redux';
import { sessionActions } from '@abpjs/core';

function SessionManager() {
  const dispatch = useDispatch();

  // Track tab open/close
  useEffect(() => {
    dispatch(sessionActions.modifyOpenedTabCount('increase'));
    return () => {
      dispatch(sessionActions.modifyOpenedTabCount('decrease'));
    };
  }, [dispatch]);

  // Set remember me preference
  const handleRememberMe = (remember: boolean) => {
    dispatch(sessionActions.setRemember(remember));
  };

  // Update session detail directly
  const updateDetail = () => {
    dispatch(sessionActions.setSessionDetail({
      remember: true,
      openedTabCount: 1,
    }));
  };

  return <div>...</div>;
}

Action	Payload	Description
setRemember	boolean	Set remember flag for session persistence
modifyOpenedTabCount	'increase' | 'decrease'	Track opened tabs
setSessionDetail	Partial<SessionDetail>	Update session detail

selectSessionDetail Selector (v2.0.0)

import { useSelector } from 'react-redux';
import { selectSessionDetail } from '@abpjs/core';

function SessionInfo() {
  const sessionDetail = useSelector(selectSessionDetail);
  return <p>Tabs open: {sessionDetail.openedTabCount}</p>;
}

Related

• Authentication - Auth management
• Configuration - App configuration