What are dApps? How they are different from normal apps?

This article is part 2 of "[Let's build and deploy a full stack MERN web application](https://blog.itsrakesh.co/lets-build-and-deploy-a-full-stack-mern-web-application)". In that tutorial, we created an application called **Productivity Tracker** that allows you to log your daily activities. However, there is a problem with our app. Can you figure it out 👀? Your hint is in the title of this article. In this tutorial, let's see the problem and how to tackle it.

## Let's get started

### The Problem

Since your application is currently available online, anyone can use it and add activities to your database. That is not good, is it? Here, authentication steps in to save the day. To prevent unauthorized access to your app, add authentication.

![authenticate](https://i.imgur.com/zC7aHTo.png)

## Adding Authentication

We had to develop front-end and back-end authentication separately because we separated the two. Once more, for the sake of simplicity, we'll build basic authentication without the use of any libraries.

### Backend authentication
We need to implement backend authentication and authorize some routes.

#### Authentication vs Authorization

These two words can be confusing to you. **Authentication** is allowing someone with credentials to access our application and **Authorization** is giving access to resources to authorized people. 

![authentication vs authorization](https://i.imgur.com/XLQMJqX.png)

In our scenario, authorization grants access to resources like creating activities and fetching activities whereas authentication entails logging into the application.

#### Introduction to JWT

> JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure, enabling the claims to be digitally signed or integrity protected with a Message Authentication Code (MAC) and/or encrypted.

In simple terms, JWT is used is to verify that the user has permission to perform an action.

Let's implement **login authentication** with JWT.

Since you are the only person using your application you don't need a signup functionality and you can store `EMAIL` and `PASSWORD` in the `.env` file.

- Open the `.env` file and add these three variables.

```bash
TOKEN_KEY=somesecrettoken
EMAIL=youremail
PASSWORD=yourpassword
```

_Here `TOKEN_KEY` can be any random string. It is used by JWT._

- Open up a terminal and install the `jsonwebtoken` package.

```bash
npm i jsonwebtoken
```

- Open `controllers` folder and create `auth.controller.js` file. Copy and paste the below code.

```javascript
const jwt = require("jsonwebtoken");

require("dotenv").config();

const EMAIL = process.env.EMAIL;
const PASSWORD = process.env.PASSWORD;

/* If the email and password are correct, then return a token. */
const login = (req, res) => {
  /* Destructuring the email and password from the request body. */
  const { email, password } = req.body;

  if (email === EMAIL && password === PASSWORD) {
    /* Creating a token. */
    const token = jwt.sign({ email }, process.env.TOKEN_KEY, {
      expiresIn: "2h",
    });
    return res.status(200).json({
      statusCode: 200,
      msg: "Login successful",
      token,
    });
  }
  return res.status(401).json({
    statusCode: 401,
    msg: "Invalid Credentials",
  });
};

module.exports = {
  login,
};
```

The code above checks to see if the email address and password match, and if they do, it generates a token and sends it to the front end to implement front-end authentication.

- Open the `routes` folder create `auth.routes.js` and register a new route for login.

```javascript
const express = require("express");

const { login } = require("../controllers/auth.controller");

const router = express.Router();

router.post("/login", login);

module.exports = router;
```

- Lastly, in `server.js`, use the registered route.

```javascript
...
const AuthRouter = require("./routes/auth.route");
...

...
app.use("/api/auth", AuthRouter);
...
```

We successfully implemented authentication. Now only authenticated people can access our application. But authenticated people can still access our resources and add activities because we haven't authorized those routes.

Let's create a middleware to authorize these routes.
```bash
GET /api/activities

POST /api/activity
```

- In the project root, create a folder called `middleware`, and in that folder create the `auth.js` file. Copy and paste the below code.

```javascript
const jwt = require("jsonwebtoken");

require("dotenv").config();

/* It checks if the token is valid and if it is, it decodes it and attaches the decoded token to the request object */
const verifyToken = (req, res, next) => {
  const token = String(req.headers.authorization)
    .replace(/^bearer|^jwt/i, "")
    .replace(/^\s+|\s+$/gi, "");

  try {
    if (!token) {
      return res.status(403).json({
        statusCode: 403,
        msg: "A token is required for authentication",
      });
    }
    /* Verifying the token. */
    const decoded = jwt.verify(token, process.env.TOKEN_KEY);
    req.userData = decoded;
  } catch (err) {
    return res.status(401).json({
      statusCode: 401,
      msg: "Invalid Token",
    });
  }
  return next();
};

module.exports = verifyToken;
```

We created a middleware function called `verifyToken()` to verify the token sent by the front end through the header. If verification is successful then the user can access the above routes.

- Now open `activity.route.js` and modify the code like this.

```javascript
...
router.get("/activities", auth, getActivities);

router.post("/activity", auth, addActivity);
...
```

That's it! Backend authentication is done 🎉.

### Frontend authentication

It's time to implement front-end authentication.

- First, let's create a login page.
- In `src` folder create `Login.jsx` and `Login.css` files. Copy and paste the below code in `Login.jsx` file and use [this](https://github.com/itsrakeshhq/productivity-app/blob/main/client/src/Login.css) in `Login.css`.

```javascript!
import React from "react";

import "./Login.css";

const Login = () => {
  /* When the user submits the form, prevent the default action, grab the email and password from the form, send a POST request to the backend with the email and password, and if the response is successful, store the token in local storage and reload the page. */
  const handleSubmit = async (event) => {
    event.preventDefault();
    const { email, password } = event.target;

    const response = await fetch(
      `${process.env.REACT_APP_BACKEND_URL}/auth/login`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: email.value,
          password: password.value,
        }),
      }
    );

    const data = await response.json();
    localStorage.setItem("token", data.token);
    window.location.reload();
  };

  return (
    <div className="login">
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <span>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" />
        </span>
        <span>
          <label htmlFor="password">Password:</label>
          <input type="password" id="password" name="password" />
        </span>
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default Login;
```

This will render the login page.

![login page](https://i.imgur.com/oLYR4UN.png)

The `handleSubmit()` gets the email and password from the form, makes a `POST` request, and sends email and password values for verification. After that server verifies and sends back a token that we can use to access resources.

Here we are using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store the value in the browser permanently so that we won't get logged out after closing the application or browser.

- Open the `index.js` file and add this logic. If there is a token in `localStorage` render `App.jsx` otherwise `Login.jsx`.

```javascript
...
const token = localStorage?.getItem("token");

root.render(
    <React.StrictMode>
    {token ? <App /> : <Login />}
    </React.StrictMode>
);
...
```

- Now in the `App.jsx` file, we need to send `token` through the header, so that backend will verify it and gives access to the routes.

```javascript
...
useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(
        `${process.env.REACT_APP_BACKEND_URL}/activities`,
        {
          headers: {
            Authorization: `Bearer ${token}`, // <----------- HERE
          },
        }
      );
      const data = await result.json();
      setActivities(data);
    };
    fetchData();
}, [token]);
...

...
const addActivity = async (event) => {
    event.preventDefault();

    const newActivity = {
      name: event.target.activity.value,
      time: event.target.time.value,
    };

    await fetch(`${process.env.REACT_APP_BACKEND_URL}/activity`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`, // <---------- HERE
      },
      body: JSON.stringify(newActivity),
    });

    event.target.activity.value = "";
    event.target.time.value = "";
    window.location.reload();
};
...
```

Done ✅! We implemented both frontend and backend authentication. Now only you can access your application 🥳 (as long as you don't share your credentials 👀).

Source code: [productivity-app](https://github.com/itsrakeshhq/productivity-app)

---

In the next article, we will learn how to write tests for frontend and backend 😍.

---

Follow for more 💯.

Adding Authentication to full stack MERN web application

Gamers have the mindset that they want to gamify everything. Why not gamify learning to code if you are a gamer and programmer 👀? There are numerous platforms for learning programming by creating games or playing games. So, in this article, I'm going to share eight platforms that I've tried and know.

## Let's get started

## 1. [CodinGame](https://www.codingame.com/)

![CodinGame](https://i.imgur.com/Lo9XTfG.png)

CodinGame was my favorite gaming-programming platform. You will fall in love with programming by doing the challenges, building games, multiplayer games, and a lot more.

**Features:**

- Supports all languages.
- Multiplayer games
- International contests
- Lots of games: Clash Of Code, Code Vs Zombies, Code Of The Rings, Power of Thor, and so on.
- and more...

## 2. [TwilioQuest](https://www.twilio.com/quest)

![TwilioQuest](https://i.imgur.com/jzuBJc2.png)

If you're just starting with programming, I recommend trying out TwilioQuest. TwilioQuest is a 2D game in which you gain experience by completing quests.

**Features:**

- A nice soundtrack that drags your attention towards the game.
- Learn different tools and programming languages.

## 3. [Battlesnake](https://play.battlesnake.com/)

![Battlesnake](https://i.imgur.com/uPkJUvu.png)

Battlesnake is a multiplayer snake game. This game will help you improve your skills in programming, machine learning, artificial intelligence, and data structures & algorithms. Create algorithms to help your snake grow and survive in the face of fierce competition.

**Features:**

- Multiplayer games
- Leagues and challenges - Never get bored

## 4. [Screeps](https://screeps.com/)

![Screeps](https://i.imgur.com/N1pA5H0.png)

Screeps will help you improve your programming (JavaScript) and AI skills. Create your colony and begin mining resources, constructing units, and conquering territory.

**Features:**

- Multiplayer game
- You can use libraries
- Programmable world

## 5. [CodeCombat](https://codecombat.com/)

![CodeCombat](https://i.imgur.com/f7r4mWK.png)

Learn Python and JavaScript by playing games. Guide your character towards the end by writing code.

## 6. [WarriorJS](https://warriorjs.com/)

![WarriorJS](https://i.imgur.com/20FbNjg.png)

WarriorJS allows you to put your skills to use. Create algorithms to climb the tower and reach the JavaScript sword. Of course, it's not that simple.

## 7. [CryptoZombies](https://cryptozombies.io/)

![CryptoZombies](https://i.imgur.com/w2ozzrc.png)

CryptoZombies is the best platform to master Solidity. Learn Solidity and smart contracts development by building your zombie army.

## 8. [Flex Box adventure](https://codingfantasy.com/games/flexboxadventure/play)

![Flex Box adventure](https://i.imgur.com/4qtfrNp.png)

Are you struggling to understand CSS Flexbox? Say no more. Flex Box adventure is a CSS game to learn Flexbox. By completing all 24 levels you will become the "Master of CSS Flexbox 🥷".

---

Which platform do you like the most 😍? Share in the comments 👇.

8 Most Popular Gaming Platforms For Programmers in 2022

I published an [article](https://blog.itsrakesh.co/how-i-built-my-blog-with-nextjs-chakra-ui-and-graphcms) about how I built my blog and why I used specific technology. Many folks enjoyed it and wanted to start their own blogs. So, if you want to start a personal blog without using third-party platforms, follow this tutorial.
This post will walk you through setting up your own instance of my [blog](https://blog.itsrakesh.co/). I'll go over everything from SEO to hosting and Google AdSense set up. Don't worry, all of the third-party tools and services used to develop this site have free plans.

## Benefits of having a personal blog

- Full control over your content.
- Add your own features.
- Monetize your content however you want.

## Let's get started

## Main features of this blog

![itsrakesh blog](https://i.imgur.com/kk5Ghna.png)

1. Posts - Articles/Tutorials/Guides
2. Snippets - Mini blogs
3. Search,
   - Main search - A central search function that allows users to search for anything.
   - Search page - A category search that allows visitors to look for specific content.
4. Audio posts - Add audio articles
5. Comment system - A GitHub-powered comment system
6. Ko-fi - The embed contribution widget allows your fans to donate to you without leaving your website.
7. Monetization,
   - [Web monetization](https://webmonetization.org/) - People can help creators by just reading their content.
   - AdSense - Earn revenue by displaying ads.
8. Analytics - Google analytics can help you learn how visitors interact with your website and content.
9. Fully responsive.
10. 100 SEO score.

## Before we start

- This blog has not been thoroughly tested.
- Some pages may not be responsive on devices with low screen resolution.
- If you have any questions about the setup, please start a discussion [here](https://github.com/RakeshPotnuru/Blog/discussions/categories/q-a) or look for answers in past discussions.

## Prerequisites
- As long as you don't want to make changes to the source code, you only need a little development experience (able to follow the steps provided in this article) to set up this blog.

## Let's get started

## Hygraph (Previously GraphCMS) project set up

- Create or sign in to your [Hygraph](https://hygraph.com/) account.
- Click the button below to clone my Hygraph project.

[![Clone project](https://hygraph.com/button)](https://app.hygraph.com/clone/13f9db967a6640af82423ad6f304025d?name=itsrakesh-blog)

- Create or sign in to your [Cloudinary](https://cloudinary.com/) account.
- Follow [this](https://hygraph.com/blog/integrate-cloudinary-with-hygraph-ui-extensions) guide to installing the Cloudinary UI extension in Hygraph.

You can now start adding content.


## Giscus set up

[Giscus](https://giscus.app/) is a comment system powered by GitHub Discussions. 

- Read [this](https://www.freecodecamp.org/news/github-discussions-as-chat-system/) article written by me on freeCodeCamp News to set up giscus. (Read till section "How to Integrate giscus in Your Blog")
- Copy the generated `script` tag and note it somewhere.
- Open the `giscus.json` file and replace my site URL with your site URL.

## Google Analytics set up

- Create or sign in to your [Google Analytics](https://analytics.google.com/) account.
- Create a GA4 property for your blog.
- Copy your property measurement id and note it somewhere.

## Coil set up

[Coil](https://coil.com/) is a web monetization provider. You can sign up on coil as a creator and add the web monetization tag to your site.

- Create or sign in to your [Coil](https://coil.com/) account.
- Connect your Uphold account to the coil to receive payouts on your Uphold wallet.
- Navigate to "Settings" -> "Payouts".
- Copy "PAYMENT POINTER" and note it. Your payment pointer should be something like this.

```bash
$ilp.uphold.com/82eq8NKY4NEZ
```

## BeyondWords set up
If you want to add audio articles to your posts, then create a BeyondWords account otherwise just skip this section.

- Create or sign in to your [BeyondWords](https://beyondwords.io/) account.
- Create a project and start creating audios.
- You can get an audio Id from the "Shareable URL".

```bash
https://audio.beyondwords.io/play/AUDIO_ID
```

## Ko-fi set up

[Ko-fi](https://ko-fi.com/) is a platform that enables you to accept donations, memberships, and sales from your support. It has a few more benefits over BuyMeACoffee.

- Create or sign in to your [ko-fi](https://ko-fi.com/) account.
- Navigate to [Buttons & Widgets](https://ko-fi.com/manage/widgets) page -> Click on "Ko-fi Donation Widget" -> Select "Donation Panel".
- Copy the embed URL and note it somewhere. The URL should look like this.

```bash
https://ko-fi.com/YOUR_KOFI_USERNAME/?hidefeed=true&widget=true&embed=true&preview=true
```

## Newsletter set up
I use substack as my newsletter service. You can use whichever service you wish. Put the URL in this env variable.

```bash
NEXT_PUBLIC_SUBSTACK_URL=
```

## Frontend set up

Now that we have backend CMS ready. Let's set up the front end.

- Open [Blog GitHub repo](https://github.com/RakeshPotnuru/Blog).
- Star it ⭐.
- Fork the repo.
- Clone your forked repo.

```bash
git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git
```

- Open the cloned repo in your code editor or IDE.
- Open the `public` folder,
  - Replace my icons with your icons. Use [this](https://www.favicon-generator.org/) to generate icons.
  - Open the `manifest.json` file and replace my info with your info.
- Open [`config/site.config.js`](https://github.com/RakeshPotnuru/Blog/blob/main/config/site.config.js) file and replace my info with your info. (_Don't worry if you cannot fill in some details. We will cover them later in this article._)
- Push changes to your GitHub repo.

## Deploy to Netlify

- Create or sign in to your [Netlify](https://www.netlify.com/) account.
- Click on "Add new site" -> Select "Import an existing project".
- Select "GitHub" and authorize Netlify to connect to GitHub.
- Search for your repo and select it.
- In the site settings, leave everything default and click the "Show advanced" button.
- Click on "New variable" and refer to the `.env.example` file. You have to add all the env variables in your Netlify project.
- After adding all the variables, click "Deploy site".
- Add a custom domain or just go with the Netlify subdomain.

## Google AdSense set up

- Create or sign in to your [Google AdSense](https://www.google.com/adsense/start/) account.
- Add your site by clicking "Add Site".
- Wait a day or two to get your site accepted.

If accepted, follow these steps to create ad units.

- Navigate to "Settings" -> "Account information" -> copy "Publisher ID" and paste it in `site.config.js` file.
- Go to "Ads" -> "By ad unit".
- Click on "Display ad". Name your ad "Page top Ad" -> Click "Create". Copy `data-ad-slot` value and paste in `site.config.js` file.
- Same as this, create "In-feed Ad" and add slot number in `site.config.js`.
- Follow [this](https://support.google.com/adsense/answer/7532444?hl=en) to add `ads.txt` file in `public` folder. If one already exists, please replace it with your `ads.txt` file.

---

## Contribute

Like to add a feature? Found a bug? or Want to improve the codebase? - Open an [issue](https://github.com/RakeshPotnuru/Blog/issues).

---

That's it! If you are facing any trouble setting up, please start a [discussion](https://github.com/RakeshPotnuru/Blog/discussions/categories/q-a), I will be there to assist you.

---

Share your blog link in the comments 👇.

What are dApps? How they are different from normal apps?

READ LATEST ARTICLES

Adding Authentication to full stack MERN web application

8 Most Popular Gaming Platforms For Programmers in 2022

How to set up your own personal blog: Step-By-Step Guide

EXPLORE LATEST SNIPPETS

Host your static site with Azure Static Web Apps in 3 steps

What is the difference between Private and Public blockchain

What fields you should include in a web manifest file?

How to clone a specific folder of a GitHub repository?

What are dApps? How they are different from normal apps?

READ LATEST ARTICLES

Adding Authentication to full stack MERN web application

8 Most Popular Gaming Platforms For Programmers in 2022

How to set up your own personal blog: Step-By-Step Guide

EXPLORE LATEST SNIPPETS

Host your static site with Azure Static Web Apps in 3 steps .css-i5zjkk{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--chakra-colors-brand-100);vertical-align:middle;}

What is the difference between Private and Public blockchain

What fields you should include in a web manifest file?

How to clone a specific folder of a GitHub repository?

Weekly

Monthly

Host your static site with Azure Static Web Apps in 3 steps