<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Grayman Evans</title>
    <description>The latest articles on DEV Community by Grayman Evans (@grayman646).</description>
    <link>https://dev.to/grayman646</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F776306%2F1b3c9116-2407-40cd-939a-a679a7aee9eb.jpeg</url>
      <title>DEV Community: Grayman Evans</title>
      <link>https://dev.to/grayman646</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/grayman646"/>
    <language>en</language>
    <item>
      <title>Why do we use 0 and 1 to represent Boolean values in SQL</title>
      <dc:creator>Grayman Evans</dc:creator>
      <pubDate>Thu, 24 Apr 2025 15:41:12 +0000</pubDate>
      <link>https://dev.to/grayman646/why-do-we-use-0-and-1-to-represent-boolean-values-in-sql-4opd</link>
      <guid>https://dev.to/grayman646/why-do-we-use-0-and-1-to-represent-boolean-values-in-sql-4opd</guid>
      <description>&lt;p&gt;In SQL, Boolean values (&lt;code&gt;True&lt;/code&gt; or &lt;code&gt;False&lt;/code&gt;) are typically represented using &lt;code&gt;1&lt;/code&gt; for &lt;code&gt;True&lt;/code&gt; and &lt;code&gt;0&lt;/code&gt; for &lt;code&gt;False&lt;/code&gt;. Let’s look more into how this works:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Many SQL databases &lt;strong&gt;don’t have a native Boolean type&lt;/strong&gt; (especially older Dbs), so they use integers to represent Boolean values:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;1&lt;/code&gt; = &lt;strong&gt;True&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;0&lt;/code&gt; = &lt;strong&gt;False&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Here are some reasons why&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Computers use binary (0s and 1s), so it’s normal to represent Boolean values this way.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Works across databases like MySQL, SQLite, and older systems without a native &lt;code&gt;BOOLEAN&lt;/code&gt; type.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using &lt;code&gt;TINYINT(1)&lt;/code&gt; in databases such as &lt;strong&gt;MySQL&lt;/strong&gt; is space-efficient and offers fast evaluation performance.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM soul WHERE is_useful= 1;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Final Say&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
In SQL, &lt;code&gt;1&lt;/code&gt; represents &lt;code&gt;True&lt;/code&gt; and &lt;code&gt;0&lt;/code&gt; represents &lt;code&gt;False&lt;/code&gt;. This is a simple concept that’s rooted in binary logic, but useful for writing clear and effective SQL queries. Cheers🎯&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Upload Images With Node.js And Express To The Cloud Using Cloudinary</title>
      <dc:creator>Grayman Evans</dc:creator>
      <pubDate>Wed, 02 Feb 2022 04:13:32 +0000</pubDate>
      <link>https://dev.to/grayman646/upload-images-with-nodejs-and-express-to-the-cloud-using-cloudinary-26e4</link>
      <guid>https://dev.to/grayman646/upload-images-with-nodejs-and-express-to-the-cloud-using-cloudinary-26e4</guid>
      <description>&lt;p&gt;Today's websites and mobile applications worldwide requires the functionality to upload image somewhere to the cloud for storing and easy retrieval since in most cases images must be stored somewhere in the cloud for easy management (storing, retrieval, integration etc. ) and not directly into a database. Luckily Cloudinary comes to help us get this done in a few simple steps using &lt;code&gt;Node.js&lt;/code&gt; and &lt;code&gt;Express&lt;/code&gt;  so &lt;/p&gt;

&lt;h3&gt;
  
  
  WHAT IS CLOUDINARY ?
&lt;/h3&gt;

&lt;p&gt;Cloudinary is a &lt;strong&gt;SaaS&lt;/strong&gt; technology company that  provides a cloud-based image and video management services.&lt;/p&gt;

&lt;h3&gt;
  
  
  WHAT IS CLOUDINARY USED FOR ?
&lt;/h3&gt;

&lt;p&gt;With &lt;strong&gt;Cloudinary&lt;/strong&gt;, you can easily upload &lt;code&gt;images&lt;/code&gt; and &lt;code&gt;videos&lt;/code&gt; to the cloud and automate smart manipulations of those media without installing any other software. &lt;strong&gt;Cloudinary&lt;/strong&gt; then seamlessly delivers your media through a fast content delivery network (CDN), optimized with the industry’s best practices.  It basically enables users to upload, store, manage, manipulate, and deliver images and videos for websites and applications.&lt;/p&gt;

&lt;p&gt;Additionally, &lt;strong&gt;Cloudinary&lt;/strong&gt; offers comprehensive APIs and administration capabilities, which you can easily integrate with your web and mobile applications.&lt;/p&gt;

&lt;p&gt;In this guide you'll learn how to upload images to &lt;strong&gt;Cloudinary&lt;/strong&gt; with the &lt;strong&gt;Node.js&lt;/strong&gt; SDK which provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing &lt;strong&gt;Node.js&lt;/strong&gt; application.&lt;/p&gt;

&lt;p&gt;To begin, you must  be able to use the &lt;strong&gt;terminal&lt;/strong&gt;, familiar with &lt;strong&gt;Node.js&lt;/strong&gt; , &lt;strong&gt;Npm&lt;/strong&gt; , &lt;strong&gt;Github&lt;/strong&gt; , you must also have &lt;strong&gt;Cloudinary&lt;/strong&gt;  account, if you don't, sign up for free &lt;a href="https://cloudinary.com/" rel="noopener noreferrer"&gt;here&lt;/a&gt; to get your API Key and other credentials needed for the project. &lt;/p&gt;

