@api-buddy/nextauth NPM

@api-buddy/nextauth

API Buddy integration for NextAuth.js (Auth.js) - A complete authentication solution for Next.js applications.

Features

Easy setup with a single command
TypeScript support out of the box
Built-in session management
Support for multiple authentication providers
Secure JWT and database session strategies
Middleware for protecting routes

Installation

# Using npm
npm install @api-buddy/nextauth next-auth

# Using yarn
yarn add @api-buddy/nextauth next-auth

# Using pnpm
pnpm add @api-buddy/nextauth next-auth

Quick Start

Run the setup command:
```
npx @api-buddy/nextauth
```
This will:
- Create the necessary API routes
- Set up the authentication configuration
- Install required dependencies
- Configure environment variables

Update your .env.local with your authentication providers' credentials:

NEXTAUTH_SECRET=your-secret-here
NEXTAUTH_URL=http://localhost:3000

# Example: Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

Wrap your application with the NextAuthProvider in your root layout:

// app/layout.tsx
'use client';

import { NextAuthProvider } from '@api-buddy/nextauth';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <NextAuthProvider>
          {children}
        </NextAuthProvider>
      </body>
    </html>
  );
}

Usage

Protecting Pages

Use the useSession hook to check the authentication status:

'use client';

import { useSession } from '@api-buddy/nextauth';

export default function Profile() {
  const { data: session } = useSession();
  
  if (!session) {
    return <div>Please sign in to view this page</div>;
  }
  
  return (
    <div>
      <h1>Welcome, {session.user?.name}!</h1>
      <p>Email: {session.user?.email}</p>
    </div>
  );
}

Server Components

For server components, use the getServerSession function:

import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';

export default async function ProfilePage() {
  const session = await getServerSession(authOptions);
  
  if (!session) {
    return <div>Please sign in to view this page</div>;
  }
  
  return (
    <div>
      <h1>Welcome, {session.user?.name}!</h1>
      <p>Email: {session.user?.email}</p>
    </div>
  );
}

Middleware Protection

Protect routes using the built-in middleware:

// middleware.ts
export { default } from 'next-auth/middleware';

export const config = {
  // Protect all routes except auth and static files
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|auth|public).*)'],
};

Configuration

Customize the authentication by modifying the configuration in src/lib/auth.ts:

import { authConfig } from '@api-buddy/nextauth';

export const authOptions = {
  ...authConfig,
  providers: [
    // Add your authentication providers here
  ],
  callbacks: {
    // Customize session and JWT callbacks
  },
  // Other NextAuth.js configuration options
};

Available Hooks

useSession

Get the current session and status:

const { data: session, status } = useSession();

useRequiredSession

A hook that redirects to the sign-in page if the user is not authenticated:

const { session, status } = useRequiredSession();

License

MIT

4 months ago

4 months ago

4 months ago

4 months ago