Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions ts/nextjs-betterauth-drizzle/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
node_modules/
dist/
.encore/
*.log
.DS_Store
.env.local
.env*.local
encore.gen/
~encore/

# Frontend
frontend/.next/
frontend/out/
frontend/build/

encore.gen.go
encore.gen.cue
/.encore
/encore.gen
14 changes: 14 additions & 0 deletions ts/nextjs-betterauth-drizzle/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"files.exclude": {
"**/.next": true,
"**/node_modules": true,
"**/.encore": true
}
}

64 changes: 64 additions & 0 deletions ts/nextjs-betterauth-drizzle/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# Contributing to Encore + Next.js + Better Auth Starter

Thank you for your interest in contributing! This guide will help you get started.

## Development Setup

1. Fork and clone the repository
2. Install dependencies:
```bash
npm install
cd frontend && npm install && cd ..
```
3. Generate database migrations:
```bash
npm run db:generate
```
4. Start the development servers (in separate terminals):
```bash
npm run dev # Backend
npm run dev:frontend # Frontend
```

## Making Changes

### Backend Changes

- Backend code lives in the `auth/` directory
- Follow Encore.ts conventions for API endpoints
- Update database schema in `auth/schema.ts`
- Generate migrations after schema changes: `npm run db:generate`

### Frontend Changes

- Frontend code lives in `frontend/src/`
- Use TypeScript for type safety
- Follow Next.js App Router conventions
- Use Tailwind CSS for styling

### Code Style

- Use TypeScript for all new code
- Follow existing code formatting
- Write clear commit messages
- Add comments for complex logic

## Testing

- Test authentication flows thoroughly
- Verify database migrations work correctly
- Test on both light and dark modes
- Check responsive design on mobile

## Submitting Changes

1. Create a new branch for your changes
2. Make your changes with clear commits
3. Test your changes locally
4. Push to your fork
5. Create a pull request with a clear description

## Questions?

Feel free to open an issue for any questions or discussions!

22 changes: 22 additions & 0 deletions ts/nextjs-betterauth-drizzle/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
MIT License

Copyright (c) 2024 Encore

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

198 changes: 198 additions & 0 deletions ts/nextjs-betterauth-drizzle/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
# Encore.ts + Next.js + BetterAuth + Drizzle Starter

This is a starter template for building applications with [Encore.ts](https://encore.dev) and [Next.js](https://nextjs.org/) with authentication built-in.

It uses [BetterAuth](https://better-auth.com/) for authentication and [Drizzle ORM](https://orm.drizzle.team/) with PostgreSQL for the database.

### Features
- Email & password authentication
- User sign up, sign in, and sign out
- Protected dashboard page
- Session management
- Type-safe database with Drizzle ORM
- Automatic database migrations

### Tech stack
- **Backend:** [Encore.ts](https://encore.dev) - Type-safe backend with automatic infrastructure
- **Frontend:** [Next.js 15](https://nextjs.org/) - React framework with App Router
- **Auth:** [BetterAuth](https://better-auth.com/) - Full-featured authentication library
- **Database:** [Drizzle ORM](https://orm.drizzle.team/) + PostgreSQL
- **UI:** [Tailwind CSS](https://tailwindcss.com/) & [shadcn/ui](https://ui.shadcn.com/)

## Developing locally

### Prerequisites
- [Encore CLI](https://encore.dev/docs/install) installed
- Node.js 20 or later
- Docker (for local PostgreSQL)

When you have [installed Encore](https://encore.dev/docs/install), you can create a new Encore application and clone this example with this command:

```bash
encore app create my-app-name --example=ts/nextjs-betterauth-drizzle
```

## Running locally

Install backend dependencies:

```bash
npm install
```

Install frontend dependencies:

```bash
cd frontend
npm install
cd ..
```

Run your Encore backend:

```bash
encore run
```

In a separate terminal, run the Next.js frontend:

```bash
npm run dev:frontend
```

Open [http://localhost:3000](http://localhost:3000) to view the app.

## Local Development Dashboard

While `encore run` is running, open [http://localhost:9400](http://localhost:9400) to access Encore's local developer dashboard.

Here you can see:
- API docs and make requests in the API explorer
- View traces of responses
- Database explorer with Drizzle Studio integration (click **DB Explorer**)

## Database

The database is automatically provisioned by Encore. Migrations in `auth/migrations/` are automatically applied.

### Database Shell

Access the database via psql:

```bash
encore db shell auth
```

### Drizzle Studio

Open Drizzle Studio from the Encore dashboard at [http://localhost:9400](http://localhost:9400) by clicking **DB Explorer**.

Or run it standalone:

```bash
DATABASE_URL=$(encore db conn-uri auth) npm run db:studio
```

### Reset Database

To reset the database:

```bash
encore db reset
```

## Validation

The starter includes validation for:

- **Email format**: Standard email validation with regex
- **Email uniqueness**: Enforced by database unique constraint
- **Password length**: Minimum 8 characters, maximum 128 characters
- **Name length**: Minimum 2 characters
- **Password confirmation**: Must match on sign up

## Deployment

Deploy your application to a staging environment in Encore's free development cloud:

```bash
git push encore
```

Then head over to the [Cloud Dashboard](https://app.encore.dev) to monitor your deployment and find your production URL.

From there you can also connect your own AWS or GCP account to use for deployment.

### Frontend Deployment

Deploy the frontend to [Vercel](https://vercel.com):

```bash
cd frontend
vercel
```

Update `frontend/src/lib/auth-client.ts` with your production backend URL if needed, and update CORS origins in `encore.app`.

## Production Configuration

Before deploying to production:

1. **Change the auth secret** in `auth/better-auth.ts`:
```bash
encore secret set --prod BETTER_AUTH_SECRET
```

2. **Update CORS origins** in `encore.app` to include your production domain

3. **(Optional) Enable email verification** in `auth/better-auth.ts`:
```typescript
emailAndPassword: {
enabled: true,
requireEmailVerification: true,
}
```

## Adding OAuth providers

To add OAuth providers (GitHub, Google, etc.), update `auth/better-auth.ts`:

```typescript
socialProviders: {
github: {
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
},
}
```

Then add OAuth buttons to your sign-in page.

## Extending the database

To add new tables or fields:

1. Update `auth/schema.ts` with your changes
2. Generate migration: `npm run db:generate`
3. Restart the backend (migrations apply automatically)

Example - adding a posts table:

```typescript
import { pgTable, text, timestamp } from "drizzle-orm/pg-core";

export const posts = pgTable("posts", {
id: text("id").primaryKey(),
title: text("title").notNull(),
userId: text("userId")
.references(() => user.id, { onDelete: "cascade" }),
createdAt: timestamp("createdAt").defaultNow(),
});
```

## Learn more

- [Encore Documentation](https://encore.dev/docs)
- [BetterAuth Documentation](https://better-auth.com)
- [Drizzle ORM Documentation](https://orm.drizzle.team)
- [Next.js Documentation](https://nextjs.org/docs)
Loading