next-auth integrated

.env.example

@@ -5,3 +5,5 @@ UPLOADTHING_APP_ID=
 
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
+
+NEXTAUTH_SECRET=

app/(auth)/admin/changelogs/page.tsx

@@ -20,6 +20,12 @@ import { logsSchema } from "@/lib/validations/validation";
 const AdminPage = () => {
   const form = useForm<z.infer<typeof logsSchema>>({
     resolver: zodResolver(logsSchema),
+    defaultValues: {
+      fileName: "",
+      version: "",
+      downloadLink: "",
+      fileSize: "",
+    },
   });
 
   const onSubmit: SubmitHandler<z.infer<typeof logsSchema>> = async (data) => {
@@ -42,8 +48,8 @@ const AdminPage = () => {
   };
 
   return (
-    <section id="admin-page" className="wrapper container">
-      <h1 className="text-3xl font-bold py-6">Admin Upload Section</h1>
+    <section id="logs-page" className="wrapper container">
+      <h1 className="text-3xl font-bold py-6">Server Logs Form</h1>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
           <FormField

app/(auth)/admin/downloads/page.tsx

@@ -20,6 +20,12 @@ import { downloadSchema } from "@/lib/validations/validation";
 const AdminPage = () => {
   const form = useForm<z.infer<typeof downloadSchema>>({
     resolver: zodResolver(downloadSchema),
+    defaultValues: {
+      fileName: "",
+      version: "",
+      downloadLink: "",
+      fileSize: "",
+    },
   });
 
   const onSubmit: SubmitHandler<z.infer<typeof downloadSchema>> = async (
@@ -44,8 +50,8 @@ const AdminPage = () => {
   };
 
   return (
-    <section id="admin-page" className="wrapper container">
-      <h1 className="text-3xl font-bold py-6">Admin Upload Section</h1>
+    <section id="downloads-page" className="wrapper container">
+      <h1 className="text-3xl font-bold py-6">Mods Form</h1>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
           <FormField

app/(auth)/admin/mods/page.tsx

@@ -20,6 +20,12 @@ import { modsSchema } from "@/lib/validations/validation";
 const AdminPage = () => {
   const form = useForm<z.infer<typeof modsSchema>>({
     resolver: zodResolver(modsSchema),
+    defaultValues: {
+      fileName: "",
+      version: "",
+      downloadLink: "",
+      fileSize: "",
+    },
   });
 
   const onSubmit: SubmitHandler<z.infer<typeof modsSchema>> = async (data) => {
@@ -42,8 +48,8 @@ const AdminPage = () => {
   };
 
   return (
-    <section id="admin-page" className="wrapper container">
-      <h1 className="text-3xl font-bold py-6">Admin Upload Section</h1>
+    <section id="mods-page" className="wrapper container">
+      <h1 className="text-3xl font-bold py-6">Download Form</h1>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
           <FormField

app/api/auth/[...nextauth]/options.ts

@@ -0,0 +1,53 @@
+import { NextAuthOptions } from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    CredentialsProvider({
+      id: "credentials",
+      name: "Credentials",
+      credentials: {
+        username: { label: "Username", type: "text" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials: any): Promise<any> {
+        const adminUsername = process.env.ADMIN_USERNAME;
+        const adminPassword = process.env.ADMIN_PASSWORD;
+
+        if (
+          credentials.username === adminUsername &&
+          credentials.password === adminPassword
+        ) {
+          // Any object returned will be saved in `user` property of the JWT
+          return { id: 1, name: "svrjsAdmin" };
+        } else {
+          // If you return null then an error will be displayed advising the user to check their details.
+          return null;
+        }
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }) {
+      // Add user info to token
+      if (user) {
+        token.id = user.id;
+        token.name = user.name;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      // Add token info to session
+      //   session.user.id = token.id;
+      //   session.user.name = token.name;
+      return session;
+    },
+  },
+  pages: {
+    signIn: "/login",
+  },
+  session: {
+    strategy: "jwt",
+  },
+  secret: process.env.NEXTAUTH_SECRET,
+};

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from "next-auth/next";
+import { authOptions } from "./options";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

app/login/page.tsx

@@ -1,64 +1,61 @@
 "use client";
 import React, { useState } from "react";
+import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 
 const LoginPage = () => {
-	const [username, setUsername] = useState("");
-	const [password, setPassword] = useState("");
-	const [error, setError] = useState("");
-	const router = useRouter();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const router = useRouter();
 
-	const handleLogin = async (e: React.FormEvent) => {
-		e.preventDefault();
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const res = await signIn("credentials", {
+      redirect: false,
+      username,
+      password,
+    });
 
-		const response = await fetch("/api/login", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({ username, password }),
-		});
+    if (res?.ok) {
+      router.push("/admin");
+    } else {
+      setError("Invalid credentials");
+    }
+  };
 
-		if (response.ok) {
-			router.push("/admin");
-		} else {
-			const data = await response.json();
-			setError(data.message);
-		}
-	};
-
-	return (
-		<div className="max-w-xl h-screen flex justify-center bg-gray-900 flex-col container">
-			<h1 className="text-3xl font-bold mb-4">SVRJS ADMIN PANEL</h1>
-			{error && <p className="text-red-500 mb-4">{error}</p>}
-			<form onSubmit={handleLogin}>
-				<div className="mb-4">
-					<input
-						type="text"
-						id="username"
-						placeholder="Username"
-						value={username}
-						onChange={(e) => setUsername(e.target.value)}
-						className="mt-1 block w-full bg-gray-800 rounded-full px-5 py-2 shadow-sm p-2"
-					/>
-				</div>
-				<div className="mb-4">
-					<input
-						type="password"
-						placeholder="Password"
-						id="password"
-						value={password}
-						onChange={(e) => setPassword(e.target.value)}
-						className="mt-1 block w-full bg-gray-800 rounded-full px-5 py-2 shadow-sm"
-					/>
-				</div>
-				<Button type="submit" className="w-full rounded-full" size={"lg"}>
-					Login
-				</Button>
-			</form>
-		</div>
-	);
+  return (
+    <div className="max-w-xl h-screen flex justify-center bg-gray-900 flex-col container">
+      <h1 className="text-3xl font-bold mb-4">SVRJS ADMIN PANEL</h1>
+      {error && <p className="text-red-500 mb-4">{error}</p>}
+      <form onSubmit={handleLogin}>
+        <div className="mb-4">
+          <input
+            type="text"
+            id="username"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="mt-1 block w-full bg-gray-800 rounded-full px-5 py-2 shadow-sm p-2"
+          />
+        </div>
+        <div className="mb-4">
+          <input
+            type="password"
+            placeholder="Password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="mt-1 block w-full bg-gray-800 rounded-full px-5 py-2 shadow-sm"
+          />
+        </div>
+        <Button type="submit" className="w-full rounded-full" size={"lg"}>
+          Login
+        </Button>
+      </form>
+    </div>
+  );
 };
 
 export default LoginPage;

middleware.ts

@@ -1,21 +1,19 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
+import { getToken } from "next-auth/jwt";
 
-export function middleware(req: NextRequest) {
-	const url = req.nextUrl.clone();
+export async function middleware(req: NextRequest) {
+  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
 
-	if (url.pathname.startsWith("/admin")) {
-		const authCookie = req.cookies.get("auth");
+  if (req.nextUrl.pathname.startsWith("/admin") && !token) {
+    const url = req.nextUrl.clone();
+    url.pathname = "/login";
+    return NextResponse.redirect(url);
+  }
 
-		if (!authCookie) {
-			url.pathname = "/login";
-			return NextResponse.redirect(url);
-		}
-	}
-
-	return NextResponse.next();
+  return NextResponse.next();
 }
 
 export const config = {
-	matcher: ["/admin/:path*"],
+  matcher: ["/admin/:path*"],
 };

package.json

@@ -27,6 +27,7 @@
     "lucide-react": "^0.394.0",
     "mini-svg-data-uri": "^1.4.4",
     "mongoose": "^8.4.3",
+    "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",