Skip to content

Commit 605d0ea

Browse files
ivancernjaivancernja
committed
Add Next.js + BetterAuth + Drizzle starter
1 parent d7a4417 commit 605d0ea

38 files changed

Lines changed: 9330 additions & 0 deletions

‎ts/nextjs-betterauth-drizzle/.gitignore‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
node_modules/
2+
dist/
3+
.encore/
4+
*.log
5+
.DS_Store
6+
.env.local
7+
.env*.local
8+
encore.gen/
9+
~encore/
10+
11+
# Frontend
12+
frontend/.next/
13+
frontend/out/
14+
frontend/build/
15+
16+
encore.gen.go
17+
encore.gen.cue
18+
/.encore
19+
/encore.gen

‎ts/nextjs-betterauth-drizzle/.vscode/settings.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true,
4+
"editor.formatOnSave": true,
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": "explicit"
7+
},
8+
"files.exclude": {
9+
"**/.next": true,
10+
"**/node_modules": true,
11+
"**/.encore": true
12+
}
13+
}
14+

‎ts/nextjs-betterauth-drizzle/CONTRIBUTING.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Contributing to Encore + Next.js + Better Auth Starter
2+
3+
Thank you for your interest in contributing! This guide will help you get started.
4+
5+
## Development Setup
6+
7+
1. Fork and clone the repository
8+
2. Install dependencies:
9+
```bash
10+
npm install
11+
cd frontend && npm install && cd ..
12+
```
13+
3. Generate database migrations:
14+
```bash
15+
npm run db:generate
16+
```
17+
4. Start the development servers (in separate terminals):
18+
```bash
19+
npm run dev # Backend
20+
npm run dev:frontend # Frontend
21+
```
22+
23+
## Making Changes
24+
25+
### Backend Changes
26+
27+
- Backend code lives in the `auth/` directory
28+
- Follow Encore.ts conventions for API endpoints
29+
- Update database schema in `auth/schema.ts`
30+
- Generate migrations after schema changes: `npm run db:generate`
31+
32+
### Frontend Changes
33+
34+
- Frontend code lives in `frontend/src/`
35+
- Use TypeScript for type safety
36+
- Follow Next.js App Router conventions
37+
- Use Tailwind CSS for styling
38+
39+
### Code Style
40+
41+
- Use TypeScript for all new code
42+
- Follow existing code formatting
43+
- Write clear commit messages
44+
- Add comments for complex logic
45+
46+
## Testing
47+
48+
- Test authentication flows thoroughly
49+
- Verify database migrations work correctly
50+
- Test on both light and dark modes
51+
- Check responsive design on mobile
52+
53+
## Submitting Changes
54+
55+
1. Create a new branch for your changes
56+
2. Make your changes with clear commits
57+
3. Test your changes locally
58+
4. Push to your fork
59+
5. Create a pull request with a clear description
60+
61+
## Questions?
62+
63+
Feel free to open an issue for any questions or discussions!
64+

‎ts/nextjs-betterauth-drizzle/LICENSE‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Encore
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
22+

