DEV Community: Deepak Kumar

Best practises for loading environment variable in NextJS application

Deepak Kumar — Mon, 13 Mar 2023 19:18:45 +0000

How to load environment variables in a NextJS application ?

First, create a new .env file in the root directory of your Next.js application. Add the environment variables you want to use in your application in the format ENV_VARIABLE_NAME=env_value.

For example:

API_URL=https://example.com/api
API_KEY=abc123

Next, please install the dotenv npm package dependency:

npm install --save-dev dotenv

Now, in your Next.js application, create a new file named next.config.js in the root directory. This file will be used to load the environment variables from the .env file.

const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  // Your Next.js configuration 
};

Now you can use the environment variables in your nextjs project. For example, to access the API_URL environment variable:

const apiUrl = process.env.API_URL;
console.log(apiUrl); // prints https://example.com/api

For more approach on how to load env file in nextjs application, you can refer this page - Link

Things to keep in mind when working with env files.

You should never commit your .env file to git. Env secrets generally contains sensitive information such as API keys and passwords, database secrets.
You should add it to your .gitignore file to prevent it from being committed.

Here are the best practices you can consider for setting env secrets for your application :

Use a secure method to store your secrets:
- Avoid storing your secrets in plain text files or hardcoding them in your code. Instead, use a secure method such as environment variables, key vaults, or configuration files.
Limit access to your secrets
- Restrict access to your secrets to only those who need them. Use access controls and permissions to ensure that only authorized users can access your secrets.
Avoid storing sensitive data in plain text
- If you need to store sensitive data such as passwords or API keys, encrypt them before storing them in your secrets store.
Rotate your secrets regularly:
- Regularly rotating your secrets (e.g. passwords, api secret keys) helps to prevent unauthorised access and improve security.
- Set up automated processes to rotate your secrets at regular intervals.
Use strong, complex passwords:
- When creating passwords for your secrets, use strong, complex passwords that are difficult to guess.
- Use a password manager to generate and store passwords securely.
Use a version control system:
- You can use a version control system to manage changes to your secrets, and keep a record of who made changes and when.

WTF is Higher Order Function ?

Deepak Kumar — Sat, 07 Jan 2023 18:57:09 +0000

A higher-order function is a function that takes one or more functions as arguments, or returns a function as its result. Higher-order functions are often used in functional programming languages. They allow you to abstract over actions, rather than just values.

function applyTwice(func, arg) {
  return func(func(arg));
}

function sum(x) {
  return x + 5;
}

console.log(applyTwice(sum, 10));  // 20

In this example, applyTwice is a higher-order function because it takes the function sum as an argument and calls it twice on the argument 10.

Higher-order functions are often used in functional programming languages like JavaScript to abstract over actions, rather than just values. They can be used to create reusable abstractions that can simplify complex code and make it easier to understand.

Here are few examples of HOC functions in javascript :

Array.prototype.map() : This function takes an array and a callback function as arguments, and returns a new array with the results of calling the callback function on every element in the original array.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(x => x * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Array.prototype.filter() : This function takes an array and a callback function as arguments, and returns a new array with only the elements from the original array that pass the test implemented by the callback function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]

Array.prototype.reduce(): This function takes an array and a callback function as arguments, and returns a single value that is the result of applying the callback function to each element in the array, from left to right.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

Array.prototype.sort(): This function takes an array and an optional compare function as arguments, and returns a new array with the elements in the original array sorted according to the return value of the compare function.

const numbers = [4, 1, 5, 2, 3];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 2, 3, 4, 5]

I hope you understand now what higher order functions are.

Thanks for reading. Follow me on Twitter

How to build a career in web development?

Deepak Kumar — Sun, 13 Dec 2020 16:13:00 +0000

Do you know info.cern.ch was the first website on the Internet published on Aug 6, 1991?

Today after 29 years, there are more than 1.5 billion published websites on the Internet out of which more than 300 million are currently active.

