Angular and .NET - totally confused

Alex Patterson

@qwandery I know we have a lot of examples and they are usually only a single language / framework. Would it be helpful to put together something where we have an Angular frontend with a .NET Core backend for something like a TODO list?

There are more examples listed here as well, but my guess is that you will have the same issue, of not blending two different frameworks.

https://fusionauth.io/docs/extend/examples/example-repos

alan.rutter

@qwandery - thanks for the info. I have seen that document. Wouldn't we just use our .NET backend to make HTTP requests directly to FusionAuth using the API endpoints? The frontend would make a call either directly to the .NET backend using standard fetch/axios calls or via an API gateway.

@Alex-Patterson
I have tried configuring CORS but I haven't been able to get past the error, which is why I am thinking about doing it from the backend. I want to use passwordless auth but I also need to run a check on a legacy system on the user email to see if it is registered.

I find the documentation extremely confusing.

I would dearly love to see a video and/or sample of a real world application that uses Angular, FusionAuth and .NET. Let's run it all in Azure Container Apps using Dapr and throw in an API gateway

Regards
Alan

alan.rutter

@qwandery and @Alex-Patterson

So after much reading etc I am still no closer to finding a sample implementation. Here's the flow I am looking for:

User enters email into my own UI in Angular application.
Angular application calls .NET backend API endpoint
.Net code does some checks and if ok, calls FusionAuth to start passwordless login
User enters code into Angular frontend
Backend completes passwordless login and returns JWT

Is this completely bananas or can this work and if so how do I implement it.

Thanks
Alan

mark.robustelli

@alan-rutter So, what is the purpose of the .Net backend API? Is it just to do some checks? It seems like you want your user to be authenticated in the Angular app. Is that not the case? In the scenario above, I'm not sure you need the .Net backend to be authenticated.

alan.rutter

@mark-robustelli

The Angular app is a Nx monorepo. The backend consists of multiple DotNet microservices providing data for the frontend. The backend services communicate via Dapr and queues/events, however there needs to be authentication and authorization to these.

From all my reading, the best way to do this is using Open ID Connect Authorization Code Flow with PKCE. I'm just not sure how I implement that with FusionAuth.

I am looking at the BFF pattern but I want to also use KrakenD as an API gateway. Perhaps I'm over-complicating it.

Regards
Alan

mark.robustelli

@alan-rutter Please forgive me if I am over simplifying, but if you use the Authorization Code Flow, FusionAuth will write a cookie with the JWT. From there, when you make an API call, the cookie should be sent and you can interrogate the JWT for access. Does that make sense?

alan.rutter

@mark-robustelli

Sorry Mark, no I don't understand and the documentation is as clear as mud for anyone totally new to implementing Auth. I can't find a single useful example that CLEARLY explains what I need to do and how to do it.

If I use the FusionAuth Angular SDK from my client-side Angular application running in the browser, is this secure and does this using Authorization Code Flow with PKCE?

From all my reading across various auth providers, BFF is the way to go - but I don't necessarily want my Angular app hosted by .NET.

I have a front-end Angular app - what is the most secure way to do auth?
Should I be using the Angular SDK or not?
What about session management?
I have .NET APIs that supply data to the front-end (I could call these directly but I'd like to use an API Gateway like KrakenD) - what do I need to do to achieve this?
If I want to use my own UI, how does this change things?

I've read loads of articles and documentation to the point where I don't know if I'm coming or going.

mark.robustelli

@alan-rutter , Totally understandable. We are going to try to put together a sample that should help make sense of things. Will get back when we have something.

tanguy.e

@mark-robustelli

Hello sir,

I am in a similar situation as Alan. I am working on a project with .NET Core API (microservices) as a backend and Angular as a frontend.
I want to use FusionAuth to handle the authentication and the authorizations of the users (it is too much of a hassle to handle the security of such things on my own, regarding the password and stuff).

I have been searching hopelessly for a tutorial that explains where to use what, where should I use FusionAuth, only in the frontend? But how about authorizations in the backend? Should it be only in the backend and the frontend would make calls to it?

Is there a possibility that you know by which end I should take this problem?

Thanks a lot!

alan.rutter

@tanguy-e

I have so far managed to authenticate on the front-end in the Angular app using the hosted FusionAuth pages and the FusionAuth Angular-SDK. I can see the cookies using DevTools. I haven't figured out yet how to retrieve a user's roles.

I am planning to use KrakenD as a gateway to the .NET Core backend so I need to set up auth between it and FusionAuth.

The FusionAuth Angular SDK is quite limited in functionality - I am planning to maybe switch over to the FusionAuth Typescript SDK which has a lot more functionality built-in.
Perhaps you should check that out.

Happy to discuss implementations with you whilst we wait for the hopefully quite detailed) reference sample.

Regards
Alan

tanguy.e

@alan-rutter

Thank you for your answer, I will check that out, but it is really blurry in my mind as of now!