harshil-auth

2.6.9 verified Sat Apr 25 auth: no javascript

Custom authentication library for Next.js and React applications. Current stable version 2.6.9, actively maintained with regular updates. Designed for Next.js 13+ (App Router) and React 18+. Ships TypeScript types. Key differentiator: simple integration with Next.js projects, but minimal documentation and community adoption compared to alternatives like NextAuth.js.

Common errors

error TypeError: harshilAuth is not a function ↓

cause Importing default export when using ESM import incorrectly.

fix

Use import harshilAuth from 'harshil-auth' (default) or check docs for named exports.

error Module not found: Can't resolve 'harshil-auth' ↓

cause Package not installed or incorrect import path.

fix

Run npm install harshil-auth and ensure import path is correct.

error Error: No API URL provided in AuthProvider config ↓

cause Missing `apiUrl` configuration.

fix

Pass config={{ apiUrl: process.env.NEXT_PUBLIC_API_URL }} to AuthProvider.

Warnings

breaking Version 2.0.0 changed from default export to named exports for hooks (AuthProvider, withAuth). ↓

fix Update imports: `import { AuthProvider, useAuth } from 'harshil-auth'` instead of default import.

deprecated The `withAuth` HOC is deprecated in v2.5.0; use `useAuth` hook or server-side middleware. ↓

fix Replace `withAuth(Component)` with `useAuth()` inside component or use Next.js middleware.

gotcha Requires Next.js 13+ App Router; does not support Pages Router or older Next.js versions. ↓

fix Ensure your project uses Next.js 13+ with App Router enabled.

gotcha The `config` object passed to AuthProvider must include an `apiUrl` that points to your authentication backend. ↓

fix Set `NEXT_PUBLIC_API_URL` environment variable or pass `apiUrl` prop.

gotcha Client-side only; cannot be used in server components. ↓

fix Use `'use client'` directive or wrap in a client component boundary.

Install

npm install harshil-auth

yarn add harshil-auth

pnpm add harshil-auth

Imports

default

wrong

const harshilAuth = require('harshil-auth')

correct

import harshilAuth from 'harshil-auth'

ESM-only since v2. Use dynamic import() if CommonJS required.

AuthProvider

wrong

import AuthProvider from 'harshil-auth'

correct

import { AuthProvider } from 'harshil-auth'

Named export, not default.

useAuth

wrong

import useAuth from 'harshil-auth'

correct

import { useAuth } from 'harshil-auth'

Named export for React hook.

withAuth

wrong

import withAuth from 'harshil-auth'

correct

import { withAuth } from 'harshil-auth'

Named export for HOC pattern.

Quickstart

Shows basic initialization with AuthProvider and usage of useAuth hook for login/logout.

import harshilAuth from 'harshil-auth';
import { AuthProvider, useAuth } from 'harshil-auth';

// Initialize in app layout
function App({ Component, pageProps }) {
  return (
    <AuthProvider config={{ apiUrl: process.env.API_URL ?? 'http://localhost:3000/api' }}>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

// In a component
function Profile() {
  const { user, login, logout } = useAuth();
  if (!user) return <button onClick={login}>Sign In</button>;
  return <button onClick={logout}>Sign Out</button>;
}

export default App;