Most of these websites on the Internet are built using HTML, CSS, and Javascript (To keep things simple let's not talk about the fancy js frameworks for now. )

According to stack overflow developer survey 2020, javascript is the most used programming language by developers.

So, it's clear that there is a lot of demand for this technology.

Before we talk about how to learn web development and what are the steps, let's find your motivation behind building for the web.

Q. Do I need a Computer Science Degree to become a web developer or get a job?

NO. Whoever you are and wherever you are, you can become a web developer if you have a laptop, internet connection, a determination to learn and change your life.

By learning this technology, you can make money online by full-time job or by freelancing or building your own app/company.

Q. What's the salary range for a web developer?

A web developer in India makes from Rs. 20k/month to Rs. 4-5 lakh/month, depending on the expertise. The majority of entry-level full-stack/frontend web developer salary in India is Rs. 5-12 LPA. ( $6600 - $16,000 / year)

I feel sorry for people who are working at Rs. 20-30k/month as a web developer, the companies are exploiting you. Upskill yourself and know your value.

Q. What's the day to day work look like as a web developer?

Take an example of a website where you are reading this blog i.e Hash node. Your work can be building an app like this or improving existing features, add a new feature like a comment on the blog, sharing functionality, word count widget, image uploader, making the website responsive, etc.

Web Development in itself is a very broad domain. So, if you have decided you want to become a web developer, narrow down whether you want to become a frontend developer, backend developer, or full-stack web developer.

Umm, confused with frontend, backend, and full-stack ??

*There are 3 roles in web development. *

1. Frontend developer

The interface to which any user interaction with a website is the Frontend. Basically, frontend developers are responsible for the development and design of UI ( User Interface) components.

Typically, a person enters into the field of front-end development by learning to develop HTML, CSS, and JavaScript which commonly runs in a web browser.

A few years back, the tech stack of frontend developers was HTML, CSS, jquery. That pretty can do the designing of web components. But, nowadays these roles have evolved a lot.

In 2020, the frontend developer tech stack looks like HTML, CSS, React/Vue/Angular, Javascript including knowledge of tons of tools and libraries like npm, babel, webpack.

Don't worry, these tech jargons are not as difficult as it looks. We will talk about how and when to learn these things.

2. Backend Developer

In common, There are two types of websites, static and dynamic websites.

In a static website, the data and content are hardcoded using HTML and CSS. For example, the website where you are reading this blog is not a static site but a dynamic site, which means If the blog owner changes some information in the blog, it will reflect you(reader) immediately.

These types of websites are dynamic sites.

Any dynamic site needs a cloud database and some backend logic that can decide what to do when the user does something.

Tech Stack for a backend developer - NodeJS, PHP, Python, Golang, MYSQL Database, MongoDB, Postgres,

These are some common backend technologies used in 2020.

3. Full-Stack Developer

A full-stack web developer has an understanding of both frontend and backend and can develop both client-side and server-side apps.

Now, you might be thinking why should I do both if I can get a job by learning either frontend or backend.

A full-Stack developer is one of the hottest roles in the industry. Being a full-stack developer, you have knowledge of both frontend and backend, and the ability to build a server enabled app from scratch. And that's why these roles are most sought in startup companies.

*Tech stack involves both from frontend and backend. *

If you want to make a career in web development, start with frontend, know the basics of HTML, CSS, create few static sites, and decide your interest.

That's it for the first blog of Web Developer Series, in the next blog I will post more about Frontend development, how you can get started and resources you can follow.

Connect with me on Twitter and stay updated for next blog.

Thanks for reading !

Understanding Client-Side Storage

Deepak Kumar — Fri, 23 Oct 2020 19:10:54 +0000

Why do we need clientSide storage?

Do you know why all websites show these popup to accept cookie policy?

Because they want your permission to save user-specific data to store/access cookies in your browser. The browser has some storage limit which websites use to personalize user experience.

Features of clientSide data storage

data persistence which means you won't lose the data on page reload or on closing the browser. This property helps in personalizing the user experience on the app.
Different websites can have different clientSide data(i.e cookie, session, and localStorage).

Types of ClientSide Storages

1. localStorage

It's a key-value pair type client-side storage. It offers a maximum of 5MB limit. At 91wheels, we are using localStorage to store user-specific information like current city and user name for better personalization.

Pros

- Data has no expiry time. However, it can be removed by end-users by clearing browser data.

Cons

The stored data is in plain-text. Hence, it's not advisable to store critical user information in localStorage.
It can only be read on the client-side.

How to save data to localStorage:

localStorage.setItem('username', 'dipakkr');

Retrieving data from localStorage:

const data = localStorage.getItem('username');

console.log(data); // dipakkr

2. Session Storage

Features

It stores data only for a particular session. Session means till the time the browser tab is not closed. Once you close the browser, sessionStorage will be auto-deleted.
Like localStorage, it can only be accessed from the client. This also means that data is never transferred to the server.
Session storage also works as a key-value pair type storage.
The maximum limit of data saving in SessionStorage is about 5 MB.

3. Cookie

Cookies are the earliest form of clientSide data storage. It is used to store information to personalize user experience on websites.
The size of the cookie must be less than 4KB.
Expiry time can be defined in the cookie.

Let's connect on Twitter

Understanding Execution Context, Thread, and Functions in Javascript

Deepak Kumar — Wed, 21 Oct 2020 04:09:19 +0000

In today's post, I am going to write about how javascript works. We will throw some light on terminologies like Execution context, function level execution context, function invoking, and threads.

*Do you know what happens behind the scene when you run a javascript code? *

Let's take an example of the below code snippet.

const a = 10;

function add(x, y){
    const result = x + y;
    return result;
}

const name = 'github';
const final = add(10, 20);

As soon as you run this program, it creates a Global Execution Content, the place where the javascript thread will run line by line and run your code.

You can think of Global execution context as an environment where the code runs.

There can be multiple execution context in a program but a single Global execution context.

Now let's go back to the above code snippet and see what the JS engine does when we run the code.

JS Engine parses your code line by line & identifies variables & functions created by code (which will be used in the execution phase)
JS Engine setup memory space for variables & functions ( called as Hoisting)

*Hoisting * is basically the JS Engine set-asides memory space for variables and functions used inside the code before your code is executed. These variables & functions comprise the Execution Context of any function that is being executed.

A new Execution Context is created whenever function invocation is called.

All variables in JS are initially set to undefined.

Let's take one more example.

function y(){
    const p = 100;
}

function x(){
    y();
    const t = 10;
}

x();
const r = 20;

EC : Execution Context

When we run this code, here is what the Javascript engine does.

First, a Global Execution Context is going to be created.
Interpreter encounters call x(), and again a new EC is created for x.
Now the EC for x is created it will run the code line by line inside x.
Inside x, a new function call y() is invoked, it again creates an EC for y.
When y is finished running, it will back to EC of x, and variable t is assigned.
After x run is finished, it will be back to Global EC, and variable r is assigned.
Global EC finishes running and the program stops.

In tomorrow's blog, I will explain how the call stack works in Javascript. I would love to know your feedback on this blog.

Stay tuned - Follow me on Twitter

What is TypeScript?

Deepak Kumar — Tue, 07 Jul 2020 04:33:10 +0000

TypeScript is a superset of JavaScript that facilitates writing robust applications by giving you type-safety and features such as modules, classes, and interfaces. Any valid javascript code will run as expected in Typescript.

It is highly recommended for building large and complex programs, as it reduces an entire class of bugs and refactoring mistakes.

Typescript gives static type check ability which means it can detect and throw errors at compile-time instead of runtime. With the new type-check/safety features, it is easier to enhance code quality and reduce bugs in production.

When Typescript code compiles, you can eliminate a lot of bugs. It like a suite of unit tests that run the moment you write code, and they catch the bugs even before you even run the tests.

ShortComings of Javascript

1. Javascript allows accessing properties that are not present.

In the code snippet below, despite having an error in obj properties(num22) it won't show any error in Native javascript while in TS it does.

const obj = { num1: 10, num2: 15 };
const multiply = obj.num1 * obj.num22 ;

2. Static Type Checking

In .ts file, variable assigned once can't be re-initialized with another data type, thus it shows an error while in Native javascript, it works fine.

Features of TypeScript

We have already seen the two use cases of a static type language that how it can help in detecting removing potential bugs.

1. Static Typing

Detecting errors in code without running it is referred to as static checking.

Determining what's an error and what's not based on the kinds of values being operated on is known as static type checking.

function sum(a:number, b:number):number{
     return a+b;
}
sum(3, 5);

2. Classes and Interfaces
Just like Classes, Interfaces can extend each other. This allows you to copy the members of one interface into another, which gives you more flexibility in how you separate your interfaces into reusable components.

interface Employee{
   firstName : string, 
   lastName : string, 
   employeeID : number
}
const p1 : Employee = {
    firstName : 'Bob',
    lastName :  'Dale',
    employeeID : 395
}

3. Modules
Modules in TS are used just like Javascript. It can contain both code and declarations.

4. Compiles to JavaScript

TypeScript →  ES6 → Babel → ES5

Typescript compiles down to Native Javascript. So, all your javascript will be valid in TypeScript.

To see how to run a Typescript file, click this LINK

tsc index.ts
// This will generate a `index.js` file

Types in TypeScript

undefined, number, string, boolean, object, function, symbol
No int, double, or other non-native JS types.
Classes are standard JS prototypal classes.

Additional Pointers

Typescript doesn't ship with a runtime.
ES6 syntax is handled, but ES6 operations are not.

That's all for today folks.

NEXT POST → How to Setup and Run Typescript in NodeJS?

Subscribe to my Newsletter

Liked what you read? Let's connect on Twitter

Free Online Courses In Covid-19

Deepak Kumar — Thu, 23 Apr 2020 19:48:30 +0000

When the world is in crisis, edTech Companies across the globe are offering limited edition free courses in COVID-19. If you want to learn something new whether is coding, design, marketing, blogging, SEO, content marketing etc, there can't be a best time than this.

We are privileged section of society who have got the comfort to Learn From Home and Work From Home, not everyone has it. So, Utilize in learning and becoming the better version of yourself. Here I am listing few courses which are free.

If you know any more free or discounted courses which you think should be helpful for the community, do share by creating a issue or sending a Pull Request.

You may also like to see A2Z Resource For Students

This resource is originally published on my github repo. Free Online Courses in Covid-19

Online Courses

SNo	Title	Category	Link	Timeline
1	CodeAcademy	Coding	Link	90 Days PRO FREE
2	PluralSight	Coding	Link	Free Till April 2020
3	Ahref (Blogging For Business)	Content Marketing	Link	Limited Period Offer
4	Progate	Coding	Link	Free Till April 2020
5	Coding Blocks	Coding- Competitive Programming	Link	Limited Period Offer
6	Coursera Courses	Tech	Link	Limited Period Offer
7	Free Courses on Edx	Tech	Link	Limited Period Offer
8	Udemy Free Courses	All Domains	Link	Limited Period Offer
9	Linux Foundation Scholarship	Tech	Link	Limited Period Offer
10	Udacity 1Month Free Nanodegree	Tech	Link	Limited Period Offer

Books, Journals, Podcast

SNo	Title	Category	Link	Timeline
1	Scribd Library	Books, Journals	Link	30 Days FREE Without Credit Card
2	Cambridge Library	Books, Journals	Link	Free Till April 2020
3

Other Free Courses

SNo	Title	Category	Link	Timeline
1	Frontend Masters	Frontend (Coding)	Link	6 Months Free With Github Student Pack
2	PluralSight	Coding	Link	Free Till April 2020

Share this resource in your community. Let's connect on Twitter

2019: A Year In Review

Deepak Kumar — Sat, 14 Mar 2020 14:54:57 +0000

It’s 14th of March 2020. Due to #CoronaVirus, I am working home today. And, I was curious about life, the progress so far.

In this hyperconnected world, where information reaches millions in a few minutes, the FOMO(fear of missing out) gets real.

It's has been already two months in 2020, and here I am reviewing my 2019. Well, it's never too late to start. So, let's take a recap of the last year of the decade.

From starting a startup, graduating, starting freelancing, shutting down the startup, joining and leaving an MNC company, making my first international trip, a lot has happened this year.

Career

Founded a startup in college, FrontBench. Built a community of more than 50 highly motivated students from different colleges in India to help promote the initiative. It was always my dream to startup while in college. That got completed, but the Idea is just 1% rest is how you execute. The journey was full of learning. I still don't get regret the decision.

Got Featured On LinkedIn.

After the failure in a startup, I joined an MNC. Yes, I regret it. The series of events that happened that times made me insecure. However, I left it in a couple of months and joined an early age startup.
2019 was full of learning new technology and building. Starting from Android Development in 2017, Deep Learning in 2018 to Full Stack Web Development in 2019. I tried it all. I am not trying to be the master of all jack but explored fields according to requirement. Be a Problem Solver, not a tech stack guy.
Later in the year, deep-dived into learning Core Javascript, ReactJS, NodeJs and full-stack web development.
Gave 2 talks in a different college.

Life

I started journaling and writing my thoughts. It helped me a lot in reviewing my past, learning from it and connecting dots in the future. Now whenever I feel low, I just read those journals. And, I again feel motivated realizing "This too shall pass".
I failed to build a habit, whether it is to wake up in the morning, read books daily, meditation or exercise. I failed.
I failed to meet some of my goals, yeah a lot of goals.

Travel

I completed my first International trip. And, it was Lisbon Portugal. I went there to attend WebSummit 2019. t
Traveled to Rishikesh with friends and escape drowning in Ganga.
I learned to drive this year, drove approx 1000km from Delhi to Patna.

Reading / Writing

Read a lot of books in 2019.
Started Journaling, it really helped me a lot. I am thinking to do bullet journaling in 2020.
I failed to create enough content like blogs, videos that I planned.

What do I want in 2020??

Be the best in what I do, Software Development.
Read at least 10 books. I will post it soon.
Write at least 50 posts on Medium and Dev.to this year. Target to reach 1M users.
Learn about Personal Finance, Stocks, Investment, and Capitalism.
I want to complete a 10km Marathon.
Learn freestyle swimming.
I wanted to speak at more meetups/events/conferences this year. Bad Luck due to #CoronaOutbreak, I guess.

Want to see my progress 2020 progress blog, subscribe here to get an update by signing up below!

Subscribe here to get an update !

Connect with me on Twitter!

Thanks for reading! I would love to know your suggestions in a comment.

Let's Know Each Other?

Deepak Kumar — Sun, 23 Feb 2020 18:08:49 +0000

I have been writing on DEV from the last 6 months and the support I have received from the community motivates me to write and share more.

I want to connect with more of you and learn from you.

Here is my story :

After completing my graduation in 2019, I started working on my startup, Frontbench. It was an education platform to help students of tier2/3 colleges get better mentorship and guidance. We felt that there is a gap between what these students are doing and what the industry requires.

It was a unique experience for me to working on to solve such a problem. However, due to lack of Money/Patience and Persistence, I QUIT.

The learning, experience, and interactions I had during those few months are invaluable and it will definitely help in my future ventures.

Currently, I am working as a software engineer at an early age startup in Gurgaon India building an e-commerce platform for automobiles products and services.

My tech stack includes but not limited to Javascript, ReactJS, NodeJS, MongoDB, PHP.

I am aim to share my insights, learning, and tutorials here to my fellow community members.

Before that, it would be my pleasure to know about you and your work!

Let's get started! I am eagerly looking forward to hearing from you all.

Twitter

Authentication in NodeJS With Express and Mongo - CodeLab #1

Deepak Kumar — Sat, 21 Dec 2019 17:16:59 +0000

I am starting a CodeLab Series in which I will building something cool and sharing with the community.

Today, We are going to implement Authentication API in Node using JWT, express, and MongoDB.

I advise you to follow the table of content and don't miss any steps. I will provide the full app code link at the end.

Table of Content

1. Introduction
2. Prerequisites
3. Tools and Packages Required
4. Initiate Project
5. Setup MongoDB Database
6. Configure User Model
7. User Signup
8. User Login
9. Get LoggedIn User
10. Conclusion

1. Introduction

Authentication - It is a process of identifying user identity.

User Authentication contains various steps, please check out this flowchart to know more. We will be using this flow to build the authentication system in our application.

2. Prerequisites

You should have prior knowledge of javascript basics, nodejs. Knowledge of ES6 syntax is a plus. And, at last nodejs should be installed on your system.

3. Packages Required

You will be needing these following 'npm' packages.

express
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications
express-validator
To Validate the body data on the server in the express framework, we will be using this library. It's a server-side data validation library. So, even if a malicious user bypasses the client-side verification, the server-side data validation will catch it and throw an error.
body-parser
It is nodejs middleware for parsing the body data.
bcryptjs
This library will be used to hash the password and then store it to database.This way even app administrators can't access the account of a user.
jsonwebtoken
jsonwebtoken will be used to encrypt our data payload on registration and return a token. We can use that token to authenticate ourselves to secured pages like the dashboard. There would also an option to set the validity of those token, so you can specify how much time that token will last.
mongoose
Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

4. Initiate Project

We will start by creating a node project. So, Create a new folder with the name 'node-auth' and follow the steps below. All the project files should be inside the 'node-auth' folder.

npm init

npm init will ask you some basic information about project. Now, you have created the node project, it's time to install the required packages. So, go ahead and install the packages by running the below command.

npm install express express-validator body-parser bcryptjs jsonwebtoken mongoose --save

Now, create a file index.js and add this code.

// File : index.js

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

// PORT
const PORT = process.env.PORT || 4000;

app.get("/", (req, res) => {
  res.json({ message: "API Working" });
});


app.listen(PORT, (req, res) => {
  console.log(`Server Started at PORT ${PORT}`);
});

If you type node index.js in the terminal, the server will start at PORT 4000.

You have successfully set up your NodeJS app application. It's time to set up the database to add more functionality.

5. Setup MongoDB Database

We will be using MongoDB Database to store our users. You can use either a cloud MongoDB server or a local MongoDB server.

In this CodeLab, we will be using a Cloud MongoDB server known as mLab.

So, First, go ahead and signup on mLab. And follow the below steps.

After successful signup, Click on Create New Button on home page.
Now, choose any cloud provider for example AWS. In the Plan Type choose the free SandBox and then Click on the Continue button at the bottom right.
Select the region(any) and click continue.
Enter a DB name(any). I am using node-auth. Click continue and then submit the order on the next page. Don't worry it's free of cost.
Now, You will be re-directed to the homepage. Select your DB i.e node-auth.
Copy the standard MongoDB URI.
Now, you need to add a user to your database. From the 5 tabs below, click on Users and add a user by clicking on Add Database User.

Now, you have got your database user. Replace the && with your DB username and password.

mongodb://<dbuser>:<dbpassword>@ds257698.mlab.com:57698/node-auth

So, the Mongo Server Address(MongoURI) should look like this. Don't try to connect on my MongoURI. It's just a dummy username & password. 😄😄

mongodb://test:hello1234@ds257698.mlab.com:57698/node-auth

Now, you have the mongoURI you are ready to connect your node-auth app to the database. Please follow the below steps.

6. Configure User Model

Let's go and first create a config folder. This folder will keep the database connection information.

Create a file named: db.js in config

//FILENAME : db.js

const mongoose = require("mongoose");

// Replace this with your MONGOURI.
const MONGOURI = "mongodb://testuser:testpassword@ds257698.mlab.com:57698/node-auth";

const InitiateMongoServer = async () => {
  try {
    await mongoose.connect(MONGOURI, {
      useNewUrlParser: true
    });
    console.log("Connected to DB !!");
  } catch (e) {
    console.log(e);
    throw e;
  }
};

module.exports = InitiateMongoServer;

Now, we are done the database connection. Let's create the User Model to save our registered users.

Go ahead and create a new folder named model. Inside the model folder, create a new file User.js.

We will be using mongoose to create UserSchema.

User.js


//FILENAME : User.js

const mongoose = require("mongoose");

const UserSchema = mongoose.Schema({
  username: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true
  },
  createdAt: {
    type: Date,
    default: Date.now()
  }
});

