Implementing user authentication can be a difficult task, because we can use various libraries and
authentication strategies
. There are a lot of tutorials on this topic, but often times they miss fundamental information or don’t reflect set up of our project. In this blog post, I don’t attempt to write an universal tutorial for user authentication. However, I will point out some parts in authentication flow I didn’t find in other tutorials.
We will be building a user authentication in a single page application with Node, React, Redux and Koa combined with Passport. I think this is a standard set up for Node.js projects, but what we will build is principally applicable to any SPA with unidirectional data flow. We will implement local authentication, where users can log in using an email and passport. We will also add authentication with Facebook, which can be used with other social networks and
OAuth providers
.
You can find a lot of good tutorials, which will help you implement user authentication in Node.js projects, but all these projects are multiple page applications:
User Authentication with Passport and Koa
Local Authentication Using Passport in Node.js
Easy Node Authentication: Setup and Local
Build User Authentication with Node.js, Express, Passport, and MongoDB
Authenticating Users in a Node App using Express & Passport (Part One)
Authenticating Node.js Applications With Passport
If you are looking for how to implement user authentication in React.js or Redux, you will probably come across these tutorial, which are very helpful:
Secure Your React and Redux App with JWT Authentication
Tips to handle Authentication in Redux #2 introducing redux-saga
Protected routes and Authentication with React and Node.js
In preview below, you can see the result of this tutorial. You can check the source code on
Github
and deployed demo on
Heroku
.
I will be using Koa framework, which is
very similar to Express
and popular authentication middleware library
Passport
. In this project, I use Redis for:
storing user’s session information
mocking a database with users
If you are looking for how to use PostgreSQL or MongoDB in Node.js, just check tutorials in the beginning of this article. For developing single page application, we will use React, React Router, Redux, Redux-Saga, Webpack and Twitter Bootstrap.
Getting Started
We will need to have
Node
, with
npm
, installed on our machine. We will also need to install
Redis
. Once all of the prerequisite software is set up, we can create the node application with the following command:
$ npm init
You’ll be prompted to put in basic information for Node project. We will need following dependencies.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
We will also need other configuration files for React project such as webpack.config.js,
.babelrc and others, which you can see in
root folder of the project.
Below is an overview of project structure. Back-end is located in
server.js,
serverConfig.js and
auth.js files.
├── script
│ ├── controllers
│ │ └── auth.js
│ ├── views
│ │ ├── about
│ │ │ └── AboutView.js
│ │ ├── actions
│ │ │ ├── access.actions.js
│ │ │ └── modals.actions.js
│ │ ├── components
│ │ │ ├── App
│ │ │ ├── Header
│ │ │ └── LoginForm
│ │ ├── home
│ │ │ └── HomeView.js
│ │ ├── sagas
│ │ │ ├── access.sagas.js
│ │ │ ├── index.js
│ │ │ └── modals.sagas.js
│ │ ├── state
│ │ │ ├── access.reducers.js
│ │ │ ├── index.js
│ │ │ └── modals.reducers.js
│ │ └── routes.jsx
│ └── server.js
│ └── serverConfig.js
├── index.html
├── index.jsx
├── package.json
└── webpack.config.js
Building and Setting up the Server
Now, when we install all npm packages, we can start to implement the server for our Node.js project. We create server.js file in script folder.
Application Setup server.js
In the beginning of server.js file, we just add required modules and create koa application.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
