When we build a full stack app, we need a way for users to login and stay logged in.
This is called authentication.
In this blog we will understand how to use NextAuth in Next.js in a very simple way 😊
🚀 What is NextAuth
NextAuth is a library that helps us:
✔ Login users
✔ Manage sessions
✔ Protect pages
👉 Example
User enters email and password
App checks database
If correct → user is logged in ✅
📦 Step 1 Install NextAuth
Run this command:
npm install next-auth@4
🔐 Step 2 Add Secret Key
Create or open .env file
NEXTAUTH_SECRET=mySuperSecretKey123
👉 This is used to secure login sessions
🧠 Step 3 Add TypeScript Support
Create file:
next-auth.d.ts
Add:
declare module "next-auth" {
interface Session {
user: {
id: string;
} & DefaultSession["user"];
}
}
👉 Now we can use:
session.user.id
⚙️ Step 4 Create Auth Configuration
Create file:
lib/auth.ts
import CredentialsProvider from "next-auth/providers/credentials";
import { connectToDatabase } from "./db";
import User from "@/models/User";
import bcrypt from "bcryptjs";
export const authOptions = {
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "Email", type: "text" },
password: { label: "Password", type: "password" },
},
async authorize(credentials) {
if (!credentials?.email || !credentials?.password) {
throw new Error("Missing email or passsword");
}
try {
await connectToDatabase();
const user = await User.findOne({ email: credentials.email });
if (!user) {
throw new Error("No user found with this");
}
const isValid = await bcrypt.compare(
credentials.password,
user.password
);
if (!isValid) {
throw new Error("invalid password");
}
return {
id: user._id.toString(),
email: user.email,
};
} catch (error) {
console.error("Auth error: ", error);
throw error;
}
},
}),
],
callbacks: {
async jwt({ token, user }: { token: any; user?: any }) {
if (user) {
token.id = user.id;
}
return token;
},
async session({ session, token }: { session: any; token: any }) {
if (session.user) {
session.user.id = token.id as string;
}
return session;
},
},
pages: {
signIn: "/login",
error: "/login",
},
session: {
strategy: "jwt" as const,
maxAge: 30 * 24 * 60 * 60,
},
secret: process.env.NEXTAUTH_SECRET,
};
This file contains all login logic.
🔑 Step 5 Credentials Provider
CredentialsProvider({
name: "Credentials",
👉 This tells NextAuth:
💬 “I will login users using email and password”
🔍 Step 6 Authorize Function (Main Logic)
async authorize(credentials)
👉 This runs when user tries to login
🧪 Example Input
{
"email": "test@gmail.com",
"password": "123456"
}
🧠 What happens inside authorize
1️⃣ Check input
if (!credentials?.email || !credentials?.password)
👉 If missing → error
2️⃣ Connect database
await connectToDatabase();
👉 Connects to MongoDB
3️⃣ Find user
const user = await User.findOne({ email: credentials.email });
👉 Check if user exists
4️⃣ If user not found
throw new Error("No user found")
5️⃣ Compare password
bcrypt.compare(credentials.password, user.password)
👉 Checks password safely 🔒
6️⃣ If correct
return {
id: user._id.toString(),
email: user.email,
};
👉 Login success 🎉
🔄 Step 7 JWT Callback
async jwt({ token, user })
👉 Runs after login
token.id = user.id;
👉 Saves user id in token
👤 Step 8 Session Callback
async session({ session, token })
session.user.id = token.id;
👉 Now you can access:
session.user.id
📄 Step 9 Custom Pages
pages: {
signIn: "/login",
error: "/login",
}
👉 Redirects user to login page
⏳ Step 10 Session Setup
session: {
strategy: "jwt",
maxAge: 30 * 24 * 60 * 60,
}
👉 User stays logged in for 30 days
🔌 Step 11 Create API Route
Path:
app/api/auth/[...nextauth]/route.ts
Code:
import { authOptions } from "@/lib/auth";
import NextAuth from "next-auth/next";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
👉 This handles all auth requests
🛡 Step 12 Middleware (Protect Routes)
Create file:
middleware.ts
import withAuth from "next-auth/middleware";
import { NextResponse } from "next/server";
export default withAuth(
function middleware(){
return NextResponse.next()
},
{
callbacks: {
authorized: ({token, req}) => {
const {pathname} = req.nextUrl;
// allow auth related routes
if(
pathname.startsWith("/api/auth") ||
pathname === "/login" ||
pathname === "/register"
) {
return true
}
//public routes
if(pathname === "/" || pathname.startsWith("/api/videos")){
return true
}
return !!token
}
}
}
)
export const config = {
matcher: ["/((?!_next/static|_next/image|favicon.ico|public/).*)"],
};
🧠 What middleware does
👉 Runs on every request
👉 Checks if user is logged in
✅ Allow public routes
if (
pathname.startsWith("/api/auth") ||
pathname === "/login" ||
pathname === "/register"
)
👉 These routes are open
🌍 Public pages
if (pathname === "/" || pathname.startsWith("/api/videos"))
👉 Anyone can access
🔒 Protect other routes
return !!token
👉 Only logged in users allowed
🧪 Example Flow
👉 User opens:
/dashboard
✔ If logged in → access
❌ If not → redirect to login
⚙️ Matcher Config
export const config = {
matcher: ["/((?!_next/static|_next/image|favicon.ico|public/).*)"],
};
👉 Middleware runs on all important routes
🎯 Final Flow (Easy Understanding)
👉 User enters email and password
➡️ authorize() runs
➡️ database check
➡️ password match
➡️ token created
➡️ session created
➡️ user logged in
📦 Example Stored User
{
"email": "test@gmail.com",
"password": "$2a$10$hashedpassword"
}
🎉 Final Summary
In this setup we learned:
✔ How login works
✔ How NextAuth handles authentication
✔ How to connect database
✔ How to protect routes
✔ How to manage session
🚀 Final Thought
NextAuth makes authentication simple.
Instead of building everything from scratch, you can:
👉 focus on logic
👉 keep your app secure
👉 build faster
Happy coding 💻✨
Top comments (0)