NextJS + Keycloak Demo

This repository demonstrates how to use Keycloak as an authentication broker for a Next.js v13 application.

Quick Start

npm run demo

This will automatically:

• Clean up any existing environment
• Remove previous Docker containers and tunnels
• Set up fresh environment variables
• Start Docker containers (Keycloak + Postgres)
• Create secure tunnels for external access
• Configure Keycloak
• Launch the Next.js application

Prerequisites

1. Node.js 16 or higher
2. Docker and Docker Compose
3. Cloudflared
   • macOS users with Homebrew: brew install cloudflared
   • Other platforms: Installation Guide

Manual Setup

For detailed setup instructions, see:

• Demo Guide - Quick start and basic setup
• Keycloak Setup - Detailed Keycloak configuration
• Walkthrough - Step-by-step feature exploration

Development

# Start in development mode
npm run dev

# Build for production
npm run build

# Start in production mode
npm start

Note: For local development without tunnels, set appropriate environment variables in .env.local

Blog Post

For a detailed explanation, check out our blog post

Getting Started

Run keycloak with a postgres database

docker compose up -d

Please note that the above method cannot be used for production.

Run the development server

NODE_OPTIONS='--dns-result-order=ipv4first' npm run dev

To build the project

npm run build

Open http://localhost:3000 with your browser to see the result.

To start the nextjs server(production mode)

NODE_OPTIONS='--dns-result-order=ipv4first'  npm start

Make sure to setup the environment variables.