{"library":"next-jwt-auth","title":"Next JWT Auth","description":"Next JWT Auth is a lightweight React/Next.js library for integrating custom JWT authentication services hosted separately from your Next.js app. Version 1.5.0 provides a simple provider-based pattern to manage JWT access and refresh tokens, using browser cookies for storage and automatically refreshing tokens when they expire. Unlike NextAuth.js, it does not create API routes inside your Next.js app, avoiding an extra hop between frontend and auth service, and focuses solely on JWT auth without support for social login or database adapters. The library requires Next.js ^16.2.4, React >=18, and Axios ^1.6.8 as peer dependencies. It ships with TypeScript types and is actively maintained, with frequent releases (latest v1.5.0 as of April 2025). Key differentiators: direct frontend-to-auth-service calls, automatic token refresh and logout, and minimal boilerplate.","language":"javascript","status":"active","last_verified":"Sat May 09","install":{"commands":["npm install next-jwt-auth"],"cli":null},"imports":["import { JWTAuthConfig } from 'next-jwt-auth'","import { AuthUser } from 'next-jwt-auth'","import { createJWTAuthProvider } from 'next-jwt-auth'","import { useJWTAuth } from 'next-jwt-auth'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// src/types/Auth.ts\nimport { AuthUser } from 'next-jwt-auth'\n\nexport interface LoggedInUser extends AuthUser {\n  email: string\n  firstName: string\n  lastName: string\n  phone: string\n}\n\n// src/config/Auth.ts\nimport { JWTAuthConfig, createJWTAuthProvider, useJWTAuth } from 'next-jwt-auth'\n\nconst authConfig: JWTAuthConfig = {\n  apiBaseUrl: process.env.NEXT_PUBLIC_API_BASE_URL ?? 'http://localhost:4000',\n  user: { property: 'user' },\n  accessToken: { property: 'access.token' },\n  refreshToken: { property: 'refresh.token' },\n  login: {\n    url: '/auth/signin',\n    method: 'POST',\n    body: { email: '', password: '' }\n  },\n  refresh: { url: '/auth/refresh', method: 'POST' },\n  logout: { url: '/auth/logout', method: 'POST' },\n  cookieOptions: { httpOnly: false, secure: true, sameSite: 'strict' }\n}\n\nexport const { AuthProvider, useAuth } = createJWTAuthProvider<LoggedInUser>(authConfig)\n\n// pages/_app.tsx\nimport { AuthProvider } from '../config/Auth'\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    <AuthProvider>\n      <Component {...pageProps} />\n    </AuthProvider>\n  )\n}\n\nexport default MyApp\n\n// pages/profile.tsx\nimport { useAuth } from '../config/Auth'\n\nexport default function Profile() {\n  const { user, login, logout, isAuthenticated } = useAuth()\n\n  const handleLogin = async () => {\n    await login({ email: 'user@example.com', password: 'pass123' })\n  }\n\n  return (\n    <div>\n      {isAuthenticated ? (\n        <>\n          <p>Welcome, {user?.firstName}</p>\n          <button onClick={logout}>Logout</button>\n        </>\n      ) : (\n        <button onClick={handleLogin}>Login</button>\n      )}\n    </div>\n  )\n}","lang":"typescript","description":"Demonstrates setup with custom user type, config, provider wrapper, and login/logout using the useAuth hook.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}