feat: add credentials authentication (#1)

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

@@ -1,3 +1,14 @@
-export { GET, POST } from "@alparr/auth";
+import type { NextRequest } from "next/server";
 
-export const runtime = "edge";
+import { createHandlers } from "@alparr/auth";
+
+export const GET = async (req: NextRequest) => {
+  return await createHandlers(isCredentialsRequest(req)).handlers.GET(req);
+};
+export const POST = async (req: NextRequest) => {
+  return await createHandlers(isCredentialsRequest(req)).handlers.POST(req);
+};
+
+const isCredentialsRequest = (req: NextRequest) => {
+  return req.url.includes("credentials") && req.method === "POST";
+};

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -3,8 +3,6 @@ import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { appRouter, createTRPCContext } from "@alparr/api";
 import { auth } from "@alparr/auth";
 
-export const runtime = "edge";
-
 /**
  * Configure basic CORS headers
  * You should extend this to match your needs

apps/nextjs/src/app/auth/login/_components/login-form.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Alert,
+  Button,
+  PasswordInput,
+  rem,
+  Stack,
+  TextInput,
+} from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import type { z } from "zod";
+
+import { signIn } from "@alparr/auth/client";
+import { signInSchema } from "@alparr/validation";
+
+export const LoginForm = () => {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const form = useForm<FormType>({
+    validate: zodResolver(signInSchema),
+    initialValues: {
+      name: "",
+      password: "",
+    },
+  });
+
+  const handleSubmit = async (values: FormType) => {
+    setIsLoading(true);
+    setError(undefined);
+    await signIn("credentials", {
+      ...values,
+      redirect: false,
+      callbackUrl: "/",
+    })
+      .then((response) => {
+        if (!response?.ok) {
+          throw response?.error;
+        }
+
+        void router.push("/");
+      })
+      .catch((error: Error | string) => {
+        setIsLoading(false);
+        setError(error.toString());
+      });
+  };
+
+  return (
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((v) => void handleSubmit(v))}>
+        <Stack gap="lg">
+          <TextInput label="Username" {...form.getInputProps("name")} />
+          <PasswordInput label="Password" {...form.getInputProps("password")} />
+          <Button type="submit" fullWidth loading={isLoading}>
+            Login
+          </Button>
+        </Stack>
+      </form>
+
+      {error && (
+        <Alert icon={<IconAlertTriangle size={rem(16)} />} color="red">
+          {error}
+        </Alert>
+      )}
+    </Stack>
+  );
+};
+
+type FormType = z.infer<typeof signInSchema>;

apps/nextjs/src/app/auth/login/page.tsx

@@ -0,0 +1,25 @@
+import { Card, Center, Stack, Text, Title } from "@mantine/core";
+
+import { LogoWithTitle } from "~/components/layout/logo";
+import { LoginForm } from "./_components/login-form";
+
+export default function Login() {
+  return (
+    <Center>
+      <Stack align="center" mt="xl">
+        <LogoWithTitle />
+        <Stack gap={6} align="center">
+          <Title order={3} fw={400} ta="center">
+            Log in to your account
+          </Title>
+          <Text size="sm" c="gray.5" ta="center">
+            Welcome back! Please enter your credentials
+          </Text>
+        </Stack>
+        <Card bg="dark.8" w={64 * 6} maw="90vw">
+          <LoginForm />
+        </Card>
+      </Stack>
+    </Center>
+  );
+}

apps/nextjs/src/app/init/user/_components/init-user-form.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import type { z } from "zod";
+
+import { initUserSchema } from "@alparr/validation";
+
+import { showErrorNotification, showSuccessNotification } from "~/notification";
+import { api } from "~/utils/api";
+
+export const InitUserForm = () => {
+  const router = useRouter();
+  const { mutateAsync, error, isPending } = api.user.initUser.useMutation();
+  const form = useForm<FormType>({
+    validate: zodResolver(initUserSchema),
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+    initialValues: {
+      username: "",
+      password: "",
+      repeatPassword: "",
+    },
+  });
+
+  const handleSubmit = async (values: FormType) => {
+    console.log(values);
+    await mutateAsync(values, {
+      onSuccess: () => {
+        showSuccessNotification({
+          title: "User created",
+          message: "You can now log in",
+        });
+        router.push("/auth/login");
+      },
+      onError: () => {
+        showErrorNotification({
+          title: "User creation failed",
+          message: error?.message ?? "Unknown error",
+        });
+      },
+    });
+  };
+
+  return (
+    <Stack gap="xl">
+      <form
+        onSubmit={form.onSubmit(
+          (v) => void handleSubmit(v),
+          (err) => console.log(err),
+        )}
+      >
+        <Stack gap="lg">
+          <TextInput label="Username" {...form.getInputProps("username")} />
+          <PasswordInput label="Password" {...form.getInputProps("password")} />
+          <PasswordInput
+            label="Repeat password"
+            {...form.getInputProps("repeatPassword")}
+          />
+          <Button type="submit" fullWidth loading={isPending}>
+            Create user
+          </Button>
+        </Stack>
+      </form>
+    </Stack>
+  );
+};
+
+type FormType = z.infer<typeof initUserSchema>;

apps/nextjs/src/app/init/user/page.tsx

@@ -0,0 +1,38 @@
+import { notFound } from "next/navigation";
+import { Card, Center, Stack, Text, Title } from "@mantine/core";
+
+import { db } from "@alparr/db";
+
+import { LogoWithTitle } from "~/components/layout/logo";
+import { InitUserForm } from "./_components/init-user-form";
+
+export default async function InitUser() {
+  const firstUser = await db.query.users.findFirst({
+    columns: {
+      id: true,
+    },
+  });
+
+  if (firstUser) {
+    return notFound();
+  }
+
+  return (
+    <Center>
+      <Stack align="center" mt="xl">
+        <LogoWithTitle />
+        <Stack gap={6} align="center">
+          <Title order={3} fw={400} ta="center">
+            New Alparr installation
+          </Title>
+          <Text size="sm" c="gray.5" ta="center">
+            Please create the initial administator user.
+          </Text>
+        </Stack>
+        <Card bg="dark.8" w={64 * 6} maw="90vw">
+          <InitUserForm />
+        </Card>
+      </Stack>
+    </Center>
+  );
+}

apps/nextjs/src/app/layout.tsx

@@ -1,12 +1,14 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
-import '@mantine/notifications/styles.css';
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import "@mantine/notifications/styles.css";
 
-import { MantineProvider, ColorSchemeScript } from '@mantine/core';
 import { headers } from "next/headers";
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+
 import { uiConfiguration } from "@alparr/ui";
 
 import { TRPCReactProvider } from "./providers";
@@ -29,14 +31,22 @@ export const metadata: Metadata = {
 };
 
 export default function Layout(props: { children: React.ReactNode }) {
+  const colorScheme = "dark";
+
   return (
     <html lang="en">
       <head>
-        <ColorSchemeScript />
+        <ColorSchemeScript defaultColorScheme={colorScheme} />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <TRPCReactProvider headers={headers()}>
-          <MantineProvider defaultColorScheme="dark" {...uiConfiguration}>{props.children}</MantineProvider>
+          <MantineProvider
+            defaultColorScheme={colorScheme}
+            {...uiConfiguration}
+          >
+            <Notifications />
+            {props.children}
+          </MantineProvider>
         </TRPCReactProvider>
       </body>
     </html>

apps/nextjs/src/app/page.tsx

@@ -1,7 +1,10 @@
-import { db } from "@alparr/db";
 import { Button, Stack, Title } from "@mantine/core";
 
+import { auth } from "@alparr/auth";
+import { db } from "@alparr/db";
+
 export default async function HomePage() {
+  const currentSession = await auth();
   const users = await db.query.users.findMany();
 
   return (
@@ -9,6 +12,11 @@ export default async function HomePage() {
       <Title>Home</Title>
       <Button>Test</Button>
       <pre>{JSON.stringify(users)}</pre>
+      {currentSession && (
+        <span>
+          Currently logged in as <b>{currentSession.user.name}</b>
+        </span>
+      )}
     </Stack>
   );
 }

apps/nextjs/src/components/layout/logo.tsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+import { Group, Title } from "@mantine/core";
+
+interface LogoProps {
+  size: number;
+}
+
+export const Logo = ({ size = 60 }: LogoProps) => (
+  <Image src="/logo/alparr.png" alt="Alparr logo" width={size} height={size} />
+);
+
+export const LogoWithTitle = () => (
+  <Group gap={0}>
+    <Logo size={48} />
+    <Title order={1}>lparr</Title>
+  </Group>
+);

apps/nextjs/src/notification.tsx

@@ -0,0 +1,20 @@
+import { rem } from "@mantine/core";
+import type { NotificationData } from "@mantine/notifications";
+import { notifications } from "@mantine/notifications";
+import { IconCheck, IconX } from "@tabler/icons-react";
+
+type CommonNotificationProps = Pick<NotificationData, "title" | "message">;
+
+export const showSuccessNotification = (props: CommonNotificationProps) =>
+  notifications.show({
+    ...props,
+    color: "teal",
+    icon: <IconCheck size={rem(20)} />,
+  });
+
+export const showErrorNotification = (props: CommonNotificationProps) =>
+  notifications.show({
+    ...props,
+    color: "red",
+    icon: <IconX size={rem(20)} />,
+  });