DEV Community: Mukhtar

A Beginner's Guide to Building Powerful APIs with GraphQL

Mukhtar — Thu, 02 Mar 2023 23:27:44 +0000

An API(Application Programmable Interfaces) is a way that enables computer programs to communicate easily with each other, APIs are used for performing a lot of functions which include Data Exchange, Automation and Integrating your application with other systems.

GraphQL Is a language that can be used for Data Query and manipulation in APIs. GraphQL has made a lot of work easier for developers like improved API performance, and flexibility, in the sense that it allows the client to request only the data it needs and also it is strongly typed making it easier to catch errors.

In this lesson, you are going to learn how to query and manipulate data using GraphQL, I guess you are ready😉

Prerequisites

This service will be built with Node.js and Express.js, Even though you don't need to know Node.js having an understanding of it is an advantage.

Code Editor, I am using VsCode
A database, I'll be using MongoDB
Understanding of Javascript

Getting Started

Setting up codebase

In the directory you want to build the project you can type this in your terminal to create the folder

mkdir graphql-lesson

Then Open the folder with VsCode with this command below

cd graphql-lesson
code .

We want to create a package.json file you can do that quickly by running this command in your terminal

npm init -y

Since we'll be using ES6 throughout this lesson we'll need to add type:module in the package.json file.

We need to create all files and folders we'll be using to build this project, You can easily do that by running this command in your terminal.

mkdir model
touch index.js resolvers.js typeDefs.js model/user.js connect.js

And your folder should look like this :

Installing Dependencies

We need to install some dependencies, you can easily do this by running the command below in your terminal

npm install dotenv bcryptjs express express-graphql graphql mongoose nodemon @graphql-tools/schema

In the scripts section in package.json we are going to add this code :

"scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
}

We want our server to automatically restart when we make changes, which is the main reason why i added "dev" with the value set to "nodemon index.js".

Creating server

We want to create our server with express.js, But before doing that we want to make sure we connect files that include database connection, Type definitions and resolvers.

Connecting to database

We'll be connecting to our database where users details will be stored, you can easily do this by copying this code below into the connect.js file :

import express from "express";
import mongoose from "mongoose";
import "dotenv/config";
const app = express();

mongoose.set("strictQuery", false);

mongoose
  .connect(process.env.MONGO_URI_LOCAL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("DB Connected!"))
  .catch((err) => {
    console.log("not able to connect to database"+ err);
  });

export default app;

Connecting Type Definition file

Type definitions in GraphQL define the structure of your data and the operations that can be performed on that data.

Since we will be needing type definitions in GraphQL, we want to set up an example code in the typeDefs.js file, you can easily do that by copying the code below :

import { buildSchema } from 'graphql';

export const typeDefs = buildSchema(`
  type Query {
    message: String
  }
`
);

Connecting Resolvers file

Resolvers in GraphQL are functions that resolve the data for a single field in a query or mutation.

Since we will be needing resolvers, we want to set up an example code in the resolvers.js file, you can easily do that by copying the code below :

export const resolvers = {
    Query : {
        message : () => 'Hello!'
    }
}

Creating a server with express.js

Now we want to create our server with express.js, You can do that easily by copying this code below into the index.js file :

import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import "./connect.js";
import { typeDefs } from './typeDefs.js';
import { resolvers } from './resolvers.js';
import { makeExecutableSchema } from '@graphql-tools/schema';
const app = express();

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

app.use('/graphql', graphqlHTTP({
    schema: schema,
    graphiql: true,
}))

app.listen(8000, () =>{
    console.log(`Running a GraphQL API server at localhost:8000/graphql`)
})

You can start your server with the npm run dev command, your graphQL playground should be accessible at http://localhost:8000/graphql.

Adding secret variables to .env file

We need to add Secret variables to the dotenv(.env) file, firstly you can create the file with this command touch .env , Then get your MongoDB Local URI from Mongo Atlas connection string section, Your Local URI should be similar to this below :

MONGO_URI_LOCAL=mongodb://127.0.0.1:27017/your_database_name

Creating user model

The Next thing we want to do now is create a user model, this is the blueprint of how the user data will be stored, You can easily copy this code below

import mongoose from "mongoose";
const Schema = mongoose.Schema;

