Example project using Aspire with a Next.js (React) frontend, an ASP.NET Core backend, and Keycloak for authentication.
This project requires the following:
- .NET SDK 10.0.100 or later
- Node.js 20.9.0 or later
- Docker Desktop or Podman
To run this project, do the following:
- Start Docker Desktop or Podman if it is not already running
- Use one of the following:
- .NET CLI: In the
AspireNextjsKeycloak.AppHostdirectory, rundotnet runand then open the dashboard using the URL output to the console. - Aspire CLI: In the repo directory, run
aspire runand then open the dashboard using the URL output to the console. - Code Editor/IDE: Use the run command in a code editor or IDE such as Visual Studio Code.
- .NET CLI: In the
The default users are:
| Username | Password |
|---|---|
| alice | alice |
| bob | bob |
An Aspire AppHost 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.JavaScript - 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)
- Better 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.