Neon Authorize + Clerk RLS Example (SQL from the Frontend)

A quick start Next.js template demonstrating secure user authentication and authorization using Neon Authorize with Clerk integration. This guide primarily uses SQL from the frontend to enforce row-level security policies.

Features

• Next.js application with TypeScript
• User authentication powered by Clerk
• Row-level security using Neon Authorize
• Database migrations with Drizzle ORM
• Ready-to-deploy configuration for Vercel, Netlify, and Render

Prerequisites

• Create a Neon project ( pg.new )
• Create a Clerk Application ( https://go.clerk.com/cHq4Ut6 )
• Node.js 18+ installed locally

One-Click Deploy

Deploy directly to your preferred hosting platform:

Local Development Setup

1. Configure Clerk

1. Navigate to your Clerk dashboard and create a new application.
2. Obtain your Publishable key and Secret key from the Clerk dashboard.
3. In your Clerk dashboard, go to JWT Templates.
4. Create a new JWT Template (select "Blank" as the template type).
5. Name your template (e.g., neon_authorize).
6. Copy the JWKS Endpoint URL. You'll need this for Neon Authorize.

2. Set Up Neon Authorize

1. Open your Neon Console and click on Authorize.

2. Click Add Authentication Provider.

3. Paste the JWKS Endpoint URL you copied from Clerk into the JWKS URL field.

4. Follow the steps in the Neon UI to set up the authenticated role. You can skip the schema-related steps if you are just getting started with this example.

   

3. Local Installation

1. Clone the repository:

   git clone https://github.com/neondatabase-labs/clerk-nextjs-frontend-neon-authorize
   cd clerk-nextjs-neon-authorize

2. Install dependencies:

   npm install  # or bun install

3. Create a .env file in the root of the project and fill the following environment variables:

   cp .env.template .env

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_CLERK_PUBLISHABLE_KEY
   CLERK_SECRET_KEY=YOUR_CLERK_SECRET_KEY
   
   # For the `neondb_owner` role.
   DATABASE_URL="YOUR_NEON_OWNER_CONNECTION_STRING"
   # For the `authenticated`, passwordless role.
   NEXT_PUBLIC_DATABASE_AUTHENTICATED_URL="YOUR_NEON_AUTHENTICATED_CONNECTION_STRING"
   
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

   Note: Replace the placeholder values with your actual Neon and Clerk credentials.

4. Run the database migrations:

   npm run drizzle:generate  # or bun run drizzle:generate
   npm run drizzle:migrate  # or bun run drizzle:migrate

5. Start the development server:

   npm run dev  # or bun run dev

6. Visit http://localhost:3000 to see the application running

Important: Production Setup

Before deploying to production:

1. Modify your Clerk application environment to use the Production instance. Create one if you haven't already.
2. Update your environment variables with the new production credentials
3. Update your authentication configuration in Neon Authorize with the new JWKS URL

Learn More

• Neon Authorize Tutorial
• Simplify RLS with Drizzle
• Clerk Documentation
• Postgres RLS
• Neon Authorize + Clerk Integration

Authors

• David Gomes
• Pedro Figueiredo
• Bryan Clark

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.