Angular integration example with FastEndpoints

[EelcoLos]

tracking: https://discord.com/channels/933662816458645504/1298932262683017228

Original Discussion

Hi. Is there any example of integration FastEndpoints with Angular application using client ts generation and Identity model for registration / login process? For example something similar to this: https://github.com/jasontaylordev/CleanArchitecture

Hey there,
I'm working in various implementations of angular/ts generation/identity model.
which thing are you looking for?

Looking at your example reference, this situation would refer to Identity and angular being in the same end solution. That means the identity management is solely done at the dotnet side of things and angular ending up in the wwwroot folder of the dotnet file structure.
If that is what you want, the example is one way to go. In my humble opinion, I would steer away from the dotnet project template and just use angular seperatly, so you're not intermixing the two. It does work with the template as well, using the angular workflow for dotnet.
In the past, I did have a project where the angular solution was seperate as well. This will require you to set up a jwt identity workflow, which is available on the documentation page of fast-endpoints too. This also requires some wireup on the angular and dotnet side as well. If that is what you want, please say so, so I can mention some documentation

On the typescript generation side of things, I solely have the experience of using nswag as generator. NSwag has an angular specific generator, which makes it way easier.
I am aware that there is a generic typescript kiota generator. I did get it to work, but this will require you to do a lot more wiring on the angular end, which I did not get to work so far.

Strikeman Thanks. That was really FastResponse 😆 Basically I am starting to work on a .NET + Angular MVP, which might become something bigger after. I worked a lot with both backend and frontend in same solution and totally different projects. The reason why I was thinking to at least have them in the same repo, is to take use of typescript api generators like in referenced example. I also noticed that kiota generator is much more generic and requires tuning, in comparision with nswag angular specific.

Do you have referenced example of configuration both backend and frontend part so it will work with jwt identity + .NET identity and nswag generators? Thank you again for such detailed answer 🙂

Do you have existing setup example of Nswag angular client generation with FastEndpoints ?

I would say yes 🙂 Or at least Nswag generator for fastendpoints. I found example of integration of angular and fastendpoints, but not with Nswag genegator

Description

Create an angular integration example with FastEndpoints.

Current Options

using the 'default' dotnet new angular cli command will create a dotnet application with controllers and angular 15.

Requested Behavior

Have 2 projects: 1 with dotnet using FastEndpoints and 1 Angular 18 project, but still being able to communicate with one another.

Angular certficate

For the angular project that means it needs to communicate over https, which needs to be set. this can be done creating the dotnet dev-cert, using dotnet dev-certs https ssl/localhost.pem -np --format pem. do keep in mind that the ssl directory has to exist before creating the certificate.

angular local development proxy

Also, for the proxy to work you would need a proxy.config.js like this:

const PROXY_CONFIG = [
  {
    context: [
      '/api',
      '/scim',
      '/signout',
      '/signin-oidc',
      '/swagger',
    ],
    target: 'https://localhost:5001',
    secure: false,
    logLevel: 'debug',
  },
];

module.exports = PROXY_CONFIG;

to be referenced in the angular.json serve section:

 "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
            "sslKey": "ssl/localhost.key",
            "sslCert": "ssl/localhost.pem",
            "ssl": true,
            "buildTarget": "build:development"
          },
          "configurations": {
            "production": {
              "buildTarget": "build:production"
            },
            "development": {
              "proxyConfig": "proxy.conf.js",
              "buildTarget": "build:development"
            },
            "defaultConfiguration": "development"
        },

Action plan

Dotnet project

1. create a dotnet minimal api solution in the apps folder called dotnet-fe-auth
2. add fastendpoints packages for swagger and security
3. create a TokenHandler class with a method called GenerateToken which takes an email and password. The password is validated to a secure but dev-like static password.
4. have a fastendpoint api login allowanonymous post endpoint with the LoginRequest (email and password) triggering the GenerateToken
5. Have a secure 'test' endpoint which has a request password like

