Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ushliypakostnik/react-auth
Create React App based PWA full auth module with localization and themezation on TypeScipt and Styled Components.
https://github.com/ushliypakostnik/react-auth
auth authentication i18next pwa react react-router redux social-login styled-components styled-components-theme themes typescript
Last synced: about 1 month ago
JSON representation
Create React App based PWA full auth module with localization and themezation on TypeScipt and Styled Components.
- Host: GitHub
- URL: https://github.com/ushliypakostnik/react-auth
- Owner: ushliypakostnik
- Created: 2019-08-21T15:12:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-05T13:26:36.000Z (almost 4 years ago)
- Last Synced: 2023-02-27T23:12:04.067Z (almost 2 years ago)
- Topics: auth, authentication, i18next, pwa, react, react-router, redux, social-login, styled-components, styled-components-theme, themes, typescript
- Language: TypeScript
- Homepage: https://react-auth.kafedra.org/
- Size: 476 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Create React App based frontend boilerplate
===========================================
Описание
--------
[Демонстрация](https://react-auth.kafedra.org/)
Основанная на Create React App реализация Progressive Web App клиента с модулем полноценной аунтефикации через [Backend API](https://github.com/ushliypakostnik/express-auth), локализацией и темезацией.
Написан на TypeScript со стилизацией с помощью Styled Components.
Юзеркейсы:
----------
Пользователь может быть авторизован или не авторизован в системе.
### Вход и регистрация
Неавторизованному пользователю показывается два поля ввода: адреса электронной почты и пароля, а также три кнопки - входа через Facebook или ВКонтакте, и кнопка входа с помощью валидных данных почты и пароля.
Пользователь который ввел валидный электронный адрес и пароль будет авторизован в системе. Если пользователя с указанным адресом не существует в базе - он будет добавлен.
Адрес электронной почты пользователя впервые авторизовавшегося в системе через социальную сеть, также будет добавлен в базу. Он сможет создать пароль при первой же попытке обычного входа по паролю со своей электронной почты.
### Востановление пароля
Ниже стартовой формы показывается ссылка позволяющая переключиться на форму восстановления пароля, состоящую из только одного контрола ввода электронной почты и кнопки для ее отправки.
При попытке восстановления пароля на указанный адрес электронной почты отправляется письмо, в том случае, если пользователь с такой почтой уже зарегистрирован в базе. При переходе по ссылке с такого письма пользователь получает аутентификацию и оказывается на специальной форме из двух полей ввода пароля и кнопки, позволяющих создать новый пароль. При отправке двух совпадающих валидных паролей пользователь окажется во внутреннем интерфейсе, аккаунте. Его пароль будет изменен или создан, если ранее он входил только через социальные аккаунты.
### Верификация
Каждый новый пользователь получает статус неверифицированного и на указанный им почтовый ящик отправляется письмо с предложением подтвердить регистрацию. При переходе по ссылке в письме пользователь получает аутентификацию, верифицируется, и оказывается во внутреннем интерфейсе, аккаунте.
### Аккаунт
Во внутреннем интерфейсе, аккаунте пользователь видит адрес электронной почты, статус верификации, кнопку выхода из системы. Если пользователь не верифицирован он также видит кнопку повторной отправки письма для подтверждения регистрации с сообщением под ней предлагающим это сделать.
### UI
Пользователь может выбирать язык и колористическую гамму интерфейса, тему.
Во всех возможных и необходимых случаях в правильных местах интерфейс показывает информативные сообщения об успехе или провале действий совершаемых пользователем.
При переходе между состояниями, страницами, во время действий требующих ожидания ответа от сервера пользователю показывается анимированный лоадер.
Deploy
------
Установка зависимостей npm packages
$ npm install
Запуск сервера для разработки
-----------------------------
$ npm start
http://localhost:3000/
Cборка
------
Сборка проекта в продакшен, в папку /build
$ npm build
Тесты
-----
Запуск тестов
$ npm test
## Learn More
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).