const UserSchema = new Schema({
    email: {
        type: String
    },
    name: {
        type: String
    },
    about: {
        type: String
    },
    password: {
        type: String
    }
})

export default mongoose.model('User', UserSchema);

Creating a new user with Graphql

We want to create a new user, These are the essential requirements for creating a new user :

Input Type: This is a type that allows you to pass arguments to a field, It is simply the blueprint of the input details that will be collected from the user.
Object Type: As I explained above it defines the structure of your data.
Mutation Type: This is used to define GraphQL operations, It contains Mutations that can take input arguments and then send a return type.
Resolver: This is a function that is used to resolve the data for a single field

Now Let's start according to the essentials above

Creating Input type

As explained above, The Input object type is a blueprint of input details that will be collected from the user. We want to collect the name, email, password and about from the user and also name the input type UserInput, you can do that easily by defining a new type with the "input" keyword and then all the fields you want to collect and their types. This will be our UserInput :

input UserInput {
      name: String!
      email: String!
      password: String!
      about: String
    }

You should insert it into typeDefs variable in typeDefs.js file

Creating user object Type

An object type is a data type that represents an object, it consists of fields that define the properties of an object, It defines the structure of the data that can be returned in a graphQL API. We want our User type to be able to return the id, name, email and about of a user. Our graphQL API will be able to return all these but what a user receives is dependent on the field they insert in the query. don't fret I'll show you what I mean by that soon.

You can create the user type easily by copying this code below :

type User {
    _id: ID!
    name: String!
    email: String!
    about: String
  }

And then you should insert it into typeDefs variable in typeDefs.js file.

Creating a createUser resolver

As explained above a resolver resolves the data for a single field in a query or mutation.

We want to make sure the resolver collects the name, email, password, confirm_password and about from a user then encrypts the password using bcryptjs if it matches confirm password.

Now the first requirement is to specify the operation which is Mutation, you can easily do that by inserting a Mutation object into the resolvers variable in resolvers.js file and then inserting the resolver function in it :

Mutation : {
    createUser : async (_, { input }) => {
            const { name, email, password, confirm_password, about } = input;
            if( password == confirm_password ){
                const encrypted_password = await bcrypt.hash(password, 12);
                const new_user = new User({ name, email, password: encrypted_password, about });
                await new_user.save();
                return new_user;
            }else{
                throw new Error('Password does not match');
            }
        }
}

Creating Mutation type and Mutation operation for createUser

What we want to do now is create a mutation type and then insert the createUser operation which will contain the input argument and then return the user.

You can do that easily by copying the code below and inserting it in the typeDefs variable in typeDefs.js file :

type Mutation {
    createUser(input: UserInput): User
  }

Getting user details with GraphQL

We want a user to be able to send details of a user when an Id is provided, these are the steps needed to accomplish this :

We need to create a query resolver which will be named getUserById, it will collect the Id of a user and then return the user object if found in the database.
We will then create a query operation that is going to take Id as an argument and then return the user type

Creating a resolver for getUserById

As mentioned above this resolver will collect the user id and then return the user if found, you can easily do that by inserting the code below into the query object in the resolvers variable that is in resolvers.js file :

getUserById : async (_, { id }) => {
            const user = await User.findById(id);
            if(user){
                return user
            }else{
                throw new Error('User does not exist');
            }
        }

Creating a query operation for getUserById

Now we need to create a query operation that will accept id as an argument and then return the user type, you can do that easily by copying the code below into the query type in the typeDefs variable which is in the typeDefs.js file :

getUserById(id: ID!): User

Updating User details with GraphQL

What we want to do now is to be able to update a user's details when an id is provided and the field they want to update. To be able to achieve this we are going to follow these steps

We need to create a resolver that will collect user id and input and then update the data, this resolver will be named updateUser.
We need to create a mutation operation that collects the Id and input as arguments and then returns the user type.

Creating a resolver for updateUser

As explained above the updateUser resolver will be taking the id of the user and the field that needs to be updated, you can easily create this resolver by copying the code below :

updateUser: async (_, { id, input }) => {
            const updatedUser = await User.findByIdAndUpdate(id, input, { new: true });
            return updatedUser;
          }

And then insert it into the Mutation object in the resolvers variable which is in resolvers.js file.

Creating a mutation operation for updateUser

What we want to do now is create the updateUser mutation operation, this operation will collect the id, and the field the user wants to update and then return the user type, you can do this easily by copying the code below :

