Example project using .NET Aspire with a Next.js (React) frontend, an ASP.NET Core backend, and Keycloak for authentication.
This project requires the following:
- .NET SDK 8.0 or later
- ASP.NET Core Runtime 8.0
- Node.js 20 or later
- Docker Desktop or Podman
To run this project, do the following:
- Start Docker Desktop or Podman if it is not already running
- Either:
- In the
AspireNextjsKeycloak.AppHostdirectory, run:dotnet run -lp httpsand then open the dashboard using the URL output to the console - Open
AspireNextjsKeycloak.slnin an IDE (e.g. Visual Studio, Rider) and run theAspireNextjsKeycloak.AppHostproject using thehttpslaunch profile
- In the
The default users are:
| Username | Password |
|---|---|
| alice | alice |
| bob | bob |
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
An ASP.NET Core minimal APIs backend which requires authorization from Keycloak.
Uses:
- Aspire.Keycloak.Authentication - Handles configuring authentication settings for Keycloak
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
Please do not use the realm data from this repository in production as the secrets are exposed to the public.