Initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/docker-image-build-and-push.yaml

@@ -0,0 +1,44 @@
+name: Docker Image Build and Push
+
+on:
+  push:
+    tags: [ "v*.*.*" ]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Get version from package.json
+        id: versions
+        run: |
+          package_version=$(cat package.json | jq -r '.version')
+          tag_version=$(echo $GITHUB_REF | cut -d '/' -f 3)  # Extract tag from ref (e.g., refs/tags/v1.2.3)
+          echo "package_version=v$package_version" >> $GITHUB_OUTPUT
+          echo "tag_version=$tag_version" >> $GITHUB_OUTPUT
+
+      - name: Check if versions match
+        if: ${{ steps.versions.outputs.package_version != steps.versions.outputs.tag_version }}
+        run: |
+          echo "Error: Tag version and package.json version do not match!"
+          exit 1  # Stop the workflow
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push image
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          platforms: linux/amd64
+          tags: markusthielker/next-base:latest, markusthielker/next-base:${{ steps.versions.outputs.tag_version }}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE
+/.idea

Dockerfile

@@ -0,0 +1,58 @@
+FROM node:21-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# dependencies have to be changed depending on target architecture
+RUN npm i @node-rs/argon2-linux-x64-musl # arm64 = @node-rs/argon2-linux-arm64-musl
+RUN npm i @node-rs/bcrypt-linux-x64-musl # arm64 = @node-rs/bcrypt-linux-arm64-musl
+
+COPY prisma/ ./prisma/
+
+RUN npx prisma generate
+
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run build
+
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/prisma ./prisma
+
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,19 @@
+# Next-Base
+
+A base implementation of my favorite NextJS stack.
+
+- [NextJS](https://nextjs.org/)
+- [TailwindCSS](https://tailwindcss.com/)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [Lucia](https://github.com/lucia-auth/lucia)
+- [Prisma](https://www.prisma.io/)
+- [Postgres](https://www.postgresql.org/)
+- [Docker](https://www.docker.com/)
+
+This base already implements the sign-up and sign-in process with a clean UI, ready for customization.
+
+## Next Steps
+
+- Documentation
+- Switching dark and light mode
+- Change own username and password

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

docker/base-dev/.gitignore

@@ -0,0 +1 @@
+postgres-data/

docker/base-dev/docker-compose.yaml

@@ -0,0 +1,19 @@
+services:
+
+  postgres:
+    container_name: base_postgres
+    image: postgres:15.2
+    restart: always
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready" ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    ports:
+      - 127.0.0.1:5432:5432
+    environment:
+      POSTGRES_USER: prisma
+      POSTGRES_PASSWORD: prisma
+      POSTGRES_DB: base
+    volumes:
+      - ./postgres-data:/var/lib/postgresql/data

docker/base-prod/.gitignore

@@ -0,0 +1 @@
+postgres-data/

docker/base-prod/docker-compose.yaml

@@ -0,0 +1,76 @@
+services:
+
+  app-migrations:
+    container_name: base_migrations
+    image: markusthielker/next-base:1.0.0
+    env_file:
+      - .env
+    depends_on:
+      postgres:
+        condition: service_healthy
+    command: [ "npx", "prisma", "migrate", "deploy" ]
+    networks:
+      - internal
+
+  app:
+    container_name: base_app
+    image: markusthielker/next-base:1.0.0
+    env_file:
+      - .env
+    depends_on:
+      app-migrations:
+        condition: service_completed_successfully
+    restart: unless-stopped
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.xyz-base.rule=Host(`base.thielker.xyz`)"
+      - "traefik.http.routers.xyz-base.entrypoints=web, websecure"
+      - "traefik.http.routers.xyz-base.tls=true"
+      - "traefik.http.routers.xyz-base.tls.certresolver=lets-encrypt"
+    networks:
+      - web
+      - internal
+
+  app-studio:
+    container_name: base_studio
+    image: markusthielker/next-base:1.0.0
+    env_file:
+      - .env
+    depends_on:
+      app-migrations:
+        condition: service_completed_successfully
+    command: "npx prisma studio"
+    restart: unless-stopped
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.xyz-base-studio.rule=Host(`db.base.thielker.xyz`)"
+      - "traefik.http.routers.xyz-base-studio.entrypoints=web, websecure"
+      - "traefik.http.services.xyz-finances-db.loadbalancer.server.port=5555"
+      - "traefik.http.routers.xyz-base-studio.tls=true"
+      - "traefik.http.routers.xyz-base-studio.tls.certresolver=lets-encrypt"
+    networks:
+      - web
+      - internal
+
+  postgres:
+    container_name: base_postgres
+    image: postgres:15.2
+    restart: unless-stopped
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready" ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    environment:
+      POSTGRES_USER: prisma
+      POSTGRES_PASSWORD: prisma
+      POSTGRES_DB: base
+    volumes:
+      - ./postgres-data:/var/lib/postgresql/data
+    networks:
+      - internal
+
+networks:
+  web:
+    external: true
+  internal:

next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    webpack: (config) => {
+        config.externals.push(
+            '@node-rs/argon2',
+            '@node-rs/bcrypt',
+        );
+        return config;
+    },
+    output: 'standalone',
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "next-base",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@lucia-auth/adapter-prisma": "^4.0.0",
+    "@prisma/client": "^5.10.2",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucia": "^3.0.1",
+    "lucide-react": "^0.350.0",
+    "next": "14.1.3",
+    "next-themes": "^0.2.1",
+    "oslo": "^1.1.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.0",
+    "sonner": "^1.4.3",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.25",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.3",
+    "postcss": "^8",
+    "prisma": "^5.10.2",
+    "tailwindcss": "^3.3.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

prisma/migrations/20240307000000_add_lucia_setup/migration.sql

@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "lucia_user"
+(
+    "id"       TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+
+    CONSTRAINT "lucia_user_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "lucia_session"
+(
+    "id"        TEXT         NOT NULL,
+    "userId"    TEXT         NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "lucia_session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "lucia_user_username_key" ON "lucia_user" ("username");

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -0,0 +1,30 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  // lucia internal fields
+  id       String    @id
+  sessions Session[]
+
+  // custom fields
+  username String @unique
+  password String
+
+  @@map("lucia_user")
+}
+
+model Session {
+  // lucia internal fields
+  id        String   @id
+  userId    String
+  expiresAt DateTime
+  user      User     @relation(references: [id], fields: [userId], onDelete: Cascade)
+
+  @@map("lucia_session")
+}

public/next.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80">
+    <path fill="#000"
+          d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/>
+    <path fill="#000"
+          d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/>
+</svg>

public/vercel.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64">
+    <path fill="black"
+          d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/>
+</svg>

src/app/account/page.tsx

@@ -0,0 +1,54 @@
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import React from 'react';
+import { getUser } from '@/auth';
+import { redirect } from 'next/navigation';
+import signOut from '@/lib/actions/signOut';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { ChevronLeft } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import SignOutForm from '@/components/form/signOutForm';
+import { URL_HOME, URL_SIGN_IN } from '@/lib/constants';
+
+export default async function AccountPage() {
+
+    const user = await getUser();
+
+    if (!user) {
+        redirect(URL_SIGN_IN);
+    }
+
+    return (
+        <div className="flex min-h-screen flex-col items-center justify-center relative">
+            <Button variant="ghost" size="icon" className="absolute top-4 left-4" asChild>
+                <Link href={URL_HOME}>
+                    <ChevronLeft/>
+                </Link>
+            </Button>
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle>Hey, {user?.username}!</CardTitle>
+                    <CardDescription>This is your account overview.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                    <div>
+                        <Label>ID</Label>
+                        <Input
+                            disabled
+                            value={user?.id}/>
+                    </div>
+                    <div>
+                        <Label>Username</Label>
+                        <Input
+                            disabled
+                            value={user?.username}/>
+                    </div>
+                </CardContent>
+                <CardFooter>
+                    <SignOutForm onSubmit={signOut}/>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+}

src/app/auth/layout.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function AuthLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <div className="flex min-h-screen items-center justify-center">
+            {children}
+        </div>
+    );
+}

src/app/auth/signin/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import SignInForm from '@/components/form/signInForm';
+import signIn from '@/lib/actions/signIn';
+import Link from 'next/link';
+import { URL_SIGN_UP } from '@/lib/constants';
+
+export default async function SignInPage() {
+    return (
+        <Card className="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>Sign in</CardTitle>
+                <CardDescription>Sign into your existing account</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <SignInForm onSubmit={signIn}/>
+            </CardContent>
+            <CardFooter>
+                <Link href={URL_SIGN_UP}>
+                    Don&apos;t have an account? Sign up
+                </Link>
+            </CardFooter>
+        </Card>
+    );
+}

src/app/auth/signup/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import signUp from '@/lib/actions/signUp';
+import SignUpForm from '@/components/form/signUpForm';
+import Link from 'next/link';
+import { URL_SIGN_IN } from '@/lib/constants';
+
+export default async function SignUpPage() {
+    return (
+        <Card className="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>Sign up</CardTitle>
+                <CardDescription>Create a new account.</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <SignUpForm onSubmit={signUp}/>
+            </CardContent>
+            <CardFooter>
+                <Link href={URL_SIGN_IN}>
+                    Already have an account? Sign in
+                </Link>
+            </CardFooter>
+        </Card>
+    );
+}

src/app/globals.css

@@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 20 14.3% 4.1%;
+        --card: 0 0% 100%;
+        --card-foreground: 20 14.3% 4.1%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 20 14.3% 4.1%;
+        --primary: 24.6 95% 53.1%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 24.6 95% 53.1%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 20 14.3% 4.1%;
+        --foreground: 60 9.1% 97.8%;
+        --card: 20 14.3% 4.1%;
+        --card-foreground: 60 9.1% 97.8%;
+        --popover: 20 14.3% 4.1%;
+        --popover-foreground: 60 9.1% 97.8%;
+        --primary: 20.5 90.2% 48.2%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+        --destructive: 0 72.2% 50.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 20.5 90.2% 48.2%;
+    }
+}
+
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

src/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { cn } from '@/lib/utils';
+import { Toaster } from '@/components/ui/sonner';
+
+const inter = Inter({subsets: ['latin']});
+
+export const metadata: Metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+        <body className={cn('dark', inter.className)}>
+        <main>
+            {children}
+            <Toaster/>
+        </main>
+        </body>
+        </html>
+    );
+}

src/app/page.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@/components/ui/button';
+import { User } from 'lucide-react';
+import React from 'react';
+import Link from 'next/link';
+import { URL_ACCOUNT } from '@/lib/constants';
+
+export default async function Home() {
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center p-24 text-3xl space-y-4 relative">
+            <Button variant="ghost" size="icon" className="absolute top-4 right-4" asChild>
+                <Link href={URL_ACCOUNT}>
+                    <User/>
+                </Link>
+            </Button>
+            Next Base
+        </main>
+    );
+}

