Neon, Clerk, and Vercel Example

Companion repository for this article on the Neon blog.

A live preview of this application with Discord login is available at https://neon-clerk-drizzle-nextjs.vercel.app/.

A sample application that demonstrates how to use Clerk authentication with Next.js, and store user identifiers in Neon's Serverless Postgres using Drizzle ORM.

Local Development

Requires Node.js 18.x.

1. Sign up to Neon to access serverless Postgres by creating a project.
2. Sign up to Clerk for user management and authentication. Create an application that supports sign in using a providers such as Discord and Google;
3. Clone this repository, install dependencies, and prepare a .env.local file:

   git clone $REPO_URL neon-clerk-vercel
   
   cd neon-clerk-vercel
   
   npm install
   
   cp .env.example .env.local

4. Replace the values in .env.local as follows:
   • DATABASE_URL - With your Neon connection string`
   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY - With the value from the API Keys section in the Clerk dashboard.
   • CLERK_SECRET_KEY - With the value from the API Keys section in the Clerk dashboard.
   • CLERK_WEBHOOK_SECRET - This will be obtained later.
5. Generate and push the database schemas, and insert seed data:

   npm run drizzle:generate -- dotenv_config_path=.env.local
   npm run drizzle:push -- dotenv_config_path=.env.local
   npm run seed -- dotenv_config_path=.env.local

Tip

Consider creating a separate Neon database branch(es) for your development environment(s).

Since this application uses Clerk webhooks to create user references in the Neon Postgres database, you need a way to expose the application from your local network as a public HTTPS endpoint during local development. You can use localtunnel to do this.

1. Open a terminal and start the Next.js application in development mode:

   npm run dev

2. Open another terminal and run the following command to obtain a public HTTPS URL to access your Next.js application:

   npx localtunnel@2.0 –port 3000 -s $USER

3. Go to dashboard.clerk.com and select your application.
4. Navigate to the Webhooks screen.
5. Click the Add Endpoint button.
6. Enter the public HTTPS URL provided by localtunnel followed by /api/webhooks/clerk in the Endpoint URL field.
7. Under the Message Filtering section select the user events.
8. Click the Create button.

You can now visit http://localhost:3000/ to verify the application is working end-to-end. The application should display a login page, and once you've logged in your user's ID should be inserted into your Postgres users table a few seconds later.

Vercel Deployment

TODO: Vercel Deploy.