Authentication is a critical feature for modern web applications, and NextAuth.js v5 makes it easier than ever to implement secure, extensible authentication in your Next.js projects. The latest version brings exciting features, improved performance, and enhanced developer experience.

In this blog, we’ll dive into what’s new in NextAuth.js v5 and provide a step-by-step guide to integrating it into your Next.js application.

1. What’s New in NextAuth.js v5?

NextAuth.js v5 introduces several enhancements, including:

• Improved Adapter API: A more consistent and flexible way to work with databases.
• Enhanced TypeScript Support: Improved type safety for a better developer experience.
• Customizable JWT Behavior: Greater control over JSON Web Tokens (JWT).
• Improved Performance: Optimized server-side performance for large-scale applications.

2. Installing NextAuth.js v5

To get started, install the required dependencies:

1npm install next-auth

Or with Yarn:

1yarn add next-auth
2

3) Create the API Route

In the App Router, API routes are defined in the app/api directory. Create the following file:
/app/api/auth/[...nextauth]/route.js

1import NextAuth from "next-auth";
2import GoogleProvider from "next-auth/providers/google";
3
4export const authOptions = {
5  providers: [
6    GoogleProvider({
7      clientId: process.env.GOOGLE_CLIENT_ID,
8      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
9    }),
10  ],
11  secret: process.env.NEXTAUTH_SECRET,
12  callbacks: {
13    async session({ session, token }) {
14      session.user.id = token.sub;
15      return session;
16    },
17  },
18};
19
20const handler = NextAuth(authOptions);
21export { handler as GET, handler as POST };
22

Here’s what’s happening:

• Providers: Use Google as the OAuth provider. Add others as needed.
• Secret: Ensure a secure secret is set in your .env file.
• Callbacks: Customize the session or JWT logic as required.
  

4. Add Environment Variables

Update your .env.local file with provider credentials and other secrets:

1GOOGLE_CLIENT_ID=your-google-client-id
2GOOGLE_CLIENT_SECRET=your-google-client-secret
3NEXTAUTH_SECRET=your-random-secret
4NEXTAUTH_URL=http://localhost:3000

5. Using the useSession Hook in App Router

Create a Protected Page

To access authentication state, use the useSession hook from NextAuth.js:
/app/protected/page.jsx

1"use client";
2
3import { useSession, signIn, signOut } from "next-auth/react";
4
5export default function ProtectedPage() {
6  const { data: session } = useSession();
7
8  if (!session) {
9    return (
10      <div className="p-6">
11        <h1 className="text-2xl font-bold">You are not signed in</h1>
12        <button
13          onClick={() => signIn()}
14          className="mt-4 rounded bg-blue-500 px-4 py-2 text-white"
15        >
16          Sign In
17        </button>
18      </div>
19    );
20  }
21
22  return (
23    <div className="p-6">
24      <h1 className="text-2xl font-bold">Welcome, {session.user.name}!</h1>
25      <p>Email: {session.user.email}</p>
26      <button
27        onClick={() => signOut()}
28        className="mt-4 rounded bg-red-500 px-4 py-2 text-white"
29      >
30        Sign Out
31      </button>
32    </div>
33  );
34}
35

6. Customizing Authentication Behavior

Custom Login Page

Override default NextAuth.js pages by specifying custom routes in the authOptions:

1export const authOptions = {
2  pages: {
3    signIn: "/auth/signin",
4    error: "/auth/error",
5  },
6};
7

Create a Custom Sign-In Page

/app/auth/signin/page.jsx

1"use client";
2
3import { signIn } from "next-auth/react";
4
5export default function SignIn() {
6  return (
7    <div className="p-6">
8      <h1 className="text-2xl font-bold">Sign In</h1>
9      <button
10        onClick={() => signIn("google")}
11        className="mt-4 rounded bg-blue-500 px-4 py-2 text-white"
12      >
13        Sign In with Google
14      </button>
15    </div>
16  );
17}
18

7. Securing API Routes and Pages

To protect server-side routes or fetch session data, use the getServerSession method.

Example: Server-Side API Protection

/app/api/protected/route.js

1import { getServerSession } from "next-auth";
2import { authOptions } from "../auth/[...nextauth]/route";
3
4export async function GET(req) {
5  const session = await getServerSession(authOptions);
6
7  if (!session) {
8    return new Response("Unauthorized", { status: 401 });
9  }
10
11  return new Response(JSON.stringify({ message: "Welcome!" }));
12}
13

Conclusion

With Next.js 15 App Router and NextAuth.js v5, authentication is both straightforward and flexible. Whether you need simple OAuth integration or custom authentication flows, this setup can scale with your project.

Try it out, and let us know how it fits your workflow! 🚀

Let me know if you'd like further assistance or enhancements for specific use cases!