cyberlas-auth
v1.0.7
Published
Authentication package for Cyberlas with Cloudflare Turnstile CAPTCHA
Downloads
6
Maintainers
alexanderlogodzinskyReadme
Cyberlas Frontend
Next.js frontend components and pages for Cyberlas project.
Installation
npm install cyberlas-frontend
// app/layout.tsx
import { AuthProvider, QueryProvider, ToastProvider, Header } from 'cyberlas-frontend';
import 'bootstrap/dist/css/bootstrap.min.css';
import './globals.css';
export default function RootLayout({ children }) {
return (
<html lang="ru">
<body>
<QueryProvider>
<AuthProvider>
<ToastProvider>
<Header />
<main>
{children}
</main>
</ToastProvider>
</AuthProvider>
</QueryProvider>
</body>
</html>
);
}
// app/login/page.tsx
import { Login } from 'cyberlas-frontend';
export default function LoginPage() {
return <Login />;
}
// app/register/page.tsx
import { Register } from 'cyberlas-frontend';
export default function RegisterPage() {
return <Register />;
}
// app/admin/page.tsx
import { AdminDashboard } from 'cyberlas-frontend';
export default function AdminPage() {
return <AdminDashboard />;
}
// app/dashboard/page.tsx
import { DashboardPage } from 'cyberlas-frontend';
export default function Dashboard() {
return <DashboardPage />;
}
import { Login } from 'cyberlas-frontend';
<Login />
import { Register } from 'cyberlas-frontend';
<Register />
AdminDashboard
Complete admin panel with user management, statistics, and filtering.
Features:
User statistics cards
User management table
Role and status management
Advanced filtering and search
Real-time data updates
import { AdminDashboard } from 'cyberlas-frontend';
<AdminDashboard />
DashboardPage
User dashboard with personal information and quick actions.
import { DashboardPage } from 'cyberlas-frontend';
<DashboardPage />
Layout Components
Header
Navigation header with authentication state, user menu, and role-based links.
import { Header } from 'cyberlas-frontend';
<Header />
UI Components
AnimatedButton
Button with hover and tap animations.
import { AnimatedButton } from 'cyberlas-frontend';
<AnimatedButton
variant="primary"
isLoading={false}
onClick={() => console.log('Clicked')}
>
Click Me
</AnimatedButton>
AnimatedCard
Card component with entrance and hover animations.
import { AnimatedCard } from 'cyberlas-frontend';
<AnimatedCard className="custom-class">
<h5>Card Title</h5>
<p>Card content</p>
</AnimatedCard>
Providers
AuthProvider
Authentication context provider with user management.
import { AuthProvider, useAuth } from 'cyberlas-frontend';
// In component
const { user, isLoading, isAdmin } = useAuth();
QueryProvider
React Query provider for server state management.
ToastProvider
Toast notifications system.
import { useToast } from 'cyberlas-frontend';
const toast = useToast();
toast.success('Operation completed!');
toast.error('Something went wrong');
Hooks
useAuth
Authentication state management.
import { useAuth } from 'cyberlas-frontend';
const {
user, // Current user object
isLoading, // Loading state
isAdmin, // Admin check
logout // Logout function
} = useAuth();
useForm
Form handling with validation using react-hook-form and Zod.
import { useForm, loginSchema } from 'cyberlas-frontend';
const form = useForm({
schema: loginSchema,
defaultValues: { email: '', password: '' }
});
// In component
<form onSubmit={form.handleSubmit((data) => console.log(data))}>
<input {...form.register('email')} />
{form.formState.errors.email && <span>{form.formState.errors.email.message}</span>}
</form>
Admin Hooks
import {
useUsersStats,
useUsers,
useUpdateUser,
useDeleteUser
} from 'cyberlas-frontend';
// User statistics
const { data: stats, isLoading: statsLoading } = useUsersStats();
// User list with filtering
const { data: users, isLoading: usersLoading } = useUsers({
page: 1,
role: 'super_admin',
search: 'john'
});
// User mutations
const updateUser = useUpdateUser();
const deleteUser = useDeleteUser();
API & Utilities
API Clients
import { authApi, adminApi } from 'cyberlas-frontend';
// Authentication
await authApi.login({ email, password });
await authApi.register({ name, email, password });
await authApi.logout();
// Admin operations
await adminApi.getUsers({ page: 1, role: 'super_admin' });
await adminApi.updateUser(userId, { name: 'New Name' });
Validation Schemas
tsx
import { loginSchema, registerSchema } from 'cyberlas-frontend';
// Use with useForm hook
const form = useForm({ schema: loginSchema });
Types
tsx
import {
User,
LoginData,
RegisterData,
UserStats
} from 'cyberlas-frontend';
Development
Building the Package
bash
npm run build-package
Testing Locally
bash
npm pack
# Then install in your project
npm install ../path/to/cyberlas-frontend-1.0.0.tgz
Project Structure
text
cyberlas-frontend/
├── app/ # Page components
│ ├── admin/page.tsx
│ ├── dashboard/page.tsx
│ ├── login/page.tsx
│ └── register/page.tsx
├── components/ # Reusable components
│ ├── layout/
│ └── ui/
├── lib/ # Utilities and hooks
│ ├── api/
│ ├── hooks/
│ ├── types/
│ ├── utils/
│ └── validation/
└── index.ts # Main exports
Dependencies
Next.js 13+ - React framework
React 18 - UI library
TypeScript - Type safety
React Bootstrap - UI components
Framer Motion - Animations
React Hook Form - Form handling
Zod - Schema validation
TanStack Query - Server state management
Axios - HTTP client
License
MIT License - see LICENSE file for details.