// export model user with UserSchema
module.exports = mongoose.model("user", UserSchema);

Now, we are done with Database Connection, User Schema. So, let's go ahead and update our index.js to connect our API to the database.

index.js

const express = require("express");
const bodyParser = require("body-parser");
const InitiateMongoServer = require("./config/db");

// Initiate Mongo Server
InitiateMongoServer();

const app = express();

// PORT
const PORT = process.env.PORT || 4000;

// Middleware
app.use(bodyParser.json());

app.get("/", (req, res) => {
  res.json({ message: "API Working" });
});


app.listen(PORT, (req, res) => {
  console.log(`Server Started at PORT ${PORT}`);
});

Congratulations 😄😄 , You have successfully connected your app to the MongoDB server.

Now, the next thing we have to do is make a /user/signup route to register a new user. We will see this in the next section.

7. User Signup

The Route for user registration will be '/user/signup'.

Create a folder named routes. In the 'routes' folder, create a file named user.js

routes/user.js


// Filename : user.js

const express = require("express");
const { check, validationResult} = require("express-validator/check");
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const router = express.Router();

const User = require("../model/User");

/**
 * @method - POST
 * @param - /signup
 * @description - User SignUp
 */

router.post(
    "/signup",
    [
        check("username", "Please Enter a Valid Username")
        .not()
        .isEmpty(),
        check("email", "Please enter a valid email").isEmail(),
        check("password", "Please enter a valid password").isLength({
            min: 6
        })
    ],
    async (req, res) => {
        const errors = validationResult(req);
        if (!errors.isEmpty()) {
            return res.status(400).json({
                errors: errors.array()
            });
        }

        const {
            username,
            email,
            password
        } = req.body;
        try {
            let user = await User.findOne({
                email
            });
            if (user) {
                return res.status(400).json({
                    msg: "User Already Exists"
                });
            }

            user = new User({
                username,
                email,
                password
            });

            const salt = await bcrypt.genSalt(10);
            user.password = await bcrypt.hash(password, salt);

            await user.save();

            const payload = {
                user: {
                    id: user.id
                }
            };

            jwt.sign(
                payload,
                "randomString", {
                    expiresIn: 10000
                },
                (err, token) => {
                    if (err) throw err;
                    res.status(200).json({
                        token
                    });
                }
            );
        } catch (err) {
            console.log(err.message);
            res.status(500).send("Error in Saving");
        }
    }
);

