Feat: authentication

src/app/admin/actions.ts

@@ -1,9 +0,0 @@
-"use server";
-
-import { redirect } from "next/navigation";
-
-export async function login(formData: { name: string; password: string }) {
-  console.log("data");
-  console.log(formData);
-  redirect("/admin/panel");
-}

src/app/admin/login/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { Button, Card, Flex, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
+import { hasLength, useForm } from "@mantine/form";
+import { signIn } from "next-auth/react";
+import { redirect } from "next/navigation";
+
+interface FormValues {
+  name: string;
+  password: string;
+}
+
+export default function LoginPage() {
+  const form = useForm<FormValues>({
+    mode: "uncontrolled",
+    initialValues: {
+      name: "",
+      password: "",
+    },
+    validate: {
+      name: hasLength({ min: 5 }, "Too short"),
+      password: hasLength({ min: 5 }, "Too short"),
+    },
+  });
+
+  const handleSubmit = async (formData: { name: string; password: string }) => {
+    const res = await signIn("credentials", {
+      username: formData.name,
+      password: formData.password,
+      redirect: false,
+    });
+    if (res && res.error) {
+      if (res.status === 401)
+        form.setErrors({
+          name: "Wrong password or username",
+        });
+      else
+        form.setErrors({
+          name: `Unknown error: ${res.status}`,
+        });
+    } else {
+      redirect("/admin/panel");
+    }
+  };
+
+  return (
+    <Flex w="100vw" h="100vh" justify="center" align="center">
+      <Card shadow="md" w="400" radius="md">
+        <form onSubmit={form.onSubmit(handleSubmit)}>
+          <Stack>
+            <Text c="dimmed" size="xl" ta="center">
+              Admin
+            </Text>
+            <TextInput
+              label="Name"
+              placeholder="Username"
+              key={form.key("name")}
+              withAsterisk
+              {...form.getInputProps("name")}
+              name="name"
+              autoComplete="username"
+            />
+            <PasswordInput
+              label="Password"
+              mt="md"
+              withAsterisk
+              placeholder="password"
+              key={form.key("password")}
+              name="password"
+              autoComplete="current-password"
+              {...form.getInputProps("password")}
+            />
+            <Button radius="md" type="submit" mt="md" w="100%">
+              Login
+            </Button>
+          </Stack>
+        </form>
+      </Card>
+    </Flex>
+  );
+}

src/app/admin/page.tsx

@@ -1,60 +1,9 @@
-"use client";
+"use server";
 
-import { Button, Card, Flex, PasswordInput, Text, TextInput } from "@mantine/core";
-import { hasLength, useForm } from "@mantine/form";
-import { login } from "./actions";
-
-interface FormValues {
-  name: string;
-  password: string;
-}
+import { redirect } from "next/navigation";
 
 const AdminPage = () => {
-  const form = useForm<FormValues>({
-    mode: "uncontrolled",
-    initialValues: {
-      name: "",
-      password: "",
-    },
-    validate: {
-      name: hasLength({ min: 5 }, "Too short"),
-      password: hasLength({ min: 5 }, "Too short"),
-    },
-  });
-
-  return (
-    <Flex w="100vw" h="100vh" justify="center" align="center">
-      <Card shadow="md" w="400" radius="md">
-        <form onSubmit={form.onSubmit(login)}>
-          <Text c="dimmed" size="xl" ta="center">
-            Admin
-          </Text>
-          <TextInput
-            label="Name"
-            placeholder="Username"
-            key={form.key("name")}
-            withAsterisk
-            {...form.getInputProps("name")}
-            name="name"
-            autoComplete="username"
-          />
-          <PasswordInput
-            label="Password"
-            mt="md"
-            withAsterisk
-            placeholder="password"
-            key={form.key("password")}
-            name="password"
-            autoComplete="current-password"
-            {...form.getInputProps("password")}
-          />
-          <Button radius="md" type="submit" mt="md" w="100%">
-            Login
-          </Button>
-        </form>
-      </Card>
-    </Flex>
-  );
+  return redirect("/admin/panel");
 };
 
 export default AdminPage;

src/app/admin/panel/layout.tsx

@@ -1,9 +1,9 @@
 "use client";
-import { ActionIcon, AppShell, Burger, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, AppShell, Burger, Button, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { signOut } from "next-auth/react";
 import { LuMoon, LuSun } from "react-icons/lu";
-
-const AdminLayout = ({
+const AdminPanelLayout = ({
   children,
 }: Readonly<{
   children: React.ReactNode;
@@ -32,10 +32,13 @@ const AdminLayout = ({
           .map((_, index) => (
             <Skeleton key={index} h={28} mt="sm" animate={false} />
           ))}
+        <Button h={28} mt="sm" onClick={() => signOut()}>
+          Sign Out
+        </Button>
       </AppShell.Navbar>
       <AppShell.Main>{children}</AppShell.Main>
     </AppShell>
   );
 };
 
-export default AdminLayout;
+export default AdminPanelLayout;

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

@@ -0,0 +1,33 @@
+import NextAuth from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+
+const handler = NextAuth({
+  jwt: {
+    maxAge: 60 * 60 * 24 * 30,
+  },
+  session: {
+    strategy: "jwt",
+  },
+  pages: {
+    signIn: "/admin/login",
+  },
+  providers: [
+    CredentialsProvider({
+      name: "Credentials",
+      credentials: {
+        username: { label: "Username", type: "text", placeholder: "jsmith" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        const { username, password } = credentials as { username: string; password: string };
+        if (username !== "admin" || password !== "admin") {
+          return null;
+        }
+
+        return new Promise((resolve) => resolve({ id: "1", email: "example@example.org", name: "test" }));
+      },
+    }),
+  ],
+});
+
+export { handler as GET, handler as POST };

src/app/layout.tsx

@@ -1,8 +1,10 @@
 import { ColorSchemeScript, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import type { Metadata } from "next";
+import { getSession } from "next-auth/react";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.scss";
+import Providers from "./providers";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -19,18 +21,21 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const session = await getSession();
   return (
     <html lang="ru" suppressHydrationWarning>
       <head>
         <ColorSchemeScript />
       </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <MantineProvider>{children}</MantineProvider>
+        <MantineProvider>
+          <Providers session={session}>{children}</Providers>
+        </MantineProvider>
       </body>
     </html>
   );

src/app/providers.tsx

@@ -0,0 +1,6 @@
+"use client";
+import type { Session } from "next-auth";
+import { SessionProvider } from "next-auth/react";
+export default function Providers({ session, children }: { session: Session | null; children: React.ReactNode }) {
+  return <SessionProvider session={session}>{children}</SessionProvider>;
+}

src/middleware.ts

@@ -1,14 +1,4 @@
-import { isAuthenticated } from "@/lib/auth";
-import { NextRequest, NextResponse } from "next/server";
-
+export { default } from "next-auth/middleware";
 export const config = {
-  matcher: "/admin/:path*",
+  matcher: ["/admin/panel"],
 };
-
-export function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl;
-  if (pathname === "/admin" || isAuthenticated()) {
-    return NextResponse.next();
-  }
-  return NextResponse.redirect(new URL("/admin", request.url));
-}