src/auth.ts

@@ -0,0 +1,69 @@
+import { Lucia } from 'lucia';
+import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
+import { PrismaClient } from '@prisma/client';
+import { cookies } from 'next/headers';
+
+export const prismaClient = new PrismaClient();
+
+const adapter = new PrismaAdapter(prismaClient.session, prismaClient.user);
+
+export const lucia = new Lucia(adapter, {
+    sessionCookie: {
+        expires: false,
+        attributes: {
+            sameSite: 'strict',
+            domain: process.env.NODE_ENV === 'production' ? process.env.COOKIE_DOMAIN : undefined,
+            secure: process.env.NODE_ENV === 'production',
+        },
+    },
+    getUserAttributes: (attributes) => {
+        return {
+            username: attributes.username,
+        };
+    },
+});
+
+declare module 'lucia' {
+    interface Register {
+        Lucia: typeof lucia;
+        DatabaseUserAttributes: DatabaseUserAttributes;
+    }
+}
+
+interface DatabaseUserAttributes {
+    username: string;
+}
+
+export function getSessionId() {
+    return cookies().get(lucia.sessionCookieName)?.value ?? null;
+}
+
+export async function getSession() {
+    const sessionId = getSessionId();
+    if (!sessionId) {
+        return null;
+    }
+    const {session} = await lucia.validateSession(sessionId);
+    return session;
+}
+
+export async function getUser() {
+    const sessionId = getSessionId();
+    if (!sessionId) {
+        return null;
+    }
+    const {user, session} = await lucia.validateSession(sessionId);
+    try {
+        if (session && session.fresh) {
+            const sessionCookie = lucia.createSessionCookie(session.id);
+            cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+        }
+        if (!session) {
+            const sessionCookie = lucia.createBlankSessionCookie();
+            cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+        }
+    } catch {
+        // Next.js throws error when attempting to set cookies when rendering page
+    }
+    return user;
+}

