Release v1.3.1 (#100)

Fixes #86

.env.example

@@ -5,4 +5,10 @@
 #
 
 # prisma database url
-DATABASE_URL="postgresql://prisma:prisma@localhost:5432/finances?schema=public"
+DATABASE_URL='postgresql://prisma:prisma@localhost:5432/finances?schema=public'
+
+AUTH0_SECRET=''
+AUTH0_BASE_URL='http://localhost:3000'
+AUTH0_URL=''
+AUTH0_CLIENT_ID=''
+AUTH0_CLIENT_SECRET=''

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

@@ -0,0 +1,34 @@
+name: Development Deployment
+
+on:
+  workflow_dispatch:
+    inputs:
+      image_tag:
+        required: true
+        type: string
+        description: Docker image tag
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - 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-finances:development, markusthielker/next-finances:${{ github.event.inputs.image_tag }}-dev

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

@@ -1,4 +1,4 @@
-name: Docker Image Build and Push
+name: Production Deployment
 
 on:
   push:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:21-alpine AS base
+FROM oven/bun:1-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -6,8 +6,8 @@ FROM base AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-COPY package.json package-lock.json* ./
+COPY package.json bun.lockb* ./
-RUN npm ci
+RUN bun install
 
 
 # Rebuild the source code only when needed
@@ -18,23 +18,23 @@ 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 bun install @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
+RUN bun install @node-rs/bcrypt-linux-x64-musl # arm64 = @node-rs/bcrypt-linux-arm64-musl
 
 COPY prisma/ ./prisma/
 
-RUN npx prisma generate
+RUN bunx prisma generate
 
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
-RUN npm run build
+RUN bun run build
 
 
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -52,7 +52,7 @@ USER nextjs
 
 EXPOSE 3000
 
-ENV PORT 3000
+ENV PORT=3000
-ENV HOSTNAME "0.0.0.0"
+ENV HOSTNAME="0.0.0.0"
 
 CMD ["node", "server.js"]

README.md

@@ -7,20 +7,20 @@ This is my simple finances tracker that I use to keep track of my spending.
 ### Understanding the Basics
 
 - **Entities**: The core building blocks of your finances.
-  - Accounts: Where you hold money (e.g., bank accounts, PayPal account, cash)
+    - Accounts: Where you hold money (e.g., bank accounts, PayPal account, cash)
-  - Entities: Where you spend money (e.g., Walmart, Spotify, Netflix)
+    - Entities: Where you spend money (e.g., Walmart, Spotify, Netflix)
 - **Payments**: Record money movement.
-  - Expenses: Money leaving an Account. (Account -> Entity)
+    - Expenses: Money leaving an Account. (Account -> Entity)
-  - Income: Money entering an Account. (Entity -> Account)
+    - Income: Money entering an Account. (Entity -> Account)
 - **Categories** *(optional)*: Add labels to Payments for better tracking.
 
 ### Your First Steps
 
 - Set up: Create Entities and Accounts that reflect your finances.
 - Record a Payment:
-  - Enter the amount and date.
+    - Enter the amount and date.
-  - Select payor and payee
+    - Select payor and payee
-  - *(optional)* Assign a category or enter a note.
+    - *(optional)* Assign a category or enter a note.
 - Explore: View your payment history and view your statics at the dashboard
 
 ### Tips
@@ -42,17 +42,22 @@ cp .env.example .env
 docker compose -f docker/finances-dev/docker-compose.yml up -d
 
 ## generate prisma client
-npx prisma generate
+bunx prisma generate
 
 ## apply database migrations
-npx prisma migrate deploy
+bunx prisma migrate deploy
 
 ## start the development server
-npm run dev
+bun run dev
 
 ```
 
-Then open [http://localhost:3000](http://localhost:3000) with your browser and create an account.
+This project relies on [Auth0](https://auth0.com) authentication. To use it you will have to create an Auth0 account,
+create an application of type 'Single Page Application' and now add the required details to your .env file.
+You will also have to add `http://localhost:3000/auth/callback` as an `Allowed Callback URL` and `http://localhost:3000`
+as an `Allowed Logout URL` and `Allowed Web Origins` in your Auth0 console.
+
+Now open [http://localhost:3000](http://localhost:3000) with your browser and create an account.
 While in development mode, you can generate sample data from the [Account page](http://localhost:3000/account).
 
 ## Deployment

docker/finances-prod/docker-compose.yaml

@@ -8,7 +8,7 @@ services:
     depends_on:
       postgres:
         condition: service_healthy
-    command: npx prisma migrate deploy
+    command: bunx prisma migrate deploy
     labels:
       - "com.centurylinklabs.watchtower.enable=true"
     networks:
@@ -42,7 +42,7 @@ services:
     depends_on:
       app-migrations:
         condition: service_completed_successfully
-    command: npx prisma studio
+    command: bunx prisma studio
     restart: unless-stopped
     labels:
       - "traefik.enable=true"

docker/finances-prod/watchtower_setup.sh

@@ -10,4 +10,4 @@ docker run -d \
   --restart unless-stopped \
   -v $HOME/.docker/config.json:/config.json \
   -v /var/run/docker.sock:/var/run/docker.sock \
-  containrrr/watchtower -s "*/30 * * * * *" --label-enable
+  containrrr/watchtower -s "*/30 * * * * *" --label-enable --include-stopped

package.json

@@ -2,7 +2,7 @@
   "name": "next-finances",
   "description": "A finances application to keep track of my personal spendings",
   "homepage": "https://github.com/MarkusThielker/next-finances",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "author": {
     "name": "Markus Thielker"
   },
@@ -18,54 +18,53 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
+    "@auth0/nextjs-auth0": "^4.1.0",
-    "@lucia-auth/adapter-prisma": "^4.0.0",
+    "@hookform/resolvers": "^3.9.1",
-    "@prisma/client": "^5.10.2",
+    "@prisma/client": "^6.1.0",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.2",
-    "@serwist/next": "^8.4.4",
+    "@serwist/next": "^9.0.11",
-    "@serwist/precaching": "^8.4.4",
+    "@serwist/precaching": "^9.0.11",
-    "@serwist/sw": "^8.4.4",
+    "@serwist/sw": "^9.0.11",
-    "@tanstack/react-table": "^8.13.2",
+    "@tanstack/react-table": "^8.20.6",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.0.4",
-    "date-fns": "^3.3.1",
+    "date-fns": "^4.1.0",
-    "lucia": "^3.0.1",
+    "lucia": "^3.2.2",
-    "lucide-react": "^0.350.0",
+    "lucide-react": "^0.469.0",
-    "next": "14.1.3",
+    "next": "15.1.2",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.4.4",
-    "oslo": "^1.1.3",
+    "react": "^19.0.0",
-    "react": "^18",
+    "react-day-picker": "8.10.1",
-    "react-day-picker": "^8.10.0",
+    "react-dom": "^19.0.0",
-    "react-dom": "^18",
+    "react-hook-form": "^7.54.2",
-    "react-hook-form": "^7.51.0",
+    "sonner": "^1.7.1",
-    "sonner": "^1.4.3",
+    "swr": "^2.3.0",
-    "swr": "^2.2.5",
+    "tailwind-merge": "^2.6.0",
-    "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^0.9.0",
+    "vaul": "^1.1.2",
-    "zod": "^3.22.4"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@types/node": "^20.11.25",
+    "@types/node": "^22.10.2",
-    "@types/react": "^18",
+    "@types/react": "^19.0.2",
-    "@types/react-dom": "^18",
+    "@types/react-dom": "^19.0.2",
-    "autoprefixer": "^10.0.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "15.1.2",
     "postcss": "^8",
-    "prisma": "^5.10.2",
+    "prisma": "^6.1.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.2"
+    "typescript": "^5.7.2"
   }
 }

prisma/migrations/20240403224427_remove_lucia_authentication/migration.sql

@@ -0,0 +1,28 @@
+/*
+  Warnings:
+
+  - You are about to drop the `lucia_session` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `lucia_user` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "categories"
+    DROP CONSTRAINT "categories_user_id_fkey";
+
+-- DropForeignKey
+ALTER TABLE "entities"
+    DROP CONSTRAINT "entities_user_id_fkey";
+
+-- DropForeignKey
+ALTER TABLE "lucia_session"
+    DROP CONSTRAINT "lucia_session_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "payments"
+    DROP CONSTRAINT "payments_user_id_fkey";
+
+-- DropTable
+DROP TABLE "lucia_session";
+
+-- DropTable
+DROP TABLE "lucia_user";

prisma/schema.prisma

@@ -7,36 +7,9 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-model User {
-  // lucia internal fields
-  id       String    @id
-  sessions Session[]
-
-  // custom fields
-  username String @unique
-  password String
-
-  entities   Entity[]
-  payments   Payment[]
-  categories Category[]
-
-  @@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")
-}
-
 model Entity {
   id                Int        @id @default(autoincrement())
   userId            String     @map("user_id")
-  user              User       @relation(fields: [userId], references: [id])
   name              String
   type              EntityType
   defaultCategory   Category?  @relation(fields: [defaultCategoryId], references: [id])
@@ -59,7 +32,6 @@ enum EntityType {
 model Payment {
   id         Int       @id @default(autoincrement())
   userId     String    @map("user_id")
-  user       User      @relation(fields: [userId], references: [id])
   amount     Int
   currency   String    @default("EUR")
   date       DateTime  @default(now())
@@ -79,7 +51,6 @@ model Payment {
 model Category {
   id        Int      @id @default(autoincrement())
   userId    String   @map("user_id")
-  user      User     @relation(fields: [userId], references: [id])
   name      String
   color     String
   createdAt DateTime @default(now()) @map("created_at")

public/logo_t_hq_o.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 2250 2250"
+     version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="frame"><rect id="tl" x="0" y="0" width="125" height="520.833" style="fill:#f50;"/><rect
+        id="t" x="0" y="-0" width="2250" height="125" style="fill:#f50;"/><rect id="tr" x="2125" y="0" width="125"
+                                                                                height="520.833" style="fill:#f50;"/><rect
+        id="bl" x="0" y="1729.17" width="125" height="520.833" style="fill:#f50;"/><rect id="b" x="0" y="2125"
+                                                                                         width="2250" height="125"
+                                                                                         style="fill:#f50;"/><rect
+        id="br" x="2125" y="1729.17" width="125" height="520.833" style="fill:#f50;"/></g>
+    <g id="text"><g id="text1" serif:id="text" transform="matrix(1,0,0,0.947314,7.10543e-15,-3.78368)"><g transform="matrix(1636.19,0,0,1636.19,2149.91,1766.12)"></g><text
+            x="-57.321px" y="1766.12px" style="font-family:'Akshar-Regular', 'Akshar';font-size:1636.19px;fill:#f50;">t<tspan
+            x="513.711px 891.672px 1598.51px " y="1766.12px 1766.12px 1766.12px ">lkr</tspan></text></g>
+        <circle id="dot" cx="2156.78" cy="1578.59" r="88.542" style="fill:#f50;"/></g></svg>

public/logo_t_hq_w.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 2250 2250"
+     version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="frame"><rect id="tl" x="0" y="0" width="125" height="520.833" style="fill:#fff;"/><rect
+        id="t" x="0" y="-0" width="2250" height="125" style="fill:#fff;"/><rect id="tr" x="2125" y="0" width="125"
+                                                                                height="520.833" style="fill:#fff;"/><rect
+        id="bl" x="0" y="1729.17" width="125" height="520.833" style="fill:#fff;"/><rect id="b" x="0" y="2125"
+                                                                                         width="2250" height="125"
+                                                                                         style="fill:#fff;"/><rect
+        id="br" x="2125" y="1729.17" width="125" height="520.833" style="fill:#fff;"/></g>
+    <g id="text"><g id="text1" serif:id="text" transform="matrix(1,0,0,0.947314,7.10543e-15,-3.78368)"><g transform="matrix(1636.19,0,0,1636.19,2149.91,1766.12)"></g><text
+            x="-57.321px" y="1766.12px" style="font-family:'Akshar-Regular', 'Akshar';font-size:1636.19px;fill:#fff;">t<tspan
+            x="513.711px 891.672px 1598.51px " y="1766.12px 1766.12px 1766.12px ">lkr</tspan></text></g>
+        <circle id="dot" cx="2156.78" cy="1578.59" r="88.542" style="fill:#fff;"/></g></svg>

public/manifest.json

@@ -3,7 +3,7 @@
   "short_name": "Finances",
   "icons": [
     {
-      "src": "/logo_white.png",
+      "src": "/logo_t_hq_o.png",
       "sizes": "512x512",
       "type": "image/png"
     }

src/app/account/page.tsx

@@ -1,42 +1,42 @@
 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 { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
-import { URL_SIGN_IN } from '@/lib/constants';
 import generateSampleData from '@/lib/actions/generateSampleData';
 import prisma from '@/prisma';
 import { ServerActionTrigger } from '@/components/form/serverActionTrigger';
-import accountDelete from '@/lib/actions/accountDelete';
+import clearAccountData from '@/lib/actions/clearAccountData';
+import { Button } from '@/components/ui/button';
+import { URL_SIGN_OUT } from '@/lib/constants';
+import { auth0 } from '@/lib/auth';
+import { redirect } from 'next/navigation';
 
 export default async function AccountPage() {
 
-    const user = await getUser();
+    const session = await auth0.getSession();
-
+    if (!session) {
-    if (!user) {
+        return redirect('/auth/login');
-        redirect(URL_SIGN_IN);
     }
+    const user = session.user;
 
     let paymentCount = 0;
     paymentCount = await prisma.payment.count({
         where: {
-            userId: user.id,
+            userId: user.sub,
         },
     });
 
     let entityCount = 0;
     entityCount = await prisma.entity.count({
         where: {
-            userId: user.id,
+            userId: user.sub,
         },
     });
 
     let categoryCount = 0;
     categoryCount = await prisma.category.count({
         where: {
-            userId: user.id,
+            userId: user.sub,
         },
     });
 
@@ -44,7 +44,7 @@ export default async function AccountPage() {
         <div className="flex flex-col items-center">
             <Card className="w-full max-w-md md:mt-12">
                 <CardHeader>
-                    <CardTitle>Hey, {user?.username}!</CardTitle>
+                    <CardTitle>Hey, {user.name}!</CardTitle>
                     <CardDescription>This is your account overview.</CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-2">
@@ -52,13 +52,13 @@ export default async function AccountPage() {
                         <Label>ID</Label>
                         <Input
                             disabled
-                            value={user?.id}/>
+                            value={user.sub}/>
                     </div>
                     <div>
                         <Label>Username</Label>
                         <Input
                             disabled
-                            value={user?.username}/>
+                            value={user.name}/>
                     </div>
                     <div className="flex flex-row items-center space-x-4">
                         <div>
@@ -83,19 +83,21 @@ export default async function AccountPage() {
                 </CardContent>
                 <CardFooter className="w-full grid gap-4 grid-cols-1 md:grid-cols-2">
                     <ServerActionTrigger
-                        action={accountDelete}
+                        action={clearAccountData}
                         dialog={{
-                            title: 'Delete Account',
+                            title: 'Clear account data',
-                            description: 'Are you sure you want to delete your account? This action is irreversible.',
+                            description: 'Are you sure you want to delete all payments, entities and categories from you account? This action is irreversible.',
-                            actionText: 'Delete Account',
+                            actionText: 'Clear data',
+                            actionVariant: 'destructive',
                         }}
                         variant="outline">
-                        Delete Account
+                        Clear data
-                    </ServerActionTrigger>
-                    <ServerActionTrigger
-                        action={signOut}>
-                        Sign Out
                     </ServerActionTrigger>
+                    <a href={URL_SIGN_OUT}>
+                        <Button className="w-full">
+                            Sign Out
+                        </Button>
+                    </a>
                     {
                         process.env.NODE_ENV === 'development' && (
                             <ServerActionTrigger

src/app/auth/layout.tsx

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

src/app/auth/signin/page.tsx

@@ -1,25 +0,0 @@
-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 mt-12">
-            <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

@@ -1,25 +0,0 @@
-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 mt-12">
-            <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/categories/page.tsx

@@ -1,13 +1,18 @@
-import { getUser } from '@/auth';
 import prisma from '@/prisma';
 import React from 'react';
 import CategoryPageClientContent from '@/components/categoryPageClientComponents';
 import categoryCreateUpdate from '@/lib/actions/categoryCreateUpdate';
 import categoryDelete from '@/lib/actions/categoryDelete';
+import { auth0 } from '@/lib/auth';
+import { redirect } from 'next/navigation';
 
 export default async function CategoriesPage() {
 
-    const user = await getUser();
+    const session = await auth0.getSession();
+    if (!session) {
+        return redirect('/auth/login');
+    }
+    const user = session.user;
 
     const categories = await prisma.category.findMany({
         where: {

src/app/entities/page.tsx

@@ -1,13 +1,18 @@
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import React from 'react';
 import EntityPageClientContent from '@/components/entityPageClientComponents';
 import entityCreateUpdate from '@/lib/actions/entityCreateUpdate';
 import entityDelete from '@/lib/actions/entityDelete';
+import { auth0 } from '@/lib/auth';
+import { redirect } from 'next/navigation';
 
 export default async function EntitiesPage() {
 
-    const user = await getUser();
+    const session = await auth0.getSession();
+    if (!session) {
+        return redirect('/auth/login');
+    }
+    const user = session.user;
 
     const entities = await prisma.entity.findMany({
         where: {

src/app/layout.tsx

@@ -46,7 +46,7 @@ export default function RootLayout({
             <link crossOrigin="use-credentials" rel="manifest" href="/manifest.json"/>
             <link
                 rel="icon"
-                href="/logo_white.png"
+                href="/logo_t_hq_o.svg"
             />
         </head>
         <body className={cn('dark', inter.className)}>

src/app/page.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { Category, Entity, EntityType } from '@prisma/client';
 import { Scope, ScopeType } from '@/lib/types/scope';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import DashboardPageClient from '@/components/dashboardPageClientComponents';
+import { auth0 } from '@/lib/auth';
+import { redirect } from 'next/navigation';
 
 export type CategoryNumber = {
     category: Category,
@@ -15,19 +16,20 @@ export type EntityNumber = {
     value: number,
 }
 
-export default async function DashboardPage(props: { searchParams?: { scope: ScopeType } }) {
+export default async function DashboardPage(props: { searchParams?: Promise<{ scope: ScopeType }> }) {
 
-    const user = await getUser();
+    const session = await auth0.getSession();
-    if (!user) {
+    if (!session) {
-        return;
+        return redirect('/auth/login');
     }
+    const user = session.user;
 
-    const scope = Scope.of(props.searchParams?.scope || ScopeType.ThisMonth);
+    const scope = Scope.of((await props.searchParams)?.scope || ScopeType.ThisMonth);
 
     // get all payments in the current scope
     const payments = await prisma.payment.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
             date: {
                 gte: scope.start,
                 lte: scope.end,

src/app/payments/page.tsx

@@ -1,17 +1,22 @@
-import { getUser } from '@/auth';
 import prisma from '@/prisma';
 import React from 'react';
 import PaymentPageClientContent from '@/components/paymentPageClientComponents';
 import paymentCreateUpdate from '@/lib/actions/paymentCreateUpdate';
 import paymentDelete from '@/lib/actions/paymentDelete';
+import { auth0 } from '@/lib/auth';
+import { redirect } from 'next/navigation';
 
 export default async function PaymentsPage() {
 
-    const user = await getUser();
+    const session = await auth0.getSession();
+    if (!session) {
+        return redirect('/auth/login');
+    }
+    const user = session.user;
 
     const payments = await prisma.payment.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
         },
         orderBy: [
             {
@@ -25,7 +30,7 @@ export default async function PaymentsPage() {
 
     const entities = await prisma.entity.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
         },
         orderBy: [
             {
@@ -39,7 +44,7 @@ export default async function PaymentsPage() {
 
     const categories = await prisma.category.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
         },
         orderBy: [
             {

src/app/service-worker.ts

@@ -1,15 +1,46 @@
-import { defaultCache } from '@serwist/next/browser';
 import type { PrecacheEntry } from '@serwist/precaching';
-import { installSerwist } from '@serwist/sw';
+import { defaultCache } from '@serwist/next/worker';
+import { Serwist, SerwistGlobalConfig } from 'serwist';
 
 declare const self: ServiceWorkerGlobalScope & {
     __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
 };
 
-installSerwist({
+declare global {
+    interface WorkerGlobalScope extends SerwistGlobalConfig {
+        // Change this attribute's name to your \`injectionPoint\`.
+        // \`injectionPoint\` is an InjectManifest option.
+        // See https://serwist.pages.dev/docs/build/configuring
+        __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+    }
+}
+
+const serwist = new Serwist({
+    // A list of URLs that should be cached. Usually, you don't generate
+    // this list yourself; rather, you'd rely on a Serwist build tool/your framework
+    // to do it for you. In this example, it is generated by \`@serwist/vite\`.
     precacheEntries: self.__SW_MANIFEST,
+    // Options to customize how Serwist precaches the URLs.
+    precacheOptions: {
+        // Whether outdated caches should be removed.
+        cleanupOutdatedCaches: true,
+        concurrency: 10,
+        ignoreURLParametersMatching: [],
+    },
+    // Whether the service worker should skip waiting and become the active one.
     skipWaiting: true,
+    // Whether the service worker should claim any currently available clients.
     clientsClaim: true,
+    // Whether navigation preloading should be used.
     navigationPreload: true,
+    // Whether Serwist should log in development mode.
+    disableDevLogs: true,
+    // A list of runtime caching entries. When a request is made and its URL match
+    // any of the entries, the response to it will be cached according to the matching
+    // entry's \`handler\`. This does not apply to precached URLs.
     runtimeCaching: defaultCache,
+    // Other options...
+    // See https://serwist.pages.dev/docs/serwist/core/serwist
 });
+
+serwist.addEventListeners();

src/auth.ts

@@ -1,67 +0,0 @@
-import { Lucia } from 'lucia';
-import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
-import { cookies } from 'next/headers';
-import prisma from '@/prisma';
-
-const adapter = new PrismaAdapter(prisma.session, prisma.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/paymentForm.tsx

@@ -67,9 +67,9 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
         };
     }) ?? [];
 
-    const payeeRef = useRef<HTMLInputElement>(null);
+    const payeeRef = useRef<HTMLInputElement>({} as HTMLInputElement);
-    const categoryRef = useRef<HTMLInputElement>(null);
+    const categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement);
-    const noteRef = useRef<HTMLInputElement>(null);
+    const submitRef = useRef<HTMLButtonElement>({} as HTMLButtonElement);
 
     return (
         <Form {...form}>
@@ -125,10 +125,7 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                         <Calendar
                                             mode="single"
                                             selected={field.value}
-                                            onSelect={(e) => {
+                                            onSelect={field.onChange}
-                                                field.onChange(e);
-                                            }}
-                                            initialFocus
                                         />
                                     </PopoverContent>
                                 </Popover>
@@ -147,8 +144,13 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                     <AutoCompleteInput
                                         placeholder="Select payor"
                                         items={entitiesMapped}
-                                        next={payeeRef}
+                                        {...field}
-                                        {...field} />
+                                        onChange={(e) => {
+                                            field.onChange(e);
+                                            if (e && e.target.value) {
+                                                payeeRef && payeeRef.current.focus();
+                                            }
+                                        }}/>
                                 </FormControl>
                                 <FormMessage/>
                             </FormItem>
@@ -165,15 +167,18 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                     <AutoCompleteInput
                                         placeholder="Select payee"
                                         items={entitiesMapped}
-                                        next={categoryRef}
                                         {...field}
                                         onChange={(e) => {
                                             field.onChange(e);
                                             if (e && e.target.value) {
                                                 const entity = entities.find((entity) => entity.id === Number(e.target.value));
-                                                console.log(entity?.defaultCategoryId);
+
+                                                // only focus category input if payee has no default category
                                                 if (entity?.defaultCategoryId !== null) {
                                                     form.setValue('categoryId', entity?.defaultCategoryId);
+                                                    submitRef && submitRef.current.focus();
+                                                } else {
+                                                    categoryRef && categoryRef.current.focus();
                                                 }
                                             }
                                         }}/>
@@ -193,8 +198,14 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                     <AutoCompleteInput
                                         placeholder="Select category"
                                         items={categoriesMapped}
-                                        next={noteRef}
+                                        {...field}
-                                        {...field} />
+                                        onChange={(e) => {
+                                            field.onChange(e);
+                                            if (e && e.target.value) {
+                                                submitRef && submitRef.current.focus();
+                                            }
+                                        }}
+                                    />
                                 </FormControl>
                                 <FormMessage/>
                             </FormItem>
@@ -216,7 +227,8 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                     )}
                 />
 
-                <Button type="submit" className="w-full">{value?.id ? 'Update Payment' : 'Create Payment'}</Button>
+                <Button type="submit" ref={submitRef}
+                        className="w-full">{value?.id ? 'Update Payment' : 'Create Payment'}</Button>
             </form>
         </Form>
     );

src/components/form/serverActionTrigger.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/button';
 import React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@/lib/utils';
@@ -25,6 +25,7 @@ export interface ConfirmationDialogProps {
     title: string;
     description?: string;
     actionText?: string;
+    actionVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
 }
 
 export interface ButtonWithActionProps<T = any>
@@ -76,9 +77,11 @@ const ServerActionTrigger = React.forwardRef<HTMLButtonElement, ButtonWithAction
                         <AlertDialogCancel>
                             Cancel
                         </AlertDialogCancel>
-                        <AlertDialogAction onClick={handleSubmit}>
+                        <Button variant={props.dialog.actionVariant || 'default'} asChild>
-                            {props.dialog.actionText || 'Confirm'}
+                            <AlertDialogAction onClick={handleSubmit}>
-                        </AlertDialogAction>
+                                {props.dialog.actionText || 'Confirm'}
+                            </AlertDialogAction>
+                        </Button>
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>

src/components/form/signInForm.tsx

@@ -1,71 +0,0 @@
-'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/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/signUpForm.tsx

@@ -1,84 +0,0 @@
-'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/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/navigation.tsx

@@ -78,7 +78,7 @@ export default function Navigation() {
                     <NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
                         <div className="inline-flex space-x-2">
 
-                            <img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/>
+                            <img src={'/logo_t_hq_w.svg'} alt="Finances" className="h-10 w-10 mx-3"/>
 
                             <NavigationMenuItem>
                                 <Link href="/" legacyBehavior passHref>

src/components/ui/auto-complete-input.tsx

@@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button';
 export interface AutoCompleteInputProps
     extends React.InputHTMLAttributes<HTMLInputElement> {
     items: { label: string, value: any }[];
-    next?: React.RefObject<HTMLInputElement>;
 }
 
 const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputProps>(
@@ -32,7 +31,6 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
 
         function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
 
-            props.onChange?.(undefined as any);
             const value = e.target.value;
 
             setFilteredItems(props?.items?.filter((item) => {
@@ -41,19 +39,26 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
 
             setValue(value);
             setOpen(value.length > 0);
+
+            // on typing only the internal state is changed while the form state is
+            // set to undefined. This way only the predefined items are actual values
+            // for the form validation
+            props.onChange?.(undefined as any);
         }
 
+        // since typing changes the internal values and therefor the selected value, this effect
+        // handles every filteredItems change to check if only one item is left
         useEffect(() => {
+            // only one item is left and the last character was a letter or digit.
+            // the last condition has to be checked to make it possible to use the backspace
             if (filteredItems.length === 1 && /^[a-zA-Z0-9]$/.test(lastKey)) {
                 setValue(filteredItems[0].label);
                 setOpen(false);
                 props.onChange?.({target: {value: filteredItems[0].value}} as any);
-                props.next && props.next.current?.focus();
             }
         }, [filteredItems]);
 
         useEffect(() => {
-            console.log('Prop value changed', value, props.value);
             if (props.value) {
                 setValue(getNameOfPropValue());
             } else {
@@ -105,7 +110,6 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
                                     className="px-3 py-3 hover:bg-accent hover:text-accent-foreground cursor-pointer text-sm font-medium"
                                     onClick={() => {
                                         props.onChange?.({target: {value: item.value}} as any);
-                                        props.next && props.next.current?.focus();
                                         setValue(item.label);
                                         setOpen(false);
                                     }}

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ 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',
+    'inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
         variants: {
             variant: {
@@ -40,11 +40,11 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({className, variant, size, asChild = false, ...props}, ref) => {
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
         const Comp = asChild ? Slot : 'button';
         return (
             <Comp
-                className={cn(buttonVariants({variant, size, className}))}
+                className={cn(buttonVariants({ variant, size, className }))}
                 ref={ref}
                 {...props}
             />

src/components/ui/calendar.tsx

@@ -10,11 +10,11 @@ import { buttonVariants } from '@/components/ui/button';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 function Calendar({
-    className,
+                      className,
-    classNames,
+                      classNames,
-    showOutsideDays = true,
+                      showOutsideDays = true,
-    ...props
+                      ...props
-}: CalendarProps) {
+                  }: CalendarProps) {
     return (
         <DayPicker
             showOutsideDays={showOutsideDays}
@@ -26,7 +26,7 @@ function Calendar({
                 caption_label: 'text-sm font-medium',
                 nav: 'space-x-1 flex items-center',
                 nav_button: cn(
-                    buttonVariants({variant: 'outline'}),
+                    buttonVariants({ variant: 'outline' }),
                     'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
                 ),
                 nav_button_previous: 'absolute left-1',
@@ -38,7 +38,7 @@ function Calendar({
                 row: 'flex w-full mt-2',
                 cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
                 day: cn(
-                    buttonVariants({variant: 'ghost'}),
+                    buttonVariants({ variant: 'ghost' }),
                     'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
                 ),
                 day_range_end: 'day-range-end',
@@ -46,7 +46,7 @@ function Calendar({
                     'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
                 day_today: 'bg-accent text-accent-foreground',
                 day_outside:
-                    'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+                    'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
                 day_disabled: 'text-muted-foreground opacity-50',
                 day_range_middle:
                     'aria-selected:bg-accent aria-selected:text-accent-foreground',
@@ -54,8 +54,12 @@ function Calendar({
                 ...classNames,
             }}
             components={{
-                IconLeft: ({...props}) => <ChevronLeft className="h-4 w-4"/>,
+                IconLeft: ({ className, ...props }) => (
-                IconRight: ({...props}) => <ChevronRight className="h-4 w-4"/>,
+                    <ChevronLeft className={cn('h-4 w-4', className)} {...props} />
+                ),
+                IconRight: ({ className, ...props }) => (
+                    <ChevronRight className={cn('h-4 w-4', className)} {...props} />
+                ),
             }}
             {...props}
         />

src/components/ui/popover.tsx

@@ -12,7 +12,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
     React.ElementRef<typeof PopoverPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({className, align = 'center', sideOffset = 4, ...props}, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
     <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
             ref={ref}

src/lib/actions/accountDelete.ts

@@ -1,58 +0,0 @@
-import { ActionResponse } from '@/lib/types/actionResponse';
-import { URL_SIGN_IN } from '@/lib/constants';
-import { getUser, lucia } from '@/auth';
-import prisma from '@/prisma';
-import { cookies } from 'next/headers';
-
-export default async function accountDelete(): Promise<ActionResponse> {
-    'use server';
-
-    const user = await getUser();
-
-    if (!user) {
-        return {
-            type: 'error',
-            message: 'You aren\'t signed in.',
-            redirect: URL_SIGN_IN,
-        };
-    }
-
-    await prisma.payment.deleteMany({
-        where: {
-            userId: user.id,
-        },
-    });
-
-    await prisma.entity.deleteMany({
-        where: {
-            userId: user.id,
-        },
-    });
-
-    await prisma.category.deleteMany({
-        where: {
-            userId: user.id,
-        },
-    });
-
-    await prisma.session.deleteMany({
-        where: {
-            userId: user.id,
-        },
-    });
-
-    await prisma.user.delete({
-        where: {
-            id: user.id,
-        },
-    });
-
-    const sessionCookie = lucia.createBlankSessionCookie();
-    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
-
-    return {
-        type: 'success',
-        message: 'Your account was removed.',
-        redirect: URL_SIGN_IN,
-    };
-}

src/lib/actions/categoryCreateUpdate.ts

@@ -1,9 +1,9 @@
 import { z } from 'zod';
 import { ActionResponse } from '@/lib/types/actionResponse';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
 import { categoryFormSchema } from '@/lib/form-schemas/categoryFormSchema';
+import { auth0 } from '@/lib/auth';
 
 export default async function categoryCreateUpdate({
     id,
@@ -12,15 +12,15 @@ export default async function categoryCreateUpdate({
 }: z.infer<typeof categoryFormSchema>): Promise<ActionResponse> {
     'use server';
 
-    // check that user is logged in
+    const session = await auth0.getSession();
-    const user = await getUser();
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to create/update an category.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // create/update category
     try {
@@ -44,7 +44,7 @@ export default async function categoryCreateUpdate({
         } else {
             await prisma.category.create({
                 data: {
-                    userId: user.id,
+                    userId: user.sub,
                     name: name,
                     color: color,
                 },

src/lib/actions/categoryDelete.ts

@@ -1,7 +1,7 @@
 import { ActionResponse } from '@/lib/types/actionResponse';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
+import { auth0 } from '@/lib/auth';
 
 export default async function categoryDelete(id: number): Promise<ActionResponse> {
     'use server';
@@ -14,21 +14,21 @@ export default async function categoryDelete(id: number): Promise<ActionResponse
         };
     }
 
-    // check that user is logged in
+    const session = await auth0.getSession();
-    const user = await getUser();
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to delete an category.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // check that category is associated with user
     const category = await prisma.category.findFirst({
         where: {
             id: id,
-            userId: user.id,
+            userId: user.sub,
         },
     });
     if (!category) {
@@ -38,15 +38,25 @@ export default async function categoryDelete(id: number): Promise<ActionResponse
         };
     }
 
-    // delete category
     try {
-        await prisma.category.delete({
+
+        await prisma.$transaction(async (tx) => {
+
+            // update related payments
+            await tx.payment.updateMany({
+                where: {categoryId: category.id},
+                data: {categoryId: null},
+            });
+
+            // delete the category
+            await tx.category.delete({
                 where: {
                     id: category.id,
-                    userId: user.id,
+                    userId: user.sub,
                 },
-            },
+            });
-        );
+        });
+
     } catch (e) {
         return {
             type: 'error',

src/lib/actions/clearAccountData.ts

@@ -0,0 +1,40 @@
+import { ActionResponse } from '@/lib/types/actionResponse';
+import { URL_SIGN_IN } from '@/lib/constants';
+import prisma from '@/prisma';
+import { auth0 } from '@/lib/auth';
+
+export default async function clearAccountData(): Promise<ActionResponse> {
+    'use server';
+
+    const session = await auth0.getSession();
+    if (!session) {
+        return {
+            type: 'error',
+            message: 'You aren\'t signed in.',
+            redirect: URL_SIGN_IN,
+        };
+    }
+
+    await prisma.payment.deleteMany({
+        where: {
+            userId: session.user.sub,
+        },
+    });
+
+    await prisma.entity.deleteMany({
+        where: {
+            userId: session.user.sub,
+        },
+    });
+
+    await prisma.category.deleteMany({
+        where: {
+            userId: session.user.sub,
+        },
+    });
+
+    return {
+        type: 'success',
+        message: 'Your account data was cleared.',
+    };
+}

src/lib/actions/entityCreateUpdate.ts

@@ -2,8 +2,8 @@ import { z } from 'zod';
 import { ActionResponse } from '@/lib/types/actionResponse';
 import { entityFormSchema } from '@/lib/form-schemas/entityFormSchema';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
+import { auth0 } from '@/lib/auth';
 
 export default async function entityCreateUpdate({
     id,
@@ -13,15 +13,15 @@ export default async function entityCreateUpdate({
 }: z.infer<typeof entityFormSchema>): Promise<ActionResponse> {
     'use server';
 
-    // check that user is logged in
+    const session = await auth0.getSession();
-    const user = await getUser();
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to create/update an entity.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // create/update entity
     try {
@@ -46,7 +46,7 @@ export default async function entityCreateUpdate({
         } else {
             await prisma.entity.create({
                 data: {
-                    userId: user.id,
+                    userId: user.sub,
                     name: name,
                     type: type,
                     defaultCategoryId: defaultCategoryId ?? null,

src/lib/actions/entityDelete.ts

@@ -1,7 +1,7 @@
 import { ActionResponse } from '@/lib/types/actionResponse';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
+import { auth0 } from '@/lib/auth';
 
 export default async function entityDelete(id: number): Promise<ActionResponse> {
     'use server';
@@ -14,21 +14,21 @@ export default async function entityDelete(id: number): Promise<ActionResponse>
         };
     }
 
-    // check that user is logged in
+    const session = await auth0.getSession();
-    const user = await getUser();
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to delete an entity.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // check that entity is associated with user
     const entity = await prisma.entity.findFirst({
         where: {
             id: id,
-            userId: user.id,
+            userId: user.sub,
         },
     });
     if (!entity) {
@@ -43,7 +43,7 @@ export default async function entityDelete(id: number): Promise<ActionResponse>
         await prisma.entity.delete({
                 where: {
                     id: entity.id,
-                    userId: user.id,
+                    userId: user.sub,
                 },
             },
         );

src/lib/actions/generateSampleData.ts

@@ -1,32 +1,32 @@
 import prisma from '@/prisma';
 import type { Category, Entity } from '@prisma/client';
 import { EntityType } from '@prisma/client';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
 import { ActionResponse } from '@/lib/types/actionResponse';
+import { auth0 } from '@/lib/auth';
 
 export default async function generateSampleData(): Promise<ActionResponse> {
     'use server';
 
-    const user = await getUser();
+    const session = await auth0.getSession();
-
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to create/update an category.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // Categories: create sample data
-    const categories: Category[] = await prisma.category.findMany({where: {userId: user.id}});
+    const categories: Category[] = await prisma.category.findMany({where: {userId: user.sub}});
-    if (await prisma.category.count({where: {userId: user.id}}) == 0) {
+    if (await prisma.category.count({where: {userId: user.sub}}) == 0) {
 
         console.log('Creating sample categories...');
 
         categories.push(await prisma.category.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Groceries',
                 color: '#FFBEAC',
             },
@@ -34,7 +34,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         categories.push(await prisma.category.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Drugstore items',
                 color: '#9CBCFF',
             },
@@ -42,7 +42,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         categories.push(await prisma.category.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Going out',
                 color: '#F1ADFF',
             },
@@ -50,7 +50,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         categories.push(await prisma.category.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Random stuff',
                 color: '#C1FFA9',
             },
@@ -58,7 +58,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         categories.push(await prisma.category.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Salary',
                 color: '#FFF787',
             },
@@ -69,14 +69,14 @@ export default async function generateSampleData(): Promise<ActionResponse> {
     console.log(categories);
 
     // Entities: create sample data
-    const entities: Entity[] = await prisma.entity.findMany({where: {userId: user.id}});
+    const entities: Entity[] = await prisma.entity.findMany({where: {userId: user.sub}});
-    if (await prisma.entity.count({where: {userId: user.id}}) == 0) {
+    if (await prisma.entity.count({where: {userId: user.sub}}) == 0) {
 
         console.log('Creating sample entities...');
 
         entities.push(await prisma.entity.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Main Account',
                 type: EntityType.Account,
             },
@@ -84,7 +84,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         entities.push(await prisma.entity.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Company',
                 type: EntityType.Entity,
             },
@@ -92,7 +92,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         entities.push(await prisma.entity.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Supermarket 1',
                 type: EntityType.Entity,
             },
@@ -100,7 +100,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         entities.push(await prisma.entity.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Supermarket 2',
                 type: EntityType.Entity,
             },
@@ -108,7 +108,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         entities.push(await prisma.entity.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Supermarket 3',
                 type: EntityType.Entity,
             },
@@ -116,7 +116,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         entities.push(await prisma.entity.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 name: 'Supermarket 4',
                 type: EntityType.Entity,
             },
@@ -129,21 +129,24 @@ export default async function generateSampleData(): Promise<ActionResponse> {
     // Payments: create sample data
     console.log('Creating sample payments...');
 
-    if (await prisma.payment.count({where: {userId: user.id}}) == 0) {
+    if (await prisma.payment.count({where: {userId: user.sub}}) == 0) {
         for (let i = 0; i < 4; i++) {
 
             const date = new Date();
             date.setDate(1);
             date.setMonth(date.getMonth() - i);
 
+            const categoryId =
+                categories.find((it) => it.name === 'Salary')?.id!;
+
             await prisma.payment.create({
                 data: {
-                    userId: user.id,
+                    userId: user.sub,
                     amount: 200000,
                     date: date,
                     payorId: entities[1].id,
                     payeeId: entities[0].id,
-                    categoryId: 5,
+                    categoryId: categoryId,
                     createdAt: date,
                     updatedAt: date,
                 },
@@ -166,7 +169,7 @@ export default async function generateSampleData(): Promise<ActionResponse> {
 
         await prisma.payment.create({
             data: {
-                userId: user.id,
+                userId: user.sub,
                 amount: Math.floor(
                     Math.random() * (maxAmount - minAmount) + minAmount),
                 date: date,

src/lib/actions/paymentCreateUpdate.ts

@@ -1,9 +1,9 @@
 import { z } from 'zod';
 import { ActionResponse } from '@/lib/types/actionResponse';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
 import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
+import { auth0 } from '@/lib/auth';
 
 export default async function paymentCreateUpdate({
     id,
@@ -16,15 +16,15 @@ export default async function paymentCreateUpdate({
 }: z.infer<typeof paymentFormSchema>): Promise<ActionResponse> {
     'use server';
 
-    // check that user is logged in
+    const session = await auth0.getSession();
-    const user = await getUser();
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to create/update a payment.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // create/update payment
     try {
@@ -52,7 +52,7 @@ export default async function paymentCreateUpdate({
         } else {
             await prisma.payment.create({
                 data: {
-                    userId: user.id,
+                    userId: user.sub,
                     amount: amount,
                     date: date,
                     payorId: payorId,

src/lib/actions/paymentDelete.ts

@@ -1,7 +1,7 @@
 import { ActionResponse } from '@/lib/types/actionResponse';
 import prisma from '@/prisma';
-import { getUser } from '@/auth';
 import { URL_SIGN_IN } from '@/lib/constants';
+import { auth0 } from '@/lib/auth';
 
 export default async function paymentDelete(id: number): Promise<ActionResponse> {
     'use server';
@@ -14,21 +14,21 @@ export default async function paymentDelete(id: number): Promise<ActionResponse>
         };
     }
 
-    // check that user is logged in
+    const session = await auth0.getSession();
-    const user = await getUser();
+    if (!session) {
-    if (!user) {
         return {
             type: 'error',
-            message: 'You must be logged in to delete a payment.',
+            message: 'You aren\'t signed in.',
             redirect: URL_SIGN_IN,
         };
     }
+    const user = session.user;
 
     // check that payment is associated with user
     const payment = await prisma.payment.findFirst({
         where: {
             id: id,
-            userId: user.id,
+            userId: user.sub,
         },
     });
     if (!payment) {
@@ -43,7 +43,7 @@ export default async function paymentDelete(id: number): Promise<ActionResponse>
         await prisma.payment.delete({
                 where: {
                     id: payment.id,
-                    userId: user.id,
+                    userId: user.sub,
                 },
             },
         );

src/lib/actions/signIn.ts

@@ -1,41 +0,0 @@
-import { z } from 'zod';
-import { Argon2id } from 'oslo/password';
-import { lucia } from '@/auth';
-import { cookies } from 'next/headers';
-import { signInFormSchema } from '@/lib/form-schemas/signInFormSchema';
-import { ActionResponse } from '@/lib/types/actionResponse';
-import { URL_HOME } from '@/lib/constants';
-import prisma from '@/prisma';
-
-export default async function signIn({username, password}: z.infer<typeof signInFormSchema>): Promise<ActionResponse> {
-    'use server';
-
-    const existingUser = await prisma.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

@@ -1,26 +0,0 @@
-import { getSession, lucia } from '@/auth';
-import { cookies } from 'next/headers';
-import { ActionResponse } from '@/lib/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

@@ -1,46 +0,0 @@
-import { z } from 'zod';
-import { Argon2id } from 'oslo/password';
-import { generateId } from 'lucia';
-import { lucia } from '@/auth';
-import { cookies } from 'next/headers';
-import { signUpFormSchema } from '@/lib/form-schemas/signUpFormSchema';
-import { ActionResponse } from '@/lib/types/actionResponse';
-import { URL_HOME } from '@/lib/constants';
-import prisma from '@/prisma';
-
-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 prisma.user.findFirst({
-        where: {
-            username: username.toLowerCase(),
-        },
-    });
-
-    if (existingUser) {
-        return {
-            type: 'error',
-            message: 'Username already exists',
-        };
-    }
-
-    await prisma.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/auth.ts

@@ -0,0 +1,9 @@
+import { Auth0Client } from "@auth0/nextjs-auth0/server"
+
+export const auth0 = new Auth0Client({
+    appBaseUrl: process.env.AUTH0_BASE_URL,
+    domain: process.env.AUTH0_URL,
+    secret: process.env.AUTH0_SECRET,
+    clientId: process.env.AUTH0_CLIENT_ID,
+    clientSecret: process.env.AUTH0_CLIENT_SECRET,
+})

src/lib/constants.ts

@@ -1,7 +1,6 @@
-// auth urls
+export const URL_SIGN_IN = `/auth/login`;
-export const URL_AUTH = '/auth';
+export const URL_SIGN_OUT = `/auth/logout`;
-export const URL_SIGN_IN = `${URL_AUTH}/signin`;
+
-export const URL_SIGN_UP = `${URL_AUTH}/signup`;
 
 // main urls
 export const URL_HOME = '/';

src/lib/form-schemas/signInFormSchema.ts

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/middleware.ts

@@ -1,27 +1,22 @@
-import type { NextRequest } from 'next/server';
+import { NextRequest } from 'next/server';
-import { NextResponse } from 'next/server';
+import { auth0 } from '@/lib/auth';
-import { URL_AUTH, URL_HOME, URL_SIGN_IN } from './lib/constants';
 
 export async function middleware(request: NextRequest) {
-
+    try {
-    // get session id from cookies
+        return await auth0.middleware(request);
-    const sessionId = request.cookies.get('auth_session')?.value ?? null;
+    } catch (error) {
-
+        console.error("Auth0 middleware error:", error);
-    // 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).*)',
+        /*
+         * Match all request paths except for the ones starting with:
+         * - _next/static (static files)
+         * - _next/image (image optimization files)
+         * - favicon.ico, sitemap.xml, robots.txt (metadata files)
+         */
+        "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
     ],
-};
+}

tsconfig.json

@@ -29,7 +29,8 @@
     },
     "types": [
       "@serwist/next/typings"
-    ]
+    ],
+    "target": "ES2017"
   },
   "include": [
     "next-env.d.ts",