# ReactAuthSystem

Easily manage authentication and authorization in your React applications.

Features:

• Clear route separation for guest and protected areas.
• Customizable permission-based access control.
• Flexible structure for integrating your own components.
• Built with React Router v6 for efficient routing.

Installation:

npm install react-auth-system

Usage:

1. Import the component:

import ReactAuthSystem from 'react-auth-system';

2. Define your routes and components:

const urls = {
  DASHBOARD: {
    url: '/',
    permission: 'web dashboard',
    component: <div>Dashboard</div>,
  },
  UN_AUTHORIZED: {
      url: "/unauthorized",
      permission: null,
      component: <div>Unauthorized</div>,
    },
  // ...other routes
};

const permissionList = ['web dashboard', 'ui notification', 'organization list'];

3. Provide necessary components:

<ReactAuthSystem
    urls={urls}
    permissionList={["web dashboard", "ui notification", "organization list"]}
    guestRouteComponent={
      <GuestRoute
        user={{
          name: "John Doe",
          email: "[email protected]",
        }}
      />
    }
    loginComponent={<Login />}
    protectedRouteComponent={
      <ProtectedRoute
        user={{
          name: "John Doe",
          email: "[email protected]",
        }}
      />
    }
    masterLayoutComponent={<MasterLayout />}
    unAuthorizedComponent={<Unauthorized />}
    notFoundComponent={<NotFound />}
/>

Available Props:

• urls: An object defining your routes and their associated components and permissions.
• permissionList: An array of permissions your application uses.
• loginPath (optional): The path to the login page (defaults to '/login').
• guestRouteComponent: The component to render for guest routes.
• loginComponent: The component to render for the login page.
• protectedRouteComponent: The component to render for protected routes.
• masterLayoutComponent: The component to wrap protected routes with a layout.
• unAuthorizedComponent: The component to render when a user lacks permissions.
• notFoundComponent: The component to render for 404 routes.

Example:

import React from 'react';
import ReactAuthSystem from 'react-auth-system';
// ...other imports

const App = () => {
  // ...define routes and components

  return (
    <ReactAuthSystem
      urls={urls}
      permissionList={permissionList}
      // ...other props
    />
  );
};

export default App;

## Sample Components

The following sample components demonstrate how to integrate your own components with ReactAuthSystem:

### GuestRoute

• Redirects logged-in users to the protected area (/).
• Renders nested routes for guests.
• Don't need to provide Navigate and Outlet tag this will be coming from the child component.

import React from 'react';

const GuestRoute = ({ user, Navigate, Outlet }) => {
  if (user) {
    return <Navigate to="/" replace />;
  } else {
    return <Outlet />;
  }
};

export default GuestRoute;

### ProtectedRoute

• Redirects unauthenticated users to the login page (/login).
• Renders nested routes for authenticated users.
• Don't need to provide Navigate and Outlet tag this will be coming from the child component.

import React from 'react';

const ProtectedRoute = ({ user, Navigate, Outlet }) => {
  return user ? <Outlet /> : <Navigate to="/login" replace />;
};

export default ProtectedRoute;

### MasterLayout

• Provides a basic layout for protected routes.
• Can be customized to match your application's design.
• Don't need to provide Outlet tag this will be coming from the child component.

import React from 'react';

const MasterLayout = ({ Outlet }) => {
  return (
    <div className="">
      <div className="">
        <Outlet />
        <div className=""></div>
        {/* <Footer /> */}
      </div>
    </div>
  );
};

export default MasterLayout;

### Unauthorized

• Renders a message when a user lacks the required permissions.
• Don't need to provide Link tag this will be coming from the child component.

import React from 'react';

const Unauthorized = ({ Link }) => {
  return (
    <div className="">
      <h1 className="">401</h1>
      <p className="">Error!</p>
      <p className="">
        Sorry! You have no permission to perform this task.
      </p>
      <Link className="" to={"/"}>
        Go back to home
      </Link>
    </div>
  );
}

export default Unauthorized;

### NotFound

• Renders a message for 404 routes.
• Don't need to provide Link tag this will be coming from the child component.

import './NotFound.css';

const NotFound = ({ Link }) => {
  return (
    <div className="page-not-found">
      <h1 className="not-found-title">404</h1>
      <p className="not-found-message">
        Oops! Looks like you've stumbled upon a page that doesn't exist.
      </p>
      <Link to="/" className="go-home-button">
        Go back home
      </Link>
    </div>
  );
}

export default NotFound;