Forem: Mary Gathoni

How to Upload an Image to a Linode Storage Bucket Using a Pre-Signed URL

Mary Gathoni — Wed, 01 Mar 2023 12:12:07 +0000

After coming across the February Linode hackathon, I started experimenting with Linode. However, I had a hard time figuring out how to upload images from my Next.js app to a Linode storage bucket. This was probably because I had never worked with storage buckets before. But, after some heavy googling and experimentation, I figured it out and decided to create this article to share how I did it.

Below, I will guide you through the process of using pre-signed URLs to upload images to a Linode bucket using the AWS-SDK JavaScript client library. To select images, I’ll create a simple form with an input element that accepts images.

Prerequisites

Before you begin, you should have:

A good grasp of React concepts.
A basic Next.js application: I’m assuming you have a Next.js application already. If you don’t, follow the instructions from the official getting started guide to create one.
Node.js and npm installed: If you don't have them installed, you can download them by following these tutorials for Windows and Linux.
A code editor. I'm using VS Code.

Setting Up Linode

First things first, sign up for a Linode account following these instructions:

Go to the Linode website and click the "Sign Up" button in the top right corner of the homepage to sign up.
Follow the prompts to verify your account.
Choose your preferred payment method, either credit card or PayPal, and enter the relevant details. If you are a first-time user, you will be given a $100 credit (It’s been enough for me to experiment so far).
Agree to Linode's terms of service and privacy policy by clicking on the checkboxes.
Click on the "Create Account" button to complete the process.

Verify your email then log in to Linode.

Creating a Linode Object Storage Bucket

The object storage bucket is where you’ll store the images. You could store them in a database, but your database performance would end up being slow since media files take up a lot of space. Storing the images in a storage bucket and then saving the file metadata like its filenames and file paths in the database is better for performance.

Create a Linode storage bucket by following these steps:

Log in to the Linode Cloud Manager at cloud.linode.com.
In the left-hand sidebar, click on "Object Storage" under the "Storage" section.
Click the "Create a Bucket" button in the top right corner.
Enter a name for your bucket and select the region where you want it to be stored.
Click the "Create Bucket" button to create your new storage bucket.
Navigate to your new bucket and on the Access tab, select “Public-read” from the access list dropdown to allow everyone including your application to read the objects in the bucket. This will be useful when you start serving the images on your site.

Once you’ve created the bucket, create an access key that you’ll use to interact with the bucket by clicking the “Create access key” button on your object storage dashboard.

On the modal that opens, copy the access key id and the secret access key and save them in a .env file in your application.

In the next section, we’ll create a form that accepts images from users.

Accepting Images From Users

In the pages directory, create a new folder called upload/page.js

Then, in this file create a form containing an input element of type file that allows users to select an image from their file system.

