You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[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.
13
+
[BetterAuth](https://better-auth.com/) is a modern, open-source authentication solution for web applications. It's built with TypeScriptand provides a simple and extensible auth experience with support for multiple database adapters, including Prisma.
14
14
15
-
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).
15
+
In this guide, you'll wire BetterAuth 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).
16
16
17
17
## Prerequisites
18
18
@@ -78,15 +78,15 @@ Once installed, initialize Prisma in your project:
You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My Better-Auth Project"
81
+
You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My BetterAuth Project"
82
82
:::
83
83
84
84
This will create:
85
85
86
-
- A `prisma` directory with a `schema.prisma` file.
87
-
- A Prisma Postgres database.
88
-
- A `.env` file containing the `DATABASE_URL` at the project root.
89
-
- An `output` directory for the generated Prisma Client as `better-auth/generated/prisma`.
86
+
- A `prisma` directory with a `schema.prisma` file
87
+
- A Prisma Postgres database
88
+
- A `.env` file containing the `DATABASE_URL` at the project root
89
+
- An `output` directory for the generated Prisma Client as `better-auth/generated/prisma`
90
90
91
91
### 2.2. Configure the Prisma client generator
92
92
@@ -98,7 +98,7 @@ npx prisma generate
98
98
99
99
### 2.3. Set up a global Prisma client
100
100
101
-
Create a `/lib`directory and a `prisma.ts` file inside it. This file will be used to create and export your Prisma Client instance.
101
+
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.
102
102
103
103
```terminal
104
104
mkdir -p src/lib
@@ -149,19 +149,19 @@ We recommend using a connection pooler (like [Prisma Accelerate](https://www.pri
149
149
If you choose not to use one, **avoid** instantiating `PrismaClient` globally in long-lived environments. Instead, create and dispose of the client per request to prevent exhausting your database connections.
150
150
:::
151
151
152
-
## 3. Set up Better-Auth
152
+
## 3. Set up BetterAuth
153
153
154
-
Now it's time to integrate Better-Auth for authentication.
154
+
Now it's time to integrate BetterAuth for authentication.
155
155
156
-
### 3.1. Install and configure Better-Auth
156
+
### 3.1. Install and configure BetterAuth
157
157
158
-
First, install the Better-Auth core package:
158
+
First, install the BetterAuth core package:
159
159
160
160
```terminal
161
161
npm install better-auth
162
162
```
163
163
164
-
Next, generate a secure secret that Better-Auth will use to sign authentication tokens. This ensures your tokens cannot be messed with.
164
+
Next, generate a secure secret that BetterAuth will use to sign authentication tokens. This ensures your tokens cannot be messed with.
Now, create a configuration file for Better-Auth at `src/lib/auth.ts`:
183
+
Now, create a configuration file for BetterAuth. In the `src/lib` directory, create an `auth.ts` file:
184
184
185
185
```terminal
186
186
touch src/lib/auth.ts
187
187
```
188
188
189
-
In this file, you'll configure Better-Auth to use the Prisma adapter, which allows it to persist user and session data in your database. You will also enable email and password authentication.
189
+
In this file, you'll configure BetterAuth to use the Prisma adapter, which allows it to persist user and session data in your database. You will also enable email and password authentication.
Better-Auth also supports other sign-in methods like social logins (Google, GitHub, etc.), which you can explore in their [documentation](https://www.better-auth.com/docs/authentication/email-password).
203
+
BetterAuth also supports other sign-in methods like social logins (Google, GitHub, etc.), which you can explore in their [documentation](https://www.better-auth.com/docs/authentication/email-password).
Better-Auth provides a CLI command to automatically add the necessary authentication models (`User`, `Session`, `Account`, and `Verification`) to your `schema.prisma` file.
245
+
BetterAuth provides a CLI command to automatically add the necessary authentication models (`User`, `Session`, `Account`, and `Verification`) to your `schema.prisma` file.
246
246
247
247
Run the following command:
248
248
@@ -329,16 +329,16 @@ npx prisma migrate dev --name add-auth-models
329
329
330
330
## 4. Set up the API routes
331
331
332
-
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]`.
332
+
BetterAuth 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]`.
333
333
334
-
First, create the necessary directory and file:
334
+
In the `src/app/api` directory, create an `auth/[...all]` folder structure and a `route.ts`file inside it:
335
335
336
336
```terminal
337
337
mkdir -p "src/app/api/auth/[...all]"
338
338
touch "src/app/api/auth/[...all]/route.ts"
339
339
```
340
340
341
-
Add the following code to the newly created `route.ts` file. This code uses a helper from Better-Auth to create Next.js-compatible `GET` and `POST` request handlers.
341
+
Add the following code to the newly created `route.ts` file. This code uses a helper from BetterAuth to create Next.js-compatible `GET` and `POST` request handlers.
342
342
343
343
```ts
344
344
import { auth } from"@/lib/auth";
@@ -347,7 +347,7 @@ import { toNextJsHandler } from "better-auth/next-js";
347
347
exportconst { POST, GET } =toNextJsHandler(auth);
348
348
```
349
349
350
-
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`:
350
+
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:
Now, let's build the user interface for authentication. Create the pages for signing up, signing in, and a protected dashboard:
366
+
Now, let's build the user interface for authentication. In the `src/app` directory, create the following folder structure:
367
+
368
+
-`sign-up/page.tsx`
369
+
-`sign-in/page.tsx`
370
+
-`dashboard/page.tsx`
367
371
368
372
```terminal
369
373
mkdir -p src/app/{sign-up,sign-in,dashboard}
@@ -410,7 +414,7 @@ export default function SignUpPage() {
410
414
}
411
415
```
412
416
413
-
Now, import the `signUp` function from your Better-Auth client and add the `handleSubmit` function. This function is triggered on form submission and calls the `signUp.email` method provided by Better-Auth, passing the user's name, email, and password.
417
+
Now, import the `signUp` function from your BetterAuth client and add the `handleSubmit` function. This function is triggered on form submission and calls the `signUp.email` method provided by BetterAuth, passing the user's name, email, and password.
414
418
415
419
```tsx file=src/app/sign-up/page.tsx
416
420
"use client";
@@ -611,7 +615,7 @@ export default function SignInPage() {
611
615
}
612
616
```
613
617
614
-
Add the `handleSubmit` function, this time importing and using the `signIn.email` method from Better-Auth.
618
+
Add the `handleSubmit` function, this time importing and using the `signIn.email` method from BetterAuth.
615
619
616
620
```tsx file=src/app/sign-in/page.tsx
617
621
"use client";
@@ -778,7 +782,7 @@ export default function DashboardPage() {
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments