Please note that this tutorial assumes you have some Javascript experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.

What is JSON Web Tokens (JWT)?

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. JWT.IO allows you to decode, verify and generate JWT.

JWT is a type of token-based authentication. The client sends the token along with every request from to the server, the server validates it and sends back the response.

What is Passport.js?

Passport is authentication middleware for Node.js. As it’s extremely flexible and modular, Passport can be unobtrusively dropped into any Express-based web application. A comprehensive set of strategies supports authentication using a username and password, Facebook, Twitter, and more.

Requirements

1. Node.js
2. mLab free account for database, create a MongoDB database, take note of the database URL.
3. Cloudinary free account for image upload.

Functionalities

1. register
2. login
3. update profile
4. upload a profile image
5. password reset

Step 1: Create new project

Create a new directory

$ mkdir nodejsapi
$ cd nodejsapi

Create the package.json
$ npm init -f

Step 2: Install Dependencies

The following packages will be used:

• express, a minimal and flexible Node.js web application framework
• bcrypt, A library to help you hash passwords.
• jsonwebtoken, An implementation of JSON Web Tokens.
• mongoose, Mongoose provides a straight-forward, schema-based solution to model your application data.
• passport, an authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application.
• passport-jwt, A Passport strategy for authenticating with a JSON Web Token.
• cors, CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
• dotenv, Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
• express-validator, express-validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.

$ npm install bcrypt express jsonwebtoken mongoose passport passport-jwt cors dotenv express-validator --save

Image Upload Dependencies

• multer: Node.js middleware for handling `multipart/form-data`.
• datauri, Node.js Module and CLI to generate Data URI scheme.
• cloudinary

$ npm install multer datauri cloudinary --save

Development Dependencies

• nodemon: nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

$ npm install nodemon --save-dev

----

# add the following to package.json scripts section
"scripts": {
    "start": "nodemon src/server.js"
},

Step 3: Create environment variables

In your project root, create a .env file.

$ touch .env

In this file, we define the JWT secret used for creating and verifying the authentication tokens. The mongo database url, the cloudinary app name, api and secret key.

Step 4: Create Folder Structure

In your project root create a src folder.

Main Folder
$ mkdir src
$ cd src

Subfolders and server.js file
$ mkdir config routes models controllers middlewares
$ touch server.js

Step 5: Configuration

In the config folder, create a new javascript file cloudinary.js, in here we will create a cloudinary instance and configure it using the API Key and API Secret and Cloud Name

Step 6: Middleware

In the middlewares folder, create the following files.

jwt.js

The Passport JWT authentication strategy is created and configured.
is created.

"fromAuthHeaderAsBearerToken() creates a new extractor that looks for the JWT in the authorization header with the scheme 'bearer'"

authenticate.js

This middleware is used to authenticate the users request. Using passport.authenticate() and specifying the 'jwt' strategy, the request is authenticated by checking for the standard Authorization header and verifying the verification token, if any.

If unable to authenticate request, an error message is returned.

validate.js

This middleware is used to check if the express-validator middleware returns an error.

If so, it recreates the error object using the param and msg keys and returns the error.

Step 7: Model

In the models folder, create the file user.js .

The User model is created using using the mongoose package. This model represent each user in the database.

pre-save hook
used to hash the user’s password using the bcrypt package whenever a user is created or their password is changed before saving in the database.
----

comparePassword method 
used to compare the password entered by the user during login to the user’s password currently in the database.

----

generateJWT method
used for creating the authentication tokens using the jwt package. This token will be returned to the user and will be required for accessing protected routes.

The token payload includes the user’s first name, last name, username and email address and is set to expire 60 days in the future.

Step 8: Controller

In the controllers folder, create two js files auth.js user.js .

auth.js
The authentication controller includes the following functions.

register
the database is queried using the email address to check if the user already exist.

If the user's doesn't exist, a new user is created and the generateJWT method is called to generate the authentication token which is then passed to the user along with the user object.

--

login

the database is queried using the email address to check if the user exist.

If the user is found, the user object is used to call the comparePassword method.

If the comparison is successful, the generateJWT method is called to generate the authentication token which is then passed to the user along with the user object.

user.js

In this file, the multer package is used to create the middleware multer_upload which accept a single file with the field name profileImage. This file is stored in req.file which is later accessed in the controller.

update

checks if the ‘request has a ‘file’ key, if so, the upload function is called passing the request and response.

If not the user id is extracted from the request, an update object is created using the request body and Mongoose findByIdAndUpdate is used to query and update the user’s data.

--

upload

the multer_upload middleware previously created is used to check if a file exist, if so, the Datauri package is used to recreate the image using the 'buffer' key in 'req.file'

The create image's content is then passed to cloudinary.uploader upload function. if the upload is successful, the url is added to the user's object and the it's saved.

Step 9: Routes

In the routes folder, create three js files auth.js user.js index.js .

index.js

The /api/auth uses the auth routes.
The /api/user uses the user routes.

A middleware is attached to the user endpoint, the middleware checks and authenticates the jwt token passed before accessing the user routes.

