Registry / security / auth-control-hooks

auth-control-hooks

library1.0.3jsnpmunverified

A lightweight React library (v1.0.3) providing reusable authentication hooks and customizable UI components. Designed for React 18+ with a focus on simplicity and extensibility. Offers hooks like useAuth, useLogin, useLogout, and useSignup, plus pre-built AuthForm, AuthProvider, and ProtectedRoute components. Minimal peer dependencies (react, react-dom). Released as npm package with TypeScript support.

security

npm install auth-control-hooks

package ↗

INSTALL

IMPORT

SIG · AUTH-CONTROL-HOOKS

auth-control-hooks

securityjavascriptv1.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useAuth

✓ import { useAuth } from 'auth-control-hooks'

✗ import useAuth from 'auth-control-hooks'

Named export, not default. Must import from the package root.

AuthProvider

✓ import { AuthProvider } from 'auth-control-hooks'

✗ const AuthProvider = require('auth-control-hooks').AuthProvider

ESM-only; CommonJS require works but is discouraged.

ProtectedRoute

✓ import { ProtectedRoute } from 'auth-control-hooks'

✗ import { ProtectedRoute } from 'auth-control-hooks/components'

All components are exported from the main package index.

Shows wrapping app with AuthProvider, using useAuth hook, and conditionally rendering ProtectedRoute.

import React from 'react'; import { AuthProvider, useAuth, ProtectedRoute } from 'auth-control-hooks'; import { createRoot } from 'react-dom/client'; function App() { return ( <AuthProvider> <ProtectedRoute> <Dashboard /> </ProtectedRoute> </AuthProvider> ); } function Dashboard() { const { user, login, logout } = useAuth(); return ( <div> {user ? ( <button onClick={logout}>Logout {user.name}</button> ) : ( <button onClick={() => login({ email: 'test@test.com', password: 'password' })}>Login</button> )} </div> ); } const root = createRoot(document.getElementById('root')); root.render(<App />);

Debug

Known issues

gotchaAuthProvider must be placed at the root of your component tree to provide auth context to all children.

fix

Wrap top-level component with <AuthProvider> before any components using useAuth.

affects: >=1.0

gotchaThe login function expects an object with email and password fields. Passing wrong structure will cause silent failures.

fix

Ensure login payload matches: { email: string, password: string }.

affects: >=1.0

gotchaProtectedRoute redirects to a default path ('/login') if not authenticated. Customize with redirectTo prop.

fix

Use <ProtectedRoute redirectTo='/custom-login'> to avoid confusion.

affects: >=1.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'user')

useAuth hook called outside of AuthProvider context.

fix

Ensure your component is wrapped in <AuthProvider> high enough in the tree.

Module not found: Can't resolve 'auth-control-hooks'

Package not installed or import path incorrect.

fix

Run `npm install auth-control-hooks` and verify import statement: `import { ... } from 'auth-control-hooks'`.

Warning: React.createRoot() received a container which is not a DOM element.

Root element not found in HTML or React 18 createRoot API misused.

fix

Ensure your HTML has a `<div id="root"></div>` and call `createRoot(document.getElementById('root'))`.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

reactrequiredCore peer dependency for React hooks and components

react-domrequiredRequired for DOM rendering of auth components

Agent activity

27 hits · last 30 days

node

Resources

packageauth-control-hooks ↗