Azure AD B2C + Neon RLS Authorize Example (SQL from the Frontend and Backend)

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

Features

• Next.js application with TypeScript
• User authentication powered by Azure AD B2C
• 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
• Azure AD B2C tenant and application registration
• Node.js 18+ installed locally

One-Click Deploy

Deploy directly to your preferred hosting platform:

Important: After deployment, ensure your application's URL is added as a Redirect URI in your Azure AD B2C application registration (Platform type: Single-page application (SPA)).

Local Development Setup

1. Configure Azure AD B2C

1. Navigate to your Azure portal and access your B2C tenant.
2. Open the App registrations blade.
3. Select your application or create a new one.
4. Under Authentication, add http://localhost:3000 to the Redirect URIs. Ensure the platform is set to Single-page application (SPA).

5. Copy the Application (client) ID and Directory (tenant) ID for later use.

2. Set Up Neon RLS Authorize

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

   Replace {YOUR_DIRECTORY_TENANT_ID} with your Azure AD B2C Directory (tenant) ID which you copied earlier.

3. Local Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Create .env file with the following variables based on .env.template:

   # Database connections
   DATABASE_URL=              # neondb_owner role connection
   DATABASE_AUTHENTICATED_URL= # authenticated role connection
   
   # Azure AD B2C configuration
   NEXT_PUBLIC_AZURE_AD_B2C_CLIENT_ID=<YOUR_AZURE_AD_B2C_APPLICATION_CLIENT_ID>

   Replace <YOUR_AZURE_AD_B2C_APPLICATION_CLIENT_ID> with the Application (client) ID of your Azure AD B2C application registration.

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.

Learn More

• Neon RLS Authorize Tutorial
• Simplify RLS with Drizzle
• Neon RLS Authorize + Azure AD B2C Integration

Authors

• David Gomes

Contributing

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