Authentication is a fundamental part of most web applications. Integrating authentication into your Next.js app can be simplified with NextAuth, a powerful authentication library that supports various authentication methods. However, the documentation around setting up NextAuth with the "Credentials" auth provider might not be as clear as you'd hope.
My implementation is greatly enriched and partially based on Next-Auth docs and the following github thread.
Understanding NextAuth and the "Credentials" Provider
NextAuth simplifies the authentication process by providing a flexible and easy-to-use API. It supports numerous authentication providers, including social logins (like Google, Facebook, etc.) and custom authentication mechanisms through the "Credentials" provider.
Enhancing Types for NextAuth Sessions and Users
Before we start coding, managing our types is crucial for any TypeScript-based applications, especially when working with NextAuth. The following updated next-auth.d.ts file enriches the existing types provided by NextAuth, extending the session and user interfaces to include additional properties that are required by my app.
import { Role } from "@prisma/client";
import NextAuth, { DefaultUser } from "next-auth";
declare module "next-auth" {
interface Session {
user?: DefaultUser & {
id: string;
role: Role;
};
}
interface User extends DefaultUser {
role: Role;
}
}
The Session interface now extends the default user object with the properties id and role, providing more specific typing for these attributes within sessions. Similarly, the User interface extends the DefaultUser interface by adding the role property from the Role. These enhancements offer a more comprehensive typing structure for NextAuth sessions and users, ensuring stronger type safety throughout our authentication workflow.
Exploring the API Code
The code provided here contains the necessary configurations and functions to set up NextAuth with the "Credentials" provider.
It's essential to highlight that while this implementation allows for user sign-up using credentials, it's highly recommended to incorporate email verification as part of the sign-up process.
Ensuring email verification adds an extra layer of security and credibility to user accounts, deterring potential misuse. However, discussing the specifics of implementing email verification goes beyond the scope of this post but remains an important consideration for enhancing account security.
import { NextApiRequest, NextApiResponse } from "next";
import NextAuth from "next-auth";
import type { NextAuthOptions, SessionOptions } from "next-auth";
import { encode, decode } from "next-auth/jwt";
import type { Adapter } from "next-auth/adapters";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import prisma from "@/lib/prisma";
import bcrypt from "bcrypt";
import { randomUUID } from "crypto";
import Cookies from "cookies";
const getAdapter = (req: NextApiRequest, res: NextApiResponse): Adapter => ({
...PrismaAdapter(prisma),
async getSessionAndUser(sessionToken) {
const userAndSession = await prisma.session.findUnique({
where: { sessionToken },
include: {
user: {
select: {
id: true,
email: true,
emailVerified: true,
name: true,
image: true,
role: true,
},
},
},
});
if (!userAndSession) return null;
const { user, ...session } = userAndSession;
return { user, session };
},
});
const session: SessionOptions = {
strategy: "database",
maxAge: 30 * 24 * 60 * 60, // 30 days
updateAge: 24 * 60 * 60, // 24 hours
generateSessionToken: async () => randomUUID(),
};
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const adapter = getAdapter(req, res);
const authOptions: NextAuthOptions = {
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
name: { label: "Name", type: "name", placeholder: "Name" },
email: { label: "Email", type: "email", placeholder: "Email" },
password: { label: "Password", type: "password" },
},
async authorize(credentials, req) {
if (!credentials) return null;
const { name, email, password } = credentials;
let user = await prisma.user.findUnique({ where: { email } });
if (!user && !!name && !!email && !!password) {
// sign up
const hashedPassword = await bcrypt.hash(password, 10);
user = await prisma.user.create({
data: { email, password: hashedPassword },
});
} else {
user = await prisma.user.findUnique({ where: { email } });
if (
!user ||
!user.password ||
!bcrypt.compareSync(password, user.password)
)
return null;
}
return {
id: user.id,
name: user.name,
email: user.email,
image: user.image,
role: user.role,
};
},
}),
],
adapter,
callbacks: {
async session({ session, user }) {
if (session.user) {
session.user.id = user.id;
session.user.role = user.role;
}
return session;
},
async signIn({ user }) {
if (
req.query.nextauth?.includes("callback") &&
req.query.nextauth?.includes("credentials") &&
req.method === "POST"
) {
if (user && "id" in user) {
const sessionToken = randomUUID();
const sessionExpiry = new Date(Date.now() + session.maxAge! * 1000);
if (!adapter.createSession) return false;
await adapter.createSession({
sessionToken,
userId: user.id,
expires: sessionExpiry,
});
const cookies = new Cookies(req, res);
cookies.set("next-auth.session-token", sessionToken, {
expires: sessionExpiry,
});
}
}
return true;
},
},
jwt: {
maxAge: session.maxAge,
async encode(params) {
if (
req.query.nextauth?.includes("callback") &&
req.query.nextauth?.includes("credentials") &&
req.method === "POST"
) {
const cookies = new Cookies(req, res);
const cookie = cookies.get("next-auth.session-token");
if (cookie) return cookie;
else return "";
}
// Revert to default behaviour when not in the credentials provider callback flow
return encode(params);
},
async decode(params) {
if (
req.query.nextauth?.includes("callback") &&
req.query.nextauth?.includes("credentials") &&
req.method === "POST"
) {
return null;
}
// Revert to default behaviour when not in the credentials provider callback flow
return decode(params);
},
},
pages: {
signIn: "/account/signin",
},
session,
cookies: {
sessionToken: {
name: "next-auth.session-token",
options: {
httpOnly: true,
sameSite: "lax",
path: "/",
secure: process.env.NODE_ENV === "production",
},
},
},
debug: process.env.NODE_ENV === "development",
};
return NextAuth(req, res, authOptions);
}
Here's a breakdown of the key sections:
Defining the Adapter and Session Configuration
The getAdapter function returns a Prisma adapter for handling sessions and users. The session object defines the session configuration, including the strategy and session token generation.
Creating the NextAuth Options
The authOptions object holds the configuration for NextAuth, including providers, callbacks for handling sessions and sign-ins, JWT configuration, page routes, and cookie settings.
Customizing Authentication Logic
The "Credentials" provider's authorize function handles user authentication based on provided credentials (name, email, password). It hashes passwords and interacts with the Prisma database to create or retrieve users.
Improving Clarity and Documentation
While the code above provides a comprehensive setup for NextAuth with the "Credentials" provider, clarity in documentation is essential for developers. A more elaborate breakdown of each function, its purpose, and the flow of data between them could greatly benefit developers trying to set up this authentication flow.
Conclusion
Setting up Next.js with NextAuth and the "Credentials" provider allows for a flexible and customizable authentication system within your application. While the official documentation might lack clarity in some areas, breaking down the code and providing context can help developers understand the integration better.
Remember, authentication is a critical aspect of your application's security. Always ensure to handle sensitive user data securely and follow best practices when implementing authentication mechanisms.
In conclusion, with NextAuth and its "Credentials" provider, you can create a robust authentication system tailored to your application's needs.
Top comments (0)