Securing a .NET core API using a react frontend - .net-core

Currently I have a react frontend that authenticates users using msal.js (Azure AD B2C). The backend API is built with .NET Core and currently accessible to anyone.
I would like to secure the API so that only a user authenticated on the frontend can access the API.
Is there any documentation/sample apps on how to achieve this?

Yes, you can secure the application. using React authenticate API which naturally handles the authentication which was imported by other parts of the app.
Here is the example Tutorial of creating a react App with Authentication.
The Authentication React App is based on the NPM.
here is the command that used for creating React APP auth.
create-react-app react-auth0
Also, you can go through the So thread which has related discussions.

Related

ASP.NET Core MVC and ReactJS - Sharing Authentication session

I am already having a react SPA which works with backend WebAPI.
Currently, I am making an ASP.NET Core MVC Project which has its own view pages, but needs to integrate this app in one page (I will integrate all WebAPI functions to this MVC app as well).
Since I am using Cookie based authentication on my ASP.NET Core App, I want my react app to share the same authentication session so that users doesn't need to login again.
Theoretically, everything should work well when I copy the compiled react JS files to my ASP.NET Core scripts folder and run it.
But, The challenge is debugging. When both apps works on different ports, the Authentication cookie is not shared, and my react app will not work (Both CORS and Authentication problem)
How can I run both apps on same port while development?

Azure authentication for ASP.net core API and React client

I want to implement Microsoft Azure authentication for React client and Secured asp.net core API
only authenticated users can be able to access the methods from the react client
While hosting the application building the react sources and moving them to API wwwroot folder and hosting it as ASP.net core MVC application.
for the above requirement what is the best approach
yes you can use Azure Active Directory and you can acheive using graph API's refer the link below
Graph API's

Login using Google OAuth 2.0 with .NetCore

I want to allow User to login using Gmail through the OAuth2 process.
I don't use Razor as a client it is the reason why did not use the auth template.
My stack is ReactJs and .Net core 2.2.
I have registered my Project and got Secret KEY & Client ID. Now I want to integrate it my Project but I am unable to find any sample working Project.
Thanks, Michael.

Azure mobile app backend / Azure AD B2C and aspnet core web client

I have a xamarin forms app using azure mobile app backend integrating with ADD B2C.
Following this guide: link
Authenticating B2C first and login Azure Mobile App after using previous token. Everything OK!!
Now i want to have a aspnet core web client sharing backend and authentication process.
Standard aspnet core template, works very well with B2C. So i need to login in Azure mobile app to have same userid on web and mobile app.
I know there is Azure mobile app js SDK, buy i need some sample to integrate in aspnet core template and B2c.
Thanks
Just make sure you use the same Client ID and client secret across both, and they will both use the same backend authentication. https://learn.microsoft.com/en-us/dotnet/standard/microservices-architecture/secure-net-microservices-web-applications/

Authentication using OAuth in Web API

I'm working on a project using ASP.Net MVC5 which also includes a Web API. The API will be for internal use only. I'm using the OWIN library to provider authentication.
I'm having a difficult time figuring out how to correctly implement authentication through the API. I was planning on using OAuth 2.0 but the problem with OAuth is that the user needs to login through a browser page instead of a native login screen. So I was wondering if it is possible to somehow skip the browser.
I've found this example which creates it's own OAuth Authorization Server. But it doesn't show how to make the login native.
If it's a highly trusted client, then you can use the OAuth2 resource owner password flow. You can look at the VS2013 SPA template and/or read on this post:
http://leastprivilege.com/2013/11/13/embedding-a-simple-usernamepassword-authorization-server-in-web-api-v2/
You could use Thinktecture.IdentityServer v2 as a light-weight security token service.
https://github.com/thinktecture/Thinktecture.IdentityServer.v2
You will need to create a WOPI host, which is basically a software solution that can take advantage of the browser-based Office(office web).
Create a custom WOPI host and configure it to use Office Web Apps Server to provide the browser-based file viewing and editing for Office files.
Nice sample on Microsoft MSDN

Resources