Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidfowl/TodoApi
Todo application with ASP.NET Core Blazor WASM, Minimal APIs and Authentication
https://github.com/davidfowl/TodoApi
aspnetcore authentication blazor cookies dotnet-core jwt opentelemetry rest-api webassembly
Last synced: 2 months ago
JSON representation
Todo application with ASP.NET Core Blazor WASM, Minimal APIs and Authentication
- Host: GitHub
- URL: https://github.com/davidfowl/TodoApi
- Owner: davidfowl
- License: mit
- Created: 2021-05-04T15:37:57.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-26T05:13:39.000Z (3 months ago)
- Last Synced: 2024-03-26T06:26:25.829Z (3 months ago)
- Topics: aspnetcore, authentication, blazor, cookies, dotnet-core, jwt, opentelemetry, rest-api, webassembly
- Language: C#
- Homepage:
- Size: 1.07 MB
- Stars: 2,607
- Watchers: 71
- Forks: 390
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-blazor - TodoApi by David Fowler -   Todo application by David Fowler in .NET 7 that features an ASP.NET Core hosted Blazor WASM front end application and an ASP.NET Core REST API backend using minimal APIs. (Sample Projects / ToDos)
- awesome - davidfowl/TodoApi - Todo application with ASP.NET Core Blazor WASM, Minimal APIs and Authentication (C\#)
- awesome-stars - TodoApi
README
## Todo application with ASP.NET Core
[](https://github.com/davidfowl/TodoApi/actions/workflows/ci.yaml)
This is a Todo application that features:
- [**Todo.Web**](Todo.Web) - An ASP.NET Core hosted Blazor WASM front end application
- [**TodoApi**](TodoApi) - An ASP.NET Core REST API backend using minimal APIs
It showcases:
- Blazor WebAssembly
- Minimal APIs
- Using EntityFramework and SQLite for data access
- OpenAPI
- User management with ASP.NET Core Identity
- Cookie authentication
- JWT authentication
- Proxying requests from the front end application server using YARP's IHttpForwarder
- Rate Limiting
- Writing integration tests for your REST API
## Prerequisites
### .NET
1. [Install .NET 7](https://dotnet.microsoft.com/en-us/download)
### Database
1. Install the **dotnet-ef** tool: `dotnet tool install dotnet-ef -g`
1. Navigate to the `TodoApi` folder.
1. Run `mkdir .db` to create the local database folder.
1. Run `dotnet ef database update` to create the database.
1. Learn more about [dotnet-ef](https://learn.microsoft.com/en-us/ef/core/cli/dotnet)
### JWT
1. To initialize the keys for JWT generation, run `dotnet user-jwts` in to [TodoApi](TodoApi) folder:
```
dotnet user-jwts create
```
### Running the application
To run the application, run both the [Todo.Web/Server](Todo.Web/Server) and [TodoApi](TodoApi). Below are different ways to run both applications:
- **Visual Studio** - Setup multiple startup projects by right clicking on the solution and selecting Properties. Select `TodoApi` and `Todo.Web.Server` as startup projects.
- **Visual Studio Code** - A `compound` launch definition is provided in the `launch.json` file, use the 'Run and Debug' view and select 'Web and API' and start that profile.
- **Terminal/CLI** - Open up 2 terminal windows, one in [Todo.Web.Server](Todo.Web/Server/) and the other in [TodoApi](TodoApi/) run:
```
dotnet watch run -lp https
```
This will run both applications with the `https` profile.
- **Tye** - Install the global tool using the following command:
```
dotnet tool install --global Microsoft.Tye --version 0.11.0-alpha.22111.1
```
Run `tye run` in the repository root and navigate to the tye dashboard (usually http://localhost:8000) to see both applications running.
- **Docker Compose** - Open your terminal, navigate to the root folder of this project and run the following commands:
1. Build a docker image for the `TodoApi` directly from dotnet publish.
```
dotnet publish ./TodoApi/TodoApi.csproj --os linux --arch x64 /t:PublishContainer -c Release
```
1. Build a docker image for the `Todo.Web.Server` directly from dotnet publish.
```
dotnet publish ./Todo.Web/Server/Todo.Web.Server.csproj --os linux --arch x64 /t:PublishContainer -c Release --self-contained true
```
1. Generate certificate and configure local machine so we can start our apps with https support using docker compose.
Windows using Linux containers
```
set PASSWORD YourPasswordHere
dotnet dev-certs https -ep ${HOME}/.aspnet/https/todoapps.pfx -p $PASSWORD --trust
```
macOS or Linux
```
export PASSWORD=YourPasswordHere
dotnet dev-certs https -ep ~/.aspnet/https/todoapps.pfx -p $PASSWORD --trust
```
1. Change these variables below in the `docker-compose.yml` file to match your https certificate and password.
- `ASPNETCORE_Kestrel__Certificates__Default__Password`
- `ASPNETCORE_Kestrel__Certificates__Default__Path`
1. Run `docker-compose up -d` to spin up both apps todo-api and todo-web-server plus jaeger and prometheus.
1. Navigate to the Todo Web app https://localhost:5003.
## Optional
### Using the API standalone
The Todo REST API can run standalone as well. You can run the [TodoApi](TodoApi) project and make requests to various endpoints using the Swagger UI (or a client of your choice):
Before executing any requests, you need to create a user and get an auth token.
1. To create a new user, run the application and POST a JSON payload to `/users` endpoint:
```json
{
"username": "myuser",
"password": ""
}
```
1. To get a token for the above user run `dotnet user-jwts` to create a JWT token with the same user name specified above e.g:
```
dotnet user-jwts create -n myuser
```
1. You should be able to use this token to make authenticated requests to the todo endpoints.
1. Learn more about [user-jwts](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis/security?view=aspnetcore-7.0#using-dotnet-user-jwts-to-improve-development-time-testing)
### Social authentication
In addition to username and password, social authentication providers can be configured to work with this todo application. By default
it supports Github, Google, and Microsoft accounts.
Instructions for setting up each of these providers can be found at:
- [Github](https://docs.github.com/en/developers/apps/building-oauth-apps)
- [Microsoft](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/social/microsoft-logins)
- [Google](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/social/google-logins)
Once you obtain the client id and client secret, the configuration for these providers must be added with the following schema:
```JSON
{
"Authentication": {
"Schemes": {
"": {
"ClientId": "xxx",
"ClientSecret": "xxxx"
}
}
}
}
```
Or using environment variables:
```
Authentication__Schemes____ClientId=xxx
Authentication__Schemes____ClientSecret=xxx
```
Or using user secrets:
```
dotnet user-secrets set Authentication:Schemes::ClientId xxx
dotnet user-secrets set Authentication:Schemes::ClientSecret xxx
```
Other providers can be found [here](https://github.com/aspnet-contrib/AspNet.Security.OAuth.Providers#providers).
These must be added to [AuthenticationExtensions](Todo.Web/Server/Authentication/AuthenticationExtensions.cs) as well.
**NOTE: Don't store client secrets in configuration!**
#### Auth0
This sample has **Auth0** configured as an OIDC server. It can be configured with the following schema:
```JSON
{
"Authentication": {
"Schemes": {
"Auth0": {
"Audience": "",
"Domain": "",
"ClientId": "",
"ClientSecret": ""
}
}
}
}
```
Learn more about the Auth0 .NET SDK [here](https://github.com/auth0/auth0-aspnetcore-authentication).
### OpenTelemetry
TodoApi uses OpenTelemetry to collect logs, metrics and spans.
If you wish to view the collected telemetry, follow the steps below.
#### Metrics
1. Run Prometheus with Docker:
```
docker run -d -p 9090:9090 --name prometheus -v $PWD/prometheus.yml:/etc/prometheus/prometheus.yml prom/prometheus
```
1. Open [Prometheus in your browser](http://localhost:9090/)
1. Query the collected metrics
#### Spans
1. Configure environment variable `OTEL_EXPORTER_OTLP_ENDPOINT` with the right endpoint URL to enable `.AddOtlpExporter` below `builder.Services.AddOpenTelemetryTracing`, in the `TodoApi/OpenTelemetryExtensions.cs` file
1. Run Jaeger with Docker:
```
docker run -d --name jaeger -e COLLECTOR_ZIPKIN_HOST_PORT=:9411 -e COLLECTOR_OTLP_ENABLED=true -p 6831:6831/udp -p 6832:6832/udp -p 5778:5778 -p 16686:16686 -p 4317:4317 -p 4318:4318 -p 14250:14250 -p 14268:14268 -p 14269:14269 -p 9411:9411 jaegertracing/all-in-one:latest
```
1. Open [Jaeger in your browser](http://localhost:16686/)
1. View the collected spans