Unsolved Angular and .NET - totally confused
-
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 -
@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-requirementsThat'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.
-
@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 theaccess 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 setwithCredentials
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(); } }
-
@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.
-
@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 -
-
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 -
@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.