Neon Authorize + Stytch Example (SQL from the Backend)

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

Features

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

Prerequisites

• Neon account with a new project
• Stytch account with a new project (Consumer type)
• Node.js 18+ installed locally

One-Click Deploy

Deploy directly to your preferred hosting platform:

Ensure your domain is added to the Stytch project's authorized applications and allowed redirect URLs. You can add your domain in the "Frontend SDKs" tab of your Stytch project. You can add redirect URLs in the "Configuration" tab of your Stytch project.

Local Development Setup

1. Configure Stytch

1. Go to your Stytch Dashboard and copy your Project ID, Public token, and Secret.
2. In the "Frontend SDKs" page of your Stytch project, ensure the SDK is enabled.

2. Set Up Neon Authorize

1. Open your Neon Console and navigate to "Authorize".

2. Click "Add Authentication Provider".

3. Set the JWKS URL to: https://{{STYTCH_PROJECT_ENV}}.stytch.com/v1/sessions/jwks/{{STYTCH_PROJECT_ID}}

   Replace {{STYTCH_PROJECT_ENV}} with your Stytch project environment (test or live) and {{STYTCH_PROJECT_ID}} with your Stytch Project ID.

   

4. Follow the steps in the Neon Authorize UI to set up the roles. You can ignore the schema-related steps in the UI if you're following this guide.

3. Local Installation

1. Clone the repository:

   git clone https://github.com/neondatabase-labs/stytch-nextjs-neon-authorize
   cd stytch-nextjs-neon-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
   
   # Stytch configuration
   STYTCH_PROJECT_ENV=test # or live
   STYTCH_PROJECT_ID="YOUR_STYTCH_PROJECT_ID"
   NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"
   STYTCH_SECRET="YOUR_STYTCH_SECRET"

   Note: Get your Stytch Project ID, Public Token, and Secret from your Stytch Dashboard.

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.

   

Important: Production Setup

Note: Before deploying to production, ensure your Stytch project is in the "live" environment and update your .env file and the JWKS URL in Neon Authorize.

Learn More

• Neon Authorize Tutorial
• Simplify RLS with Drizzle
• Stytch Documentation
• Neon Authorize + Stytch Integration

Authors

• David Gomes
• Pedro Figueiredo
• Julianna Lamb

Contributing

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