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.
- Sign up to Neon to access serverless Postgres by creating a project.
- Sign up to Clerk for user management and authentication. Create an application that supports sign in using a providers such as Discord and Google;
- 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
- 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.
- 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.
- Open a terminal and start the Next.js application in development mode:
npm run dev
- 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
- Go to dashboard.clerk.com and select your application.
- Navigate to the Webhooks screen.
- Click the Add Endpoint button.
- Enter the public HTTPS URL provided by localtunnel followed by /api/webhooks/clerk in the Endpoint URL field.
- Under the Message Filtering section select the user events.
- 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.