Blog with ASP.NET Core and React/Redux. Part 1: Authentication

This is part of the series “Blog with ASP.NET Core and React/Redux”.

Goal for this part

The goal for the first part of the series is to make the app where you can log in and register.

All code for this part you can find in front-end and back-end repositories.

Back-end

The goal for the back-end part is to make REST API connected to the database. This API should have two endpoints so we can log in and register.

Blog.Model

Let’s start by creating the project where all our entities(users, articles, comments) will be.

$ dotnet new classlib -o Blog.Model

The first file we create in this directory will be IEntityBase.

With interface in place, we can create User entity.

Blog.Data

For now, this is all we need in Blog.Model project. Next project we want to create is Blog.Data.

$ dotnet new classlib -o Blog.Data

The first file we create in this directory will be IEntityBaseRepository. This interface will describe the basic methods that will be useful for work with entities.

Now let’s create a generic class that will implement the interface.

Now, when we want to create a new repository, we can inherit EntityBaseRepository and get basic functionality for the new repository.

The last class we want to add to the project is BlogContext that will inherit DBContext and will configure models and their relationships.

No more procrastination. You have time for goals! Increaser will guide you.

Realize your ambitions!

Blog.API

At Blog.API we will have our REST API itself. Let’s start with ViewModel user will receive after authentication. It will contain the id of the user, JWT token for authentication and it’s expiration time.

To receive this model we need auth service, that will be able to generate JWT token. Also, we put in it two methods that will hash the password and verify it.

With service in place, we can go to the Startup class and it alongside with UserRepository.

As you can see we not only inject our service but also add entity framework integration, JWT authentication, and options for JSON serializations. In Startup class, we used configuration variables for JWT authentication and database connection string. Let’s add them to appsettings.json.

And finally, it is time to create the auth controller!

In our actions, we receive ViewModels and then by using UserRepository and AuthService we authenticate/register user.

Database

The only thing left is to create a user in PostgreSQL database.

$ sudo -i -u postgres
$ psql
$ create user blogadmin;
$ alter user blogadmin with password 'blogadmin';
$ alter user blogadmin createdb;

After this, we can create and run migrations for our database.

$ cd Blog.API
$ dotnet ef migrations add InitialMigration
$ dotnet ef database update

Testing with Postman

Let’s run our back-end and send some request with Postman.

$ cd Blog.API
$ dotnet run

register

login

trying to register with existing email

Front-end

Setup

Let’s list main libraries that we will use on front-end side:

• react
• redux
• redux-saga
• redux-act
• material-ui
• styled-components

I already have an article showing what I am doing after typing create-react-app in order to set up the redux environment. So we skip part describing the process of bootstrapping app.

Implementation

Let’s start with action for the auth part.

Then, let’s create sagas for those actions.

In this sagas, we receive data from the redux form and send it to our back-end. If we receive an error, we showing those errors in form. Otherwise, we are going to start page.

Our main component for authorization is AuthForm.

Then we can use this component in our login and register pages.

Now, if you have the running back-end, you can start front-end and register!

$ npm start

For Medium readers, I provide a Udemy course How to Start React Project: Best Practices for 9.99$. The goal of this course is to share with You my findings of the last few years about what steps and decisions are better to make at the beginning of development so that you will have a good starting point for your new project.

In the next part, we will start the articles' creation feature. Stay tuned!

Reach the next level of focus and productivity with increaser.org.

Increaser