updateUser(id: ID!, input: UserInput!): User!

And then insert it into the mutation type in the typeDefs variable which is in typeDef.js file.

Deleting User with GraphQL

We want to be able to delete a user with GraphQL, these are the steps you'll be following in achieving this.

Create a resolver that will collect the user's Id and then delete the user details, this resolver will be named deleteUser
Create a mutation operation that will accept the User's Id as an argument and then return the user type

Creating a resolver for deleteUser

This resolver function will take the user's Id and then delete the data from the database, This can be done easily by copying the code below :

deleteUser: async (_, { id }) => {
        const deletedUser = await User.findByIdAndDelete(id);
        if (!deletedUser) {
            throw new Error(`User with ID ${id} not found`);
        }
        return deletedUser;
        }

An then inserting it into the Mutation object which is in the resolvers variable in resolvers.js file.

Creating a mutation operation for deleteUser

The next thing we want to do is create the deleteUser mutation operation, it will accept Id as an argument and then return the user type, this can be done easily by copying the code below :

deleteUser(id: ID!): User

And then insert it into the mutation type in the typeDefs variable which is in typeDef.js file.

Testing APIs

Now we want to test the CRUD operation, we'll be using the GraphQL playground which can be accessed through http://localhost:8000/graphql in your browser.

Note: Make sure the server is running.

Create User API

To create a User we will specify the operation we are going to be using which is the mutation operation, and specify the mutation operation name which is createUser, then the argument will contain the input key and all the fields we'll be collecting from the user, It should look like this :

Then to execute query, you'll click on the execute query button that looks like a play button, we should get this as our result :

It means a new user was created successfully.

Get User Details API

To get User details, we will specify the operation we are going to be using which is the query operation, and specify the mutation operation name which is getUserById, then the argument will contain the id and then the detail or details we want to get from the return type. it should look like this :

After executing the query the result should look like this :

Update User Details API

To update user details, we will specify the operation we are going to be using which is the mutation operation, and specify the mutation operation name which is updateUser, then the argument will contain the id and finally the detail we want to get from the return type. it should look like this :

After Executing the query the result should look like this :

Delete User API

To delete a user, we will specify the operation we'll be using which is the mutation operation, and specify the mutation operation name which is deleteUser, then the argument will contain the id and finally the detail we want to get from the return type. it should look like this :

After executing the query the result should look like this :

Conclusion

In conclusion, GraphQL provides a very powerful and efficient way to create CRUD APIs which allows developers to retrieve only the data they need, It helps reduce network round trips, and simplifies API versioning.

The full code is available Here

You've come this far thanks for reading, you can follow me on Twitter, GitHub or LinkedIn for more backend development tips.

Using ChatGPT to build a pizza delivery service

Mukhtar — Sat, 14 Jan 2023 09:25:59 +0000

ChatGPT is a chatbot launched by OpenAI, It can generate questions to your answers within its knowledge, We'll be using it to build a Pizza delivery service, and if the results we get from it aren't what we expect, then we are going to tweak them to our liking.

You can easily set up an account by following this link.

Pizza delivery is a highly competitive and demanding industry, with customers expecting fast, accurate, and reliable service. The ability to quickly and efficiently fulfill orders is key to success in this market. In this guide, we will outline the steps and considerations involved in creating a pizza delivery service with chatGPT

Getting Started

Setting up codebase

We'll be using ChatGPT and Node.js to build the Pizza delivery service, You need to setup your codebase, After running npm init -y in your terminal, You can easily create folders and files by running this command below in your terminal:

mkdir config controllers middlewares models routes

touch config/connect.js controllers/maincontroller.js controllers/authcontroller.js middlewares/auth.js models/user.js routes/mainroute.js routes/authroute.js .gitignore app.js index.js

Creating your server

Now you want to create a server with express.js this can be easily done by adding this code into the app.js file :

import express from "express";
import cors from "cors"
import connect from "./config/connect.js";
import authroutes from "./routes/authroute.js"
import mainroutes from "./routes/mainroute.js"
const app = express()

app.use(connect)
app.use(
    express.urlencoded({
      extended: false,
    })
  );

app.use(cors())
app.use(express.json());
app.use(authroutes)
app.use(mainroutes)
export default app

And This in your index.js file :

