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.

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

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 [email protected] –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.

TODO: Vercel Deploy.