@api-buddy/nextauth
v2.0.0
Published
API Buddy integration for NextAuth.js (Auth.js)
Downloads
15
Readme
@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-authQuick Start
Run the setup command:
npx @api-buddy/nextauthThis will:
- Create the necessary API routes
- Set up the authentication configuration
- Install required dependencies
- Configure environment variables
Update your
.env.localwith 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-secretWrap your application with the
NextAuthProviderin 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