import "dotenv/config"
import app from "./app.js";
const port = process.env.PORT

app.get("/", (req, res) =>{
    res.send("Pizza delivery service")
})

app.listen(port, () =>{
    console.log(`app is running at ${port}`)
})

Installing dependencies

You'll be installing all dependencies needed by running this command below in your terminal :

npm i mongoose dotenv express jsonwebtoken bcryptjs nodemon

Now you'll add "dev": "nodemon index.js" to scripts in package.json file and "type": "module", the former is for the server to restart automatically and the latter is to enable ES6 modules, your package.json file should look like this:

{
  "name": "pizza-delivery-service",
  "version": "1.0.0",
  "description": "A pizza delivery service built with chatGPT",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.0",
    "mongoose": "^6.8.3",
    "nodemon": "^2.0.20"
  },
  "type": "module"
}

Creating a .env file and adding necessary environment variables

In your .env file you are going to add

Mongo DB URI
JWT SECRET KEY
PORT Number

You can add all of them by copying this code below :

MONGO_URI_LOCAL=mongodb://127.0.0.1:27017/pizza-delivery
JWT_SECRET_KEY=e98f6a81f9d84b6d7b6a9a0a04dfc5d5f5f1761f0b827dd2db9e5b5e5fae58f
PORT=8080

Note: I am using Local MongoDB on My computer.

Connecting to your database

You can easily connect to your database using this code below :

import express from "express";
import mongoose from "mongoose";
import "dotenv/config";
const app = express();

mongoose.set("strictQuery", false);

mongoose
  .connect(process.env.MONGO_URI_LOCAL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("DB Connected!"))
  .catch((err) => {
    console.log("not able to connect to database"+ err);
  });

export default app;

Creating Schema

Creating a user schema

Now we want to create a schema in the user.js file, I sent create a schema that contains email, name, role and address in mongodb and it gave me this :

As we stated above that we'll be using module, you'll just need to change const mongoose = require('mongoose'); to import mongoose from "mongoose"; and the last line to export default mongoose.model("User", UserSchema)

Creating an order schema

Now we want to create an order schema, you'll create a new file and name it order.js in the models folder, you can easily do that by running this command in your terminal :

touch models/order.js

To Create the order schema i sent create an order schema that includes customer, pizza, size, createdAt and status where customer is referencing user and pizza has enum containing 'Neapolitan Pizza', 'Chicago Pizza', 'Sicilian Pizza', 'Greek Pizza', 'Detroit Pizza', size has enum containing 'small', 'medium', 'large' and status has enum containing 'pending', 'in progress', 'completed' To chatGPT and i got this :

Since the type is module, you'll just need to change const mongoose = require('mongoose'); to import mongoose from "mongoose"; and the last line to export default mongoose.model("PizzaOrder", PizzaOrderSchema)

Creating SignUp and SignIn controller

Signup Controller

Now I'll tell chatGPT to build a signup controller for me letting it know all the tools I'm using let's see how well it does.

We want to make sure only two roles are available in the service that is the delivery personnel and the user role

Note: We are creating these two roles alone to keep it simple.

User: Is going to order the type of pizza they want among the five main types our service offers
Delivery Person: Is going to get the order and deliver the pizza to the user's address.

Note: I told chatGPT my Javascript is module based.

I sent create a signup controller that checks if a user exists, if they don't exist create a new user collecting their email, name, role and address and then create a JWT with user id and email in payload and JWT_SECRET_KEY as secret key to chatGPT and it gave me this

SignIn Controller

Now I'll tell chatGPT to build a SignIn controller, Let's see how well it does.

Before we continue I forgot to add password to the user schema and also save the encrypted password into the database from the signup controller so I'm going to add this code to the user.js file in the UserSchema declaration:

password: {
        type: String
    }

And Add this in the signup controller Below the If statement checking if the user exists:

const password = req.body.password;
const encryptedPassword = await bcrypt.hash(password, 12);

And then add password: encryptedPassword into the schema instance making the complete User schema instance look like this :

const user = new User({
            email: req.body.email,
            name: req.body.name,
            role: req.body.role,
            address: req.body.address,
            password: encryptedPassword
        });

I sent build a signin controller that checks if a user exists, if they do check if the password matches with bcryptjs, if does create a JWT with id and email in payload and send it as a response to chatGPT and it gave me this :

