Fix/verify email UI

.github/workflows/ci.yml

@@ -0,0 +1,37 @@
+name: CI 
+
+on:
+    pull_request:
+        branches: [master, develop]
+    push:
+        branches: [develop]
+    workflow_dispatch:
+
+permissions:
+    contents: read
+
+jobs:
+    ci:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 22
+                  cache: npm
+                  registry-url: https://registry.npmjs.org/
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Lint
+              run: npm run lint --if-present
+
+            - name: Test
+              run: npm test --if-present
+
+            - name: Build
+              run: npm run build --if-present

.github/workflows/cd-release.yml → .github/workflows/publish.yml

@@ -2,16 +2,19 @@ name: Publish to npm
 
 on:
   push:
+    tags:
+      - "v*.*.*"
     branches:
-      - "master" # Triggers on pushes to the master branch
-  workflow_dispatch: # Allows manual trigger from GitHub UI
+      - master
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write
 
 jobs:
   publish:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write # Required for npm provenance
 
     steps:
       - name: Checkout code

README.md

@@ -1,44 +1,224 @@
-# React TypeScript DeveloperKit (Template)
+# @ciscode/ui-authentication-kit
 
-Template repository for building reusable React TypeScript **npm libraries**
-(components + hooks + utilities).
+> **Production-ready authentication UI components for React applications**
 
