DC-5242 Astro Better-Auth Guide

content/800-guides/230-betterauth-nextjs.mdx

@@ -10,7 +10,7 @@ community_section: true
 
 ## Introduction
 
-[Better-Auth](https://better-auth.com/) is a modern, open-source authentication solution for web applications. It's built with TypeScript, React, and Prisma to provide a simple and extensible auth experience.
+[Better-Auth](https://better-auth.com/) is a modern, open-source authentication solution for web applications. It's built with TypeScript and provides a simple and extensible auth experience with support for multiple database adapters, including Prisma.
 
 In this guide, you'll wire Better-Auth into a brand-new [Next.js](https://nextjs.org/) app and persist users in a [Prisma Postgres](https://prisma.io/postgres) database. You can find a complete example of this guide on [GitHub](https://github.com/prisma/prisma-examples/tree/latest/orm/betterauth-nextjs).
 
@@ -83,10 +83,10 @@ You'll need to answer a few questions while setting up your Prisma Postgres data
 
 This will create:
 
-- A `prisma` directory with a `schema.prisma` file.
-- A Prisma Postgres database.
-- A `.env` file containing the `DATABASE_URL` at the project root.
-- An `output` directory for the generated Prisma Client as `better-auth/generated/prisma`.
+- A `prisma` directory with a `schema.prisma` file
+- A Prisma Postgres database
+- A `.env` file containing the `DATABASE_URL` at the project root
+- An `output` directory for the generated Prisma Client as `better-auth/generated/prisma`
 
 ### 2.2. Configure the Prisma client generator
 
@@ -98,7 +98,7 @@ npx prisma generate
 
 ### 2.3. Set up a global Prisma client
 
-Create a `/lib` directory and a `prisma.ts` file inside it. This file will be used to create and export your Prisma Client instance.
+In the `src` directory, create a `lib` folder and a `prisma.ts` file inside it. This file will be used to create and export your Prisma Client instance.
 
 ```terminal
 mkdir -p src/lib
@@ -180,7 +180,7 @@ BETTER_AUTH_URL=http://localhost:3000
 DATABASE_URL="your-database-url"
 ```
 
-Now, create a configuration file for Better-Auth at `src/lib/auth.ts`:
+Now, create a configuration file for Better-Auth. In the `src/lib` directory, create an `auth.ts` file:
 
 ```terminal
 touch src/lib/auth.ts
@@ -331,7 +331,7 @@ npx prisma migrate dev --name add-auth-models
 
 Better-Auth needs an API endpoint to handle authentication requests like sign-in, sign-up, and sign-out. You'll create a catch-all API route in Next.js to handle all requests sent to `/api/auth/[...all]`.
 
-First, create the necessary directory and file:
+In the `src/app/api` directory, create an `auth/[...all]` folder structure and a `route.ts` file inside it:
 
 ```terminal
 mkdir -p "src/app/api/auth/[...all]"
@@ -347,7 +347,7 @@ import { toNextJsHandler } from "better-auth/next-js";
 export const { POST, GET } = toNextJsHandler(auth);
 ```
 
-Next, you'll need a client-side utility to interact with these endpoints from your React components. Create a new file `src/lib/auth-client.ts`:
+Next, you'll need a client-side utility to interact with these endpoints from your React components. In the `src/lib` directory, create an `auth-client.ts` file:
 
 ```terminal
 touch src/lib/auth-client.ts
@@ -363,7 +363,11 @@ export const { signIn, signUp, signOut, useSession } = createAuthClient()
 
 ## 5. Set up your pages
 
-Now, let's build the user interface for authentication. Create the pages for signing up, signing in, and a protected dashboard:
+Now, let's build the user interface for authentication. In the `src/app` directory, create the following folder structure:
+
+- `sign-up/page.tsx`
+- `sign-in/page.tsx`
+- `dashboard/page.tsx`
 
 ```terminal
 mkdir -p src/app/{sign-up,sign-in,dashboard}
@@ -816,7 +820,7 @@ export default function DashboardPage() {
   const router = useRouter();
   const { data: session, isPending } = useSession();
 
-  //add-start: redirect if not signed in
+  //add-start
   useEffect(() => {
     if (!isPending && !session?.user) {
       router.push("/sign-in");
@@ -851,7 +855,7 @@ export default function DashboardPage() {
     }
   }, [isPending, session, router]);
 
-  //add-start: loading and redirect states
+  //add-start
   if (isPending)
     return <p className="text-center mt-8 text-white">Loading...</p>;
   if (!session?.user)
@@ -890,7 +894,7 @@ export default function DashboardPage() {
   if (!session?.user)
     return <p className="text-center mt-8 text-white">Redirecting...</p>;
 
-  //add-start: destructure user from session
+  //add-start
   const { user } = session;
   //add-end
 
@@ -899,7 +903,7 @@ export default function DashboardPage() {
       <h1 className="text-2xl font-bold">Dashboard</h1>
       <p>Welcome, {user.name || "User"}!</p>
       <p>Email: {user.email}</p>
-      {/* add-start: sign out button */}
+      {/* add-start */}
       <button
         onClick={() => signOut()}
         className="w-full bg-white text-black font-medium rounded-md px-4 py-2 hover:bg-gray-200"