Testing SignUp and SignIn endpoints

Testing Signup endpoint

To be sure we are on the right path we'll test the controllers built so far before starting the main service.

I sent Create a route for the signup controller with endpoint name set to signup using module type to chatGPT and it gave me this

I'll add this code above into my authroute.js file, then in the app.js I'll add these below

import authroutes from "./routes/authroute.js"

app.use(authroutes)// this below app.use(express.json())

I tested the endpoint and it worked fine as seen below :

Testing SignIn endpoint

I imported SignIn controller and then created /signin endpoint using router this way :

import {signup, signin} from '../controllers/AuthController.js';

router.post('/signin', signin);

I tested the endpoint and it also worked fine :

Creating controllers for the Pizza service

Get all pizzas controller

This controller will be connected to an endpoint that shows users all the types of pizzas we have, you'll add this into the maincontroller.js file

I sent if all pizzas available are 'Neapolitan Pizza', 'Chicago Pizza', 'Sicilian Pizza', 'Greek Pizza', 'Detroit Pizza' create a controller to list all of them to chatGPT I got this :

Create Order Controller

This is the controller that'll be used to create a new pizza order, I sent Write a controller where a user can order pizza referencing the customer to userid, collecting the type of pizza they want, the size, setting the status to pending and setting createdAt to the time the order was created in module js And I got this :

This code above will also be added into the maincontroller.js file.

View Pending Orders

Before we go any further I remember I didn't add the role as a payload in the JWT, so I'm going to do that in the SignUp and SignIn controller like this :

const token = jwt.sign({ id: user._id, email: user.email, role: user.role }, JWT_SECRET_KEY);

The pending orders controller will be used to see all pending orders, I sent write a controller so the delivery man and user can see all pending orders and I got this :

This also will be added into the maincontroller.js file.

Update Status as a delivery personnel

This is the controller the delivery personnel will use to update the order status, I sent write a controller to check if the role is delivery personnel and then update order status and I got this :

This also will be added into the maincontroller.js file.

Creating and Testing Pizza Service endpoints

Now we want to create endpoints for all the pizza delivery service controllers we created earlier, I sent The createOrder, getPizzas, getPendingOrders and updateOrderStatus is in "../controllers/maincontroller.js", the verifyToken is in "../middlewares/auth.js" create endpoints for them according to their paths to chatGPT and i got this :

Since I created endpoints for SignIn and SignUp earlier, I'll Delete the endpoints for them.

I added all of these into the mainroute.js file, The next thing I want to do is connect the mainroute.js file to the app.js file so all the endpoints can be accessible.

You can do that easily by adding the lines of code below into the app.js file :

import mainroutes from "./routes/mainroute.js"

app.use(mainroutes)//below app.use(express.json());

Testing Get Pizzas Endpoint

I tested the /pizzas endpoint and it worked fine as seen below :

Testing Create Order Endpoint

I inserted the JWT in the header with the x-access-token as the key, You may be wondering what function is checking the JWT, I have this code already in my "../middlewares/auth.js" file :

import jwt from "jsonwebtoken";

const config = process.env;

export const verifyToken = (req, res, next) => {
  const token =
    req.body.token || req.query.token || req.headers["x-access-token"];

  if (!token) {
    return res.status(403).send("A token is required for authentication");
  }
  try {
    const decoded = jwt.verify(token, config.JWT_SECRET_KEY);
    req.user = decoded;
  } catch (err) {
    return res.status(401).send("Invalid Token");
  }
  return next();
};

I then tested the /order Endpoint and it also worked fine as seen below:

Testing Get Pending Orders Endpoint

I created a new account as delivery personnel and then tested the /orders/pending endpoint which gets all pending orders and it also worked fine as seen below :

Testing the update order status endpoint

I Copied the Order Id and set the status to "in progress" then tested the /order/:id and it worked fine as seen below :

Conclusion

So you've come this far. In my opinion, chatGPT did well, I edited a few things like the file extensions when I received errors.

I added .js to files to the files I imported
I deleted the signIn and signUp controller that was repeated

But Generally, It did very well asides from these.

You may want to play with the code or improve some sections, The complete source code is available Here

Experience is the name everyone gives to their mistakes. Oscar Wilde

You can check more on chatGPT Here

Thanks for reading

