@no-auth/next NPM

@no-auth/next

Simple, lightweight authentication middleware and context provider for Next.js applications.

🚀 Features

Seamless authentication middleware
React context provider with SWR
Easy-to-use hook for user data
Minimal setup required

📦 Installation

npm install @no-auth/next
# or
yarn add @no-auth/next
# or
pnpm add @no-auth/next

🔧 Setup

1. Middleware Configuration

In your Next.js middleware.ts:

Note: if you are using src/ folder then you need to add this file at src/middleware.ts else it should be in the root of your project folder

import { noAuthMiddleware } from "@no-auth/next";
import { NextResponse } from "next/server";
import { MiddlewareConfig, NextRequest } from "next/server";

export const config: MiddlewareConfig = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};

export const publicRouteStartsWith: string[] = [];

export default async function middleware(request: NextRequest) {
  /**
   * Pre-process
   */

  const response: NextResponse = await noAuthMiddleware(
    request,
    publicRouteStartsWith,
  );

  /**
   * Post-process
   */

  return response;
}

2. Root Layout Provider

In your root layout.tsx:

import { NoAuthProvider } from '@no-auth/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NoAuthProvider>
          {children}
        </NoAuthProvider>
      </body>
    </html>
  );
}

3. Using User Data

In any component:

import { useUser } from '@no-auth/next';

function ProfilePage() {
  const { user, isLoading, error } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading user</div>;

  return <div>Welcome, {user.name}!</div>;
}