Skip to content

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

Notifications You must be signed in to change notification settings

raoufchebri/neon-clerk-drizzle-nextjs

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published