next-auth-template

A Next.js app template that gets you up and running with social sign in, magic links, database-backed sessions, plus account creation and setup. It's a good starting point for your next project.

Features

• Custom sign in and sign up pages as a starting point for your own
• Database-backed sessions all managed for you thanks to Auth.js and Drizzle ORM
• Basic account creation and set up for first time users
• Google Sign-in ready for config, easily add other providers Auth.js has to offer
• Optional Magic Links via Resend ready for config, or any other email provider Auth.js can support
• Protected paths via middleware, easily customisable to your needs

This template uses major dependencies that are not yet stable. It is not recommended for production use until next-auth and drizzle-orm are stable

Getting Started

There is some initial setup required to get this template up and running. It won’t take long.

Prerequisites

• Node.js installed
• A PostgreSQL database. This template uses Neon , but there are other options.

Installation

1. Clone the repo , or use it as a GitHub template (using Vercel? Deploy )
2. Copy .env.example to .env and fill in the values (see Environment Variables below)
3. Run pnpm install && pnpm run db:push to install dependencies and push the database schema
4. Run pnpm run dev to start the development server
5. Navigate to http://localhost:3000, and click the “Sign up” or “Sign in” buttons

Enabling Magic Links

Magic links are a great way to sign in users without them needing to have any social media accounts. Magic links are not enabled by default, due to requiring an email provider and live domain and DNS record setup. To enable magic links, follow these steps:

1. Follow the Auth.js documentation up to and including setting the AUTH_RESEND_KEY environment variable.
2. Be sure to set MAGIC_LINK_EMAIL_FROM to the email address you want to send magic links from.

That’s it! Note domain validation with Resend will be required for magic links to work, and could take anywhere from a few minutes to a few hours to validate.

Making changes

While this template is designed to be as simple as possible, with the intention of you enhancing it further, there are a few changes you might want to make.

Change PostgreSQL host

This template expects a PostgreSQL database, and uses Drizzle ORM to interface with it. Out of the box, Drizzle is configured to use Neon, but you can change this to any other PostgreSQL host.

1. In db/db.ts , change the sql variable to point to your PostgreSQL host of choice, so long as Drizzle has an adapter for it.

See Drizzle ORM’s documentation for more information.

Add other Auth.js providers

This template uses Google Sign-in, but you can add other providers Auth.js supports.

1. Browse the available providers in Auth.js’s documentation
2. Add the required environment variables for your new provider to .env
3. In src/lib/auth.ts , add the provider to the providers array (and be sure to import it!)
4. On your sign in and sign up pages, add <SocialSignInButton provider="new_provider" /> component where new_provider is the name of the provider you added

Change Email Provider

By default, this template uses Resend to send magic links. You can change this to any other email provider that Auth.js supports.

See Auth.js’s documentation for more information on which email providers Auth.js supports. You’ll need to update lib/auth.ts and actions/magic-auth.ts to support the new provider.

Environment Variables

This template relies on environment variables to work. You can use the .env.example file as a starting guide; rename .env.example to .env and fill in the values.