Neon RLS Authorize + PropelAuth Example (SQL from the Frontend and Backend)

A quick start Next.js template demonstrating secure user authentication and authorization using Neon RLS Authorize with PropelAuth integration. This guide primarily uses SQL from the backend to enforce row-level security policies, while also showcasing how to implement client-side row-level security as an example.

Features

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

Prerequisites

• Neon account with a new project
• PropelAuth account with a new application
• Node.js 18+ installed locally

One-Click Deploy

Deploy directly to your preferred hosting platform:

Important: After deployment, set PROPELAUTH_REDIRECT_URI to your deployment URL and add it to "Additional Frontend Locations" in the PropelAuth dashboard.

Local Development Setup

1. Configure PropelAuth

1. Navigate to your PropelAuth dashboard
2. Under "Frontend Integration", configure:
   • Application URL: http://localhost:3000
   • Default redirect path after login: /api/auth/callback
   • Default redirect path after logout: /api/auth/logout

2. Set Up Neon RLS Authorize

1. Open your Neon Console and click "RLS Authorize"
2. Add a new authentication provider
3. Set the JWKS URL to: {YOUR_PROPEL_AUTH_URL}/.well-known/jwks.json

   Replace {YOUR_PROPEL_AUTH_URL} with your PropelAuth URL

3. Local Installation

1. Clone the repository:

git clone https://github.com/neondatabase-labs/propelauth-nextjs-neon-rls-authorize
cd propelauth-nextjs-neon-rls-authorize

2. Install dependencies:

npm install

3. Create .env file with the following variables:

# Database connections
DATABASE_URL=              # neondb_owner role connection
DATABASE_AUTHENTICATED_URL= # authenticated role connection

# PropelAuth configuration
NEXT_PUBLIC_AUTH_URL=
PROPELAUTH_API_KEY=
PROPELAUTH_VERIFIER_KEY=
PROPELAUTH_REDIRECT_URI="http://localhost:3000/api/auth/callback"

Get your PropelAuth keys from the "Backend Integration" tab:

4. Set up the database:

npm run drizzle:generate  # Generate migrations
npm run drizzle:migrate  # Apply migrations

5. Start the development server:

npm run dev

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

For comprehensive examples on implementing row-level security independently on the client-side (SQL from the frontend) and server-side (SQL from the backend), please visit the respective pages: /client-side and /server-side.

Important: Production Setup

Note: Before deploying to production, you must transition from a demo to a live PropelAuth environment:

1. In your PropelAuth dashboard, click "Go Live"
2. Set up the required DNS records for your domain as specified in PropelAuth's dashboard
3. Update your environment variables with the new production credentials
4. Update your authentication configuration in Neon RLS Authorize with the new JWKS URL

Learn More

• Neon RLS Authorize Tutorial
• Simplify RLS with Drizzle
• PropelAuth + Neon RLS Authorize

Authors

• Dhanush Reddy

Contributing

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