&lt;p&gt;After signing up, it should take you to the dashboard, which looks like this &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frhxrvrf02irlyzyeetxr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frhxrvrf02irlyzyeetxr.png" alt="Screen Shot 2022-01-14 at 8.48.08 PM.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can find your &lt;code&gt;CLOUD NAME&lt;/code&gt;,  &lt;code&gt;API&lt;/code&gt; and  &lt;code&gt;SECRET KEY&lt;/code&gt; on the dashboard good!! that means we are ready, you can even go to the &lt;code&gt;settings&lt;/code&gt; page to see how you can upgrade your current plan to suit your business needs, but for now we will go with the free plan which gives us 1,000 Transformations OR 1 GB Storage OR 1 GB Bandwidth. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4oovzo9upu1s84crdb4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4oovzo9upu1s84crdb4.png" alt="Screen Shot 2022-01-14 at 8.46.44 PM.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To begin, you should get the exercise files from my &lt;a href="https://github.com/evans646/Cloudinary-Demo" rel="noopener noreferrer"&gt;Github&lt;/a&gt;, follow the &lt;code&gt;instructions&lt;/code&gt; in the &lt;strong&gt;README.md&lt;/strong&gt; file to get started. Everything is arranged for you so we can start integrating the image upload functionality. &lt;/p&gt;

&lt;p&gt;After you're done, your project structure should look like this &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F484zgc0z1c9zr7b9ur8t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F484zgc0z1c9zr7b9ur8t.png" alt="Screen Shot 2022-01-26 at 5.16.50 PM.png" width="412" height="404"&gt;&lt;/a&gt;&lt;br&gt;
 Start the development server with npm:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm start 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And navigate to &lt;strong&gt;&lt;a href="http://localhost:8080" rel="noopener noreferrer"&gt;http://localhost:8080&lt;/a&gt;&lt;/strong&gt; in your &lt;code&gt;internet explorer&lt;/code&gt; to see the starter project &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F715n4fgqdfyufq3cwnwl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F715n4fgqdfyufq3cwnwl.png" alt="Screen Shot 2022-01-25 at 10.45.19 AM.png" width="800" height="382"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  CAUTION ⚠️
&lt;/h2&gt;

&lt;p&gt;If you get any error with &lt;strong&gt;nodemon&lt;/strong&gt; because it's not installed on your machine you can solve it by installing it via npm :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -g nodemon
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or yarn :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn global add nodemon
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we can install the rest of the packages needed for the project which is &lt;code&gt;Cloudinary&lt;/code&gt; , &lt;code&gt;multer&lt;/code&gt;&lt;strong&gt;( ** Node.js middleware for handling multipart/form-data, which is primarily used for uploading files **)&lt;/strong&gt;,&lt;code&gt;multer-storage-cloudinary&lt;/code&gt; &lt;strong&gt;(&lt;/strong&gt; A multer storage engine for Cloudinary &lt;strong&gt;)&lt;/strong&gt;  and &lt;code&gt;dotenv&lt;/code&gt; to set up the environment variables,  with npm :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install  cloudinary multer multer-storage-cloudinary dotenv 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After these are done installing, we need to configure the storage, in the top level directory ( same as index.js) create a &lt;code&gt;storage&lt;/code&gt; directory by running this command or create it manually :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir storage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create &lt;code&gt;storage&lt;/code&gt; directory, open and create a file &lt;code&gt;storage.js&lt;/code&gt; inside the &lt;code&gt;storage&lt;/code&gt; directory, &lt;br&gt;
run this command to create it :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd storage &amp;amp;&amp;amp; touch storage.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good! now our project &lt;code&gt;structure&lt;/code&gt; should look like this &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F34c2ud25egcxvefnx9fv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F34c2ud25egcxvefnx9fv.png" alt="Screen Shot 2022-01-26 at 5.20.35 PM.png" width="438" height="404"&gt;&lt;/a&gt;&lt;br&gt;
Open  &lt;code&gt;storage.js&lt;/code&gt;  and require &lt;code&gt;Cloudinary&lt;/code&gt;  and &lt;code&gt;multer-storage-cloudinary&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we can use &lt;code&gt;multer-storage-cloudinary'&lt;/code&gt; to create the storage engine to store images in &lt;code&gt;Cloudinary&lt;/code&gt; , firstly we need to configure &lt;code&gt;Cloudinary&lt;/code&gt; with the &lt;strong&gt;cloud_name&lt;/strong&gt;, ** api_key** and &lt;strong&gt;api_secret&lt;/strong&gt; and use the configuration to create the storage engine with  &lt;code&gt;multer-storage-cloudinary'&lt;/code&gt;, paste the following code below what you just required on &lt;code&gt;storage.js&lt;/code&gt; :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cloudinary.config({
    cloud_name:process.env.CLOUD_NAME,
    api_key: process.env.CLOUDINARY_KEY,
    api_secret:process.env.CLOUDINARY_SECRET
});

const storage = new CloudinaryStorage({
    cloudinary,
    params: {
        folder: 'CloudinaryDemo',
        allowedFormats: ['jpeg', 'png', 'jpg'],
    }
});

module.exports = {
    storage
};

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the &lt;code&gt;storage.js&lt;/code&gt; file should look like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');

cloudinary.config({
    cloud_name:process.env.CLOUD_NAME,
    api_key: process.env.CLOUDINARY_KEY,
    api_secret:process.env.CLOUDINARY_SECRET
});

const storage = new CloudinaryStorage({
    cloudinary,
    params: {
        folder: 'CloudinaryDemo',
        allowedFormats: ['jpeg', 'png', 'jpg'],
    }                                                              
}); 

