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.
• ✅ Validations Included built in form validations added.
• 🌓 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.
• ⚡ Plug & Play Setup – integrate into existing React apps quickly.

📦 Installation

npm install login-register-lib

Create new functional component with AuthFlow included in it.

import 'login-register-lib/style.css'; // You generally dont need this if you already installed bootstrap css
import { AuthFlow, SIGN_IN_SUCCESS, UNAUTHORIZED_ACCESS, useAuthEvents } from 'login-register-lib';
import { useNavigate } from 'react-router-dom';
import { DASHBOARD_PATH } from '../../constants';

export default function LoginRegister() {
    const navigate = useNavigate();

    useAuthEvents(SIGN_IN_SUCCESS, (response: any) => {
        navigate(DASHBOARD_PATH, { replace: true });
    })

    useAuthEvents(UNAUTHORIZED_ACCESS, (error: any) => {
        console.log('App received Unauthorized event!', error);
    })

    return (
        <AuthFlow enableGoogleSignin={true} googleClientId={import.meta.env.VITE_GOOGLE_CLIENT_ID} />
    )
}

Note: Remove any overriding styles in :root to avoid UI disturbance, like text-align: center, display: flex from index.css

⚙️ Url env settings

The endpoints for server authentication apis

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.

How to update backend host to your server

To update backend server base url you need to include this line in your App.js or Main.js

import { ApiService } from 'login-register-lib'

ApiService.defaults.baseURL = 'http://localhost:3000/';

You can replace "http://localhost:3000/" with your backend url

✨ Additional Features

1. Using readymade API service

You can use ApiService from package to included auto redirection of unauthorized login, which means user will be redirected to login if his token is expired or if he gets 401 unauthorized access error.

ApiService.post('/your-api', data).then(response => {
  // Your logic
})

2. Google Signin feature

You can enable google signin feature in your login form Before proceeding you need Google Client Id

Step 1: Include google script in your head section of index.html in reactjs

<script src="https://accounts.google.com/gsi/client" async defer></script>

Step 2: Enable google signin

<AuthFlow enableSignup={true} enableGoogleSignin={true} googleClientId={<Your_google_clientId>}/>

Step 3: Setup your backend to verify google token and store the user details like email

Use Google’s library (google-auth-library) to validate the ID token:

import { OAuth2Client } from 'google-auth-library';

const client = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);

export async function verifyGoogleToken(token) {
  const ticket = await client.verifyIdToken({
    idToken: token,
    audience: process.env.GOOGLE_CLIENT_ID,
  });
  const payload = ticket.getPayload();
  return payload; // contains sub, email, name, picture, etc.
}

After verification you can send httponly jwt token to frontend for authentications.

Step 4: Disable Register feature

To disable register feature for security reason or creating login credential for limited users manually.

Set enableSignup=false, to disable register feature:

<AuthFlow enableSignup={false} googleClientId={import.meta.env.VITE_GOOGLE_CLIENT_ID} />

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.

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 for more details.

💖 Support My Work

If this library helped you, consider supporting my work — it means a lot to me and my family 💛