module.exports = router;

Now, we have created the user registration in 'routes/user.js'. So, we need to import this in index.js to make it work.

So, the updated index file code should look like this.
index.js


const express = require("express");
const bodyParser = require("body-parser");
const user = require("./routes/user"); //new addition
const InitiateMongoServer = require("./config/db");

// Initiate Mongo Server
InitiateMongoServer();

const app = express();

// PORT
const PORT = process.env.PORT || 4000;

// Middleware
app.use(bodyParser.json());

app.get("/", (req, res) => {
  res.json({ message: "API Working" });
});


/**
 * Router Middleware
 * Router - /user/*
 * Method - *
 */
app.use("/user", user);

app.listen(PORT, (req, res) => {
  console.log(`Server Started at PORT ${PORT}`);
});

Let's start the user registration using postman. A postman is a tool for API testing.

8. User Login

Now, it's time to implement the Login router which will be mounted on '/user/login'.

Here is the code snippet for login functionality. Add the below code snippet in user.js


router.post(
  "/login",
  [
    check("email", "Please enter a valid email").isEmail(),
    check("password", "Please enter a valid password").isLength({
      min: 6
    })
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
      return res.status(400).json({
        errors: errors.array()
      });
    }

    const { email, password } = req.body;
    try {
      let user = await User.findOne({
        email
      });
      if (!user)
        return res.status(400).json({
          message: "User Not Exist"
        });

      const isMatch = await bcrypt.compare(password, user.password);
      if (!isMatch)
        return res.status(400).json({
          message: "Incorrect Password !"
        });

      const payload = {
        user: {
          id: user.id
        }
      };

      jwt.sign(
        payload,
        "randomString",
        {
          expiresIn: 3600
        },
        (err, token) => {
          if (err) throw err;
          res.status(200).json({
            token
          });
        }
      );
    } catch (e) {
      console.error(e);
      res.status(500).json({
        message: "Server Error"
      });
    }
  }
);

