An open API service indexing awesome lists of open source software.

https://github.com/qloux/modern-auth-system


https://github.com/qloux/modern-auth-system

authentication frontend gradient-design i18n jwt material-ui modern-ui multilingual react react-router responsive-design typescript

Last synced: 2 months ago
JSON representation

Awesome Lists containing this project

README

        

# Modern Authentication System | Современная Система Аутентификации

[English](#english) | [Русский](#русский)


## 🌟 Modern Authentication System

A modern, responsive authentication system built with React and TypeScript. This project showcases a beautiful user interface with smooth animations and transitions, perfect for modern web applications.

### Features

- **User Authentication**
- Login with email/password
- User registration
- Password recovery system
- Protected routes

- **Modern UI/UX**
- Smooth page transitions
- Responsive design
- Beautiful gradient animations
- Form validation with error messages

- **Internationalization**
- Multi-language support (English/Russian)
- Easy language switching

### Technologies Used

- **Frontend:**
- React 18
- TypeScript
- React Router v7
- Material-UI
- i18next for translations
- CSS Modules

### Screenshots

#### Login Page
![Login Page](frontend/public/screenshots/login.png)

#### Registration Page
![Registration Page](frontend/public/screenshots/register.png)

#### Password Recovery
![Password Recovery](frontend/public/screenshots/forgot-password.png)

#### Form Validation
![Form Validation](frontend/public/screenshots/validation.png)

### Installation and Setup

1. Clone the repository:
```bash
git clone https://github.com/qloux/modern-auth-system.git
```

2. Install dependencies:
```bash
cd frontend
npm install
```

3. Start the development server:
```bash
npm start
```

4. Open http://localhost:3000 in your browser

---


## 🌟 Современная Система Аутентификации

### Возможности

- **Аутентификация пользователей**
- Вход по email/паролю
- Регистрация пользователей
- Система восстановления пароля
- Защищенные маршруты

- **Современный UI/UX**
- Плавные переходы между страницами
- Адаптивный дизайн
- Красивые градиентные анимации
- Валидация форм с сообщениями об ошибках

- **Интернационализация**
- Поддержка нескольких языков (английский/русский)
- Удобное переключение языков

### Использованные технологии

- **Frontend:**
- React 18
- TypeScript
- React Router v7
- Material-UI
- i18next для переводов
- CSS Modules

### Скриншоты

#### Страница входа
![Страница входа](frontend/public/screenshots/login.png)

#### Страница регистрации
![Страница регистрации](frontend/public/screenshots/register.png)

#### Восстановление пароля
![Восстановление пароля](frontend/public/screenshots/forgot-password.png)

#### Валидация форм
![Валидация форм](frontend/public/screenshots/validation.png)

### Установка и запуск

1. Клонируйте репозиторий:
```bash
git clone https://github.com/qloux/modern-auth-system.git
```

2. Установите зависимости:
```bash
cd frontend
npm install
```

3. Запустите сервер разработки:
```bash
npm start
```

4. Откройте http://localhost:3000 в браузере

## 🔒 Функции безопасности
- Хеширование паролей с помощью bcrypt
- Аутентификация через JWT токены
- Защищенные API маршруты
- Валидация форм
- CORS защита
- HTTP-only куки

## 🎨 Особенности дизайна
- Адаптивный дизайн для всех размеров экранов
- Плавные переходы между страницами
- Интерактивные элементы форм
- Состояния загрузки и анимации
- Обработка ошибок в интерфейсе
- Поддержка темной темы
- Градиентные фоны

## 👤 Автор
qloux

GitHub: [@qloux](https://github.com/qloux)

## 📄 Лицензия
Этот проект распространяется под лицензией MIT.