import { useState } from "react";
export default function Upload() {
  const [file, setfile] = useState("");
  const handleUpload = (e) => {
    e.preventDefault();
    // get signed url
    // use signed url to upload image
  };
  const handleChange = (e) => {
    const file = e.target.files[0];
    setfile(file);
  };
  return (
    <form onSubmit={handleUpload} className={styles["upload-form"]}>
      <input type="file" onChange={handleChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

The form calls a function called handleUpload when a user submits it. This function should retrieve a signed URL from an API route we will create in the step and use it to upload the image to the storage bucket.

Generate a Pre-Signed URL

A pre-signed URL is a URL that provides temporary access to a specific object in a storage bucket. It allows the users of an application to access the object without credentials which helps maintain the security of your storage bucket.

Follow the steps below to retrieve a pre-signed URL to upload images to Linode.

Install the @aws-sdk/s3-request-presigner and @aws-sdk/client-s3 libraries using npm by running the following command:
```
npm install @aws-sdk/s3-request-presigner @aws-sdk/client-s3
```
You will also need the uuid package to generate unique file names for the uploaded images so install it too.
```
npm install uuid
```

Create an S3 client object using your Linode credentials.

const { S3Client } = require("@aws-sdk/client-s3");

const s3Client = new S3Client({
  endpoint: 'your_bucket_endpoint',
  region: 'your_cluster_region',
  credentials: {
    accessKeyId: 'your_access_key_id',
    secretAccessKey: 'your_secret_access_key',
  },
});

Replace the placeholders above with your storage bucket details.

In the handler function, create a PutObjectCommand. This command represents a request to store an object in the bucket.

const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");

export default async function handler(req, res) {
  const filepath = `${uuidv4()}-${req.body.filename}`;
  try {
    const putObjectCommand = new PutObjectCommand({
      Bucket: req.body.bucketname,
      Key: filepath,
      ACL: "public-read", // This allows anyone to access the uploaded image
    });
  } catch (error) {
    return res.json({ error: error.message });
  }
}

Replace the placeholders above with your bucket name. Note that the Key property is assigned a unique image path which we are creating by pre-pending a unique ID from the uuid package to the file name. This is crucial to avoid accidental data loss because if two or more images have the same name, they will overwrite each other.

Once you have created the S3 client object and the PutObjectCommand, you can use the getSignedUrl function from the @aws-sdk/s3-request-presigner library to get a pre-signed URL for the command. This function generates a URL that you can use to upload your object to your Linode bucket. Here's how you can use it:

const { getSignedUrl } = require("@aws-sdk/s3-request-presigner");

export default async function handler(req, res) {
  try {
    const filepath = `${uuidv4()}-${req.body.filename}`;
    const putObjectCommand = new PutObjectCommand({
      Bucket: req.body.bucketname,
      Key: filepath,
      ACL: "public-read", // This allows anyone to access the uploaded image
    });

    const signedUrl = await getSignedUrl(s3Client, putObjectCommand, {
      expiresIn: 60, // Expires in 1 minutes
    });

    return res.json({
      signedUrl: signedUrl,
      filepath,
    });
  } catch (error) {
    return res.json({ error: error.message });
  }
}

The getSignedUrl function takes these arguments:

* The S3 client object.

* The PutObjectCommand

* An options object that specifies the expiration time for the URL to 1 minute (60 seconds).

Once you have the pre-signed URL, you can return it to the client side together with the path to the file.

Using the Signed URL to Upload Images

In the upload page, modify the handleUpload() function to retrieve the signed URL by making a fetch request to the /api/getSignedUrl endpoint.

const handleUpload = async (e) => {
  e.preventDefault();
  // get signed url
  if (file) {
      // getsignedurl
      const response = await fetch("/api/getSignedUrl", {
        method: "post",
        body: {
          bucketname: process.env.BUCKET_NAME,
          filename: file.name,
        },
      });
      const data = await response.json();
      const signedUrl = data.signedUrl;
      const filepath = data.filepath; // store filepath in database
  }
  // use signed url to upload image

};

The response object from /api/getSignedUrl also contains the file path to the image. You can save this file path to the database and later retrieve it when you serve the images on your site.

After getting the signed URL, we can use it to upload the image to Linode via a put request.

const handleUpload = async (e) => {
  e.preventDefault();
  // get signed url
  if (file) {
      // getsignedurl
      const response = await fetch("/api/getSignedUrl", {
        method: "post",
        body: {
          bucketname: process.env.BUCKET_NAME,
          filename: file.name,
        },
      });
      const data = await response.json();
      const signedUrl = data.signedUrl;
      const filepath = data.filepath; // store filepath in database

      // Use signed url to upload image
      const uploaded = await fetch(`${signedUrl}`, {
        method: "put",
        body: {
          file: file,
        },
        headers: {
          "Content-Type": file.type,
          "x-amz-acl": "public-read",
        },
      });
      if (uploaded.status == 200) {
        // Successfully uploaded image
      } else {
        // Could not upload
      }
    }

};

Here, the headers option specifies the content type and allows public access to the image. This way, when you use the image file path on your site, you won’t get an access denied error.

Next Steps

This article showed you how to use pre-signed URLs to upload images to an object storage bucket using an AWS S3 client library. The next step would be to store the image file paths returned every time you create a signed URL to a table in your database. For example, if the images you are storing are profile pictures, you can store the file paths to the accounts table associated with the user that is currently authenticated.

Hope this was helpful! Thanks for reading.

How to Build a Simple CRUD API using NodeJS, Express, and MongoDB

Mary Gathoni — Wed, 10 Nov 2021 20:12:30 +0000

In this post, we will be building a CRUD API with nodeJS and Express.

Introduction

CRUD stands for Create(Insert data to database), Read (Retrieve data from database), Update (Edit data from database), and Delete (delete data from database)

It is a popular design through which Web APIs interact with databases.

This tutorial shows you how to:

Set up an express server
Set up routes with express
Connect to MongoDB using Mongoose
Write mongoose models
Use Mongoose to make database queries

Prerequisites

At least node 8.10 and npm >= 5.6
Working knowledge of nodeJS
JavaScript concepts like arrow functions, object destructuring, and async/await.

I am using Ubuntu 18.04 and a VS Code editor

Create a new folder

Open your terminal and create a new folder and move into it.

mkdir crud-api-nodejs && cd crud-api-nodejs

Initialize npm. You can change the options or you can accept the default options.

npm init -y

Create an Express Server

Install Express and Mongoose

npm i express mongoose

Create server.js and open VS Code

touch server.js
code .

In ./server.js, add the following code

// Require express
const express = require('express')
// Initialize express
const app = express()

// parse json objects
app.use(express.json()) 

// parse url encoded objects- data sent through the url
app.use(urlencoded({ extended: true})) 

// create a server
const PORT = 8080
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT  }`)
}

In the above code, we have,

Added express to our app
Initialized express
Added middleware to parse JSON and URL encoded data.
Started a server

Connect to database

In ./db.js

const mongoose = require('mongoose')
const dbURI = 'mongodb://localhost:27017/bookDb'
mongoose.connect(dbURI, {useNewUrlParser:true})
// connect to database
const db = mongoose.connection
// if error
db.on("error", (err) => {
  console.error(`err: ${err}`)
})// if connected
db.on('connected', (err, res) => {
  console.log('Connected to database')
})```



Import `./db.js` to `./server.js`


```javascript
   const express= require('express')const app = express()
   const db = require('./db')
   ...

Create Book Schema Model in ./bookSchema.js

const mongoose = require('mongoose')const bookSchema = 
mongoose.Schema({
  title: {
  type: String,
  required: true
  },
  author: {
    type: String,
    required: true
  },
  publisher: {
    type: String,
    required: true
  },
  read: {
    type: Boolean,
    required: true
  }
})
// Export model
module.exports = mongoose.model('Book', 
  bookSchema)

Create

Here is what happens

A client will send book info to our server through the request body.
Check whether the data was actually sent, if not, send a bad request response
Create a new record in the database
If successful, send a 201 created response back

Let's first create a helper function for creating a database record.

In ./dbHelpers.js add the following:

const Book = require('./bookSchema')
   exports.create = async (data) => {
    try{
    const newBook = new Book(data)
    const savedBook = newBook.save()
    if(!savedBook) throw new Error('Book could not be saved')
    return {error: null}
    } catch (error) {
      return {error: error.message}
    }
}

Remember to import the helper function in ./server.js

    const { create } = require('./dbHelpers')

Now in ./server.js, add the following,

app.post('/create', async (req, res) ⇒ {
  //check if req.body is empty
  if (!Object.keys(req.body).length) {
    res.status(400).json({
    message: 'Request body cannot be empty'
  })
  }
  const {title, author, publisher, read} = (req.body)
  // create a record in db
  const book = await create({title, author, publisher, read})
  if (book.error) {
    res.status(500).json({
      message: book.error
    })
  }
  res.status(201).json({
    message: ‘New book record created’
  })
})

READ

Read all

To read all book records in the database, create a query that matches all the documents.

In ./dbHelpers.js, add the following

exports.readAll = async () => {
  try{
    const books = await Book.find({})
    if (!books) throw new Error('Book not found')
    return {error: null, data: books}
  }catch(error) {
      return {error: error.message, data: null}
  }
}

Add route in ./server.js

. . .
const {create, readAll } = require('./dbHelpers')
. . .
app.get('/read-all', async (req, res) => {
  const books = await readAll()
  if (books.error) {
    res.status(500).json({
      message: error.message,
      books: books.data
    })
  }
  res.status(200).json({
      message: 'success',
      books: books.data
    }) 
})

Read One

To retrieve one record, use findById and pass the Id in the URL as a parameter.

Add a helper function in ./dbHelpers.js

exports.readOne = async (id) => {
  try{
    const book = await Book.findByIdAndUpdate(id)
    if(!book) throw new Error('Could not retrieve book')
    return {error: null, data:book}
   } catch (error) {
     return {error: error.message, data:null}
  }
}

Add route in ./server.js

. . .
const {create, readAll, readOne } = require('./dbHelpers')
. . .
app.get('/read-one/:bookID', async (req, res) ⇒ {
  const book = await readOne(req.params.bookID)
  if (book.error) {
    res.status(500).json({
      message: book.error,
      books: book.data
    })
  }
  res.status(200).json({
      message: 'success',
      book: book.data
    }) 
})

UPDATE

Pass in the id of the document you want to update via the URL and the data to update via the request body.

In ./dbHelpers.js

exports.update = async (id, data) ⇒ {
  try{
    const updatedBook = await Book.findByIdAndUpdate(id, data,{new: true})
    if(!updatedBook) throw new Error('Failed to update book')
    return {error: null, data: updatedBook}
   } catch (error) {
     return {error: error.message, data: null}
  }
}

In ./server.js

. . .
const {create, readAll, readOne, update } = require('./dbHelpers')
. . .
app.put('/update/:bookID', async (req, res) => {
   if (!Object.keys(req.body).length) {
       res.status(400).json({
       message: 'Request body cannot be empty',
       book: null
     })
  }

  const book = await update(req.params.bookID, req.body)
  if (book.error) {
    res.status(500).json({
      message: book.error,
      book: book.data
    })
  }
  res.status(200).json({
      message: 'success',
      book: book.data
    }) 
})

DELETE

Delete One

Pass the Id of the document to delete via the URL.
In ./dbHelpers.js

exports.deleteOne = async (id) => {
  try{
    const isDeleted = await Book.findByIdAndDelete(id)
    if (!isDeleted) throw new Error('Failed to delete book')
    return { error: null}
  }catch (error) {
  return { error: error.message}
  }
}

In ./server.js

. . .
const {create, readAll, readOne, update, deleteOne } = require('./dbHelpers')
. . .
app.delete('/delete/:bookID', async (req, res) => {
  const isDeleted = await deleteOne(req.params.bookID)
  if (isDeleted.error) {
    res.status(500).json({
      message: isDeleted.error,
    })
  }
  res.status(200).json({
      message: 'Deleted Successfully'
    }) 
})

Delete All
In ./dbHelpers.js

exports.deleteAll = async () => {
  try{
    const isDeleted = await Book.deleteMany({})
    if (!isDeleted) throw new Error('Failed to delete books')
    return {error: null}
  }catch (error) {
  return { error: error.message }
  }
}

In ./server.js

. . .
const {create, readAll, readOne, update, deleteOne, deleteAll } = require('./dbHelpers')
. . .
app.delete('/delete-all', async (req, res) ⇒ {
  const isDeleted = await deleteAll(req)
  if (isDeleted.error) {
    res.status(500).json({
      message: isDeleted.error,
    })
  }
  res.status(200).json({
      message: 'Deleted Successfully'
    }) 
})

And that's it a simple CRUD API using mongoose, express, and nodeJS.

I learned a lot when writing this post and I hope you learn something too.

If there is anything in this post that is not clear please let me know in the comments.

Thanks for reading and Happy coding :)

How to make Font Awesome icons more accessible

Mary Gathoni — Fri, 29 Oct 2021 10:56:17 +0000

I have been learning about web accessibility and recently had to use some Font Awesome icons in my code.

Here is how to go about making the icons accessible.

The first question to ask yourself is whether the icon is purely decorative or adds meaning to your content

Purely Decorative Icons

Add the aria-hidden attribute to each icon.

<i class="fas fa-envelope" aria-hidden="true"></i>

Icons with Meaning

Add the aria-hidden attribute to each icon.
Add an alternative text that explains the icon.

<i aria-hidden="true" class="fas fa-map-marker-alt"></i>
<span class="sr-only">Company offices location</span>
<span>Nairobi, Kenya</span>

Then hide the alternative text except to screen readers.

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Learn more about hiding content.

Interactivity Icons

For interactive icons, simply add aria-label attribute to include the alternative text

<a href="http://twitter.com/remigathoni" aria-label="Twitter account for Remi Gathoni">
  <i aria-hidden="true" class="fab fa-twitter"></i>
</a>

I hope this helps you :)

5 Quick tips to make your HTML links more accessible

Mary Gathoni — Mon, 11 Oct 2021 21:35:25 +0000

While the content of a web page remains the same, different users access it differently. The content should therefore be displayed and organized in such a way that there is not a lot of difference in how different users consume it.

I have been learning about web accessibility and here are some of the ways you can make your links more accessible.

1. Make them Focusable

By default, HTML links are focusable. This is especially useful for people who only use a keyboard to interact with a web page. It is important to know which item is currently in focus. The default focus style for Chrome is a faint blue border while for Mozilla is a dashed border. Developers have the liberty of changing these colors provided they are easily noticeable.

2. Add non-color indicators

Typically, we use a different color to define a link. However, when we consider colorblind users, this might not be the best distinguishing method to use. Instead, other indicators like underlined links can be used.
Non-color indicators mostly apply to links surrounded by blocks of text. Links in menus are more obvious due to their positioning and layout.

3. Use Relevant Link Texts

Consider this statement:

Click here to get 10% OFF.

A screen reader user who doesn't want to read all the contents of your page and instead retrieves all the links will only have a link with the text 'here'. That doesn't mean anything.
It is important to provide proper link texts so as to preserve the meaning of those links when they are taken out of context
The above statement could be rewritten as:

Get 10% OFF.

Click here is unnecessary.
According to WebAIM, some other link phrases to avoid are:

here
more
read more
link to [some link destination]
info

4. Use Optimal Link Sizes

While it is hard to determine the best link sizes, links especially those presented within their own block should not be too small or too large. Small links may make it difficult for users with motor skills disabilities to activate them while very large links may be activated by mistake.

5. Group adjacent links into one single link

Ever come across those images that are links with a title and a read more text that are also links? This is unnecessary if these links lead to the same destination. Instead, wrap the image and the text with one anchor tag to create a single large clickable area.

These 5 tips are just an overview of how you can make links more accessible.

Learn more at WebAIM's Links and Hypertext page

I hope you learned something new today. Feel free to add more tips down in the comments.

Happy Coding :)

What You Should Know About CSS Link Pseudo-classes?

Mary Gathoni — Sun, 22 Aug 2021 08:28:13 +0000

CSS Link Pseudo Classes provide a way for you to improve the user experience of your website by styling different states of the HTML links differently.

Until recently, I was only aware of the :hover and :active pseudo-classes... no I am not joking.

Well, there are others and they are amazing to use.

In this post, I will be talking about these CSS link pseudo-classes and looking at how we can use in our code.

:link
:visited
:hover
:active
:focus

But first... What are pseudo-classes?

According to MDN ,

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)

So when you append a state to a selector and specify how an element should behave in that state, you are using a pseudo-class.
For instance,

a:hover {
  color: red;
}

:hover is the pseudo-class appended to the a selector. So when a user hovers over the a tag, its font color will change to red.

Syntax

selector:pseudo-class {
  property: value;
}

There should be no space between the selector and the pseudo-class. It won't work.
You can chain together as many pseudo-classes as you want

What CSS link Pseudo-classes do

:link: Selects links that have not been visited.

:visited: Selects links that have not been visited.

:hover: Selects links that have the mouse pointer over them

:active: A state where the user clicks on a link

:focus: When a user focuses on a link after clicking it.

The styles that can be applied to the :visited pseudo-class is limited due to the browser's support for privacy. Sometimes disclosing links a user has visited can be insecure.

Chaining Pseudo-classes

Like most CSS classes, you can also chain link pseudo-classes. You can do this when you want a link in more than one state to behave a certain way.

For instance, you want to change the opacity to .9 of a visited link when a mouse pointer hovers on it.

a:visited:hover {
  opacity: 0.9;
}
// but an unvisited link to 0.7
a:link:hover {
  opacity: 0.7
}

Order of CSS Link Pseudo-classes

If you know a bit of CSS, you probably know about specificity.

CSS specificity is how browsers determine what styles will be applied to an element i.e it determines the most relevant styles.

When two selectors match in specificity, the styles appearing last in the CSS stylesheet are applied.

Consider the following:

a:hover{
  color:red;
}
a:visited{
  color:blue;
}

Maybe you would expect the visited link to change color to red on hover, but that won't happen.

Because visited comes after hover, it will override the hover pseudo-class.

The correct way of writing the above code would be:

a:visited{
  color:blue;
}
a:hover{
  color:red;
}

The order goes from :link, :visited, :hover, :focus to:active

Always use both :focus and :hover to make it more accessible since not all users hover on the links.

That's it! I hope you learned something new!

Stay awesome ;)

Important Links

Using CORS for Cross-Domain Requests

Mary Gathoni — Wed, 04 Aug 2021 19:08:47 +0000

Cover image by Hillary Black on Unsplash

If you have ever opened your browser's console and you saw No ‘Access-Control-Allow-Origin’ header is present on the requesting resource. error message in all red then this post might help you a bit.

You get that error when you try to access a resource from another domain using your browser which is not allowed.

This is due to the same-origin policy which only allows a browser to make requests to the same domain.

The policy is important as it prevents malicious scripts from accessing resources on other domains.

For instance, if you are making a request to http://domain1.com from http://domain1.com/api, the request will go through.

If you instead make the request to another domain say, www.domain2.com/api, the browser will block your request.

So what do you do in a case where you have to make a request to another domain? You use CORS!

What is CORS anyway?

CORS is an acronym for Cross-Origin Resource Sharing.

It allows servers to make cross-domain requests which are otherwise restricted due to the same-origin policy.

How it works

Before a browser makes a request to a server, it first sends a preflight request to check whether that domain and request method is allowed.

If it is, the request is made. If not, the request is blocked.

Enabling CORS

If you have access to the server, then you can enable cors on it and whitelist the domain you are making the request from.

You do this by setting the header, Access-Control-Allow-Origin, to a wildcard(*) character such that it allows any domain to make a request or to a specified list of domains.

{Access-Control-Allow-Origin: '*'}
or
(Access-Control-Allow-Origin: 'http://domain2.com'}

What if you don't have access to the server?

You could use a proxy server that will make the request on your behalf. Your origin will therefore be hidden.

One such proxy is the cors-anywhere proxy. To use it, you only need to prefix the API URL with https://cors-anywhere.herokuapp.com.

Our request URL will now look like this, https://cors-anywhere.herokuapp.com/http://domain2.com



fetch('https://cors-anywhere.herokuapp.com/www.domain2.com`)
    .then(response => {
        // response
    })
    .catch(error => console.log(error))
```
This is not the best solution though. 
Think about this... if the data you are expecting is location-specific, you will get data according to the location of the proxy server and I assume that won't help you as much. 

Also, using a proxy you have no control over can get risky in production. 

#### Create your own server
Using a server-side programming language like node js, you can simply create a server you have control over meaning you can directly enable CORS on it. 

The server to server request works because the **same-origin policy** does not apply.

To get access to the data from your script:

* Send a request to your server telling it to call the public API
* Your server receives the request because you have enabled cors
* Your server calls the public API
* Since same-origin policy does not apply for server to server requests, it receives a response back
* Your server then sends the response back to you
* You receive and use the response data

![server.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625324247193/8cZcvx1E6.png)

I hope this article helped you.

Happy coding :)

Express: req.params, req.query and req.body

Mary Gathoni — Sat, 05 Sep 2020 13:56:54 +0000

These three, req.body, req.query and req.params are part of Express request object.
They are used by the client to send data to the server.
This post outlines their differences and gives examples on how to use them.

1. req.body

Generally used in POST/PUT requests.
Use it when you want to send sensitive data(eg. form data) or super long JSON data to the server.

How to send data in request body

using curl

  curl -d '{"key1":"value1", "key2":"value2"}' -H "ContentType: application/json" -X POST http://localhost:3000/giraffe

using axios

  axios.post('/giraffe', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    ...
  })
  .catch(error => {
    ...
  })

How to get data from request body

  app.get('/giraffe', (req, res) => {
   console.log(req.body.key1) //value1
   console.log(req.body.key2) //value2
  })

Remember to use express.json() middleware to parse request body else you'll get an error

app.use(express.json())

2. req.params

These are properties attached to the url i.e named route parameters. You prefix the parameter name with a colon(:) when writing your routes.

For instance,

  app.get('/giraffe/:number', (req, res) => {
   console.log(req.params.number)
  })

To send the parameter from the client, just replace its name with the value

  GET  http://localhost:3000/giraffe/1

3. req.query

req.query is mostly used for searching,sorting, filtering, pagination, e.t.c
Say for instance you want to query an API but only want to get data from page 10, this is what you'd generally use.
It written as key=value

  GET  http://localhost:3000/animals?page=10

To access this in your express server is pretty simple too;

  app.get('/animals', ()=>{
   console.log(req.query.page) // 10
  })

I hope you found this helpful.

Thanks for reading 🥰.

Cover Photo by Adi Goldstein on Unsplash

Hackerrank's miniMaxSum JavaScript Solution

Mary Gathoni — Mon, 24 Aug 2020 07:10:48 +0000

Hey 👋🏽

This is a solution in response to this problem solving problem from hackerrank:

Given five positive integers, find the minimum and maximum values that can be calculated by summing exactly four of the five integers. Then print the respective minimum and maximum values as a single line of two space-separated long integers.

Example

arr = [1,3,5,7,9]

The minimum sum is and the maximum sum is 1 + 3 + 5 + 7 = 16. The function prints

16 24

Function Description

Complete the miniMaxSum function in the editor below.

miniMaxSum has the following parameter(s):

arr: an array of integers

Print

Print two space-separated integers on one line: the minimum sum and the maximum sum of 4 of 5 elements.

Input Format

A single line of five space-separated integers.

Constraints

1<=arr[i]<=109

Output Format

Print two space-separated long integers denoting the respective minimum and maximum values that can be calculated by summing exactly four of the five integers. (The output can be greater than a 32 bit integer.)

Sample Input

1 2 3 4 5

Sample Output

10 14

Explanation

The numbers are 1 ,2 ,3 ,4 and 5. Calculate the following sums using four of the five integers:

Sum everything except 1, the sum is 2 + 3 + 4 + 5 = 14.
Sum everything except 2, the sum is 1 + 3 + 4 + 5 = 13.
Sum everything except 3, the sum is 1 + 2 + 4 + 5 = 12.
Sum everything except 4, the sum is 1 + 2 + 3 + 5 = 11.
Sum everything except 5, the sum is 1 + 2 + 3 + 4 = 10.

My approach:

Add all array elements using reduce.
Subtract from the sum the minimum value in the array. This get the maximum sum.
Subtract from the sum the maximum value in the array. This get the minimum sum.

function miniMaxSum(arr) {
  let sum = arr.reduce((a, b) => {
    return a + b;
  });
  const min = sum - Math.max(...arr);
  const max = sum - Math.min(...arr);
  console.log(min + " " + max);
}

Thanks for reading 🥰.

Firebase Google Sign in with React

Mary Gathoni — Mon, 17 Aug 2020 19:04:03 +0000

Introduction

Firebase Authentication provides an easy way to log in users using their already existing social accounts. In this tutorial, we will be looking at how to sign in a user using their google account.

What I'll show you

Set up a Firebase project.
Initializing a Firebase app.
Enabling user authentication in Firebase.
Using social providers to log in users
Using the Context API to provide the authentication status to child components.
Protecting routes i.e allowing only authenticated users to access a route.
Handling user logout

Requirements

At least node 8.10 and npm >= 5.6
Basic understanding of react hooks

Starter Code

Clone the starter code git clone -b starter https://github.com/gathoni-k/Firebase-Google-Signin.git

First off, head here to create a project

Click on get started

You'll be taken to a projects page. Select Add Project and give your project any name you would like,you can accept google analytics or not and choose a Firebase account, You can choose the default account.
After a while, you'll be in the Project Overview Page.

To add an app, just below the Get Started... text, click on the third icon, this will let you create a web app and give your web app a nickname..

Click next and copy the firebaseConfig object, we will be using it later to initialize our app.

To enable authentication, Go back to your projects overview page and click on Authentication tab then set up sign-in method and enable Google
.

Okay cool now to the fun stuff...💃🏾💃🏾

Lets start off by grabbing that Firebase config object we grabbed from earlier, since these is sensitive information, we will want to store in a .env file and add it to the .gitignore file so that we don't mistakenly push it to a version source control provider like GitHub.

Having said that, create a .env file in the root folder and add the following

.env



REACT_APP_API_KEY=""
REACT_APP_AUTH_DOMAIN=""
REACT_APP_DATABASE_URL=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""
REACT_APP_MEASUREMENT_ID=""

Now fill it in using the corresponding values from the Firebase config object we grabbed earlier.

Note that the REACT_APP_ prefix is necessary. You can read more on setting custom environment variables in react here

To access .env variables, we will have to install dotenv. This is an npm package that loads environment variables from a .env file into process.env.



yarn add dotenv

Install Firebase



yarn add firebase

Now lets put all that to use
Create a services folder and create firebase.js file in it and add the following code

src/services/firebase.js



import dotenv from 'dotenv'
dotenv.config()
import * as firebase from "firebase/app";
import "firebase/auth";

firebase.initializeApp({
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId:  process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
});

In the above code:

we've imported dotenv and configured it.
Imported firebase
Initialized firebase app Next create a signin function that will let us sign in with google. We will use the signInWithPopup() method.

src/services/firebase.js



export const auth = firebase.auth();
const googleProvider = new firebase.auth.GoogleAuthProvider()
export const signInWithGoogle = () => {
  auth.signInWithPopup(googleProvider).then((res) => {
    console.log(res.user)
  }).catch((error) => {
    console.log(error.message)
  })
}

To use this function, we will have to import it in the Login.js file and add an onClick handler to the sign in button.

src/Login.js



import React from "react";
import "./Login.css"
import { signInWithGoogle } from "./services/firebase";
export default function Login() {
  return (
      <div className="login-buttons">
        <button className="login-provider-button" onClick={signInWithGoogle}>
        <img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon"/>
        <span> Continue with Google</span>
       </button>
      </div>
  );
}

And that's it, you can now sign in your user via their google account.
But how do you prevent unauthorized users from accessing protected routes? Well, they are several ways but I'll show you how by using the context API. The context API is a way of defining global variables that can be accessed through your components instead of passing props component to component(prop drilling).

Create a Providers folder and in it create a UserProvider.js file

src/providers/UserProvider.js



import React, {useState, useEffect,  createContext} from "react";
import { auth } from "../services/firebase"
export const UserContext = createContext({user: null})
export default () => {
  const [user, setuser] = useState(null)
  useEffect(() => {
auth.onAuthStateChanged(async (user) => {
  const { displayName, email }  = user;
  setuser({
    displayName,
    email
  })
})
  },[])
  return (
    <UserContext.Provider value={user}>{props.children}</UserContext.Provider>
  )
}

To understand the above code, we first have to understand the context API.
We will store the user value as context, and so we create that using createContext() and pass in the initial value of our user, in this case null and assign in to a variable UserContext.
UserContext will give us the Provider component which provides values. In our case it will provide us with the user.
In the default function, we will have to keep track of the authentication status of our user. This is done using the onAuthStateChanged, a function provided by firebase.auth() which we exported in the firebase.js app as auth.
Once the user signs in the state is updated with their display name and email.
Finally, the function returns the UserContext Provider component with the user value.

To use these value we have to wrap the components we want to use the user value in with the the UserProvider component.

src/App.js



import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css"
import Navbar from "./Navbar"
import Login from "./Login";
import Dashboard from "./Dashboard";
import UserProvider from "./providers/UserProvider";
function App() {
  return (
    <UserProvider>
    <Router>
    <Navbar/>
    <div className="App">
        <Switch>
          <Route exact path="/">
            <Login />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
    </div>
    </Router>
    </UserProvider>
  );
}

export default App;

The user value will now be available to our components via the useContext hook.

src/Login.js



import React, { useContext } from 'react';
import './Login.css'
import { signInWithGoogle } from './services/firebase';
import { UserContext } from './providers/UserProvider';
export default function Login() {
  const user = useContext(UserContext)
  return (
      <div className="login-buttons">
        <button className="login-provider-button" onClick={signInWithGoogle}>
        <img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon"/>
        <span> Continue with Google</span>
       </button>
      </div>
  );
}

Now what?
Now we check the user value and redirect to the dashboard page if they are authenticated

src/Login.js



import React, { useEffect, useContext, useState } from 'react';
import './Login.css'
import { signInWithGoogle } from './services/firebase';
import { UserContext } from './providers/UserProvider';
import { Redirect } from 'react-router-dom';
export default function Login() {
  const user = useContext(UserContext)
  const [redirect, setredirect] = useState(null)

  useEffect(() => {
    if (user) {
      setredirect('/dashboard')
    }
  }, [user])
  if (redirect) {
    <Redirect to={redirect}/>
  }
  return (
      <div className="login-buttons">
        <button className="login-provider-button" onClick={signInWithGoogle}>
        <img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon"/>
        <span> Continue with Google</span>
       </button>
      </div>
  );
}

So there are few new things here. First, the redirect state and the useEffect hook.
The useEffect hook will run after the component renders. It checks for the user value and if its there, that means the user is authenticated and can be redirected to the dashboard.
By setting redirect to the dashboard path, we redirect the user appropriately. Neat!

One problem though, if a user goes to /dashboard, they will still have access. We really don't want that.
To protect the dashboard route, we have to check for the user's authentication status, if authenticated then cool they can stay, if not then we kick them out by redirecting the to the login page

src/DashBoard.js



import React from "react";
import "./Dashboard.css";
import React, { useEffect, useContext, useState } from "react";
import { UserContext } from "./providers/UserProvider";
import { Redirect } from "react-router-dom";
export default function Dashboard() {
  const user = useContext(UserContext);
  const [redirect, setredirect] = useState(null);

  useEffect(() => {
    if (!user) {
      setredirect("/");
    }
  }, [user]);
  if (redirect) {
    <Redirect to={redirect} />;
  }
  return (
    <div className="dashboard">
      <h1 className="dashboard-text">Welcome Home</h1>
      <button className="logout-button">
        <img
          src="https://img.icons8.com/ios-filled/50/000000/google-logo.png"
          alt="google icon"
        />
        <span> logout</span>
      </button>
    </div>
  );
}

Now to logout, this is so simple. We just have to call auth.signOut() in our firebase.js file, import the function and add an onClick handler to the logout button.

src/services/firebase.js



...
export const logOut = () => {
  auth.signOut().then(()=> {
    console.log('logged out')
  }).catch((error) => {
    console.log(error.message)
  })
}

src/Dashboard.js



import React from "react";
import "./Dashboard.css";
import React, { useEffect, useContext, useState } from "react";
import { UserContext } from "./providers/UserProvider";
import { Redirect } from "react-router-dom";
import { logOut } from "./services/firebase";
export default function Dashboard() {
  const user = useContext(UserContext);
  const [redirect, setredirect] = useState(null);

  useEffect(() => {
    if (!user) {
      setredirect("/");
    }
  }, [user]);
  if (redirect) {
    <Redirect to={redirect} />;
  }
  return (
    <div className="dashboard">
      <h1 className="dashboard-text">Welcome Home</h1>
      <button className="logout-button" onClick={logOut}>
        <img
          src="https://img.icons8.com/ios-filled/50/000000/google-logo.png"
          alt="google icon"
        />
        <span> logout</span>
      </button>
    </div>
  );
}

This tutorial was a bit lengthy but that's it.

Thanks for reading 🥰

Implementing 2 Factor Authentication using Authy

Mary Gathoni — Tue, 02 Jun 2020 03:37:30 +0000

Hey there 👋

So what is 2FA?

The traditional way of user authentication involved the user sending an email and password which are then verified after which the user is logged in. This brings about a set of potential risks such as hacking, weak passwords, passwords reuse and many more.
2 factor authentication provides an extra step that the user has to complete before being authenticated.
This article aims at showing you how to use Authy from Twilio in your node API so as to implement 2FA.
We will be sending a code to the user's cell during sign-in which they have to send back to the API for verification.

Having said that, let's dive in

Find the completed source code of this application here

Requirements

For this project, you'll have to be know a little bit of JavaScript and working with node
Have node and npm in you machine. If not you can get it here

Get an API key from the Authy dashboard.

Head over to the Authy dashboard and sign-in either with a Twilio account or using Authy credentials.
After entering your Authy token you'll be redirected to your dashboard where you can create a new application.

Click on the New Application button at the bottom of the navigation menu
Enter your preferred app name in the pop-up dialog window and hit create
Grab the API key for production, we'll use it later.

Create a folder and name it according to you preference, move into it and in a terminal initialize npm

npm init

This will generate a package.json file for you.

Install dependencies

npm i express, mongoose,bcryptjs, authy, dotenv

Create a .env file and add the port number.

Create routes

In route.js,

const router = require('express').Router();
router.get( '/ping', async (req, res) => {
  res.send('pong')
});
module.exports = router;

This is a route to test if our app is working

Start server

In app.js

const express = require('express');
require('dotenv').config();
const routes = require('./routes');

const app = express();

app.use(express.json());
app.use('/user', routes)

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
    console.log(`Listening on ${PORT}`)
});

To run the app:

node app

You should see the following in the terminal:

Testing this route:

Now that we're sure the app works just fine, we can continue

Connect database

In db.js, add the following code
We're using a database so that we can work with persistent data.

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

mongoose.connect(process.env.MONGO_URI, {useNewUrlParser: true, useUnifiedTopology: true});

const db = mongoose.connection;

db.once('open', () => {
    console.log('MMongoose default connection open');
});

db.on('error', () => {
    console.log('An error occurred while connectiong to database');
});

To connect the database, you will have to import db.js in app.js just after importing your other packages

Define the user model

In model.js, add the following code

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const { Schema } = mongoose;

const userSchema = new Schema({
    email: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    authyId: {
        type: String,
        default: null
    }
});

userSchema.pre('save', async function(next) {
    try {
        if (!this.isModified('password')) next();
        const salt = await bcrypt.genSalt(10);
        const hashedPassword = await bcrypt.hash(this.password, salt);
        this.password = hashedPassword;
        next();
    } catch (error) {
        return next(error);
    }
});

userSchema.methods.comparePassword = function(plainPwd) {
return bcrypt.compareSync(plainPwd, this.password);
};

module.exports = mongoose.model('User', userSchema);

You may have noticed the authyId value, this is to store the id sent back by Authy after the user is registered. This id is shared across all sites that use that phone number, convenient right?

Create user account: sign up route

Add this code to route.js

router.post( '/signup', async (req, res) => {
    try {
        const { email, password } = req.body;
        const exists = await User.findOne({ email });
        if (exists) {
            return res.json({ message: "Email exists"});
        }
        const newUser = new User({
            email,
            password
        });
        await newUser.save();
        res.status(200).json({ message: "User account registered"})
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

The above code creates a user using a unique email and a password.

Enable 2 factor authentication

Before adding code to enable 2fa, we'll have to initialize Authy first.

Insert the following code above your routes code

require('dotenv').config();
const authy = require('authy')(process.env.AUTHY_API_KEY);

Then create the route

router.post('/enable/2fa', async (req, res) => {
    try {
        const { email, countryCode, phone } = req.body;
        const user = await User.findOne({ email });
        if (!user) {   
            return res.json({ message: 'User account does not exist' });
        }
        authy.register_user(email, phone, countryCode, (err, regRes) =>{
            if (err) {
                return res.json({ message: 'An error occurred while registering user' });
            }
            user.authyId = regRes.user.id;
            user.save((err, user) => {
                if (err) {
                    return res.json({ message: 'An error occurred while saving authyId into db' });
                }
            })
        });
        res.status(200).json({ message: '2FA enabled' });
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

Let's take a closer look at the above code. To register a user Authy requires the email, phone number and country code of the user.
First we have to confirm if that user account exists and if doesn't we'll send an error message.
Then call authy.register_user passing the user's credentials, this function returns a registered user whose id we store in the database.

Sign in route

For this route, we want to be able to handle a sign in using only the email and password, for users who haven't enabled 2fa and also enforce 2fa sign in for those who've enabled it.
To check whether the user has enabled 2fa we'll check if their authyId from the database is set to null, if it is, we'll log them in using an email and password only and if otherwise send an OTP to their cell.

Add the following route in route.js

router.post('/signin', async (req, res) => {
    try {
        const { email, password } = req.body;
        const user = await User.findOne({ email });
        const isMatch = await user.comparePassword(password);
        if (!user || !isMatch) {
            return res.json({ message: "Email or password incorrect"});
        }
        if (user.authyId) {
            authy.request_sms(
                user.authyId, {force: true},  
                function (err, smsRes) {
                    if (err) {
                        return res.json({ message: 'An error occurred while sending OTP to user' });
                    } 
            });
            return res.status(200).json({ message: 'OTP sent to user' });
        }
        res.status(200).json({ message: "Logged in successfully"})
    } catch (error) {
        res.status(500).json({ message: error.message })
    }
});

If user has not enabled 2fa:

If user has enabled 2fa:

Verification route

To verify the OTP sent to the user's cell, we call authy's verify function and pass to it the user id and the OTP.
If no errors occur, the user has now authenticated with a second factor and is logged in.

router.post('/verify/:token', async (req, res) => {
    try {
        const { email } = req.body
        const user = await User.findOne({ email });
        authy.verify(
            user.authyId,
            req.params.token,
            function(err, tokenRes){
                if (err) {
                    res.json({ message: 'OTP verification failed'});
                }
                res.status(200).json({ message: 'Token is valid'});
            });
    } catch (error) {
        res.status(500).json({ message: error.message});
    }
});

To recap, the main key things are

Get an API key from Authy's dashboard.
Register a user uswing authy's register_user function.
Request an sms to be sent to the cell of the registered user.
Verify the code received by the user.

You have just implemented 2 Factor Authentication using Node.js and Authy.👏

Find the completed source code of this application here

Firebase: Set and access environment variables

Mary Gathoni — Fri, 22 May 2020 15:27:18 +0000

Its never a good idea to have sensitive data like API keys in plain site.
Firebase cloud functions provide a way to set and access env variables.

Set env variable

firebase functions:config:set my.secret='giraffes are cool'

Note that each config value must have a 2-part key (e.g. foo.bar) otherwise it will fail.

Deploy your functions for the change to take effect

firebase deploy --only functions

Access env variable

const secret = firebase.config().my.secret

Now you know 😁

Use model.populate()

Mary Gathoni — Mon, 18 May 2020 12:19:37 +0000

Introduction

When you're designing your schemas, you may want to reference the data of one document in another document. This is where model.populate() comes in.
It is especially useful when you have a one to many relationship between entities.
To see this in action, we'll need two schemas where one schema is kind of a parent to the other. In this post, I'll be using a Post and a Comments schema.

Let's jump in!

In post.model.js:

const mongoose = require('mongoose');
const { Schema } = mongoose;

const postSchema = new Schema({
  username: String,
  post: String,
  comments: [{type: mongoose.Types.ObjectId, ref: Comment}]
});

module.exports = mongoose.model('Post', postSchema);

When you look at comments in the above model, you'll see its of type ObjectId, that's because we'll e pushing ids of the comment to it.
The ref is a reference to the Comment document.

In comment.model.js:

const mongoose = require('mongoose');
const { Schema } = mongoose;

const commentSchema = new Schema({
  comment: String,
  By: String
});

module.exports = mongoose.model('Comment', commentSchema);

Having done that, lets now see how we add the comment to a post.

Having the comment below:

const comment = {
  _id: 5d53612dc952f76e446d7d9b,
  comment: 'Well, it may have escaped your notice, but life isn’t fair.'
  By: 'Severus Snape'
}

To add it to a post:

let addCommentToPost = async (id, comment) => {
  let post = await Post.findById(id);
  post.comments.push(comment);
  await post.save();
  return post;
}

The returned post collection:

{
    _id : 5d73622dc452f69e446d2d9b,
    username: "Hermione Granger",
    post: 'I’m hoping to do some good in the world!',
    comments : ['5d715243c252f08e235d1d9c']
}

To retrieve a post with all the comments:

function getPost(id) {
  return post
    .findById(id)
    .populate("comments")
    .exec()
}

The returned post:

{
   _id : 5d73622dc452f69e446d2d9b,
   username: 'Hermione Granger',
   post: 'Im hoping to do some good in the world!',
   comments : [{
     _id: 5d53612dc952f76e446d7d9b,
     comment: 'It may have escaped your notice, but life isn’t fair.'
     By: 'Severus Snape'
     }]
}

Conclusion

The model.populate() method is an essential method to use when referencing one document in another. Just use type ObjectId and a ref to the document you want to get data from and you're set!