@inertiapixel/nextjs-auth

Next.js + Node.js Auth for MERN

Open Source. Full Stack

**InertiaPixel nextjs-auth** is an open-source authentication system for Next.js. It handles credential and social login flows, maintains persistent auth state, manages redirects and protected routes, and provides hooks for login/logout lifecycle events — designed to integrate seamlessly with nodejs-auth for full-stack MERN apps. ⚡ Secure by default: Tokens are stored in HttpOnly cookies. No `localStorage` or `sessionStorage` needed, making it XSS-safe. ![npm](https://img.shields.io/npm/v/@inertiapixel/nextjs-auth) ![MIT License](https://img.shields.io/npm/l/@inertiapixel/nextjs-auth) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) ![Open Source](https://img.shields.io/badge/Open%20Source-✔️-blue) ![TypeScript](https://img.shields.io/badge/Built%20with-TypeScript-3178c6?logo=typescript) --- ## Table of Contents - [Why This Exists](#why-this-exists) - [Features](#features) - [Installation](#installation) - [Environment Variables](#environment-variables) - [Quick Start](#quick-start) - [Hooks and Events](#hooks-and-events) - [Backend Package Information](#backend-package-information) - [License](#license) - [Related Projects](#related-projects) --- ## Why This Exists While building a MERN stack project, I couldn't find a well-structured package that handled both frontend and backend authentication together. Most libraries focused on either the client or the server—rarely both. So I decided to create a pair of authentication packages under the inertiapixel scope—one for the frontend and one for the backend—designed to work seamlessly together. If you're looking for a complete authentication solution for your MERN stack project, these paired packages are for you. ```md 🔗 Use `@inertiapixel/nextjs-auth` on the frontend 🔗 Use `@inertiapixel/nodejs-auth` on the backend ``` --- ## Features - Secure by Default (HttpOnly cookies) - Auth context provider with typed hooks (useAuth) - Credential-based login (email & password) - Plug-and-play support for multiple OAuth providers (Google, Facebook, LinkedIn, etc.) - JWT-based session handling - Hook system to extend behavior (logging, analytics, audit, etc.) - Built-in loading state, error state, and redirect logic - Works perfectly with `@inertiapixel/nodejs-auth` backend package - Prebuilt components: ``, ``, ``, ``, etc. - Lifecycle hooks (onLoginSuccess, onLoginFail, etc.) - Fully customizable with your own UI --- ## Installation [![npm version](https://img.shields.io/npm/v/@inertiapixel/nextjs-auth)](https://www.npmjs.com/package/@inertiapixel/nextjs-auth) ```bash npm install @inertiapixel/nextjs-auth ``` --- ## Environment Variables Make sure to define these in your `.env` file: ```env NEXT_PUBLIC_APP_URL=http://localhost:3000 NEXTAUTH_SECRET="QCqxa1M1BDk0G1WKbI+XVljv4UzCwws0dw9g5Rjb6o0=" JWT_SECRET="TBh9o9kDej2NFO3Bcab03sIiJWXNocpSIGkpdX77ARM=" NEXT_PUBLIC_API_BASE_URL=http://localhost:4000 #Social OAuth NEXT_PUBLIC_GOOGLE_CLIENT_ID=949710049149-sacfunjq40ib8aatv2r0gg11c79hablk.apps.googleusercontent.com NEXT_PUBLIC_FACEBOOK_CLIENT_ID=993713672922221 NEXT_PUBLIC_LINKEDIN_CLIENT_ID=86eg5q2n2qfqde ``` --- ## Quick Start Make AuthProvider ```tsx //providers.tsx 'use client'; import React from 'react'; import { AuthProvider } from '@inertiapixel/nextjs-auth'; export function Providers({ children }: { children: React.ReactNode }) { return ( { console.log('Login success:', user); }, onLoginFail: (error) => { console.error('Login failed:', error); }, onLogout: () => { console.log('User logged out'); }, }} > {children} ); } ``` Wrap your app with the AuthProvider: ```tsx // layout.tsx import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import { Providers } from './providers' import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <> {children} ); } ``` ### Next.js API Setup (App Router) To handle OAuth callback redirects from social providers, you must add the following API route to your Next.js app: ```tsx // app/api/auth/[...provider]/route.ts import { handlers } from '@inertiapixel/nextjs-auth'; export const GET = handlers({ apiBaseUrl: process.env.NEXT_PUBLIC_API_BASE_URL! }); ``` --- ## Usage Access auth state anywhere using the useAuth() hook: ```tsx //orders/page.tsx or dashboard/page.tsx (its protected page) 'use client'; import { useAuth, withAuth } from '@inertiapixel/nextjs-auth'; import type { ReactElement, FC } from 'react'; const OrdersPage: FC = (): ReactElement => { const { logout, user } = useAuth(); return (

Orders

Welcome to your secure orders.

        {JSON.stringify(user)}
); }; export default withAuth(OrdersPage); ``` ## Login Login page example ```tsx //login/page.txs 'use client'; import { useState } from 'react'; import { useAuth } from '@inertiapixel/nextjs-auth'; const LoginPage = () => { const { login, socialLogin, loginError, loading } = useAuth(); const [email, setEmail] = useState('mdasiff007@gmail.com'); const [password, setPassword] = useState('123456789'); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); await login({ provider: 'credentials', email, password }); }; const handleGoogleLogin = async () => { await socialLogin('google'); }; const handleFacebookLogin = async () => { await socialLogin('facebook'); }; return (

Login

setEmail(e.target.value)} />
setPassword(e.target.value)} />
{loginError && ( 
            {JSON.stringify(loginError, null, 2)}
)}
Or continue with
); }; export default LoginPage; ``` ## Hooks and Events These optional callbacks are available via AuthProvider: ```tsx console.log('Welcome', user)} onLoginFail={(error) => console.warn('Login error', error)} onLogout={() => console.log('Logged out')} /> ``` ## API Reference `useAuth()` Returns the following: ```ts { user: User | null; isAuthenticated: boolean; loading: boolean; login: (payload: LoginPayload) => Promise; logout: () => void; socialLogin: (provider: SocialProvider) => void; loginError: Record | null; } ``` `login(payload)` ```ts login({ email: 'john@example.com', password: '123456', provider: 'credentials' }); ``` `socialLogin(provider)` ```ts socialLogin('google'); // or 'facebook', 'linkedin' ``` ## Types You can import types like: ```ts import type { LoginPayload, User } from '@inertiapixel/nextjs-auth'; ``` --- ## Backend Package Information After setting up the frontend package, you can install the companion backend package in your Node js project to complete the full authentication workflow. [Backend Auth package](https://github.com/inertiapixel/nodejs-auth) --- ## License MIT © [inertiapixel](https://github.com/inertiapixel) --- ## Related Projects - [`@inertiapixel/nextjs-auth`](https://github.com/inertiapixel/nodejs-auth) — Backend auth package for Node js / Express js - [`@inertiapixel/react-icons`](https://github.com/inertiapixel/react-icons) — React icons set **Crafted in India by [InertiaPixel](https://www.inertiapixel.com/) 🇮🇳**