src/components/form/signInForm.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+
+export default function SignInForm({onSubmit}: {
+    onSubmit: (data: z.infer<typeof signInFormSchema>) => Promise<ActionResponse>
+}) {
+
+    const router = useRouter();
+
+    const form = useForm<z.infer<typeof signInFormSchema>>({
+        resolver: zodResolver(signInFormSchema),
+        defaultValues: {
+            username: '',
+            password: '',
+        },
+    });
+
+    const handleSubmit = async (data: z.infer<typeof signInFormSchema>) => {
+        const response = await onSubmit(data);
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+    };
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-2">
+                <FormField
+                    control={form.control}
+                    name="username"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Username</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Username" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="••••••••" type="password" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" className="w-full">Sign in</Button>
+            </form>
+        </Form>
+    );
+}

src/components/form/signOutForm.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+
+export default function SignOutForm({onSubmit}: { onSubmit: () => Promise<ActionResponse> }) {
+
+    const router = useRouter();
+
+    const handleSignOut = async () => {
+        const response = await onSubmit();
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+    };
+
+    return (
+        <Button className="w-full" onClick={handleSignOut}>Sign out</Button>
+    );
+}

src/components/form/signUpForm.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+
+export default function SignUpForm({onSubmit}: {
+    onSubmit: (data: z.infer<typeof signUpFormSchema>) => Promise<ActionResponse>
+}) {
+
+    const router = useRouter();
+
+    const form = useForm<z.infer<typeof signUpFormSchema>>({
+        resolver: zodResolver(signUpFormSchema),
+        defaultValues: {
+            username: '',
+            password: '',
+        },
+    });
+
+    const handleSubmit = async (data: z.infer<typeof signUpFormSchema>) => {
+        const response = await onSubmit(data);
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+    };
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-2">
+                <FormField
+                    control={form.control}
+                    name="username"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Username</FormLabel>
+                            <FormControl>
+                                <Input placeholder="Username" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="••••••••" type="password" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="confirm"
+                    render={({field}) => (
+                        <FormItem>
+                            <FormLabel>Confirm password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="••••••••" type="password" {...field} />
+                            </FormControl>
+                            <FormMessage/>
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit" className="w-full">Create Account</Button>
+            </form>
+        </Form>
+    );
+}

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    {
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+                outline:
+                    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+                secondary:
+                    'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-10 px-4 py-2',
+                sm: 'h-9 rounded-md px-3',
+                lg: 'h-11 rounded-md px-8',
+                icon: 'h-10 w-10',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({className, variant, size, asChild = false, ...props}, ref) => {
+        const Comp = asChild ? Slot : 'button';
+        return (
+            <Comp
+                className={cn(buttonVariants({variant, size, className}))}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            'rounded-lg border bg-card text-card-foreground shadow-sm',
+            className,
+        )}
+        {...props}
+    />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex flex-col space-y-1.5 p-6', className)}
+        {...props}
+    />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({className, ...props}, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            'text-2xl font-semibold leading-none tracking-tight',
+            className,
+        )}
+        {...props}
+    />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({className, ...props}, ref) => (
+    <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex items-center p-6 pt-0', className)}
+        {...props}
+    />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

src/components/ui/form.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+    name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+    {} as FormFieldContextValue,
+);
+
+const FormField = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+    ...props
+}: ControllerProps<TFieldValues, TName>) => {
+    return (
+        <FormFieldContext.Provider value={{name: props.name}}>
+            <Controller {...props} />
+        </FormFieldContext.Provider>
+    );
+};
+
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const {getFieldState, formState} = useFormContext();
+
+    const fieldState = getFieldState(fieldContext.name, formState);
+
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+
+    const {id} = itemContext;
+
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+
+type FormItemContextValue = {
+    id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+    {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => {
+    const id = React.useId();
+
+    return (
+        <FormItemContext.Provider value={{id}}>
+            <div ref={ref} className={cn('space-y-2', className)} {...props} />
+        </FormItemContext.Provider>
+    );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({className, ...props}, ref) => {
+    const {error, formItemId} = useFormField();
+
+    return (
+        <Label
+            ref={ref}
+            className={cn(error && 'text-destructive', className)}
+            htmlFor={formItemId}
+            {...props}
+        />
+    );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+    React.ElementRef<typeof Slot>,
+    React.ComponentPropsWithoutRef<typeof Slot>
+>(({...props}, ref) => {
+    const {error, formItemId, formDescriptionId, formMessageId} = useFormField();
+
+    return (
+        <Slot
+            ref={ref}
+            id={formItemId}
+            aria-describedby={
+                !error
+                    ? `${formDescriptionId}`
+                    : `${formDescriptionId} ${formMessageId}`
+            }
+            aria-invalid={!!error}
+            {...props}
+        />
+    );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({className, ...props}, ref) => {
+    const {formDescriptionId} = useFormField();
+
+    return (
+        <p
+            ref={ref}
+            id={formDescriptionId}
+            className={cn('text-sm text-muted-foreground', className)}
+            {...props}
+        />
+    );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({className, children, ...props}, ref) => {
+    const {error, formMessageId} = useFormField();
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+        return null;
+    }
+
+    return (
+        <p
+            ref={ref}
+            id={formMessageId}
+            className={cn('text-sm font-medium text-destructive', className)}
+            {...props}
+        >
+            {body}
+        </p>
+    );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+    useFormField,
+    Form,
+    FormItem,
+    FormLabel,
+    FormControl,
+    FormDescription,
+    FormMessage,
+    FormField,
+};

src/components/ui/input.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({className, type, ...props}, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+                    className,
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Input.displayName = 'Input';
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({className, ...props}, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn(labelVariants(), className)}
+        {...props}
+    />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/sonner.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
+import { AlertCircle, CheckCircle, HelpCircle, XCircle } from 'lucide-react';
+import React, { JSX } from 'react';
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({...props}: ToasterProps) => {
+    const {theme = 'system'} = useTheme();
+
+    return (
+        <Sonner
+            theme={theme as ToasterProps['theme']}
+            className="toaster group"
+            toastOptions={{
+                classNames: {
+                    toast:
+                        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+                    description: 'group-[.toast]:text-muted-foreground',
+                    actionButton:
+                        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                    cancelButton:
+                        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+                },
+            }}
+            {...props}
+        />
+    );
+};
+
+function sonnerContent(value: ActionResponse) {
+
+    let icon: JSX.Element | undefined = undefined;
+    switch (value.type) {
+        case 'success':
+            icon = <CheckCircle className="w-5 h-5 text-green-600"/>;
+            break;
+        case 'error':
+            icon = <XCircle className="w-5 h-5 text-red-600"/>;
+            break;
+        case 'warning':
+            icon = <AlertCircle className="w-5 h-5 text-yellow-600"/>;
+            break;
+        case 'info':
+            icon = <HelpCircle className="w-5 h-5 text-blue-600"/>;
+            break;
+    }
+
+    return (
+        <div className="inline-flex items-center space-x-2 text-md">
+            {icon}
+            <span>{value.message}</span>
+        </div>
+    );
+}
+
+export { Toaster, sonnerContent };

src/lib/actions/signIn.ts

@@ -0,0 +1,40 @@
+import { z } from 'zod';
+import { Argon2id } from 'oslo/password';
+import { lucia, prismaClient } from '@/auth';
+import { cookies } from 'next/headers';
+import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+import { URL_HOME } from '@/lib/constants';
+
+export default async function signIn({username, password}: z.infer<typeof signInFormSchema>): Promise<ActionResponse> {
+    'use server';
+
+    const existingUser = await prismaClient.user.findFirst({
+        where: {
+            username: username.toLowerCase(),
+        },
+    });
+    if (!existingUser) {
+        return {
+            type: 'error',
+            message: 'Incorrect username or password',
+        };
+    }
+
+    const validPassword = await new Argon2id().verify(existingUser.password, password);
+    if (!validPassword) {
+        return {
+            type: 'error',
+            message: 'Incorrect username or password',
+        };
+    }
+
+    const session = await lucia.createSession(existingUser.id, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return {
+        type: 'success',
+        message: 'Signed in successfully',
+        redirect: URL_HOME,
+    };
+}

src/lib/actions/signOut.ts

@@ -0,0 +1,26 @@
+import { getSession, lucia } from '@/auth';
+import { cookies } from 'next/headers';
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+import { URL_SIGN_IN } from '@/lib/constants';
+
+export default async function signOut(): Promise<ActionResponse> {
+    'use server';
+
+    const session = await getSession();
+    if (!session) {
+        return {
+            type: 'error',
+            message: 'You aren\'t signed in',
+        };
+    }
+
+    await lucia.invalidateSession(session.id);
+
+    const sessionCookie = lucia.createBlankSessionCookie();
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return {
+        type: 'success',
+        message: 'Signed out successfully',
+        redirect: URL_SIGN_IN,
+    };
+}

src/lib/actions/signUp.ts

@@ -0,0 +1,45 @@
+import { z } from 'zod';
+import { Argon2id } from 'oslo/password';
+import { generateId } from 'lucia';
+import { lucia, prismaClient } from '@/auth';
+import { cookies } from 'next/headers';
+import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
+import { ActionResponse } from '@/lib/actions/types/ActionResponse';
+import { URL_HOME } from '@/lib/constants';
+
+export default async function signUp({username, password}: z.infer<typeof signUpFormSchema>): Promise<ActionResponse> {
+    'use server';
+
+    const hashedPassword = await new Argon2id().hash(password);
+    const userId = generateId(15);
+
+    const existingUser = await prismaClient.user.findFirst({
+        where: {
+            username: username.toLowerCase(),
+        },
+    });
+
+    if (existingUser) {
+        return {
+            type: 'error',
+            message: 'Username already exists',
+        };
+    }
+
+    await prismaClient.user.create({
+        data: {
+            id: userId,
+            username: username,
+            password: hashedPassword,
+        },
+    });
+
+    const session = await lucia.createSession(userId, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return {
+        type: 'success',
+        message: 'Signed up successfully',
+        redirect: URL_HOME,
+    };
+}

src/lib/actions/types/ActionResponse.ts

@@ -0,0 +1,5 @@
+export interface ActionResponse {
+    type: 'success' | 'info' | 'warning' | 'error';
+    message: string;
+    redirect?: string;
+}

src/lib/constants.ts

@@ -0,0 +1,8 @@
+// auth urls
+export const URL_AUTH = '/auth';
+export const URL_SIGN_IN = `${URL_AUTH}/signin`;
+export const URL_SIGN_UP = `${URL_AUTH}/signup`;
+
+// main urls
+export const URL_HOME = '/';
+export const URL_ACCOUNT = '/account';

src/lib/form-schemas/signInFormSchema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const signInFormSchema = z.object({
+    username: z.string().min(3).max(16),
+    password: z.string().min(8).max(255),
+});

src/lib/form-schemas/signUpFormSchema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const signUpFormSchema = z.object({
+    username: z.string().min(3).max(16),
+    password: z.string().min(8).max(255),
+    confirm: z.string().min(8).max(255),
+}).refine(data => data.password === data.confirm, {
+    message: 'Passwords do not match',
+    path: ['confirm'],
+});

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

src/middleware.ts

@@ -0,0 +1,27 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import { URL_AUTH, URL_HOME, URL_SIGN_IN } from './lib/constants';
+
+export async function middleware(request: NextRequest) {
+
+    // get session id from cookies
+    const sessionId = request.cookies.get('auth_session')?.value ?? null;
+
+    // redirect to home if user is already authenticated
+    if (request.nextUrl.pathname.startsWith(URL_AUTH) && sessionId) {
+        return NextResponse.redirect(new URL(URL_HOME, request.url));
+    }
+
+    // redirect to sign in if user is not authenticated
+    if (!request.nextUrl.pathname.startsWith(URL_AUTH) && !sessionId) {
+        return NextResponse.redirect(new URL(URL_SIGN_IN, request.url));
+    }
+
+    return NextResponse.next();
+}
+
+export const config = {
+    matcher: [
+        '/((?!api|_next/static|_next/image|favicon.ico).*)',
+    ],
+};

tailwind.config.ts

@@ -0,0 +1,80 @@
+import type { Config } from 'tailwindcss';
+
+const config = {
+    darkMode: ['class'],
+    content: [
+        './pages/**/*.{ts,tsx}',
+        './components/**/*.{ts,tsx}',
+        './app/**/*.{ts,tsx}',
+        './src/**/*.{ts,tsx}',
+    ],
+    prefix: '',
+    theme: {
+        container: {
+            center: true,
+            padding: '2rem',
+            screens: {
+                '2xl': '1400px',
+            },
+        },
+        extend: {
+            colors: {
+                border: 'hsl(var(--border))',
+                input: 'hsl(var(--input))',
+                ring: 'hsl(var(--ring))',
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))',
+                primary: {
+                    DEFAULT: 'hsl(var(--primary))',
+                    foreground: 'hsl(var(--primary-foreground))',
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--secondary))',
+                    foreground: 'hsl(var(--secondary-foreground))',
+                },
+                destructive: {
+                    DEFAULT: 'hsl(var(--destructive))',
+                    foreground: 'hsl(var(--destructive-foreground))',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted))',
+                    foreground: 'hsl(var(--muted-foreground))',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent))',
+                    foreground: 'hsl(var(--accent-foreground))',
+                },
+                popover: {
+                    DEFAULT: 'hsl(var(--popover))',
+                    foreground: 'hsl(var(--popover-foreground))',
+                },
+                card: {
+                    DEFAULT: 'hsl(var(--card))',
+                    foreground: 'hsl(var(--card-foreground))',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+            },
+            keyframes: {
+                'accordion-down': {
+                    from: {height: '0'},
+                    to: {height: 'var(--radix-accordion-content-height)'},
+                },
+                'accordion-up': {
+                    from: {height: 'var(--radix-accordion-content-height)'},
+                    to: {height: '0'},
+                },
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out',
+            },
+        },
+    },
+    plugins: [require('tailwindcss-animate')],
+} satisfies Config;
+
+export default config;

tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}