9. Get LoggedIn User

Now, your User Signup and User Login is working, and you are getting a token in return.

So, our next task will be to Retrieve the LoggedIn user using the token. Let's go and add this functionality.

The /user/me route will return your user if you pass the token in the header. In the file route.js, add the below code snippet.

/**
 * @method - GET
 * @description - Get LoggedIn User
 * @param - /user/me
 */


router.get("/me", auth, async (req, res) => {
  try {
    // request.user is getting fetched from Middleware after token authentication
    const user = await User.findById(req.user.id);
    res.json(user);
  } catch (e) {
    res.send({ message: "Error in Fetching user" });
  }
});

As you can see, we added the auth middleware as a parameter in the /user/me GET route, so let's define auth function.

Go ahead and create a new folder named middleware. Inside this folder, create a file named auth.js

This auth middleware will be used to verify the token, retrieve user based on the token payload.

middleware/auth.js


const jwt = require("jsonwebtoken");

module.exports = function(req, res, next) {
  const token = req.header("token");
  if (!token) return res.status(401).json({ message: "Auth Error" });

  try {
    const decoded = jwt.verify(token, "randomString");
    req.user = decoded.user;
    next();
  } catch (e) {
    console.error(e);
    res.status(500).send({ message: "Invalid Token" });
  }
};

