react-ssi-security-commons

A comprehensive security utility library for React and TypeScript applications, providing authentication management, JWT handling, automated Axios interceptors, and encryption utilities.

Features

• AuthService: Manage access and refresh tokens in localStorage, decode JWTs, and handle user session data.
• AuthInterceptor: Automatic Bearer token injection into Axios requests and zero-config token refresh logic on 401 Unauthorized errors.

Installation

npm install react-ssi-security-commons axios crypto-js jwt-decode

Usage

1. AuthService

The AuthService handles token persistence and user data extraction.

import { AuthService } from 'react-ssi-security-commons';

const authService = new AuthService();

// Check if authenticated
const isAuth = authService.isAuthenticated();

// Get mapped user data
const user = authService.getUser();
console.log(user?.email);

// Custom session clearing
authService.clearSessionData();

2. Setting up Interceptors

The AuthInterceptor can be attached to any Axios instance. It will automatically:

1. Inject the Bearer token if available.
2. Catch 401 errors and attempt to refresh the token using the refresh token stored in the AuthService.
3. Automatically retry the failed request with the new token.

import axios from 'axios';
import { AuthService, setupAuthInterceptors } from 'react-ssi-security-commons';

const api = axios.create({
  baseURL: 'https://api.your-system.com'
});

const authService = new AuthService();

const config = {
  authUrl: 'https://keycloak.your-system.com',
  realm: 'your-realm',
  clientId: 'your-client-id',
  coreUrl: 'https://gateway.your-system.com',
  production: true
};

setupAuthInterceptors(api, config, authService, {
  onTokenUpdated: (tokens) => {
    console.log('Session refreshed successfully');
  },
  onAuthError: () => {
    console.error('Session expired, redirecting to login');
    authService.goToLogin(config);
  }
});

export default api;