-## What you get
+[![npm version](https://img.shields.io/npm/v/@ciscode/ui-authentication-kit.svg)](https://www.npmjs.com/package/@ciscode/ui-authentication-kit)
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](LICENSE)
 
-- ESM + CJS + Types build (tsup)
-- Vitest testing
-- ESLint + Prettier (flat config)
-- Changesets (manual release flow, no automation PR)
-- Husky (pre-commit + pre-push)
-- Enforced public API via `src/index.ts`
-- Dependency-free styling (Tailwind-compatible by convention only)
-- `react` and `react-dom` as peerDependencies
+Complete authentication solution with built-in pages, RBAC support, and session management. Drop-in components that work with any backend API.
 
-## Package structure
+## ✨ Features
 
-- `src/components` – reusable UI components
-- `src/hooks` – reusable React hooks
-- `src/utils` – framework-agnostic utilities
-- `src/index.ts` – **only public API** (no deep imports allowed)
+- 🔐 **Pre-built Auth Pages** - Login, Register, Password Reset, Profile
+- 🛡️ **RBAC Support** - Role-based access control with permissions
+- 🔄 **Session Management** - Automatic token refresh and expiration handling
+- 🎨 **Customizable** - Headless components, bring your own styles
+- ♿ **Accessible** - ARIA-compliant, keyboard navigation
+- 🌍 **i18n Ready** - Multi-language support via `@ciscode/ui-translate-core`
+- 📱 **Responsive** - Mobile-first design
+- 🚀 **TypeScript** - Full type safety
 
-Anything not exported from `src/index.ts` is considered private.
+## 📦 Installation
 
-## Scripts
+```bash
+npm install @ciscode/ui-authentication-kit
+# or
+yarn add @ciscode/ui-authentication-kit
+# or
+pnpm add @ciscode/ui-authentication-kit
+```
 
-- `npm run build` – build to `dist/` (tsup)
-- `npm test` – run tests (vitest)
-- `npm run typecheck` – TypeScript typecheck
-- `npm run lint` – ESLint
-- `npm run format` / `npm run format:write` – Prettier
-- `npx changeset` – create a changeset
+### Peer Dependencies
 
-## Release flow (summary)
+```bash
+npm install react react-dom react-router-dom axios jwt-decode react-cookie lucide-react @ciscode/ui-translate-core
+```
 
-- Work on a `feature` branch from `develop`
-- Merge to `develop`
-- Add a changeset for user-facing changes: `npx changeset`
-- Promote `develop` → `master`
-- Tag `vX.Y.Z` to publish (npm OIDC)
+## 🚀 Quick Start
 
-This repository is a **template**. Teams should clone it and focus only on
-library logic, not tooling or release mechanics.
+### 1. Wrap your app with `AuthProvider`
+
+```tsx
+import { AuthProvider } from '@ciscode/ui-authentication-kit';
+import { BrowserRouter } from 'react-router-dom';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider
+        config={{
+          apiUrl: 'https://api.example.com',
+          loginPath: '/auth/login',
+          registerPath: '/auth/register',
+          profilePath: '/auth/profile',
+          logoutPath: '/auth/logout',
+          redirectAfterLogin: '/dashboard',
+          redirectAfterLogout: '/',
+        }}
+      >
+        {/* Your app routes */}
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}
+```
+
+### 2. Use authentication state
+
+```tsx
+import { useAuthState } from '@ciscode/ui-authentication-kit';
+
+function Dashboard() {
+  const { user, isAuthenticated, logout } = useAuthState();
+
+  if (!isAuthenticated) {
+    return <div>Please log in</div>;
+  }
+
+  return (
+    <div>
+      <h1>Welcome, {user?.name}!</h1>
+      <button onClick={logout}>Logout</button>
+    </div>
+  );
+}
+```
+
+### 3. Protect routes with permissions
+
+```tsx
+import { RequirePermissions } from '@ciscode/ui-authentication-kit';
+
+function AdminPanel() {
+  return (
+    <RequirePermissions
+      fallbackpermessions={['admin.view', 'admin.edit']}
+      fallbackRoles={['super-admin']}
+      redirectTo="/unauthorized"
+    >
+      <div>Admin Content</div>
+    </RequirePermissions>
+  );
+}
+```
+
+## 📚 Documentation
+
+- **[API Reference](docs/API.md)** - Complete API documentation
+- **[Examples](docs/EXAMPLES.md)** - Integration examples
+- **[Styling Guide](docs/STYLING.md)** - Customization guide
+- **[Accessibility](docs/ACCESSIBILITY.md)** - A11y patterns
+- **[Migration Guide](docs/MIGRATION.md)** - Upgrade guides
+- **[Architecture](docs/ARCHITECTURE.md)** - Project structure
+- **[Release Guide](docs/RELEASE.md)** - Release workflow
+
+## 🎯 Key Components
+
+| Component            | Description                                        |
+| -------------------- | -------------------------------------------------- |
+| `AuthProvider`       | Root provider for authentication state and routing |
+| `ProfilePage`        | User profile management UI                         |
+| `RequirePermissions` | Permission-based route guard                       |
+| `RbacProvider`       | Role-based access control context                  |
+
+## 🪝 Core Hooks
+
+| Hook                   | Description                                              |
+| ---------------------- | -------------------------------------------------------- |
+| `useAuthState()`       | Access auth state (user, isAuthenticated, login, logout) |
+| `useHasRole(role)`     | Check if user has a specific role                        |
+| `useHasModule(module)` | Check if user has access to a module                     |
+| `useCan(permission)`   | Check if user has a permission                           |
+| `useGrant()`           | Access RBAC grant management                             |
+
+## 🔐 RBAC Example
+
+```tsx
+import { RbacProvider, useHasRole, useCan } from '@ciscode/ui-authentication-kit';
+
+function App() {
+  return (
+    <RbacProvider>
+      <Dashboard />
+    </RbacProvider>
+  );
+}
+
+function Dashboard() {
+  const isAdmin = useHasRole('admin');
+  const canEditUsers = useCan('users.edit');
+
+  return (
+    <div>
+      {isAdmin && <AdminPanel />}
+      {canEditUsers && <EditButton />}
+    </div>
+  );
+}
+```
+
+## 🌐 Internationalization
+
+The kit integrates with `@ciscode/ui-translate-core` for multi-language support:
+
+```tsx
+import { TranslateProvider } from '@ciscode/ui-translate-core';
+
+<TranslateProvider locale="en" translations={translations}>
+  <AuthProvider config={config}>
+    <App />
+  </AuthProvider>
+</TranslateProvider>;
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Type check
+npm run typecheck
+
+# Lint
+npm run lint
+
+# Format code
+npm run format:write
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create a feature branch from `develop`
+3. Make your changes with tests
+4. Submit a PR to `develop`
+
+## 📄 License
+
+ISC © [CISCODE](https://github.com/CISCODE-MA)
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/CISCODE-MA/AuthKit-UI)
+- [NPM Package](https://www.npmjs.com/package/@ciscode/ui-authentication-kit)
+- [Report Issues](https://github.com/CISCODE-MA/AuthKit-UI/issues)
+
+## 📊 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## 🙏 Acknowledgments
+
+Built with modern React patterns and best practices. Designed for enterprise applications.