@smess/auth-plugin

A comprehensive authentication plugin for SMESS platform with React components and services.

Features

• 🔐 Complete authentication flow (login, register, forgot password, OTP)
• ⚛️ Ready-to-use React components with shadcn/ui styling
• 🛡️ Route protection with AuthGuard component
• 📱 User profile management
• 🔧 Configurable authentication services
• 🎨 Beautiful UI components built with Radix UI and Tailwind CSS

Installation

npm install @smess/auth-plugin

Quick Start

import React from 'react';
import { AuthPlugin, LoginForm, AuthGuard } from '@smess/auth-plugin';

const config = {
  baseUrl: 'https://api.example.com',
  clientId: 'your-client-id',
  apiKey: 'your-api-key',
};

const authPlugin = new AuthPlugin(config);

function App() {
  return (
    <AuthGuard authPlugin={authPlugin}>
      <LoginForm authPlugin={authPlugin} />
    </AuthGuard>
  );
}

Components

AuthPlugin

Main authentication service class that handles all auth operations.

React Components

• LoginForm - Login form with validation
• RegisterForm - User registration form
• ForgotPasswordForm - Password reset form
• OTPForm - OTP verification form
• UserProfile - User profile display
• AuthGuard - Route protection wrapper

Services

• AuthService - Core authentication logic
• TokenService - Token management
• StorageService - Local storage handling
• ApiService - API communication
• EventService - Authentication events

Configuration

interface AuthConfig {
  baseUrl: string;
  clientId: string;
  apiKey: string;
  isProd?: boolean;
}

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format

Publishing

# Build and publish to npm
npm run publish:lib

License

MIT

Support

For support and questions, please refer to the SETUP.md file for detailed usage instructions.