‎ts/nextjs-betterauth-drizzle/README.md‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
# Encore.ts + Next.js + BetterAuth + Drizzle Starter
2+
3+
This is a starter template for building applications with [Encore.ts](https://encore.dev) and [Next.js](https://nextjs.org/) with authentication built-in.
4+
5+
It uses [BetterAuth](https://better-auth.com/) for authentication and [Drizzle ORM](https://orm.drizzle.team/) with PostgreSQL for the database.
6+
7+
### Features
8+
- Email & password authentication
9+
- User sign up, sign in, and sign out
10+
- Protected dashboard page
11+
- Session management
12+
- Type-safe database with Drizzle ORM
13+
- Automatic database migrations
14+
15+
### Tech stack
16+
- **Backend:** [Encore.ts](https://encore.dev) - Type-safe backend with automatic infrastructure
17+
- **Frontend:** [Next.js 15](https://nextjs.org/) - React framework with App Router
18+
- **Auth:** [BetterAuth](https://better-auth.com/) - Full-featured authentication library
19+
- **Database:** [Drizzle ORM](https://orm.drizzle.team/) + PostgreSQL
20+
- **UI:** [Tailwind CSS](https://tailwindcss.com/) & [shadcn/ui](https://ui.shadcn.com/)
21+
22+
## Getting started
23+
24+
### Install Encore
25+
If you haven't already, install Encore:
26+
27+
- **macOS:** `brew install encoredev/tap/encore`
28+
- **Linux:** `curl -L https://encore.dev/install.sh | bash`
29+
- **Windows:** `iwr https://encore.dev/install.ps1 | iex`
30+
31+
### Install dependencies
32+
33+
Install backend dependencies:
34+
35+
```bash
36+
npm install
37+
```
38+
39+
Install frontend dependencies:
40+
41+
```bash
42+
cd frontend
43+
npm install
44+
cd ..
45+
```
46+
47+
### Run locally
48+
49+
Start the Encore backend:
50+
51+
```bash
52+
encore run
53+
```
54+
55+
In a separate terminal, start the Next.js frontend:
56+
57+
```bash
58+
npm run dev:frontend
59+
```
60+
61+
Open [http://localhost:3000](http://localhost:3000) to see your app.
62+
63+
### Database
64+
65+
The database is automatically provisioned by Encore when you run `encore run`. Migrations in `auth/migrations/` are automatically applied.
66+
67+
#### Database Shell
68+
69+
To access the database via psql:
70+
71+
```bash
72+
encore db shell auth
73+
```
74+
75+
#### Drizzle Studio
76+
77+
Drizzle Studio is integrated directly into the Encore local development dashboard at [http://localhost:9400](http://localhost:9400).
78+
79+
Click on **DB Explorer** in the dashboard to browse tables, run queries, and edit data.
80+
81+
You can also run Drizzle Studio standalone:
82+
83+
```bash
84+
DATABASE_URL=$(encore db conn-uri auth) npm run db:studio
85+
```
86+
87+
#### Reset Database
88+
89+
To reset the database and re-run all migrations:
90+
91+
```bash
92+
encore db reset
93+
```
94+
95+
## Validation
96+
97+
The starter includes validation for:
98+
99+
- **Email format**: Standard email validation with regex
100+
- **Email uniqueness**: Enforced by database unique constraint
101+
- **Password length**: Minimum 8 characters, maximum 128 characters
102+
- **Name length**: Minimum 2 characters
103+
- **Password confirmation**: Must match on sign up
104+
105+
## Production deployment
106+
107+
Before deploying to production:
108+
109+
1. **Change the auth secret** in `auth/better-auth.ts`:
110+
```bash
111+
encore secret set --prod BETTER_AUTH_SECRET
112+
```
113+
114+
2. **Update CORS origins** in `encore.app` to include your production domain
115+
116+
3. **(Optional) Enable email verification** in `auth/better-auth.ts`:
117+
```typescript
118+
emailAndPassword: {
119+
enabled: true,
120+
requireEmailVerification: true, // Change to true
121+
}
122+
```
123+
124+
### Deploy backend to Encore
125+
126+
```bash
127+
git add -A
128+
git commit -m 'Initial commit'
129+
git push encore
130+
```
131+
132+
Your backend will be deployed to Encore's free development cloud. You can monitor it at [app.encore.dev](https://app.encore.dev).
133+
134+
### Deploy frontend to Vercel
135+
136+
```bash
137+
cd frontend
138+
vercel
139+
```
140+
141+
Update `frontend/src/lib/auth-client.ts` with your production backend URL if needed.
142+
143+
## Project structure
144+
145+
```
146+
.
147+
├── auth/ # Encore.ts backend service
148+
│ ├── auth.ts # Authentication endpoints
149+
│ ├── better-auth.ts # Better Auth configuration
150+
│ ├── db.ts # Database connection
151+
│ ├── schema.ts # Drizzle database schema
152+
│ ├── migrations/ # Database migrations
153+
│ └── encore.service.ts # Service definition
154+
├── frontend/ # Next.js frontend
155+
│ ├── src/
156+
│ │ ├── app/ # App Router pages
157+
│ │ │ ├── page.tsx # Landing page
158+
│ │ │ ├── sign-in/ # Sign in page
159+
│ │ │ ├── sign-up/ # Sign up page
160+
│ │ │ └── dashboard/ # Protected dashboard
161+
│ │ ├── components/ui/ # shadcn/ui components
162+
│ │ └── lib/
163+
│ │ └── auth-client.ts # Better Auth client setup
164+
│ └── package.json
165+
├── encore.app # Encore app configuration
166+
└── package.json # Backend dependencies
167+
```
168+
169+
## Adding OAuth providers
170+
171+
To add OAuth providers (GitHub, Google, etc.), update `auth/better-auth.ts`:
172+
173+
```typescript
174+
socialProviders: {
175+
github: {
176+
clientId: process.env.GITHUB_CLIENT_ID!,
177+
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
178+
},
179+
google: {
180+
clientId: process.env.GOOGLE_CLIENT_ID!,
181+
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
182+
},
183+
}
184+
```
185+
186+
Then add OAuth buttons to your sign-in page using Better Auth's social sign-in methods.
187+
188+
## Extending the database
189+
190+
To add new tables or fields:
191+
192+
1. Update `auth/schema.ts` with your changes
193+
2. Generate migration: `npm run db:generate`
194+
3. Restart the backend (migrations apply automatically)
195+
196+
Example - adding a posts table:
197+
198+
```typescript
199+
export const posts = pgTable("posts", {
200+
id: text("id").primaryKey(),
201+
title: text("title").notNull(),
202+
userId: text("userId")
203+
.references(() => user.id, { onDelete: "cascade" }),
204+
createdAt: timestamp("createdAt").defaultNow(),
205+
});
206+
```
207+
208+
### Using Drizzle Kit
209+
210+
The starter includes drizzle-kit for database management:
211+
212+
```bash
213+
# Generate migrations after schema changes
214+
npm run db:generate
215+
216+
# Open Drizzle Studio (visual database browser)
217+
DATABASE_URL=$(encore db conn-uri auth) npm run db:studio
218+
219+
# Push schema changes directly without migrations (dev only)
220+
DATABASE_URL=$(encore db conn-uri auth) npm run db:push
221+
```
222+
223+
**Note:** The Encore backend must be running for drizzle-kit commands that connect to the database.
224+
225+
## Learn more
226+
227+
- [Encore Documentation](https://encore.dev/docs)
228+
- [Better Auth Documentation](https://better-auth.com)
229+
- [Drizzle ORM Documentation](https://orm.drizzle.team)
230+
- [Next.js Documentation](https://nextjs.org/docs)
231+
232+
## License
233+
234+
MIT

0 commit comments

Comments
 (0)