mena0018 · mena0018 · Apr 23, 2025 · Apr 24, 2025 · Apr 24, 2025 · Jan 13, 2025
diff --git a/.env.sample b/.env.sample
@@ -1,4 +1,6 @@
-AUTH_SECRET="openssl rand -hex 32"
+BETTER_AUTH_SECRET="openssl rand -hex 32"
+BETTER_AUTH_URL=http://localhost:3000
+
 DATABASE_URL="postgresql://username:password@localhost:5432/db_name"
 
 NEXT_PUBLIC_SENTRY_DSN="https://<number>@<number>.ingest.de.sentry.io/<number>"

diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 - 🔗 [Eslint](https://eslint.org/)
 - 🔗 [ShadCN/ui](https://ui.shadcn.com/)
 - 🔗 [Sentry](https://bit.ly/sentry-docs-dg)
-- 🔗 [Kinde Auth](https://kinde.com/dgray-nextjsstack/)
+- 🔗 [Better Auth](https://www.better-auth.com)
 - 🔗 [Neon Postgres](https://fyi.neon.tech/davegray)
 - 🔗 [Prisma ORM](https://www.prisma.io/)
 - 🔗 [react-hook-form](https://react-hook-form.com/)

diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export default function AuthLayout({ children }: Readonly<PropsWithChildren>) {
+  return <main className='flex h-screen flex-col items-center justify-center'>{children}</main>;
+}
diff --git a/app/login/page.tsx → app/(auth)/login/page.tsx b/app/login/page.tsx → app/(auth)/login/page.tsx
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
@@ -0,0 +1,20 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { SignInForm } from '@/features/auth';
+
+export default function SignInPage() {
+  return (
+    <div className='flex min-h-svh w-full items-center justify-center p-6 md:p-10'>
+      <div className='w-full max-w-md'>
+        <Card>
+          <CardHeader>
+            <CardTitle className='text-2xl'>Sign In</CardTitle>
+            <CardDescription>Enter your email below to login to your account</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SignInForm />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
@@ -0,0 +1,20 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { SignUpForm } from '@/features/auth';
+
+export default function SignUpPage() {
+  return (
+    <div className='flex min-h-svh w-full items-center justify-center p-6 md:p-10'>
+      <div className='w-full max-w-md'>
+        <Card>
+          <CardHeader>
+            <CardTitle className='text-2xl'>Sign Up</CardTitle>
+            <CardDescription>Enter your email below to create a new account</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SignUpForm />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(shop)/home/page.tsx b/app/(shop)/home/page.tsx
@@ -1,7 +1,43 @@
+import Link from 'next/link';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getUser } from '@/lib/auth-server';
+
 export const metadata = {
   title: 'Home',
 };
 
-export default function HomePage() {
-  return <h2>HomePage</h2>;
+export default async function HomePage() {
+  const user = await getUser();
+
+  if (!user) {
+    return (
+      <div>
+        <h1>Please log in to view your profile.</h1>
+        <p>If you don't have an account, please sign up.</p>
+        <p>
+          <Link href='/login'>Login</Link> | <Link href='/signup'>Sign Up</Link>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>User Profile</CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <div>
+          <p>
+            <strong>Name:</strong> {user.name}
+          </p>
+          <p>
+            <strong>Email:</strong> {user.email}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
 }
diff --git a/app/api/auth/[...all]/route.ts b/app/api/auth/[...all]/route.ts
@@ -0,0 +1,5 @@
+import { toNextJsHandler } from 'better-auth/next-js';
+
+import { auth } from '@/lib/auth';
+
+export const { POST, GET } = toNextJsHandler(auth);
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,10 +17,7 @@ export const metadata: Metadata = baseMetadata;
 
 export default function RootLayout({ children }: Readonly<PropsWithChildren>) {
   return (
-    <html
-      suppressHydrationWarning
-      lang='en'
-      className='h-full'>
+    <html suppressHydrationWarning>
       <body
         suppressHydrationWarning
         className={cn(font.className)}>

diff --git a/middleware.ts b/middleware.ts
@@ -1,26 +1,16 @@
-import { withAuth } from '@kinde-oss/kinde-auth-nextjs/middleware';
-import { NextRequest } from 'next/server';
+import { getSessionCookie } from 'better-auth/cookies';
+import { NextRequest, NextResponse } from 'next/server';
 
-export default withAuth(
-  async function middleware(request: NextRequest) {
-    // console.log(request);
-  },
-  { isReturnToCurrentPage: true },
-);
+export async function middleware(request: NextRequest) {
+  const sessionCookie = getSessionCookie(request);
+
+  if (!sessionCookie) {
+    return NextResponse.redirect(new URL('/sign-in', request.url));
+  }
+
+  return NextResponse.next();
+}
 
 export const config = {
-  matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - images
-     * - auth
-     * - login
-     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
-     * - homepage (represented with after beginning with a slash)
-     */
-    '/((?!api|_next/static|_next/image|images|auth|login|favicon.ico|sitemap.xml|robots.txt|$).*)',
-  ],
+  matcher: ['/customers/:path*', '/tickets/:path*'],
 };
diff --git a/package.json b/package.json
@@ -31,11 +31,13 @@
     "@radix-ui/react-switch": "^1.2.2",
     "@sentry/nextjs": "^8.42.0",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "better-auth": "^1.2.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.503.0",
     "next": "^15.3.0",
     "next-themes": "^0.4.1",
+    "next-safe-action": "^7.10.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.54.1",
@@ -44,16 +46,16 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.3.0",
     "@eslint/eslintrc": "^3.3.1",
+    "@next/eslint-plugin-next": "^15.3.0",
     "@prisma/client": "^6.6.0",
     "@tailwindcss/postcss": "^4.1.4",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.10.1",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "@typescript-eslint/parser": "^8.31.0",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "dotenv": "^16.5.0",
     "eslint": "^9.25.1",
     "eslint-config-next": "^15.3.0",