N-FIN-79: refactor pages to use auth0 session

src/app/account/page.tsx

@@ -1,42 +1,36 @@
 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 { Button } from '@/components/ui/button';
+import { getSession, Session } from '@auth0/nextjs-auth0';
 
 export default async function AccountPage() {
 
-    const user = await getUser();
-
-    if (!user) {
-        redirect(URL_SIGN_IN);
-    }
+    const {user} = await getSession() as Session;
 
     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 +38,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 +46,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>
@@ -92,10 +86,11 @@ export default async function AccountPage() {
                         variant="outline">
                         Delete Account
                     </ServerActionTrigger>
-                    <ServerActionTrigger
-                        action={signOut}>
-                        Sign Out
-                    </ServerActionTrigger>
+                    <a href="/api/auth/logout">
+                        <Button className="w-full">
+                            Sign Out
+                        </Button>
+                    </a>
                     {
                         process.env.NODE_ENV === 'development' && (
                             <ServerActionTrigger

src/app/categories/page.tsx

@@ -1,13 +1,13 @@
-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 { getSession, Session } from '@auth0/nextjs-auth0';
 
 export default async function CategoriesPage() {
 
-    const user = await getUser();
+    const {user} = await getSession() as Session;
 
     const categories = await prisma.category.findMany({
         where: {

src/app/entities/page.tsx

@@ -1,13 +1,13 @@
 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 { getSession, Session } from '@auth0/nextjs-auth0';
 
 export default async function EntitiesPage() {
 
-    const user = await getUser();
+    const {user} = await getSession() as Session;
 
     const entities = await prisma.entity.findMany({
         where: {

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { cn } from '@/lib/utils';
 import { Toaster } from '@/components/ui/sonner';
 import React from 'react';
 import Navigation from '@/components/navigation';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -49,6 +50,7 @@ export default function RootLayout({
                 href="/logo_white.png"
             />
         </head>
+        <UserProvider>
         <body className={cn('dark', inter.className)}>
         <Navigation/>
         <main className="p-4 sm:p-8">
@@ -56,6 +58,7 @@ export default function RootLayout({
         </main>
         <Toaster/>
         </body>
+        </UserProvider>
         </html>
     );
 }

src/app/page.tsx

@@ -2,8 +2,8 @@ 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 { getSession, Session } from '@auth0/nextjs-auth0';
 
 export type CategoryNumber = {
     category: Category,
@@ -17,17 +17,14 @@ export type EntityNumber = {
 
 export default async function DashboardPage(props: { searchParams?: { scope: ScopeType } }) {
 
-    const user = await getUser();
-    if (!user) {
-        return;
-    }
+    const {user} = await getSession() as Session;
 
     const scope = Scope.of(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,17 @@
-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 { getSession, Session } from '@auth0/nextjs-auth0';
 
 export default async function PaymentsPage() {
 
-    const user = await getUser();
+    const {user} = await getSession() as Session;
 
     const payments = await prisma.payment.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
         },
         orderBy: [
             {
@@ -25,7 +25,7 @@ export default async function PaymentsPage() {
 
     const entities = await prisma.entity.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
         },
         orderBy: [
             {
@@ -39,7 +39,7 @@ export default async function PaymentsPage() {
 
     const categories = await prisma.category.findMany({
         where: {
-            userId: user?.id,
+            userId: user.sub,
         },
         orderBy: [
             {

src/lib/constants.ts

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