Step 10: Create Server

Update the server.js file.

Run the command below to start the server

npm start

<< - OUTPUT
Server running on http://localhost:3000/
MongoDB --  database connection established successfully!
>>

Testing

Use Postman to test.

User Index
Try accessing the user index. /api/user

Register
Create a POST request to /api/auth/register .

Login
Create a POST request to /api/auth/login .

Update User Info
Try updating the user information using endpoint/api/user/update passing the token from either the registration or login.

Upload Profile Image
Try uploading a profile image using endpoint/api/user/upload passing the token from either the registration or login.

Register with existing email/username
Attempt to register with the email address you used in the previous test.

In the next tutorial, we will add password reset functionality.

That’s all folks!

Related Tutorials

1. Tutorial 3b: How to Add Password Reset to Your Node.js Authentication API using SendGrid

Other Tutorials

1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package

How to Build a Node.js Authentication API using JWT, MongoDB, Express.js and Passport.js was originally published in Mesan Digital on Medium, where people are continuing the conversation by highlighting and responding to this story.

In Part 1, we created our app, installed the required dependencies, set up the project folder structure and configured the app.

In Part 2, we will create the home module.

Step 1: Setup

In the modules folder, we will create the home module, in that module, we will create 2 folders, components, and scenes and 4 js files, index.js, constants.js, action.js and reducer.js.

Make sure you are in the project root

$ cd app/modules
$ mkdir home && cd home

Folders
$ mkdir components scenes

JS files
$ touch index.js constants.js actions.js reducer.js

Index

Update the index.js file with the code below. This will be the entry point into our home module, in this file we will import the actions, constants, reducer and theme file and then export them all as part of an object.

Constants

Update the constants.js file with the code below. In this file, we will declare the name of this module, the action types to be used by redux, the Newsapi.org API url and the API key.

Step 2: Redux

Redux Actions

Update the actions.js file with the code below. First, we import the axios plugin so we can make API calls, and import the constants file so we have access to the API URL and API KEY previously declared.

Next, we create the getNewsHeadlines function in charge of calling the Newsapi.org API to retrieve the news headlines, it takes in the “country” as a parameter and defaults to “us” (United States), if the country parameter is not passed.

If the API call is successful, the returned data is dispatched to the reducer, if an error occurs, the error object is dispatched to the reducer.

The getHeadlinesBySource function retrieve the news headlines for a specific source, it takes in the “source” as a parameter.

Note that the getHeadlinesBySource does not dispatch the returned data or error to the reducer, instead it is returned to the scene that called it and that scene saves the data in its state.

Redux Reducer

Update the reducer.js file with the code below. It’s the reducer’s job to decide if it needs to modify the app state or not based on the action dispatched to it.

Root Reducer

To complete the Redux setup for this module, we will add the newly created reducer to the root reducer so how scenes can have access to them.

Update the rootReducer.js file.

Step 3: Scenes

Components

Before creating the scene, we need to first create our NewsItem component, this component will display the info for each headline, it will be a view with an image and 3 textfields for displaying the headline article image, title, date published and source.

When the source textfield is pressed, the app will navigate to a new scene that displays the headline articles for a specific source.

When the component is pressed, the app will navigate to a new scene that displays the article.

Make sure you are in the project root

$ cd app/modules/home/components
$ mkdir NewsItem && cd NewsItem

JS files
$ touch index.js styles.js

Home Scene

Our Home scene will include just a Flatlist that will be display all articles with the help of the NewsItem component.

Make sure you are in the project root

$ cd app/modules/home/scenes
$ mkdir Home && cd Home

JS file(s)
$ touch index.js

Source Scene

Our Source scene is very similar to the Home scene but it only displays articles from a specific source and also doesn’t store its data in the redux store instead it uses the scenes state.

Make sure you are in the project root

$ cd app/modules/home/scenes
$ mkdir Source && cd Source

JS file(s)
$ touch index.js

Article Scene

Our Article scene has a Webview for displaying the article using its url.

Make sure you are in the project root

$ cd app/modules/home/scenes
$ mkdir Article && cd Article

JS file(s)
$ touch index.js

Step 4: Link It all together

Routes
Now that the scenes are ready, we need to add them to our routes file, update the routes.js file.

Routes
Entry Point
We need to update the App.js file, with a reducer now available, it’s time to wrap our app’s Router with our Provider.

Run the command below to test the app, This will start a development server for you. Download the Expo app to test.

$ expo start

Thats all folks!

Related Tutorials

1. How to build a News App with React Native (Part 1)

React Native Tutorials

1. Tutorial 1: React Native Redux Boilerplate
2. Tutorial 2: React Native Redux with CRUD operations
3. How to build a React Native App using Firebase. (Part 1) (Setup)
4. How to build a React Native App using Firebase. (Part 2) (Backend)
5. How to build a React Native App using Firebase. (Part 3) (Frontend)
6. How to build a React Native App using Firebase. (Part 4)(Facebook Login)
7. How to build a React Native App using Firebase. (Part 5)(CRUD)

Other Tutorials

1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package

