In this tutorial, we are going to cover a very simple example on how to add authentication to React app using Asp.Net Core 3 application in visual studio 2019. Asp.Net Core 3 offers authentication in single page application using the support of Asp.Net Core Identity. So, in this tutorial, we will create an React app with authentication using Asp.Net Core 3 and then we will see how it works.
- how to add authentication and authorization to Angular 6 application using Asp.Net Core and Auth0.
- Asp.Net Core 3.0 web API token based authentication example using JWT in VS2019
- How to add Authentication to Angular 7 app using Asp.Net Core 3 in Visual Studio 2019
Prerequisites for this tutorial
Before going to next, you need to install these below dependencies.
.NET Core 3.0:
To install the .NET Core 3.0, just click here to go to site and download the specific .Net Core installer according to your machine. Once the download is complete, then click on the installer to install the .Net Core 3.0 on your system.
Visual Studio 2019 Preview:
To install visual studio 2019, just click here to go to visual studio site and download the visual studio 2019 preview. Once the install is download, then click on the visual studio 2019 installer. Then it will take some time to install.
How to add authentication to React app using Asp.Net Core 3 and Identity.
Let’s see how to add authentication to React app using Asp.Net Core 3 and Identity.
Step # 1: Create a React app with Authentication using Asp.Net Core 3
So, now in this step, we will create a React app with authentication using Asp.Net Core 3. So, open visual studio 2019, then click on Create a new project and then select Asp.Net Core Web Application and then click on the Next button. Then enter the project name(E.g. AuthwithRectandCore3) in the project name field and then click on Create button. Then select Asp.Net Core 3.0 framework from dropdown and then select React template from the template’s list.
Now, click on Change link just under the Authenticate label from the right sidebar and then you will see a new popup window with the name of Change Authentication. Then click on Individual User Account radio button and then click on the OK button as you see in the below screenshot.
And then it will create an Asp.Net Core 3 app with a ClientApp directory containing the React as a single page application and built-in support of Identity Server instance as you see in the below screenshot.
Or we can also create a React app with Asp.Net Core 3 using this below command.
dotnet new React --auth Individual
this above command will also create the same project as we have created in the above using visual studio 2019.
Now, run this project by pressing f5 and then you will see the output as you see in the below screenshot.
Now, click on Fetch data link, and then it will redirect you to login page as you see in the below screenshot. This is because, the authentication is enabled.
Now, click on the Register link and then create a new user using Email and Password as you see in the below screenshot.
After registering a new user successfully, you will be able to access Fetch data link
Let’s understand the project code.
So, go to project folder structure and then open Startup.cs file and then you will see the code in the ConfigureServices method as you see in the below file code.
Line # 1: here added default identity server.
Line # 3: here added Identity Server with as additional AddApiAuthorization helper method that setups some default Asp.Net Core conventions on top of Identity Server.
Line # 5: here added Authentication with an additional AddIdentityServerJwt helper method that configures the app to validate the Jwt tokens.
Now, open appsettings.json file and then you will see the IdentityServer section that describes the list of configured clients.
And here below is the react app authorization component added just under the ClientApp folder.
Thank you for reading. Please keep visiting and sharing this blog.
In a MVC application we can edit the defaults pages like login or register “/Areas/Identity/Pages” but in this type of project i I can’t find the folder where the files are