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

Rodion Chachura
Sep 28, 2018 · 4 min read

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

Image for post
Image for post

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

Image for post
Image for post

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.

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.

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.

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.

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

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

$ cd Blog.API
$ dotnet run
Image for post
Image for post
register
Image for post
Image for post
login
Image for post
Image for post
trying to register with existing email

Front-end

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

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.

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.

Image for post
Image for post
Increaser

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store