Yayy !! You have successfully created an authentication API in nodejs. Now, You can go ahead and test the /user/me endpoint after logging in.

How to Test the application?

PostMan is required for Testing the API. If you don't have PostMan installed first, install it.

First, register the user or login if you are already registered.
From step 1, you will get a token. Copy that token and put in the header.
Hit Submit

Here is a preview of testing.

10. Conclusion

In this CodeLab - 1, we covered authentication in nodejs using express, jsonwebtoken and MongoDB. We learned about how to write middleware.

Here is the link of full code for this CodeLab: https://github.com/dipakkr/node-auth.

Also, I would love to know what else you want to cover in the next CodeLabs.

I am glad you read till here, Please give some ❤️ ❤️ !!

If you face in problem in running/understanding this application, let me know in the comments. Don't forget to give your feedback. Getting feedback helps me improve.

Subscribe to my email newsletter and stay updated!

I write about new stuff almost daily. Please follow me on Twitter | Instagram

How I Got 10k stars on my Github Repository?

Deepak Kumar — Thu, 19 Dec 2019 04:27:13 +0000

When I was in University, I missed a lot of opportunities like hackathons, conferences, internships and many global events due to lack of awareness. Being a freshman, I was not aware of what kind of opportunities were available for students. Of course, We get to know about this thing with time and active involvement in the community.

