AspireNextjsKeycloak

Example project using .NET Aspire with a Next.js (React) frontend, an ASP.NET Core backend, and Keycloak for authentication.

Requirements

This project requires the following:

• .NET SDK 8.0 or later
  • ASP.NET Core Runtime 8.0
• Node.js 18.18 or later
• Docker Desktop or Podman

Running

To run this project, do the following:

1. In the AspireNextjsKeycloak.Web directory, run: npm install
2. Start Docker Desktop or Podman if it is not already running
3. Either:
   • In the AspireNextjsKeycloak.AppHost directory, run: dotnet run -lp https and then open the dashboard using the URL output to the console
   • Open AspireNextjsKeycloak.sln in an IDE (e.g. Visual Studio, Rider) and run the AspireNextjsKeycloak.AppHost project

The default users are:

Username	Password
alice	alice
bob	bob

Projects

AspireNextjsKeycloak.AppHost

An Aspire app host which handles orchestration and hosts the Aspire dashboard.

Uses:

• Aspire.Hosting.Keycloak - Handles starting up the Keycloak container and importing the realm data
• Aspire.Hosting.NodeJs - Handles launching and configuring the Node.js-based frontend project

AspireNextjsKeycloak.ApiService

An ASP.NET Core minimal APIs backend which requires authorization from Keycloak.

Uses:

• Aspire.Keycloak.Authentication - Handles configuring authentication settings for Keycloak

AspireNextjsKeycloak.Web

A Next.js frontend using the App Router and React Server Components that authenticates the user and displays data from the backend.

Uses:

• OpenTelemetry - Adds observability to the Next.js server (modified to support gRPC endpoints when using the Node.js runtime)
• NextAuth.js (a.k.a. next-auth) - Handles the auth flows
• Material UI (a.k.a. MUI) - Provides Material Design 2-based components for React

Notice

Please do not use the realm data from this repository in production as the secrets are exposed to the public.