In this article, I will show you an easy way to create an application with user authentication, registration and management using ASP.NET Core 3.1 Web Api as backend and React as a frontend framework.
Open a command prompt. Navigate to your desired directory where do you want to create your project. Then execute this command.
dotnet new react -o <output_directory_name> -au Individual
Change <output_directory_name> with the name of your project. In my case I named my project as NetCoreSpa.
Open the project using visual studio 2019.
The ClientApp is your frontend application and it contains the react project files. The rest of the files are for your backend ASP.NET Core Web Api.
The contents of ClientApp is based on create-react-app template with additional generated components for the basic web application with user registration, login and logout.
Build your application by pressing CTRL + SHIFT + B, this will also download the node modules, so expect it to take some time.
When the build succeeded run your application by pressing F5. Then the react app will open to your browser.
Try to explore the app to see the things that the template provides you.
If you navigate to fetch data without logging in you will be redirected to login page.
This is because the fetch data calls the endpoint for WeatherForecast and if you have a look at the code it have the Authorize attribute on it. so you need to logged in before you can view the data.
In my next post, I will show you how to add external login like Facebook in your ASP.NET Core Web application. ASP.NET Core 3.1 with React: Facebook external login