Auth-kit-react NPM

Auth Kit React

Auth Kit React is a versatile authentication and authorization package for React applications. It provides a simple and configurable solution for managing user authentication, authorization, and session handling.

Features

User Authentication: Easily integrate user authentication into your React applications.
Authorization: Manage user roles and permissions for secure access control.
Session Handling: Handle user sessions and persist authentication state.
Configurability: Configure the package based on your application's specific needs.

Installation

npm install auth-kit-react
or
yarn add auth-kit-react

Usage

Import AuthProvider and useAuth in your main application file.

// src/App.js

import React from 'react';
import { AuthProvider, useAuth, ProtectedRoute } from 'auth-kit-react';

function App() {
  return (
    <AuthProvider authUtilsOptions={{ baseUrl: 'your-api-url' }}>
      {/* Your application components */}
    </AuthProvider>
  );
}

export default App;

Use the useAuth hook in your components.

// src/components/Profile.js

import React from 'react';
import { useAuth } from 'auth-kit-react';

function Profile() {
  const { token, login, logout } = useAuth();

  return (
    <div>
      {token ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <button onClick={() => login('username', 'password')}>Login</button>
      )}
    </div>
  );
}

export default Profile;

Protect your routes using ProtectedRoute component.

// src/components/Dashboard.js

import React from 'react';

function Dashboard() {
  return <div>Protected Dashboard</div>;
}

export default Dashboard;

Add protected routes in your main application.

// src/App.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import { ProtectedRoute, AuthProvider } from 'auth-kit-react';

function App() {
  return (
    <AuthProvider authUtilsOptions={authUtilsOptions}>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route element={<ProtectedRoute />}>
            <Route path="/dashboard" element={<Dashboard />} />
          </Route>
        </Routes>
      </AuthProvider>
  );
}

export default App;