In this article post, I'll walk you through the step-by-step process of creating authentication system for your Next.js application using Next Auth and Prisma adapter credentials providers. You’ll have a solid foundation to build flexible and scalable user access control systems by the end. In this project, we'll be using Next.js with the app directory. As you know, after Next.js 13, we create API routes using the app directory and route files. First, let's talk about what technologies we'll be using. ### Next.js Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration. Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications. ### Prisma Prisma is an open source next-generation ORM. ### NextAuth.js NextAuth.js is a complete open-source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless. ### PostgreSQL PostgreSQL is a powerful, open source object-relational database system with more than 15 years of active development. It has a proven architecture, proven reliability, data integrity, and correctness. First, let's create a new Next.js application. You can follow the official guide [here](https://nextjs.org/docs). I will be using `pnpm` for this, but you can use `npm` or `yarn` as well. We'll be using TypeScript. ```bash pnpm create next-app auth-example --template typescript ``` After creating a new Next.js application, let's install the necessary dependencies for this project. ```bash pnpm add next-auth@beta @prisma/client @auth/prisma-adapter @hookform/resolvers react-hook-form zod bcrypt ``` ```bash pnpm add prisma -D ``` To add Next Auth.js to the project create a file called route.ts in `app/api/auth/[…nextauth]` folder. You can directly add your auth options in this file, but I prefer using a different folder to be able to reuse the options later. Let’s create an `auth.ts` file in `src/auth.ts` folder and give providers. ```js import NextAuth, { DefaultSession } from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" import db from "@/lib/db" export const { handlers, auth, signIn, signOut } = NextAuth({ providers: [ CredentialsProvider({ name: "credentials", async authorize(credentials) { // ... }, }), ], debug: process.env.NODE_ENV === "development", session: { strategy: "jwt", }, secret: process.env.NEXTAUTH_SECRET, }) ``` Create a `db.ts` file that will serve as our database generated client in `src/lib`: ```js // src/lib/db.ts import { PrismaClient } from "@/generated/prisma" const prismaClientSingleton = () => { return new PrismaClient() } declare const globalThis: { prismaGlobal: ReturnType } & typeof global const prisma = globalThis.prismaGlobal ?? prismaClientSingleton() export default prisma if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma ``` Just copy and paste the above code into the `db.ts` file. We are now ready to create a route handler and add these options. Open up the route file and add this: `app/api/auth/[...nextauth]/route.ts` ```js import { authOptions } from "@/utils/auth" const handler = NextAuth(authOptions) export { handler as GET, handler as POST } ``` Now initialize Prisma and create our authentication schema: ```bash npx prisma init ``` After it's done, open the `schema.prisma` file in the `prisma` folder and add this code block: ```js generator client { provider = "prisma-client-js" // In Prisma ORM 7, Prisma Client will no longer be generated in node_modules by default and will require an output path to be defined. output = "../src/generated/prisma" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id String @id @default(cuid()) name String? email String? @unique emailVerified DateTime? image String? hashedPassword String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt jobPosts JobPost[] accounts Account[] } // I'll add this Account model in case you want to add other credentials like Google or GitHub model Account { id String @id @default(cuid()) userId String type String provider String providerAccountId String refresh_token String? access_token String? expires_at Int? token_type String? scope String? id_token String? session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } ``` After creating our authentication schema, create a [PostgreSQL](https://console.prisma.io/) database. You can use Prisma's hosted PostgreSQL or create a PostgreSQL database with Neon, which offers a generous free tier. ```bash postgres://59b842f610992f350c99576c3c357e56588a3adec9d420290137e53611d9aca5:sk_U5rCfJW6ByA0t9w8nAd1e@db.prisma.io:5432/?sslmode=require/ ``` Create a `.env` file in the root folder and add `DATABASE_URL` with the value of your database connection string: ```bash DATABASE_URL=postgres://59b842f610992f350c99576c3c357e56588a3adec9d420290137e53611d9aca5:sk_U5rCfJW6B1A0t9w8nAdye@db.prisma.io:5432/?sslmode=require AUTH_SECRET=secret // run this on terminal `npx auth secret` to generate a auth secret ``` Next, after getting the database connection string, push your model to your database by running: ```bash npx prisma generate npx prisma migrate dev // for development npx prisma migrate deploy // for production ``` Make sure you generate your model successfully into your database. Let’s get back to the auth options and add our prisma adapter. ```js import { NextAuthOptions } from "next-auth" import bcrypt from "bcrypt" import { PrismaAdapter } from "@next-auth/prisma-adapter" import CredentialsProvider from "next-auth/providers/credentials" import { credentialsValidator } from "@/lib/validations/credentials" import db from "./db" export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(db), providers: [ CredentialsProvider({ name: "credentials", credentials: { email: { label: "email", type: "text" }, password: { label: "password", type: "password" }, }, async authorize(credentials) { const cred = await credentialsValidator.parseAsync(credentials) if (!cred.email || !cred?.password) { throw new Error("Invalid Credentials") } const user = await db.user.findUnique({ where: { email: cred.email, }, }) if (!user || !user?.hashedPassword) throw new Error("Invalid Credentials") const isPasswordCorrect = await bcrypt.compare( cred.password, user.hashedPassword ) if (!isPasswordCorrect) throw new Error("Invalid credentials") return user }, }), ], debug: process.env.NODE_ENV === "development", session: { strategy: "jwt", }, secret: process.env.NEXTAUTH_SECRET, } ``` create a `auth.ts` file in the `src/lib/server` folder to handle user registration and login credentials. ```js import { signIn, signOut } from "@/auth" import { type Credentials, type Register, credentialsValidator, registerValidator, } from "@/lib/validations/credentials" import { AuthError } from "next-auth" import db from "@/lib/db" import { hashPassword } from "@/lib/auth/session" type Res = | { success: true } | { success: false; error: string; statusCode: 401 | 500 } export const login = async (values: Credentials): Promise => { try { const validatedFields = credentialsValidator.safeParse(values) if (!validatedFields.success) { return { success: false, statusCode: 401, error: "Invalid Fields", } } await signIn("credentials", { ...values, redirect: false }) return { success: true } } catch (err) { if (err instanceof AuthError) { switch (err.type) { case "CredentialsSignin": case "CallbackRouteError": return { success: false, error: "Invalid credentials", statusCode: 401, } case "AccessDenied": return { success: false, error: "Please verify your email, sign up again to resend verification email", statusCode: 401, } // custom error case "OAuthAccountAlreadyLinked" as AuthError["type"]: return { success: false, error: "Login with your Google or Github account", statusCode: 401, } default: return { success: false, error: "Oops. Something went wrong", statusCode: 500, } } } console.error(err) return { success: false, error: "Internal Server Error", statusCode: 500 } } } // src/lib/server/auth.ts // Register export async function signUp(values: Register): Promise { const validatedFields = registerValidator.safeParse(values) if (!validatedFields.success) { return { success: false, error: "Invalid Fields", statusCode: 401 } } const { email, password, confirmPassword } = validatedFields.data try { // Check if the user already exists const existingUser = await db.user.findFirst({ where: { email, }, }) // If the user already exists, return an error if (existingUser) return { statusCode: 401, success: false, error: "Email already exists", } // Check if the password and confirmPassword match if (password !== confirmPassword) { return { error: "Passwords don't match", success: false, statusCode: 401 } } // Hash the password const passwordHash = await hashPassword(password) // Create the user in the database await db.user.create({ data: { email, hashedPassword: passwordHash, }, }) return { success: true, } } catch (err) { console.error(err) return { success: false, error: "Internal Server Error", statusCode: 500 } } } ``` For our typesafe validation we'll be using [zod](https://zod.dev/) Let’s create a `credentials.ts` file in `src/lib/validations` folder and give validations. ```js import * as z from "zod" export const credentialsValidator = z.object({ email: z.string().email(), password: z.string(), }) export const registerValidator = credentialsValidator.extend({ name: z.string().optional(), }) export const Credentials = z.infer export const Register = z.infer ``` From now on, the adapter will handle authentication and automatically add new users, sessions, and accounts to the database. Let's move on to our frontend where we can input our data will be using shadcn ui components. Check out the [shadcn/ui](https://ui.shadcn.com/) for more information on how to use it. In your `app` folder, create a folder called `auth`. Inside the auth folder, create `login` and `register` folders. Inside each of those folders, create a `page.tsx` file. You can now design your authentication pages. The paths for our authentication are `/auth/login` and `/auth/register`. Create `sign-up.tsx` in your components folder. This will serve as our form for authentication. ```js "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { signUp } from "@/server/auth" import Link from "next/link" import { useState } from "react" import { useRouter } from "next/navigation" import { type Register, registerValidator, } from "@/lib/validations/credentials" const Signup = () => { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const form = useForm({ resolver: zodResolver(registerValidator), defaultValues: { email: "", password: "", confirmPassword: "", }, }) const onSubmit = async (data: Register) => { setIsLoading(true) setError("") try { const res = await signUp(data) if (res.success) router.push("/login") else { console.log(res.error) switch (res.statusCode) { case 500: default: const error = res.error || "Internal Server Error" setError(`Error: ${error}`) } } setIsLoading(false) } catch (err) { setError("An unexpected error occurred. Please try again.") } finally { setIsLoading(false) } } return (

