login-register-lib
Version:
Reactjs Library for automating login, register workflows in frontend.
98 lines (68 loc) • 3.06 kB
Markdown
# React Login-Register Library
A lightweight React library that provides **ready-to-use login and registration flows** with **React Router DOM**, **React Bootstrap**, and secure **HttpOnly cookie-based authentication**.
It helps developers quickly bootstrap authentication features without reinventing the wheel.
---
## ✨ Features
- 🔐 **Secure Authentication** with HttpOnly cookies (prevents XSS token theft).
- 🔄 **Login / Register Pages** built with React Bootstrap components.
- 🔄 **DARK / LIGHT Modes** builtin dark/light mode adaptable based on your system setting.
- 🔄 **Auto Logout on unauthorized access** logs user out if token not present.
<!-- - 🚦 **Routing Guard** using React Router DOM. -->
<!-- - 🧑💻 **Customizable UI** – extend or replace default forms easily. -->
- ⚡ **Plug & Play Setup** – integrate into existing React apps quickly.
---
## 📦 Installation
```bash
npm install react-login-register
```
### Include Authflow in your desired component
```
import { AuthFlow, useAuthEvents, SIGN_IN_SUCCESS, UNAUTHORIZED_ACCESS } from "login-register-lib";
export default function App() {
useAuthEvents(SIGN_IN_SUCCESS, (response: any) => {
console.log('App received SIGN_IN_SUCCESS event!', response);
// navigate to your homepage from here eg. navigate('/home');
})
useAuthEvents(UNAUTHORIZED_ACCESS, (error: any) => {
console.log('App received Unauthorized event!', error);
})
return (
<AuthFlow />
)
}
```
> Note: Remove any overriding styles in :root to avoid UI disturbance, like text-align: center, display: flex from index.css
### Include Styles in main.tsx
```
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import 'login-register-lib/style.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
```
---
## ⚙️ Url env settings
Currently the backend urls are fixed, we are working on to make it dynamically configure it, any contribution is most welcome.
```
Following are current urls:
VITE_BASE_URL=http://localhost:4000/
VITE_LOGIN_URL=/auth/login
VITE_SIGNUP_URL=/auth/signup
VITE_LOGOUT_URL=/auth/logout
```
> Note: you need to setup your backend apis as provided above.
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://gitlab.com/opensource007/login-register-npm-library/-/issues).
1. Fork the repo
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Merge Request
> Check out [CONTRIBUTING.md](https://gitlab.com/opensource007/login-register-npm-library/-/blob/master/CONTRIBUTING.md) for more details.