Follow me on Twitter, GitHub or LinkedIn for more backend development tips.

How to Authenticate With JWT.

Mukhtar — Sat, 05 Nov 2022 14:51:01 +0000

How to Authenticate With JSON Web Token (JWT)

In this article you are going to learn:

What JSON Web Token (JWT) is.

How to create JSON Web Token (JWT).

How to Authenticate and Authorize With JSON Web Token (JWT)

Introduction

JSON Web Token is a standard for creating and sharing encrypted data.

Structure of a JWT :

A JWT contains a Header , Payload and Signature

Header

The first part of a JWT is the Header, It contains the algorithm that will be used to encrypt and token type.

Here is an example of a header:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

And here is an example of the header in JSON format:

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

The second part of JWT is the Payload, It contains the claims which are statements about the user and additional data.

Here is an example of a payload:

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ

And here is an example of the payload in JSON format:

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Signature

The third or last part of JWT is the signature, It is used to verify the owner of the message and if it wasn't changed along the way, To create the signature the Base64-encoded header , Payload and Secret are taken, then signed along with the algorithm specified in the header.

An example of signature:

SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

And here is how the signature is created:

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
 your-256-bit-secret

) secret base64 encoded

Prerequisites

Since we'll be building a Backend Service With Node.js and Express, Knowing All these is an advantage, Though I'll be walking you through it if you don't know them.

JavaScript

Express.js

Some skills in version control

I expect you have Node.js, Any Code Editor, API Testing platform like Postman, MongoDB or any other Database Installed.

Setting up server

Create a file and then name it anything you like I'll name mine fullauth and then initialize the folder with git init command.

Now type code . in your terminal to open the file, this will only work if you are using VsCode.

The next thing we want to do is initialize npm by executing npm init -y in our terminal and we should have our package.json in our folder.

Now we need to create all folders and files we need, we can easily do that with this command:

mkdir config controller middleware model routes 

touch config/connect.js controller/authcontroller.js middleware/auth.js model/user.js routes/authroute.js .gitignore app.js index.js .env

And our folder should look like this :

Installing dependencies

And now we'll be installing all dependencies we need with this command:

npm i mongoose dotenv express jsonwebtoken bcryptjs nodemon

Now we'll add "dev": "nodemon index.js" to scripts in package.json file and "type": "module", the former is for the server to restart automatically and latter is to enable ES6 modules, our package.json file should look like this:

{
  "name": "fullauth",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.7.0",
    "nodemon": "^2.0.20"
  },
  "type": "module"
}

Getting Started

Creating a Node.js Server

Connecting to local MongoDB

We'll add this to connect.js file:

import mongoose from "mongoose";
import "dotenv/config";

const connect = {
    connectToLocalMongoDB : () =>{
        mongoose
          .connect(process.env.MONGO_URI_LOCAL, {
            useNewUrlParser: true,
            useUnifiedTopology: true,
          })
          .then(() => console.log("DB Connected!"))
          .catch((err) => {
            console.log("not able to connect to database"+ err);
          });
    }
}

export default connect;

Adding `MONGO_URI_LOCAL` to `.env` file

MONGO_URI_LOCAL=mongodb://127.0.0.1:27017/fullauth

Updating `app.js` file:

import express from 'express'
import connect from "./config/connect.js";
const app = express()

app.use(
    express.urlencoded({
      extended: false,
    })
  );

app.use(express.json());

connect.connectToLocalMongoDB()

export default app

Starting server with `index.js` file

We'll add this to our index.js file:

import "dotenv/config";
import app from "./app.js";

const PORT = process.env.PORT || 8080

app.get('/', (req, res) =>{
    res.send("Welcome to Full authentication app")
})

app.listen(PORT, () =>{
    console.log(`app is listening on port ${PORT}`)
})

Adding `PORT` to `.env` file

PORT=8080

Now you can run npm run dev to start the server.

Creating a User model in `user.js` file:

We'll be creating a user model in the user.js file, this is what we'll be calling to perform operations on the database:


import mongoose from "mongoose";

const User = new mongoose.Schema({
    first_name: {type: String, default: null},
    last_name: {type: String, default: null},
    email: {type: String, default: null},
    password: {type: String, default: null},
})

export default mongoose.model("user", User);

Implementing SignUp and SignIn Controllers