module.exports = {
    storage
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;** NOTE** : Allowed formats can be omitted and cloudinary will deliver the image as the original image's format. &lt;/p&gt;

&lt;p&gt;Since we are the using the environment variables to configure &lt;code&gt;Cloudinary&lt;/code&gt; which does not exist yet in the project, we can create the file and embed the &lt;code&gt;CLOUD_NAME&lt;/code&gt;, &lt;code&gt;CLOUDINARY_KEY&lt;/code&gt; and &lt;code&gt;CLOUDINARY_SECRET&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In the same directory as &lt;strong&gt;index.js&lt;/strong&gt;  run :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;touch .env 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create &lt;code&gt;.env&lt;/code&gt; file &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F75e7n70husug80yroom3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F75e7n70husug80yroom3.png" alt="Screen Shot 2022-01-26 at 5.22.35 PM.png" width="438" height="404"&gt;&lt;/a&gt;&lt;br&gt;
Open and paste the following code in it :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CLOUD_NAME= your cloud name goes here 
CLOUDINARY_KEY=  your API KEY goes here 
CLOUDINARY_SECRET= your secrete goes here 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now go back to &lt;code&gt;Cloudinary's&lt;/code&gt; dashboard  to copy the details and set them in the &lt;code&gt;.env&lt;/code&gt; file accordingly &lt;br&gt;
[ &lt;strong&gt;see below image&lt;/strong&gt;]&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyjc4doqj6t1r7who6p8d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyjc4doqj6t1r7who6p8d.png" alt="Screen Shot 2022-01-14 at 8.48.08 PM.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you are done, your &lt;code&gt;.env&lt;/code&gt; file should copy this &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fry45rtd74z1b3aygy0o1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fry45rtd74z1b3aygy0o1.png" alt="Screen Shot 2022-01-26 at 5.26.12 PM.png" width="640" height="246"&gt;&lt;/a&gt;&lt;br&gt;
Good now let's require &lt;code&gt;multer&lt;/code&gt; and the &lt;code&gt;storage&lt;/code&gt; we exported from &lt;code&gt;storage.js&lt;/code&gt;  so we can configure it to work with express to upload images, open &lt;code&gt;index.js&lt;/code&gt; file and require (&lt;strong&gt;on the top level preferably below port&lt;/strong&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const { storage } = require('./storage/storage');
const multer = require('multer');
const upload = multer({ storage });

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you check above, we are requiring &lt;code&gt;multer&lt;/code&gt; and the &lt;strong&gt;storage&lt;/strong&gt; configuration we exported from &lt;code&gt;storage.js&lt;/code&gt;  and passing the storage to &lt;code&gt;multer&lt;/code&gt; to use the &lt;code&gt;cloudinary&lt;/code&gt; &lt;strong&gt;storage&lt;/strong&gt; instance. (Multer acts as a storage engine for Cloudinary).&lt;/p&gt;

&lt;p&gt;Finally we can configure the route and pass &lt;strong&gt;upload&lt;/strong&gt; to it so we can upload images, in the same &lt;code&gt;index.js&lt;/code&gt;, paste this code (&lt;strong&gt;below " code goes here"&lt;/strong&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//we used upload.single to tell "multer" to upload
// only single image 
 app.post('/upload', upload.single('image'), (req, res) =&amp;gt; {
  console.log(req.file);
  res.send('Done');
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;NOTE&lt;/strong&gt;: Cloudinary gives us the flexibility to specify  the &lt;code&gt;maximum&lt;/code&gt; and &lt;code&gt;minimum&lt;/code&gt; number of images we wish to upload, here we specified &lt;code&gt;single&lt;/code&gt; meaning to upload one image file,  conversely we can pass &lt;code&gt;upload.array&lt;/code&gt; to upload multiple images. &lt;/p&gt;

&lt;p&gt;We need to make the environment variables available in the project so paste this on (&lt;strong&gt;line 1&lt;/strong&gt; top level) in &lt;strong&gt;index.js&lt;/strong&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;require('dotenv').config();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The complete entry file ** index.js** should look like this :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;require('dotenv').config();
const express = require('express');
const app = express();
const path = require('path');
const ejs = require('ejs');
const port = 8080;

const { storage } = require('./storage/storage');
const multer = require('multer');
const upload = multer({ storage });

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, './views'));

app.get('', (req, res) =&amp;gt; {
  res.render("home");
});

// code goes here
 app.post('/upload', upload.single('image'), (req, res) =&amp;gt; {
  console.log(req.file);
  res.send('Done');
});

app.listen(port, () =&amp;gt; {
  console.log(`Server is listening on port ${port}`);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In order to upload images, open &lt;code&gt;home.ejs&lt;/code&gt; file, specify the form &lt;code&gt;action&lt;/code&gt; to &lt;strong&gt;/upload&lt;/strong&gt; and method to &lt;code&gt;POST&lt;/code&gt; additionally set the form  &lt;code&gt;encoding data type&lt;/code&gt;  attribute to accept &lt;code&gt;multipart/form-data&lt;/code&gt; so we can upload images and files through the form.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; &amp;lt;form action="/upload" method="POST" enctype="multipart/form-data"&amp;gt;
              &amp;lt;div class="mb-3"&amp;gt;
                    &amp;lt;div class="form-file custom-file"&amp;gt;
                        &amp;lt;input class="form-control" type="file" id="formFile" name="image" multiple&amp;gt;
                        &amp;lt;label class="form-file-label" for="image"
                        &amp;lt;/label&amp;gt;
                    &amp;lt;/div&amp;gt;
           &amp;lt;/div&amp;gt;
     &amp;lt;button type="submit" class="btn btn-success"&amp;gt;Upload&amp;lt;/button&amp;gt;
&amp;lt;/form&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;action&lt;/code&gt; attribute specifies where to send the form-data when a form is submitted. We specified in the post route to &lt;strong&gt;/upload&lt;/strong&gt; and that is where the form will be submitted to.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;enctype&lt;/code&gt; attribute specifies how the form-data should be encoded when submitting it to the server. It can be used only if &lt;code&gt;method="POST"&lt;/code&gt;&lt;br&gt;
And the &lt;code&gt;method&lt;/code&gt; specifies the HTTP verb we are using in this case &lt;code&gt;POST&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;Now with all this in place, we can we can start the server if not already started and navigate to &lt;strong&gt;&lt;a href="http://localhost:8080" rel="noopener noreferrer"&gt;http://localhost:8080&lt;/a&gt;&lt;/strong&gt; in your &lt;code&gt;internet explorer&lt;/code&gt;, upload image through the form within the specified formats eg. &lt;strong&gt;jpeg, jpg, png.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;If everything goes well , you should get something like this &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6m3qszqgu48r58kczeep.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6m3qszqgu48r58kczeep.png" alt="Screen Shot 2022-01-25 at 12.36.07 PM.png" width="800" height="277"&gt;&lt;/a&gt;&lt;br&gt;
Indicating that the image was uploaded successfully, and when you go to &lt;code&gt;Cloudinary's&lt;/code&gt; dashboard, &lt;strong&gt;Media library&lt;/strong&gt; you can see &lt;code&gt;Cloudinary&lt;/code&gt; made a new folder for us as specified in the storage configuration &lt;strong&gt;CloudinaryDemo&lt;/strong&gt;  and stored the uploaded image in that folder. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fldmhwgxk9jrwn5s660jj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fldmhwgxk9jrwn5s660jj.png" alt="Screen Shot 2022-01-25 at 12.51.25 PM.png" width="800" height="292"&gt;&lt;/a&gt;&lt;br&gt;
And in the terminal since we logged &lt;strong&gt;req.file&lt;/strong&gt; to the console,  we can see what cloudinary gives us in return to the image upload.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  fieldname: 'image',
  originalname: 'download.png',
  encoding: '7bit',
  mimetype: 'image/png',
  path: 'https://res.cloudinary.com/evans646/image/upload/v1643114879/CloudinaryDemo/n496jz94zhwcte8kskhh.png',
  size: 5761,
  filename: 'CloudinaryDemo/n496jz94zhwcte8kskhh'
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;strong&gt;path&lt;/strong&gt; is the url of the image that we can use in our projects and or web applications. When you click on it (command+ left click) on mac or copy the path and paste it in your browser and you can see the same image that we uploaded to &lt;code&gt;Cloudinary&lt;/code&gt; .&lt;/p&gt;

&lt;h3&gt;
  
  
  Summary
&lt;/h3&gt;

&lt;p&gt;You have learned how to upload images with node.js and express to Cloudinary with the Node.js SDK which provides simple image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your appliaction.&lt;/p&gt;

&lt;p&gt;Cloudinary  enables users to upload, store, manage, manipulate, and deliver images and videos for websites and applications. You can check out the documentation &lt;a href="https://cloudinary.com/documentation/node_integration" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you run into any issue, you can always comment here or connect with me on &lt;a href="https://www.linkedin.com/in/evansprofile/" rel="noopener noreferrer"&gt;Linkedin&lt;/a&gt; &lt;a href="https://www.instagram.com/loveyours.164/" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt; &lt;a href="https://twitter.com/evansansongg" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Congratulations
&lt;/h3&gt;

&lt;p&gt;Thanks a lot for coming through and Good luck! to you as well. &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>cloud</category>
    </item>
    <item>
      <title>Send Emails with NodeJs + Express Using SendGrid</title>
      <dc:creator>Grayman Evans</dc:creator>
      <pubDate>Wed, 12 Jan 2022 23:23:17 +0000</pubDate>
      <link>https://dev.to/grayman646/send-emails-with-nodejs-express-using-sendgrid-3afj</link>
      <guid>https://dev.to/grayman646/send-emails-with-nodejs-express-using-sendgrid-3afj</guid>
      <description>&lt;p&gt;In almost every web application, there is a need to add the functionality to send transactional emails in response to various event triggers like account registration, resetting of user passwords, invoices, purchase receipts and verification of users. We can accomplish these tasks through email service platforms such as &lt;code&gt;SendGrid&lt;/code&gt; , &lt;code&gt;Mailgun&lt;/code&gt; and &lt;code&gt;Nodemailer&lt;/code&gt; which takes care of sending  emails on our behalf.&lt;/p&gt;

&lt;h3&gt;
  
  
  What is SendGrid ?
&lt;/h3&gt;

&lt;p&gt;SendGrid is a cloud-based SMTP provider that allows you to send email without having to maintain email servers. It  provides two ways to send email: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Through SMTP relay &lt;/li&gt;
&lt;li&gt;Through Web API.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Why SendGrid ?
&lt;/h3&gt;

&lt;p&gt;There are a variety of email as a service platforms and APIs, such as &lt;code&gt;SendGrid&lt;/code&gt; and &lt;code&gt;Mailgun&lt;/code&gt; among others which allows you to send up to 100 emails per month for free. SendGrid is much more user friendly than other services. So in this article, I’ll demonstrate sending emails from within a NodeJs application using SendGrid Web API.&lt;/p&gt;

&lt;p&gt;The ability to send emails from a NodeJs server is a very important thing to do in today's web applications since these emails are crucial for notifying users of important updates and enabling key user workflows in your application.&lt;/p&gt;

&lt;h3&gt;
  
  
  Send Emails
&lt;/h3&gt;

&lt;p&gt;To start sending emails with SendGrid, the first step is to sign up for the service. Then you’ll need to create a SendGrid API key for sending email. Sign up &lt;a href="https://signup.sendgrid.com/" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After creating an account we need to set up a &lt;code&gt;sender id&lt;/code&gt; which is the email address that sendGrid is going to use to send emails on our behalf. &lt;/p&gt;

&lt;p&gt;Set up the sender id by navigating to =&amp;gt; &lt;strong&gt;Marketing&lt;/strong&gt; =&amp;gt;  *&lt;em&gt;senders *&lt;/em&gt;=&amp;gt; *&lt;em&gt;create new sender *&lt;/em&gt;(Use the name that the user will see when they get the verification/notification email, so something like  &lt;code&gt;customer service&lt;/code&gt; or the name of your app).&lt;/p&gt;

&lt;p&gt;For example, if a user signs up on  &lt;code&gt;www.deff.com&lt;/code&gt;, we can set the sender’s id to be something like &lt;a href="mailto:support@deff.com"&gt;support@deff.com&lt;/a&gt; to deliver the email to the client. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffizqegn1x47t37iubwvn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffizqegn1x47t37iubwvn.png" alt="Screen Shot 2022-01-10 at 7.34.35 PM.png" width="348" height="1113"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;create new sender &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkma4w5staohocsasxccr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkma4w5staohocsasxccr.png" alt="Screen Shot 2022-01-10 at 7.41.44 PM.png" width="800" height="84"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Fill up the form and once you are done hit save. The email address you used to set up the &lt;code&gt;id&lt;/code&gt; needs to be verified so check your inbox and you should see the verification email, verify the sender's email to be able to start sending emails. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frulny9cx40c0m83swt23.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frulny9cx40c0m83swt23.png" alt="Screen Shot 2022-01-10 at 7.50.24 PM.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you are done verifying.We need to create an API Key that will allow our backend to send emails. &lt;/p&gt;

&lt;p&gt;Create an API key by navigating to SendGrid’s dashboard, &lt;strong&gt;Email api **=&amp;gt; **integration guide&lt;/strong&gt; =&amp;gt; &lt;strong&gt;web api&lt;/strong&gt; =&amp;gt;&lt;strong&gt;nodejs&lt;/strong&gt;. Give the key a name, then click “&lt;strong&gt;Create Key&lt;/strong&gt;”. This will generate an api key for us which looks like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copy the key and keep it safe for later use (see images guide below).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgf6ezvxchx8l8xufsgwn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgf6ezvxchx8l8xufsgwn.png" alt="Screen Shot 2022-01-10 at 7.54.54 PM.png" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Choose NodeJs&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxout3thdwrgpmgrao8b9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxout3thdwrgpmgrao8b9.png" alt="Screen Shot 2022-01-10 at 7.59.52 PM.png" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next give the key a name and click &lt;strong&gt;Create Key&lt;/strong&gt; this will generate the API Key.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frpwzmdiumnuegqwseytm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frpwzmdiumnuegqwseytm.png" alt="Screen Shot 2022-01-10 at 8.08.41 PM.png" width="800" height="313"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now scroll down and check  (** I've integrated the code above**) and hit next.&lt;/p&gt;

&lt;p&gt;Great!!  we are done setting up the email service, let's initialize a new project with git so we can integrate the functionalities, change directory to where you want to save your project and run this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git init 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Follow the prompts, afterwards, we can install express, dotenv to set up the environment variables  and SendGrid JavaScript client with npm:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save @sendgrid/mail express dotenv 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After these are done installing, we need to create a new  &lt;code&gt;index.js&lt;/code&gt; file to serve as the main file and paste the following code in it :&lt;/p&gt;

&lt;p&gt;run this code :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;touch index.js 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create &lt;code&gt;index.js&lt;/code&gt; file in the directory &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff599w4ujw9iqtvpblbob.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff599w4ujw9iqtvpblbob.png" alt="Screen Shot 2022-01-10 at 11.51.46 PM.png" width="591" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now open and paste this code in it :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const express = require ('express');
const app = express();
const port= 3000;





app.listen(port, () =&amp;gt;{
    console.log(`Server is listening on port ${port}`);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To make sure everything is good, we can run the development server with :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node index.js

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If everything went well, you should see &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Server is listening on port 3000&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Logged to the console, GREAT!!! now we can begin integrating the send email workflow. In the same directory as &lt;code&gt;index.js&lt;/code&gt; file create a &lt;code&gt;utils&lt;/code&gt; directory either manually or run this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir utils 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a new &lt;code&gt;utils&lt;/code&gt; directory for us, let's create a new file &lt;code&gt;sendEmail.js&lt;/code&gt; inside the &lt;code&gt;utils&lt;/code&gt;&lt;br&gt;
directory :&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm0n7pvp6pef38tgv3isi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm0n7pvp6pef38tgv3isi.png" alt="Screen Shot 2022-01-10 at 11.56.49 PM.png" width="598" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Run this code or create it manually in the &lt;code&gt;utils&lt;/code&gt; directory&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd utils &amp;amp;&amp;amp; touch sendEmail.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5yb5zpu5pw42ja9alkj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe5yb5zpu5pw42ja9alkj.png" alt="Screen Shot 2022-01-11 at 12.01.38 AM.png" width="598" height="388"&gt;&lt;/a&gt;&lt;br&gt;
Good! we need to require sendGrid in &lt;code&gt;sendEmail.js&lt;/code&gt; :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const sendgrid = require ('@sendgrid/mail');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And configure it to send emails (&lt;strong&gt;add this code just below the import&lt;/strong&gt;) :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

 const sendEmail = ({ to, from, subject, text, html }) =&amp;gt; {
    const msg = { to, from, subject, text, html };
    return sendgrid.send(msg);
};

module.exports = sendEmail;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;sendEmail.js&lt;/code&gt; file should look like this :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const sendgrid = require ('@sendgrid/mail');


sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

 const sendEmail = ({ to, from, subject, text, html }) =&amp;gt; {
    const msg = { to, from, subject, text, html };
    return sendgrid.send(msg);
};

module.exports = sendEmail;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now this is where the sendGrid API Key we created comes to play, if you check the above code, you can see that we are setting the api key from the environment variables, but it does not exist in our project yet so let's create a new &lt;code&gt;.env&lt;/code&gt; file to embed the &lt;code&gt;SENDGRID_API_KEY&lt;/code&gt;,  in the top level directory (same as index.js) run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;touch .env 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1lcpg4w5nbo1ryy15r9k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1lcpg4w5nbo1ryy15r9k.png" alt="Screen Shot 2022-01-11 at 12.04.09 AM.png" width="598" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Open  the &lt;code&gt;.env&lt;/code&gt; file and add the api key :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SENDGRID_API_KEY=your api key goes here
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft4mqbofjnwavrl9o29s1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft4mqbofjnwavrl9o29s1.png" alt="Screen Shot 2022-01-11 at 12.06.39 AM.png" width="800" height="247"&gt;&lt;/a&gt;&lt;br&gt;
Great, we are done setting up the sendGrid email client but lastly we need to make the &lt;code&gt;sendEmail.js&lt;/code&gt; file pay attention to the environment variable so let's configure it by adding this code above  in &lt;code&gt;sendEmail.js&lt;/code&gt; file (line 1):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;require('dotenv').config();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now let's open &lt;code&gt;index.js&lt;/code&gt; file  and require the &lt;code&gt;sendEmail&lt;/code&gt; function we exported so we can configure it to work with express :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const sendEmail = require ('./utils/sendEmail');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And add this code below :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;app.post('/api/test-email', async(req, res)=&amp;gt;{
    try {
        await sendEmail({
            //the client email 
            to: 'address you intend sending email to’(Try with any of your emails)',
            //sendGrid sender id 
            from: 'your real email goes here (the one you signed up with)',
            subject: 'Does this work?',
            text: 'Glad you are here .. yes you!',
            html:'&amp;lt;strong&amp;gt;It is working!!&amp;lt;/strong&amp;gt;'
        });
        res.sendStatus(200);
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the complete &lt;code&gt;index.js&lt;/code&gt; file should look like this :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const express = require ('express');
const app = express();
const port= 3000;
const sendEmail = require ('./utils/sendEmail');

//don't forget to set ( to and from email)

app.post('/api/test-email', async(req, res)=&amp;gt;{
    try {
        await sendEmail({
            //the client email 
            to: 'address you intend sending email to’(Try with any of your emails)',
            //sendGrid sender id 
            from: 'your real email goes here (the one you signed up with)',
            subject: 'Does this work?',
            text: 'Glad you are here .. yes you!',
            html:'&amp;lt;strong&amp;gt;It is working!!&amp;lt;/strong&amp;gt;'
        });
        res.sendStatus(200);
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
});

app.listen(port, () =&amp;gt;{
    console.log(`Server is listening on port ${port}`);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;this is how i set up my emails, you can follow the same pattern&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; to: 'evansansongg+test@gmail.com',

 from: 'evansansongg@gmail.com',
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Congrats ** for making it up to this point, we can now test our route with postman.&lt;br&gt;
start the development server and  send a &lt;code&gt;POST&lt;/code&gt; request to ** localhost:3000/api/test-email&lt;/strong&gt;&lt;br&gt;
:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node index
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now open postman and send the request and if everything went smooth you should get  &lt;strong&gt;ok&lt;/strong&gt; response.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi60trvoqbs4ojm9cunbj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi60trvoqbs4ojm9cunbj.png" alt="Screen Shot 2022-01-11 at 12.26.59 AM.png" width="800" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And when you check your inbox, we can see the email has been delivered successfully (&lt;strong&gt;if not in your inbox you can check your spam messages and mark it as &lt;code&gt;not spam&lt;/code&gt; and every subsequent email will be delivered to your inbox&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmi2le95tj6jfxytnbe1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmi2le95tj6jfxytnbe1.png" alt="Screen Shot 2022-01-11 at 12.32.22 AM.png" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  CONGRATULATIONS 🎉🔥
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;In this article, you’ve learned how to use a transactional email service (in this case, &lt;strong&gt;SendGrid&lt;/strong&gt;) to send email from within NodeJs application, hopefully this helps someone out there!!! &lt;/p&gt;

&lt;p&gt;If you run into any problem , you can get the complete code &lt;a href="https://github.com/evans646/sendGrid-Demo" rel="noopener noreferrer"&gt;here&lt;/a&gt;,  comment below or get in touch with me on  my &lt;a href="https://www.linkedin.com/in/evansprofile/" rel="noopener noreferrer"&gt;Linkedin&lt;/a&gt; &lt;a href="https://www.instagram.com/loveyours.164/" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt; &lt;a href="https://twitter.com/evansansongg" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; Good luck!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>UDERSTANDING JWT -JSONWEBTOKEN</title>
      <dc:creator>Grayman Evans</dc:creator>
      <pubDate>Thu, 23 Dec 2021 22:10:48 +0000</pubDate>
      <link>https://dev.to/grayman646/uderstanding-jwt-jsonwebtoken-2a5i</link>
      <guid>https://dev.to/grayman646/uderstanding-jwt-jsonwebtoken-2a5i</guid>
      <description>&lt;p&gt;In &lt;strong&gt;token-based authentication&lt;/strong&gt;, we store the user’s state on the client. &lt;strong&gt;JSON Web Token (JWT)&lt;/strong&gt; is an open standard (&lt;strong&gt;RFC 7519&lt;/strong&gt;) that defines a way of securely transmitting information between a client and a server as a JSON object. In this blog, I will use tokens and JWT terms to demonstrate how the transmission between the client and the server actually works. &lt;/p&gt;

&lt;h3&gt;
  
  
  ANATOMY OF JWT
&lt;/h3&gt;

&lt;p&gt;The anatomy of a JWT  contains three forms that is the  Header , Payload and the Signature . The headers tells the signing algorithm of the token, payload is the data that  the JWT contains which can be the users profile and other information and the signature part verifies the authenticity of the parts. The pieces of data are referred to us claims. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz2ggeq00wufweuzuqie1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz2ggeq00wufweuzuqie1.png" alt="1_u3a-5xZDeudKrFGcxHzLew.png" width="800" height="518"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Example of JWT
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above example uses the  Base64 URL-encoded JSON object. It contains information describing the type of token and the signing algorithm used, such as HMAC, SHA256, or RSA.&lt;/p&gt;

&lt;h4&gt;
  
  
  Example
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
   "alg": “RSA”,
   "typ": "JWT"
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The JWT &lt;strong&gt;Payload&lt;/strong&gt; contains claims that are pieces of information asserted about a subject. The claims will contain the statements about the user and any other additional information. The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature. Claims will either be registered, public or private.&lt;/p&gt;

&lt;h4&gt;
  
  
  Example
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
   “Username”: “Jackman”,
   “Email”: "Jackman@example.com”,
   "admin": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt; Creating the JWT &lt;strong&gt;signature&lt;/strong&gt; involves taking the encoded header, payload,  the signing using the signing algorithm specified  and a secret key.&lt;/p&gt;

&lt;h4&gt;
  
  
  Example
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above will create a JWT token using the &lt;strong&gt;HMAC SHA256 algorithm&lt;/strong&gt;. This is the signature to verify that the token has not been modified  when the secret key is applied on the back-end. Meaning anyone who have the token can see the data of the token unless encrypted  but they cannot modify the data in the token unless they have the secrete key which should not be possible  since the server is the only thing that have access to the secrete key.&lt;/p&gt;

&lt;h3&gt;
  
  
  HOW JWT IS USED
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt; The user logs in ( they send their credentials to the server and the server will check if it's correct and logs in)&lt;/li&gt;
&lt;li&gt;Upon the request, the server verifies the credentials and generates  a JWT token containing the user information and sends it back to the client (front-end)&lt;/li&gt;
&lt;li&gt;The front-end then stores the JWT (usually in cookies, sessions or local storage) and includes this JWT whenever it needs privilege access to.&lt;/li&gt;
&lt;li&gt;The server then uses the JWT to verify the validity of the token that the client sent is legit and has not been modified.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But before the front-end send a JWT to the server ,it will look like this in the request header  &lt;strong&gt;{authentication:'Bearer  ’}&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  SIGNING VRS ENCYPTING TOKENS
&lt;/h3&gt;

&lt;p&gt;Signing proves that the data in the JWT has not been modified, where as  encrypting is  like preventing the data in the JWT from being seen by third parties. JWT are not encrypted by default.&lt;/p&gt;

&lt;h3&gt;
  
  
  ADVANTAGES OF JWT (Token-based authentication)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Token based  authentication is stateless  (all the information is inside the token itself)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;They also uses JSON(JavaScript object notation) which is compact  and secure compared to others like xml.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The data is stored in the JWT, meaning it can contain any type of data giving the flexibility on what information is to be included in the token.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;And Tokens remain valid until they expire or until the data has been modified.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Logout is also simple by destroying  the token  in the browser without server interaction.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;NOTE:&lt;/strong&gt;The user will have to re-authenticate the tokens when they expire so they have to login every two days or something depending on the expiration date set on the token. &lt;/p&gt;

&lt;h3&gt;
  
  
  LIMITATIONS
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Storing a lot of data in the token makes it huge, which slows the requests.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Token in the client-side might be hijacked by an attacker making it vulnerable to Cross-site scripting (XSS) attacks which often occurs when an outside entity can execute code within your domain by embedding malicious JavaScript on the page to read and compromise the contents of the browser storage.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  DEMO
&lt;/h3&gt;

&lt;p&gt;To carry on with this Demo, you must have NodeJs, MongoDB installed on your system, you can install the latest MongoDB version &lt;a href="https://docs.mongodb.com/manual/installation/" rel="noopener noreferrer"&gt;here&lt;/a&gt;, latest NodeJs version &lt;a href="https://nodejs.org/en/" rel="noopener noreferrer"&gt;here&lt;/a&gt;,you must also know how to use basic terminal commands and have postman account, you can sign up &lt;a href="https://www.postman.com/" rel="noopener noreferrer"&gt;here&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;We will  build a simple RESTful API to use JWT to understand how all this works. To begin you need to get the starter template on my GitHub &lt;a href="https://github.com/evans646/jwt-demo" rel="noopener noreferrer"&gt;here&lt;/a&gt;. Follow the instructions in the &lt;strong&gt;README.md&lt;/strong&gt; to get the server up and running and come back to this demo. &lt;/p&gt;

&lt;p&gt;There are a few packages we will need to install :&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;a href="https://www.npmjs.com/package/bcrypt" rel="noopener noreferrer"&gt;Bcrypt&lt;/a&gt;  to encrypt the user password.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/dotenv" rel="noopener noreferrer"&gt;dotenv&lt;/a&gt; to configure the environment variables and,&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.npmjs.com/package/jsonwebtoken" rel="noopener noreferrer"&gt;Jsonwebtokens &lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So open the project and install the packages we will need , in the project directory (outside the src directory) run this command :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install  bcrypt  dotenv jsonwebtoken
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After these are installed , we will have to configure the signup route to be able to sign up users and get the user information:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcfer1azo6p1pfk3au7o9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcfer1azo6p1pfk3au7o9.png" alt="Screen Shot 2021-12-22 at 10.53.01 AM.png" width="446" height="464"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;src -&amp;gt; routes/ :&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;touch signUpRoute.js

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good! now let’s import the packages and add the following code to the &lt;strong&gt;signUpRoute.js&lt;/strong&gt; file :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { getDbConnection } from '../db';


export const signUpRoute = {
    path: '/api/signup',
    method: 'post',
    handler: async (req, res) =&amp;gt; {
        const { email, password } = req.body;
        // this is the name of the database 
       //which  will be created by default 
        const db = getDbConnection('jwt-demo-db');
        // checking to see if the user already exists in the db
        const user = await db.collection('users').findOne({ email });
        if (user) {
            res.sendStatus(409);
        };
      //if no user exist in the database with such credentials, 
      //we hash the password and save the user to the db 
        const passwordHash = await bcrypt.hash(password, 10);
        const personalInfo= {
            hairColor: 'brown',
            favoriteFood: 'rice ',
            bio: 'I am the father of all',
        };
        const result = await db.collection('users').insertOne({
            email,
            passwordHash,
            info: personalInfo,
            isAdmin: false,
        });
        const { insertedId } = result;
 // code here 
    }
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With this in place, we can now generate json web token for the information that will be send back to the client so they can store and use it. We need to configure the &lt;strong&gt;JWT environment variable&lt;/strong&gt;, so in the top level folder outside the src folder , run this command  :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;touch .env 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a new file for us  so we can insert out secret key:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JWT_SECRET=thywillbedone
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;NOTE :&lt;/strong&gt; you can change the secrete key to your own&lt;/p&gt;

&lt;p&gt;Now we can  generate  json web token by adding this code just below the inserted id on the &lt;strong&gt;signUpRoute.js :&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  jwt.sign({
            id: insertedId,
            email,
            info: personalInfo,
            isAdmin: false,
        },
        process.env.JWT_SECRET,
        {
            expiresIn: '2d',
        },
        (err, token) =&amp;gt; {
            if (err) {
                return res.status(500).send(err);
            }
            res.status(200).json({ token });
        });
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Making the complete &lt;strong&gt;signUpRoute.js&lt;/strong&gt; file look like this :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import bcrypt from "bcrypt";
import jwt from "jsonwebtoken";
import { getDbConnection } from "../db";

export const signUpRoute = {
  path: "/api/signup",
  method: "post",
  handler: async (req, res) =&amp;gt; {
    const { email, password } = req.body;
    // this is the name of the database which  
    // will be created by default
    const db = getDbConnection("jwt-demo-db");
    // checking to see if the user already exists
    const user = await db.collection("users").findOne({ email });
    if (user) {
      res.sendStatus(409);
    }
    //if no user exist in the database with such credentials,
    //we hash the password and save the user to the db
    const passwordHash = await bcrypt.hash(password, 10);
    const personalInfo = {
      hairColor: "brown",
      favoriteFood: "rice ",
      bio: "I am the father of all",
    };
    const result = await db.collection("users").insertOne({
      email,
      passwordHash,
      info: personalInfo,
      isVerified: false,
    });
    const { insertedId } = result;

    jwt.sign(
      {
        id: insertedId,
        email,
        info: personalInfo,
        isAdmin: false,
      },
      process.env.JWT_SECRET,
      {
        expiresIn: "2d",
      },
      (err, token) =&amp;gt; {
        if (err) {
          return res.status(500).send(err);
        }
        res.status(200).json({ token });
      }
    );
  },
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Great!!!, but we need to add the route to the index file to be able to make it work :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;src -&amp;gt; routes -&amp;gt; index.js&lt;/strong&gt;   and add :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { signUpRoute } from './signUpRoute';

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now add &lt;strong&gt;signUpRoute&lt;/strong&gt; to the routes array :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { testRoute } from './testRoute';
import { signUpRoute } from './signUpRoute';

export const routes = [
    testRoute,
    signUpRoute,
];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Don't worry too much about the structures of the routes unless you are curious 👀 It is also another efficient way of structuring our app&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now we can start our server and test our route with postman by sending a POST request to :&lt;/p&gt;

&lt;p&gt;&lt;a href="http://localhost:8080/api/signup" rel="noopener noreferrer"&gt;http://localhost:8080/api/signup&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Firstly we need to make the server pay attention to the environment  variable so let's  add  ( &lt;strong&gt;-r dotenv/config&lt;/strong&gt;) by editting  the &lt;strong&gt;package.json&lt;/strong&gt; file scripts section to this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  "scripts": {
    "start": "nodemon --exec babel-node -r dotenv/config ./src/server.js",
    "test": "echo \"Error: no test specified\" &amp;amp;&amp;amp; exit 1"
  },
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the &lt;strong&gt;package.json&lt;/strong&gt; file should also look like this :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "name": "back-end",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node -r dotenv/config ./src/server.js",
    "test": "echo \"Error: no test specified\" &amp;amp;&amp;amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "7.13.10",
    "@babel/node": "7.13.12",
    "@babel/preset-env": "7.13.12",
    "bcrypt": "^5.0.1",
    "dotenv": "^10.0.0",
    "express": "4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "3.6.5",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "nodemon": "2.0.7"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now start the server and set the accept parameters  in postman to be:  raw - json&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnety9q8zkt0m0v4x4bj3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnety9q8zkt0m0v4x4bj3.png" alt="Screen Shot 2021-12-22 at 11.11.46 AM.png" width="800" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The data we are expecting will look like this, so add this credentials to the form data:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "email":"someone@gmail.com",
    "password":"noonecanstopit323"
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffn73qpducbn6zooljt7l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffn73qpducbn6zooljt7l.png" alt="Screen Shot 2021-12-22 at 11.14.12 AM.png" width="800" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If configuration was successful and you click send, you should get a response like this :&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;{&lt;br&gt;
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwZGNkMzI4MzQwMzQ3NzcxZWVhNmUxMyIsImVtYWlsIjoiZG90QGdtYWlsLmNvbSIsImluZm8iOnsiaGFpckNvbG9yIjoiIiwiZmF2b3JpdGVGb29kIjoiIiwiYmlvIjoiIn0sImlzVmVyaWZpZWQiOmZhbHNlLCJpYXQiOjE2MjUwODQ3MTMsImV4cCI6MTYyNTI1NzUxM30.Hadj4ReKFOj46-H7ua7a6yPAhvE8eenLQ9KNwgzfOcE"&lt;br&gt;
}&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What we get back is the token which contains all the data for the new user. &lt;/p&gt;

&lt;p&gt;To verify this we can use the  jwt.io website to parse the JWT token information. You can use jwt.io to experiment with JSON Web Tokens by decoding and encoding them.&lt;/p&gt;

&lt;p&gt;So copy the token and paste it in the box and you should see the token decoded!! containing the exact information we signed with jwt. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffyj021rb6kvuyze9x0us.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffyj021rb6kvuyze9x0us.png" alt="Screen Shot 2021-12-22 at 11.35.09 AM.png" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftujxopb6jw6hg1xh3ie1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftujxopb6jw6hg1xh3ie1.png" alt="Screen Shot 2021-12-22 at 11.59.05 AM.png" width="800" height="339"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is how the information will be stored on the client side when the user signs in so they can access it and use it however. &lt;/p&gt;

&lt;p&gt;We can even verify from the mongo shell that the newly created user was saved to the database. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzy9r6m7mweik14pd6434.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzy9r6m7mweik14pd6434.png" alt="Screen Shot 2021-12-23 at 12.16.30 PM.png" width="800" height="599"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  SUMMARY
&lt;/h3&gt;

&lt;p&gt;Authentication tokens and 2FA play a key role in establishing zero-trust network access control. For example a server could generate a token that has the claim "logged in as administrator" and provide that to a client. The client could then use that token to prove that it is logged in as admin.  &lt;/p&gt;

&lt;p&gt;Thanks a lot for coming through! I wish you a merry Christmas and a happy new year in advance! Happy coding.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
