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,5 +1,6 @@
 "use client";
 import React, { useState } from "react";
+import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 
@@ -11,20 +12,16 @@ const LoginPage = () => {
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
-
-		const response = await fetch("/api/login", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({ username, password }),
+    const res = await signIn("credentials", {
+      redirect: false,
+      username,
+      password,
     });
 
-		if (response.ok) {
+    if (res?.ok) {
       router.push("/admin");
     } else {
-			const data = await response.json();
-			setError(data.message);
+      setError("Invalid credentials");
     }
   };
 

middleware.ts

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

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",