I didn't want other students/juniors to suffer the same problem. Hence, I created a hand-curated list of all the resources for students/developers.

The list has got more than 1M+ views/impressions on Github and other publications.
Almost 10k ⭐
3k forks
590+ Contributors from across the world.

How I got such massive traffic ?

Well, It's was never about getting stars ⭐ on repo but more for the value it would provide.

I published the list on GitHub, and people from all across the world helped me make this resource list better and better. For the next 2-3 months, I reviewed every single Pull Request on the repository and closed more than 800 Pull requests.

Community is Key

Students/professionals/Developers from all across the world contributed and made the resources list richer. We have listed most of the contributed Name with their name, social links, and country name.

So, let me tell you a brief what all we have added in the list known as A-to-Z-Resources-for-Students.

The list contains a brief and important resource in the following categories :

Coding Resource
Hackathons and Events
Student Benefits and Programs
- Campus Ambassador Programs
- Student Benefits and Packs
- Student Fellowship Programs
- Scholarships
Open Source Programs
Startup Programs and Incubators
Internship Portal
Developer Club and Meetups
Conferences
Bootcamps
Top People to follow(In Different Category).

Yes, the list was huge and I literally took more than a week to search and compile the whole list.

Conclusion

Create and Build thing which you think can be helpful for others. Finding your own problem and solving is the key. There may be someone who is facing the same problem
Focus on creating valuable Content, Traffic and Audience will be the byproduct.