public class MyEndpoint : Endpoint<MyRequest, MyResponse>
{
    public override void Configure()
    {
        Post("/api/user/create");
    }

    public override async Task HandleAsync(MyRequest req, CancellationToken ct)
    {
        await SendAsync(new()
        {
            FullName = req.FirstName + " " + req.LastName,
            IsOver18 = req.Age > 18
        });
    }
}

with request

public class MyRequest
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
}

and response

public class MyResponse
{
    public string FullName { get; set; }
    public bool IsOver18 { get; set; }
}

6. Have an nswag.json file in the project, similar to this, but with the correct outputs

{
	"runtime": "Net80",
	"defaultVariables": null,
	"documentGenerator": {
		"aspNetCoreToOpenApi": {
			"project": "dotnet-fe-auth.csproj",
			"documentName": "v1",
			"msBuildProjectExtensionsPath": null,
			"configuration": null,
			"runtime": "Net80",
			"targetFramework": null,
			"noBuild": true,
			"msBuildOutputPath": "../../dist/apps/dotnet-fe-auth/net8.0",
			"verbose": true,
			"workingDirectory": null,
			"aspNetCoreEnvironment": null,
			"output": "wwwroot/api/specification.json",
			"newLineBehavior": "Auto"
		}
	},
	"codeGenerators": {
		"openApiToTypeScriptClient": {
			"className": "{controller}Client",
			"moduleName": "",
			"namespace": "",
			"typeScriptVersion": 4.3,
			"template": "Angular",
			"promiseType": "Promise",
			"httpClass": "HttpClient",
			"withCredentials": false,
			"useSingletonProvider": true,
			"injectionTokenType": "InjectionToken",
			"rxJsVersion": 7.0,
			"dateTimeType": "Date",
			"nullValue": "Undefined",
			"generateClientClasses": true,
			"generateClientInterfaces": true,
			"generateOptionalParameters": true,
			"exportTypes": true,
			"wrapDtoExceptions": false,
			"exceptionClass": "SwaggerException",
			"clientBaseClass": null,
			"wrapResponses": false,
			"wrapResponseMethods": [],
			"generateResponseClasses": true,
			"responseClass": "SwaggerResponse",
			"protectedMethods": [],
			"configurationClass": null,
			"useTransformOptionsMethod": false,
			"useTransformResultMethod": false,
			"generateDtoTypes": true,
			"operationGenerationMode": "MultipleClientsFromOperationId",
			"markOptionalProperties": true,
			"generateCloneMethod": false,
			"typeStyle": "Interface",
			"enumStyle": "Enum",
			"useLeafType": true,
			"classTypes": [],
			"extendedClasses": [],
			"extensionCode": null,
			"generateDefaultValues": true,
			"excludedTypeNames": [],
			"excludedParameterNames": [],
			"handleReferences": false,
			"generateTypeCheckFunctions": false,
			"generateConstructorInterface": true,
			"convertConstructorInterfaceData": false,
			"importRequiredTypes": true,
			"useGetBaseUrlMethod": false,
			"baseUrlTokenName": "API_BASE_URL",
			"queryNullValue": "",
			"useAbortSignal": false,
			"inlineNamedDictionaries": false,
			"inlineNamedAny": false,
			"includeHttpContext": false,
			"templateDirectory": null,
			"serviceHost": null,
			"serviceSchemes": null,
			"output": "../angular-auth-example/src/api-integration/api.ts",
			"newLineBehavior": "LF"
		}
	}
}

Angular

1. Create a new Angular project, named 'angular-auth-example'
2. have the aforementioned proxy.config.js created
3. have the certificate npm script made
4. update the serve with the aforementioned serve targets
5. create a form with firstname, lastname and age. When this form is valid, send it via the api.ts which was made with nswag. The result should show on this page too
6. create a login guard, which also leads to a custom login page, to have the email and password