Create your account

Enter your details below to create your account

{/* Email Field */} ( Email )} /> {/* Password Field */} ( Password )} /> {/* Confirm Password Field */} ( Confirm Password )} />

Already have an account?{" "} Sign in

{error && (

{error}

)}

) } export default Signup ``` Create `login.tsx` in your components folder. This will be our form for authentication. ```js "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { login } from "@/server/auth" import { useSearchParams } from "next/navigation" import Link from "next/link" import { useState } from "react" import { useRouter } from "next/navigation" import { signInInputSchema, type SignInInput, } from "@/lib/validations/credentials" const Login = () => { const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const form = useForm({ resolver: zodResolver(signInInputSchema), defaultValues: { email: "", password: "", }, }) const onSubmit = async (data: SignInInput) => { setIsLoading(true) setError("") try { const res = await login(data) if (res.success) window.location.href = "/" else { if (res.error) setError(res.error) } } catch (err) { setError("An unexpected error occurred. Please try again.") } finally { setIsLoading(false) } } return (

Login to your account

Enter your email below to login to your account

( Email )} /> (

Password Forgot password?

)} />

Or continue with

Don't have an account?{" "} Sign up

{error && (

{error}

)}

) } export default Login ``` In your auth pages `/auth/login`, import `auth-form.tsx`. Make sure to change the props type of the `` component. ```js import Login from "@/components/login.tsx" import * as React from "react" const Login = () => { return (

) } export default Login ``` In your register path `/auth/register`: ```js import SignUp from "@/components/sign-up.tsx" import * as React from "react" const Register = () => { return (

) } export default Register ``` Overall, NextAuth.js is a powerful tool for handling authentication in Next.js. You can learn more about NextAuth.js on the [Auth.js](https://authjs.dev/) docs. If you want to know more about how to use NextAuth.js in your Next.js application, this is a good place to start.

Implement authentication system using Next.js with app dir and server components

Understanding the useMemo and useCallback hook in React