Finally, You can check out the repository below.

dipakkr / A-to-Z-Resources-for-Students

✅ Curated list of resources for college students

I am glad you are still here. I hope you liked the post. Please don't forget to give your feedback in the comments. Getting feedback helps me improve.

I write about Javascript, Web, and new stuff almost daily. You can follow me on Twitter | Instagram

Subscribe to my email newsletter and stay updated!

If you liked the post, please give some ❤️!! Cheers !!

How CORS (Cross-Origin Resource Sharing) Works?

Deepak Kumar — Tue, 17 Dec 2019 19:27:41 +0000

If you are a web developer, you must have seen the 'CORS' error appearing often on your screen when you try to call the API. But, Why does it happen?

Well, For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, if you want to access your API hosted at https://api.github.com from your client-side frontend application which is hosted at https://example.com. The browser will not allow this request to complete.

You only need to think about CORS when :

API accessed by the browser.
API is hosted on a separate domain.

So, why does it happens?

The browsers enforce a security feature called Same Origin Policy. According to Same Origin Policy, the Same Origin calls are allowed and Different Origin calls are not allowed.

Uhh !! What is this Same Origin, Different Origin? Let's see this more in detail. Browsers define the Origin as a combination of Scheme, Host, and Port.

Scheme name — It is the protocol to be used to access the resource on the Internet. The scheme names followed by the three characters :// .The most commonly used protocols are http://, https://, ftp://, and mailto://.

Hostname — It is the address of the host where the resource is located. A hostname is a domain name assigned to a host computer. This is usually a combination of the host's local name with its parent domain's name. For example, www.dev.to consists of the host's machine name www and the domain name dev.to

Port Number — Port is a communication endpoint where your application run. For more information about Port Number. Check out this [Link](https://en.wikipedia.org/wiki/Port_(computer_networking).

If these three combinations of Scheme, Hostname, and Port are same then the browser identifies it as the Same Origin. And, the request gets complete.

So, Does it means that it is impossible to make Cross-Origin HTTP request ??

The answer is NO.

That's where the CORS comes into picture, Cross-Origin Resource Sharing mechanism.

How CORS Works

CORS allows the server to explicitly whitelist certain origin and help to bypass the same-origin policy.

If your server is configured for CORS, it will return an extra header with "Access-Control-Allow-Origin" on each response.

For example, if my API server hosted at https://api.dipakkr.com/users is CORS configured and I am making a request from my client application https://github.com to fetch some data. The response will have this header.

Access-Control-Allow-Origin: https://github.com

CORS Preflight Request

Preflighted requests first send an HTTP request by the OPTIONS method to the resource on the other domain, to determine if the actual request is safe to send or not.

You can read more about CORS Preflight request at MDN or check out this video by Akshay Saini.

How to Enable CORS

For enabling CORS on your server application. You need two things.

First, you need to determine the origins of whitelist.
Second, you have to add the CORS middleware to the server.

Here, I am explaining to you the steps to configure CORS on your NodeJS server.

First install the cors npm package from this link.

npm install cors

Then go to your server application and add the below code.

// require the cors package
var cors = require('cors');

// enables cors
app.use(
  cors({
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false
  })
);

Here you can see I am using origin: "*" which means any domain can access this application.

Please note that it is dangerous to put origin:"*" in a production application and you should never do that.

To know more about CORS, please visit MDN. It's a great place for web developers.

If you read till last, don't forget to give your feedback in the comments. Getting feedback helps me improve.

I write about new stuffs almost daily. You can follow me on Twitter | Instagram

Subscribe to my email newsletter and stay updated!

If you liked the post, give some ❤️!! Cheers