How to build a News App with React Native (Part 2) (Home Module) was originally published in Mesan Digital on Medium, where people are continuing the conversation by highlighting and responding to this story.

Please note that this tutorial assumes you have some JavaScript or React Native experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.

In this tutorial, we will build a News app with React Native that uses the newsapi.org API to retrieve the top headlines.

Now, that we have gotten that out of the way, LET THE CODING BEGIN!

Step 0: Register for News API key

Follow the link to register for an API key.

Step 1: Getting Started

If this is your first time creating a React Native app, make sure you have Node, npm or yarn installed. For this project, I will be using yarn and create-react-native-app which has been dubbed as the easiest way to start building a new React Native app.

There are many advantages to using CRNA, one being that it allows you to start a project without installing or configuring any tools to build native code — no Xcode or Android Studio installation required and you can install the Expo app on your iOS or Android phone for testing.

Before we begin, we have to globally install the create-react-native-app command line utility and Expo CLI using npm or yarn.

Open up your terminal and run one of the commands below depending on whether you are using npm or yarn.

$ npm install -g create-react-native-app
$ npm install -g expo-cli

or

$ yarn global add create-react-native-app
$ yarn global add expo-cli

Now that CRNA is installed, we can create a new project by running the command below:

$ create-react-native-app news-rn-app
$ cd news-rn-app/
$ npm install

Step 2: Install Dependencies

We will be using the following packages:

• Redux for managing the app’s state
• React-Redux, will be used to connect our app’s components to the redux store.
• Redux Thunk is a middleware for Redux that allows us to write action creators that return a function instead of an action.
• React Native Router Flux for our apps navigation,
• React Native Elements as our UI Toolkit,
• React Native Size Matters for scaling the size your apps UI across different sized devices,
• Axios, a promised-based HTTP client for making calls to our API
• Moment.js

$ yarn add redux react-redux redux-thunk
$ yarn add react-native-router-flux
$ yarn add react-native-elements
$ yarn add react-native-size-matters
$ yarn add axios
$ yarn add moment

Or

$ yarn add redux react-redux redux-thunk react-native-router-flux react-native-elements react-native-size-matters axios moment

Before we continue, run the command below to test the app, This will start a development server for you, and print a QR code in your terminal. If you are using the Expo app, you can scan the QR code.

$ expo start

Step 3: Create Folder Structure

For this project, I will be organizing the directory by feature/module. To find out more about organising by feature/module, read this article or this or this or this to get a better understanding and see the advantages of organizing your project this way.

In your project root create an app folder, in that folder, we will create 6 additional folders, assets, config, components, modules, redux and styles.

Make sure you are in the project root

$ mkdir app && cd app
$ mkdir assets config components modules redux styles

Config
$ cd config && touch constants.js routes.js request.js && cd ..

Redux
$ cd redux && touch rootReducer.js store.js && cd ..

Styles
$ cd styles && touch theme.js && cd ..

Or

$ mkdir app && cd app && mkdir assets config components modules redux styles && cd config && touch constants.js routes.js request.js && cd .. && cd redux && touch rootReducer.js store.js && cd .. && cd styles && touch theme.js && cd ..

Step 4: Configuration

Redux
We will configure the app for Redux. We will set up the Root Reducer and Store.

Reducer
The reducers are the in charge of updating the state of our app. In the redux folder, update the rootReducer.js file. In this file, we will import the reducers from our modules and use redux combineReducers function to merge them together into a single state object that we will later use to create our redux store.

Store
In the redux folder, create the store.js file. In this file we will create our redux store by importing our root reducer and injecting our store enhancers, i.e. Redux Thunk.

Routes
In the app/config folder, update the routes.js file. In this file we will set up our Router and Scenes, check React Native Router repo for more information about the basic setup.

For now, we will add a default scene.

Entry Point
The App.js file is the entry point into our app. In this file, we import our routes and store. We then connect our provider to our store which will let our app scenes access our app’s state and then wrap our app’s Router with our Provider.

For now, we will not wrap the app’s Router with the Provider as we don’t have any reducers yet.

Theme
Last but not least, we will create the theme file, in this file we will declare our font sizes, colors, font family and more. In the styles folder, update the theme.js file and paste the code below.

Run the command below to test the app, This will start a development server for you. Download the Expo app to test.

$ expo start

In Part 2, we will create our Home module.

Thats all folks!

Related Tutorials

1. How to build a News App with React Native (Part 2) (Home Module)

React Native Tutorials

1. Tutorial 1: React Native Redux Boilerplate
2. Tutorial 2: React Native Redux with CRUD operations
3. How to build a React Native App using Firebase. (Part 1) (Setup)
4. How to build a React Native App using Firebase. (Part 2) (Backend)
5. How to build a React Native App using Firebase. (Part 3) (Frontend)
6. How to build a React Native App using Firebase. (Part 4)(Facebook Login)
7. How to build a React Native App using Firebase. (Part 5)(CRUD)

Other Tutorials

1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package

How to build a News App with React Native App (Part 1) was originally published in Mesan Digital on Medium, where people are continuing the conversation by highlighting and responding to this story.