We want to implement the signUp controller, the /signup endpoint will be connected to this controller so a new user can register.

What we'll be doing:

check if user exists
check if any field is empty
create a new user and JWT

Importing dependencies in `authcontroller.js` file :

import "dotenv/config";
import user from "../model/user.js";
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";

Creating SignUp controller in `authcontroller.js` file:

export const signUp = async (req, res) =>{
    const { firstname, lastname, email, password } = req.body

    const oldUser = await user.findOne({email: email})

    if(oldUser){
        return res.status(424).json({
            status: false,
            message: "user already exists"
        })
    }

    if(!(firstname && lastname && email && password)){
        return res.status(424).json({
            status: false,
            message: "all fields are required"
        })
    }

    if( oldUser == null ){
        const encrptedPassword = await bcrypt.hash(password, 12);

        const newUser = await user.create({
            first_name: firstname,
            last_name: lastname,
            email: email,
            password: encrptedPassword,
        })

        const token = jwt.sign({id: newUser._id, }, process.env.JWT_SECRET_KEY,{expiresIn: "2d"});

        return res.status(200).json({
            status: true,
            message: "Registration successful",
            data: {
                token: token
            }
        })
    }
}

What we did :

We imported all dependencies we'll be using
We Checked if user exists
We Created a new user if they do not exist.
We used Jwt.sign to create a new token, the .sign method takes parameters which includes Payload , this contains the claims which are statements about the user and additional data, the second parameter is the secret key we'll use to create a unique hash and then the last parameter I added is the sign option setting the expiry time to 2 days.

Creating SignIn controller in `authcontroller.js` file:

export const signIn = async (req, res) =>{
    try {
        const { email, password } = req.body;

        const oldUser = await user.findOne({email: email})

        if(!(email && password)){
            return res.status(424).json({
                status: false,
                message: "all fields are required"
            })
        }

        if( oldUser == null ){
            return res.status(424).json({
                status: false,
                message: "User does not exist"
            })
        }

        if( oldUser && (await bcrypt.compare(password, oldUser.password))){
            const token = jwt.sign({id: oldUser._id, email:email }, process.env.JWT_SECRET_KEY,{expiresIn: "2d"});
            return res.status(200).json({
                status: true,
                message: "Login Successful",
                data:{
                    token: token
                }
            })
        }else{
            return res.status(424).json({
                status: false,
                message: "Incorrect email or password"
            })  
        } 
    } catch (error) {
        return res.status(500).json({
            status: false,
            message: "An error occurred"
        })  
    }
}

What we did :

Check if User exist using email address provided
If user exists and password matches the one in the Database, create a JWT with Id and email as payload , the secret in our .env file as signature and setting the expiry time to 2 days.
Return response that includes the JWT.

Creating a middleware that checks and decode JWT in `auth.js` file :

import jwt from "jsonwebtoken";

export const verifyToken = async (req, res, next) =>{
    try {
        const token = req.body.token || req.query.token || req.headers['access-token']

        if(!token){
            return res.status(403).json({
                status: false,
                message: `A token is required for authentication`
            })
        }

        const decoded = jwt.verify(token, process.env.JWT_SECRET_KEY)

        req.user = decoded

    } catch (error) {
        return res.status(401).json({
            status: false,
            message: `Invalid Token`
        })
    }
    return next();
}

What we did :

Check for JWT in request Body, Query or Header with ' access-token ' and key.
If JWT is provided decode it with jwt.verify method, this method takes two parameters i.e. the JWT and the secret key that was used to sign it.
Assign the decoded object to req.user so after authentication routes can assess it.
Return " Invalid code " if code is expired or tampered with.

Creating a controller that greets an authenticated user in `authcontroller.js` file :

export const greetUser = async (req, res) =>{
    try {
        const id = req.user.id;

        const oldUser = await user.findById(id);

        if( oldUser ){
            return res.status(200).json({
                status: true,
                message: `Hello ${oldUser.first_name}`
            })
        }else{
            return res.status(498).json({
                status: false,
                message: `Invalid Id`
            })
        }

    } catch (error) {
        return res.status(500).json({
            status: false,
            message: "An error occurred"
        })  
    }
}

What we did :

Get the id from req.user when user is authenticated
Find user by id from Database
Return response greeting user with name in Database.

Creating and using Routes

