Authjs V5 in Nextjs15
In this guide, we will learn how to implement authentication in a Next.js15 application using Auth.js v5.
Table of Contents
Authentication is a crucial part of any web application. It is the process of verifying the identity of a user.
What is NextAuth.js?
NextAuth.js is a complete open-source authentication solution for Next.js applications. It is easy to use and supports various authentication providers like Google, Facebook, GitHub, etc. It also supports email/password (credentails) authentication.
Installation
Use official documentation for the latest Authjs version. Authjs
npm install next-auth@beta
Comman Schenarios:
How to check where the user is authenticated in Server Component?
import { auth } from "@/lib/auth";
const user = await auth();
if (!user) redirect("/login");
- If user is authenticated it will return an object or it will return
null.
Implementing AuthJs in your project
You'll have a fully working authentication system in your Next.js application by following the steps below. It contains login, signup, and logout functionality. And page like login
Pre-requisites
Install the required packages
npm install react-hook-form zod prisma sonner
Install ShadCN components for UI of login
npx shadcn@latest add form input
MUST have : to generate env.local file with "AUTH_SECRET" key, (basically it contains a secret key for your token to be generated)
npx auth secret
Code structure
It contains how the overview of how the code is formatted in the project.
─ src
├── actions
| └─── auth.action.ts
├── app
│ ├── api/auth/[...nextauth]/route.ts
| └── (auth)
| ├── layout.tsx
| ├── /login/page.tsx
| └──/signup/page.tsx
├── components
| ├── signup-form.tsx
| └── login-form.tsx
├── types
| └── index.ts
├── lib
| └── auth.ts
└── middleware.ts
How to use this code.
You can copy and paste the code in the file directory mentioned on top of the code.
Main auth config file
This is the main crux of the auth and this is where you're setting your login logic the below code is for
- login logic
- authorization (modify the token)
- much more...
import NextAuth, { AuthError, CredentialsSignin } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { loginFormSchema } from "@/types/index";
import prisma from "@/lib/db";
import { z } from "zod";
import { getUserDetails } from "@/actions/auth.action";
class CustomAuthError extends CredentialsSignin {
code = "Something went wrong while authenticating";
// write a constructor to accept the error message
constructor(message?: string) {
super(message);
if (message) {
this.code = message;
}
}
}
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
CredentialsProvider({
credentials: { email: { type: "email" }, password: { type: "password" } },
authorize: async (credentials) => {
console.log("credentials", credentials);
// const validationResult = loginFormSchema.safeParse(credentials); // validate the credentials (TODO)
const dbUser = await prisma.user.findUnique({
where: {
email: `${credentials.email}`,
},
});
console.log("user", dbUser);
if (!dbUser) {
throw new CustomAuthError("No such email found");
}
if (dbUser.password !== credentials.password) {
throw new CustomAuthError("Password is incorrect");
}
const user = {
id: dbUser.id.toString(),
email: dbUser.email,
};
return user;
},
}),
],
session: {
strategy: "jwt",
},
callbacks: {
// used when session in server is created
jwt: async ({ token, user }) => {
if (user) {
token.id = token.sub as string;
}
return token;
},
// used when client useSession is called
session: async ({ session, token, user }) => {
if (session?.user) {
session.user.id = token.id as string;
}
// console.log("🛠🛠🛠session callback sesssion", session);
// console.log("🛠🛠🛠session callback token ", token);
return session;
},
},
pages: {
signIn: "/login",
},
});
Middleware
This is where you are setting the routes that you want to protect. You can add the routes that you want to protect and the routes that you want to make public. Basically your checking every request that is coming to the server.
import { auth } from "@/lib/auth";
import { NextResponse } from "next/server";
const publicRoutes = ["/", "/login", "/signup"]; // Add your public routes here
export default auth((req) => {
if (!req.auth) {
return NextResponse.redirect(new URL("/login", req.url));
}
});
// All the routes that need to be protected
// the `/:path*` is used to match all the routes that start with the given path
export const config = {
matcher: ["/dashboard/:path*", "/admin/:path*"],
};
API Route
This is where the underhood the logic for authentication is written, you need not touch the code, we're just tell what ever GET or POST requests come to /api/auth/* should be handled by the logic of auth.ts file.
import { handlers } from "@/lib/auth"; // Referring to the auth.ts we just created
export const { GET, POST } = handlers;
Layout for login and signup UI.
Now we're working on the UI to expose to the user. This is UI is further recommended to modify based on your styles.
(Optional) Create this inside
loginorsignupfolder. So that you can go on that route to enter your login credentials. Use this component insidepage.tsx.
import React, { ReactNode } from "react";
import AvatarList from "@/components/avatars-list";
import Logo from "@/components/logo";
import { auth } from "@/lib/auth";
import { Quote } from "lucide-react";
import { redirect } from "next/navigation";
const layout = async ({ children }: { children: ReactNode }) => {
const session = await auth();
if (session?.user) redirect("/app");
return (
<div className="flex min-h-screen ">
<div className="h-full flex flex-col items-center justify-center w-full">
<Logo full className="flex-row" width={60} />
{children}
</div>
<div className="hidden lg:flex min-h-screen items-center bg-primary/35 justify-center w-[50dvw] p-6 sticky">
<div>
<Quote className="rotate-180 fill-black opacity-70" />
<h3 className="text-balance font-medium">
I gave @workspace a try today and I was positively impressed! Very
quick setup to get a working with management automatically for you 👌 10/10 will play
more
</h3>
<AvatarList className="mt-10" />
</div>
</div>
</div>
);
};
export default layout;
Login page UI
This page is make sures if you're authenticated then not redirect you to main app (protected route or desired route) or if you're not then lets to login by filling the form.
import LoginForm from "@/components/login-form";
import React from "react";
import { redirect } from "next/navigation";
const page = async () => {
const session = await auth();
if (session?.user) redirect("/app");
return (
<div>
<LoginForm className="" />
</div>
);
};
export default page;
Login form logic
This is the core logic of how login form is handled, it has typesafety, form validations, error handling (giving feedback for yours)
"use client";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import Link from "next/link";
import { loginFormSchema } from "@/types/index";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { loginAction } from "@/actions/auth.action";
import { Input } from "./ui/input";
import { LoaderCircleIcon } from "lucide-react";
import { cn } from "@/lib/utils";
const LoginForm = ({ className }: { className?: string }) => {
const form = useForm<z.infer<typeof loginFormSchema>>({
resolver: zodResolver(loginFormSchema),
defaultValues: {
email: "",
password: "",
},
});
const router = useRouter();
const [loading, setLoading] = useState(false);
const onSubmit = async (values: z.infer<typeof loginFormSchema>) => {
setLoading(true);
console.log(values);
try {
const result = await loginAction(values);
if (result.success) {
toast.success("Login Success");
router.push("/app");
} else {
console.log("Login Failed", result.error);
toast.error(`Login Failed: ${result.error}`);
}
} catch (error) {
console.log(error);
console.log("Login Failed");
}
setLoading(false);
};
return (
<div className={cn(" flex items-center justify-center p-4", className)}>
<div className="w-full max-w-md space-y-6 p-6">
<div className="text-center">
<h2 className="text-2xl font-bold mb-2">Sign In</h2>
<p className="text-sm text-muted-foreground">
Enter your email and password to access your account
</p>
</div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4 w-full"
>
<FormField
name="email"
control={form.control}
render={({ field }) => (
<FormItem className="space-y-2">
<FormLabel>Email</FormLabel>
<FormControl>
<Input
type="email"
placeholder="name@example.com"
{...field}
className="w-full"
/>
</FormControl>
<FormMessage className="text-xs" />
</FormItem>
)}
/>
<FormField
name="password"
control={form.control}
render={({ field }) => (
<FormItem className="space-y-2">
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="******"
{...field}
className="w-full"
/>
</FormControl>
<FormMessage className="text-xs" />
</FormItem>
)}
/>
<div className="flex flex-col space-y-4 pt-2">
<Button type="submit" className="w-full" disabled={loading}>
{loading ? (
<LoaderCircleIcon className="animate-spin" />
) : (
"Login"
)}
</Button>
<div className="text-center">
<Link
href="/signup"
className="underline text-primary text-sm hover:text-primary/80 transition-colors"
>
Don't have an account?
</Link>
</div>
</div>
</form>
</Form>
</div>
</div>
);
};
export default LoginForm;
Signup page
This page is to /signup route which will help users to create a new account and if the user is already authenticated, then it redirects the user to the main app ('/app' in this case)
import Logo from "@/components/logo";
import { Shapes } from "@/components/shapes";
import SignUpForm "@/components/login-form";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import React from "react";
const page = async () => {
const session = await auth();
if (session?.user) redirect("/app");
return (
<div className="">
<SignUpForm/>
</div>
);
};
export default page;
SignUpForm logic
This is the core logic of how signup form is handled, it has typesafety, form validations, error handling (giving feedback for yours), the backend is the server actions handling custom logic
"use client";
import React from "react";
import { ControllerRenderProps, useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { signUpFormSchema } from "@/types/index";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { signUpAction } from "@/actions/auth.action";
const SignUpForm= () => {
const form = useForm<z.infer<typeof signUpFormSchema>>({
resolver: zodResolver(signUpFormSchema),
defaultValues: {
name: "",
email: "",
password: "",
confirmPassword: "",
},
});
const router = useRouter();
const [loading, setLoading] = useState(false);
const onSubmit = async (values: z.infer<typeof signUpFormSchema>) => {
setLoading(true);
console.log(values);
const res = await signUpAction(values);
console.log(" 😂😂",res)
if (res.success) {
toast.success(res.data);
router.push("/app");
} else {
toast.error(res.error);
}
setLoading(false);
};
return (
<div className="min-h-screen flex items-center justify-center w-[500px]">
<div className="w-full max-w-md space-y-6 p-6 rounded-lg shadow-sm">
<div className="text-center mb-6">
<h2 className="text-2xl font-semibold mb-2">Create Your Account</h2>
<p className="text-sm text-muted-foreground">
Sign up to get started
</p>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="space-y-2">
<FormLabel className="font-medium">Username</FormLabel>
<FormControl>
<Input
placeholder="name"
{...field}
className="w-full transition-all duration-300 focus:ring-2 focus:ring-primary/30"
/>
</FormControl>
<FormDescription className="text-xs pl-1 text-muted-foreground">
This is your public display name.
</FormDescription>
<FormMessage className="text-xs pl-1" />
</FormItem>
)}
/>
<FormField
name="email"
control={form.control}
render={({ field }) => (
<FormItem className="space-y-2">
<FormLabel className="font-medium">Email</FormLabel>
<FormControl>
<Input
type="email"
placeholder="name@example.com"
{...field}
className="w-full transition-all duration-300 focus:ring-2 focus:ring-primary/30"
/>
</FormControl>
<FormMessage className="text-xs pl-1" />
</FormItem>
)}
/>
<FormField
name="password"
control={form.control}
render={({ field }) => (
<FormItem className="space-y-2">
<FormLabel className="font-medium">Password</FormLabel>
<FormControl>
<PasswordField field={field} />
{/* <Input
type="password"
{...field}
className="w-full transition-all duration-300 focus:ring-2 focus:ring-primary/30"
/> */}
</FormControl>
<FormMessage className="text-xs pl-1" />
</FormItem>
)}
/>
<FormField
name="confirmPassword"
control={form.control}
render={({ field }) => (
<FormItem className="space-y-2">
<FormLabel className="font-medium">
Confirm Password
</FormLabel>
<FormControl>
<Input
type="password"
{...field}
className="w-full transition-all duration-300 focus:ring-2 focus:ring-primary/30"
/>
</FormControl>
<FormMessage className="text-xs pl-1" />
</FormItem>
)}
/>
<div className="pt-2 space-y-4">
<Button
type="submit"
className="w-full transition-transform duration-200 active:scale-95"
disabled={loading}
>
{loading ? (
<LoaderCircleIcon className="animate-spin" />
) : (
"Sign up"
)}
</Button>
<div className="text-center">
<Link
href="/login"
className="text-sm text-primary hover:opacity-80 transition-opacity"
>
Already have an account?
</Link>
</div>
</div>
</form>
</Form>
</div>
</div>
);
};
export default SignUpForm;
import { Label } from "@/components/ui/label";
import {
Check,
Eye,
EyeOff,
LoaderCircle,
LoaderCircleIcon,
X,
} from "lucide-react";
import { useMemo, useState } from "react";
function PasswordField({
field,
}: {
field: ControllerRenderProps<
{
password: string;
name: string;
email: string;
confirmPassword: string;
},
"password"
>;
}) {
const [password, setPassword] = useState(field.value);
const [isVisible, setIsVisible] = useState<boolean>(false);
const toggleVisibility = () => setIsVisible((prevState) => !prevState);
const checkStrength = (pass: string) => {
const requirements = [
{ regex: /.{8,}/, text: "At least 8 characters" },
{ regex: /[0-9]/, text: "At least 1 number" },
{ regex: /[a-z]/, text: "At least 1 lowercase letter" },
{ regex: /[A-Z]/, text: "At least 1 uppercase letter" },
];
return requirements.map((req) => ({
met: req.regex.test(pass),
text: req.text,
}));
};
const strength = checkStrength(password);
const strengthScore = useMemo(() => {
return strength.filter((req) => req.met).length;
}, [strength]);
const getStrengthColor = (score: number) => {
if (score === 0) return "bg-border";
if (score <= 1) return "bg-red-500";
if (score <= 2) return "bg-orange-500";
if (score === 3) return "bg-amber-500";
return "bg-emerald-500";
};
const getStrengthText = (score: number) => {
if (score === 0) return "Enter a password";
if (score <= 2) return "Weak password";
if (score === 3) return "Medium password";
return "Strong password";
};
return (
<div>
{/* Password input field with toggle visibility button */}
<div className="space-y-2">
<Label htmlFor="input-51">Input with password strength indicator</Label>
<div className="relative">
<Input
id="input-51"
className="pe-9"
placeholder="Password"
type={isVisible ? "text" : "password"}
{...field}
value={password}
onChange={(e) => {
setPassword(e.target.value);
field.onChange(e.target.value);
}}
aria-invalid={strengthScore < 4}
aria-describedby="password-strength"
/>
<button
className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:text-foreground focus:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
type="button"
onClick={toggleVisibility}
aria-label={isVisible ? "Hide password" : "Show password"}
aria-pressed={isVisible}
aria-controls="password"
>
{isVisible ? (
<EyeOff size={16} strokeWidth={2} aria-hidden="true" />
) : (
<Eye size={16} strokeWidth={2} aria-hidden="true" />
)}
</button>
</div>
</div>
{/* Password strength indicator */}
<div
className="mb-4 mt-3 h-1 w-full overflow-hidden rounded-full bg-border"
role="progressbar"
aria-valuenow={strengthScore}
aria-valuemin={0}
aria-valuemax={4}
aria-label="Password strength"
>
<div
className={`h-full ${getStrengthColor(
strengthScore
)} transition-all duration-500 ease-out`}
style={{ width: `${(strengthScore / 4) * 100}%` }}
></div>
</div>
{/* Password strength description */}
<p
id="password-strength"
className="mb-2 text-sm font-medium text-foreground"
>
{getStrengthText(strengthScore)}. Must contain:
</p>
{/* Password requirements list */}
<ul className="space-y-1.5" aria-label="Password requirements">
{strength.map((req, index) => (
<li key={index} className="flex items-center gap-2">
{req.met ? (
<Check
size={16}
className="text-emerald-500"
aria-hidden="true"
/>
) : (
<X
size={16}
className="text-muted-foreground/80"
aria-hidden="true"
/>
)}
<span
className={`text-xs ${
req.met ? "text-emerald-600" : "text-muted-foreground"
}`}
>
{req.text}
<span className="sr-only">
{req.met ? " - Requirement met" : " - Requirement not met"}
</span>
</span>
</li>
))}
</ul>
</div>
);
}
Types
They ensure the typesafety of the functions we discussed above. It includes commonly used types and form schema for validations
import { z } from "zod";
export const signUpFormSchema = z
.object({
name: z.string().min(3),
email: z.string().email(),
password: z.string().min(6),
confirmPassword: z.string().min(6),
})
.refine((data) => data.password === data.confirmPassword, {
message: "Passwords do not match",
path: ["confirmPassword"],
});
export const loginFormSchema = z.object({
email: z.string().email(),
password: z.string().min(6),
});
Server actions
This is the backend of our authentication and they are written by keeping security in mind and also it gives respective feedback to the user for all the actions performed
"use server";
import { signIn, signOut } from "@/lib/auth";
import prisma from "@/lib/db";
import { loginFormSchema, signUpFormSchema } from "@/types/index";
import { z } from "zod";
const signUpAction = async (data: z.infer<typeof signUpFormSchema>) => {
console.table(data);
try {
const existingUser = await prisma.user.findUnique({
where: {
email: data.email,
},
});
if (existingUser) {
return {
success: false,
error: "User already exists",
};
}
console.log("creating user", data.email);
const newUser = await prisma.user.create({
data: {
email: data.email,
password: data.password,
name: data.name,
},
});
if (newUser) {
return {
success: true,
data: "User created successfully",
};
}
return {
success: false,
error: "User creation failed",
};
} catch (error) {
return {
success: false,
data: `Something went wrong ${error}`,
};
}
};
const loginAction = async (data: z.infer<typeof loginFormSchema>) => {
try {
const req = await signIn("credentials", { ...data, redirect: false });
console.log(" from action", req);
return {
success: true,
data: req,
};
} catch (error) {
if (error instanceof AuthError) {
console.log("error", error);
switch (error.type) {
case "CredentialsSignin": {
return {
success: false,
error: error.message.split("Read more")[0],
};
}
default: {
return {
success: false,
error: "Something went wrong",
};
}
}
}
return {
success: false,
error: "Something went wrong",
};
}
};
const signOutAction = async () => {
console.log("loging out");
await signOut();
};
const getUserDetails = async (email: string) => {
const user = await prisma.user.findUnique({
where: {
email: email,
},
});
return user;
};
export { loginAction, signOutAction, signUpAction, getUserDetails };
PrismaClient
If you've not created a global prisma client, since nextjs is a Edge time framework(works only in demand) and so it requires a global client to check if the a db connection is already made to avoid db polling(making sure unnecessary connections are not made.)
import { PrismaClient } from "@prisma/client";
const prismaClientSingleton = () => {
return new PrismaClient();
};
declare const globalThis: {
prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
export default prisma;
if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;
Follow these steps if
db.tsthrows some error
npm install prisma --save-dev
npx prisma init --datasource-provider sqlite
Add a basic Model in schema.prisma
model User {
id Int @id @default(autoincrement())
email String @unique
password String
name String?
}
Run migration command to create your database
npx prisma migrate dev --name init
Run studio command to check data in your database
npx prisma studio
