Keycloak Authentication SDK

A React-based authentication library for Keycloak integration.

Installation

npm install wox-auth

Usage

1. Wrap your app with AuthProvider

import { AuthProvider } from 'wox-auth';

const config = {
  url: 'https://your-keycloak-server',
  realm: 'your-realm',
  clientId: 'your-client-id',
  onAuthSuccess: () => {
    console.log('Authentication successful');
  },
  onAuthError: (error) => {
    console.error('Authentication failed:', error);
  },
};

// Optional: Provide custom storage configuration
const storageConfig = {
  tokenKey: 'my-app-token',
  refreshTokenKey: 'my-app-refresh-token',
  userInfoKey: 'my-app-user-info',
  storage: localStorage // You can provide any storage implementation that matches the Storage interface
};

function App() {
  return (
    <AuthProvider config={config} storageConfig={storageConfig}>
      <YourApp />
    </AuthProvider>
  );
}

2. Use the authentication hooks in your components

import { useAuth } from 'wox-auth';

function LoginButton() {
  const { login, logout, isAuthenticated, user } = useAuth();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <p>Welcome, {user?.name}!</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <button onClick={login}>Login</button>
      )}
    </div>
  );
}

3. Protected Route Example

import { useAuth } from 'wox-auth';

function ProtectedRoute({ children }) {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <div>Please login to access this page</div>;
  }

  return children;
}

Features

• 🔐 Keycloak authentication integration
• 🔄 Automatic token refresh
• 👤 User information management
• ⚡ React hooks for easy integration
• 📦 TypeScript support
• 🛡️ Protected route support
• 💾 Configurable storage mechanism

API Reference

AuthProvider Props

| Prop | Type | Description | |------|------|-------------| | config | AuthConfig | Keycloak configuration object | | storageConfig | StorageConfig (optional) | Custom storage configuration | | children | ReactNode | React components to be wrapped |

StorageConfig Interface

| Property | Type | Description | |----------|------|-------------| | tokenKey | string | Key for storing the access token | | refreshTokenKey | string | Key for storing the refresh token | | userInfoKey | string | Key for storing user information | | storage | Storage | Storage implementation (must implement getItem, setItem, removeItem) |

useAuth Hook

Returns an object with the following properties:

| Property | Type | Description | |----------|------|-------------| | isAuthenticated | boolean | Whether the user is authenticated | | isLoading | boolean | Whether the authentication state is loading | | error | Error | null | Any authentication error | | token | string | null | Current access token | | user | User | null | Current user information | | login | () => Promise | Function to initiate login | | logout | () => Promise | Function to logout | | refreshToken | () => Promise | Function to refresh the token | | updateToken | () => Promise | Function to update the token |

License

MIT