The Next thing we want to do is create endpoints, connect them to controllers in authroute.js file and import them in app.js file so it can be accessible.

Creating and Connecting routes in `authroute.js` file :

import { Router } from "express";
import { signUp, signIn, greetUser} from "../controller/authcontroller.js";
import { verifyToken } from "../middleware/auth.js";
const router = Router();

router.route("/signup").post(signUp);
router.route("/signIn").post(signIn);
router.route("/greet-user").get(verifyToken, greetUser)

export default router;

Import and use routes in `app.js` file :

import authroute from "./routes/authroute.js"

app.use(authroute)

Your app.js file should look like this :

import express from 'express'
import connect from "./config/connect.js";
import authroute from "./routes/authroute.js"
const app = express()

app.use(
    express.urlencoded({
      extended: false,
    })
  );

app.use(express.json());

app.use(authroute)

connect.connectToLocalMongoDB()

export default app

Testing Endpoints in Postman

Testing Signup Enpoint

Request :

Response :

Testing Signin Enpoint

Request :

Response :

Testing greet-user enpoint

Inserting JWT in Header :

Request :

Response :

Conclusion

So we've come this far and I guess you should have learnt how to

Create a JWT
Use JWT in signup and signin enpoints
Extract JWT from header and Decode it
How to use object from JWT when user passes authentication

Perfection is achieved not when there is nothing more to add, but rather when there is nothing more to take away. Antoine de Saint-Exupery

You can learn more about JWT Here

Thanks for Reading.

You can get the complete code Here

Follow me for more backend development tips.

DEV Community: Mukhtar

A Beginner's Guide to Building Powerful APIs with GraphQL

Prerequisites

Getting Started

Setting up codebase

Installing Dependencies

Creating server

Connecting to database

Connecting Type Definition file

Connecting Resolvers file

Creating a server with express.js

Adding secret variables to .env file

Creating user model

Creating a new user with Graphql

Creating Input type

Creating user object Type

Creating a createUser resolver

Creating Mutation type and Mutation operation for createUser

Getting user details with GraphQL

Creating a resolver for getUserById

Creating a query operation for getUserById

Updating User details with GraphQL

Creating a resolver for updateUser

Creating a mutation operation for updateUser

Deleting User with GraphQL

Creating a resolver for deleteUser

Creating a mutation operation for deleteUser

Testing APIs

Create User API

Get User Details API

Update User Details API

Delete User API

Conclusion

Using ChatGPT to build a pizza delivery service

Getting Started

Setting up codebase

Creating your server

Installing dependencies

Creating a .env file and adding necessary environment variables

Connecting to your database

Creating Schema

Creating a user schema

Creating an order schema

Creating SignUp and SignIn controller

Signup Controller

SignIn Controller

Testing SignUp and SignIn endpoints

Testing Signup endpoint

Testing SignIn endpoint

Creating controllers for the Pizza service

Get all pizzas controller

Create Order Controller

View Pending Orders

Update Status as a delivery personnel

Creating and Testing Pizza Service endpoints

Testing Get Pizzas Endpoint

Testing Create Order Endpoint

Testing Get Pending Orders Endpoint

Testing the update order status endpoint

Conclusion

How to Authenticate With JWT.

How to Authenticate With JSON Web Token (JWT)

Introduction

Header

Payload

Signature

Prerequisites

Setting up server

Installing dependencies

Getting Started

Creating a Node.js Server

Connecting to local MongoDB

Adding MONGO_URI_LOCAL to .env file

Updating app.js file:

Starting server with index.js file

Adding PORT to .env file

Creating a User model in user.js file:

Implementing SignUp and SignIn Controllers

Importing dependencies in authcontroller.js file :

Creating SignUp controller in authcontroller.js file:

Adding `MONGO_URI_LOCAL` to `.env` file

Updating `app.js` file:

Starting server with `index.js` file

Adding `PORT` to `.env` file

Creating a User model in `user.js` file:

Importing dependencies in `authcontroller.js` file :

Creating SignUp controller in `authcontroller.js` file:

Creating SignIn controller in `authcontroller.js` file:

Creating a middleware that checks and decode JWT in `auth.js` file :

Creating a controller that greets an authenticated user in `authcontroller.js` file :

Creating and Connecting routes in `authroute.js` file :

Import and use routes in `app.js` file :