Angular and .NET - totally confused

alan.rutter

Hi all,
I am a seasoned developer but completely new to authentication. I have read lots of articles and watched videos but all this has done is confuse the hell out of me.

I have an Angular 17 front-end application that I want to add Authentication and Authorization to. I decided to use FusionAuth as I can host it in docker locally.

My Angular application runs on the usual localhost:4200 and FusionAuth on localhost:9011. I can do login flow but when I try to call getUserInfo() from an Angular service, I am seeing a CORS error in Google Chrome console window.

I am not sure that I am going about things the right way. I will have a backend API that uses .NET Core - should I be writing auth as part of the backend using FusionAuth .NET SDK?

Do I need to use the FusionAuth Angular SDK at all?

Eventually the frontend and backend will be deployed into Azure container apps environment using a local Azure Postgresql database for Fusionauth to connect to.

Does any of this make sense?

Regards
Alan

qwandery

@alan-rutter Makes perfect sense to me, I have a very similar scenario -- building a React SPA with a custom .NET backend. Unfortunately there seems to be very little documentation for building a custom backend.

Have you looked here?
https://github.com/FusionAuth/fusionauth-javascript-sdk-express#server-code-requirements

That's what you and I both need to implement in our .NET backend. Then you should be able to use the Angular SDK to connect to it. It's just a bit irritating that there's not already a reference implementation for this.

Alex Patterson

@alan-rutter this is for sure an architectural decision, but you can use angular for the authentication side of the house, or you could pass that through your backend first.

I think what you are looking for is the former though where you are going to connect the application and it will set the cookie app.at which has the access token for the configured application. This is a JWT and can be presented to your APIs to access data and functionality.

Read more about that here: https://fusionauth.io/docs/apis/hosted-backend#prerequisites

With using our Angular SDK you will get a HttpOnly Cookie set app.at that will have the user information that you are looking for when making calls to your .NET Core API you can find these directly in those cookies as they are available within the header of a server call.

https://fusionauth.io/docs/sdks/angular-sdk

If you make calls to your backend in Angular I believe they are still using HttpRequest and make sure to set withCredentials to true.

https://angular.io/api/common/http/HttpRequest#withCredentials

My Angular application runs on the usual localhost:4200 and FusionAuth on localhost:9011. I can do login flow but when I try to call getUserInfo() from an Angular service, I am seeing a CORS error in Google Chrome console window.

You can read more about our CORS settings here but I am wondering if all you need is something like email then you can get that using the getUserInfoObservable.

class AppComponent implements OnInit, OnDestroy {
  private fusionAuthService: FusionAuthService = inject(FusionAuthService);

  isLoggedIn: boolean = this.fusionAuthService.isLoggedIn();
  userInfo: UserInfo | null = null;
  isGettingUserInfo: boolean = false;
  subscription?: Subscription;

  ngOnInit(): void {
    if (this.isLoggedIn) {
      this.subscription = this.fusionAuthService
        .getUserInfoObservable({
          onBegin: () => (this.isGettingUserInfo = true),
          onDone: () => (this.isGettingUserInfo = false),
        })
        .subscribe({
          next: (userInfo) => (this.userInfo = userInfo),
          error: (error) => console.error(error),
        });
    }
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

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!