DEV Community: Nikesh Kumar T K

Securing Your Serverless APIs: Mastering JWT Authorization in AWS API Gateway with the Serverless Framework(Cognito)

Nikesh Kumar T K — Sat, 04 Nov 2023 07:22:42 +0000

Authorizing API endpoints is crucial for protecting your production application from unauthorized access. By using authorizers, you can permit only authorized users to access these endpoints, bolstering security.

The traditional method of authorization involves writing middlewares that decode and verify the token sent by the client. In this process, the request first reaches the middleware, and only after successful verification, it is forwarded to the respective handlers or controllers.

In this serverless era, authorization has become more easier and can be implemented quicky. In this article, we will look at implementing jwt authorizers that verifies users from cognito pool before reaching the lamda function that handles the request. We use serverless framework to configure and deploy our lamda functions.

Prerequisites
AWS account
Node js installed
serverless cli configured with aws

Create a serverless project.

Navigate to the folder where you want to create the project and type serverless in the terminal. Create a basic node js httpApi project by choosing option from the terminal. This will create a serverless.yml file in your directory.

Create a cognito user pool.

In the aws management console, go to cognito and create a new userpool.

Configure functions and events in your serverless.yaml

service: your-service-name
useDotenv: true

plugins:
  - serverless-plugin-typescript
  - serverless-offline

provider:  
  name: aws
  runtime: nodejs18.x
  region: ${env:YOUR_AWS_REGION}

httpApi: 
   authorizers:
      yourAuthorizer:
        type: jwt
        identitySource: $request.header.Authorization
        issuerUrl: https://cognito-idp.${env:YOUR_AWS_REGION}.amazonaws.com/${env:YOUR_COGNITO_POOL_ID}
        audience:
          - ${env:YOUR_COGNITO_APP_CLIENT_ID}

functions:
    yourFunctionName:
    handler: handlers/authorizedFunction.httpHandler
    events:
      - httpApi:
          path: /authorizedFunction
          method: post #You can specify the method you needed here.
          authorizer:
            name: yourAuthorizer

Create your lamda function

function handler(event, ctx, callback) {
  const response = {
    statusCode: 200,
    body: JSON.stringify({
      message: "Hello from authorized function",
    }),
  };
  return response;
}

module.exports.httpHandler = handler

Deploy your lamda function.

Now deploy your lamda function by typing the command serverless in the terminal. Make sure, you have configured your aws credentials in the your system.

Send request from the client by adding access token in the authorization headers

const token = 'your-bearer-token';

const dataToSend = {
 test_data:"This is a test data"
};

const headers = {
  'Authorization': `Bearer ${token}`,
  'Content-Type': 'application/json', 
}

axios.post('your api url', dataToSend, { headers })
  .then((response) => {
    console.log('POST request successful:', response.data);
  })
  .catch((error) => {
    console.error('Error making POST request:', error);
  });

Conclusion

In the above code snippets i have used sample function and sample values. You can replace them with your real values.

Detect Operating System using javascript.

Nikesh Kumar T K — Mon, 12 Dec 2022 15:16:32 +0000

Detecting the operating system of the user is crucial if you are developing a website for any tools or software. So that you can provide recommendations of software that suits the user's operating system which can be windows, mac, or Linux.

Javascript is efficient enough to do this for us. We can make use of the javascript navigator object to access the details of a user. The navigator object has a function called userAgent that returns a string that consists of details about the user's system.


let os = navigator.userAgent;
console.log(os);

The output of above code is
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

To determine the type of os,we have to check wheather the returned string contains the name of the os at any index position.To ensure this we can call indexOf method on returned string

let os = navigator.userAgent.indexOf("Windows");
console.log(os);

The output of above code is 13 since index of the word Windows is at 13 position in returned string.

This same method can be implemented to detect any operating system which will help you to provide better user experience

React useMemo for optimization

Nikesh Kumar T K — Fri, 09 Dec 2022 12:50:11 +0000

Have you ever used useMemo() hook in your react application ?.

useMemo is an amazing react hook that helps us to optimize our components in react.In this blog, i will show you how we can implement useMemo in our components to make our application more efficent and optimized.

Basically what useMemo do is it catches the data or result of a specific operation.In react, when we changes the state of a variable, the component is rerendered.Each time when the component is rendered, all the operations/calculations are performed again.
This will ultimately affect performance of our app if the operation is an expensive one.
We can avoid this by using useMemo.It takes a callback function and a dependency as arguments.All the operations that have to be performed is wrapped inside callback.Here, the operation is performed only if the state of dependency variable changes even if the component is rerendered.

useMemo implementation

import { useMemo, useState } from "react";

export default function App() {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  const [check1, setCheck1] = useState(false);
  const [check2, setCheck2] = useState(false);

  const sum = useMemo(() => {
    console.log("Calculating");
    return data.reduce((acc, data) => acc + data, 0);
  }, [check1]);
  console.log(sum);
  return (
    <div style={{ height: "100vh", display: "grid", placeContent: "center" }}>
      <button 
        onClick={() => setCheck1((p) => !p)}>Button1</button>

      <button 
        onClick={() => setCheck2((p) => !p)}>Button2</button>
    </div>
  );
}

When the above component is rendered,if you look in the console,it will print "Calculating sum " only when Button1 is clicked.When Button2 is clicked only the sum is printed in the console.This is because i passed the variable check1 as the dependency to the useMemo hook.Hence the sum is calculated only when the state of check1 changes.

Conclusion
Consider using using useMemo in your next react project.It will help you to optimize complex architectures.

Javascript Higher order functions map,reduce and filter for beginners

Nikesh Kumar T K — Wed, 07 Dec 2022 14:41:03 +0000

In this tutorial i will explain the basic concepts of javascript higher order fuctions and its usecases with hands on examples.

Before diving deep into the map,reduce and filter, lets understand what is a higher order function.The defenition of higher order function is

A higher order function is a function that takes a function as an argument, or returns a function.

In otherwords we can consider higher order functions as functions that allows us to do specific tasks such as filtering,looping etc more faster than the typical way of doing that.

map fuction

We all are familiar with the basic forloop.Obvisiously that is one of the basic concept of any programming language.We use forloop to loop through an array and to perform some operations with array elements.But a basic forloop is not returning us anything.Here, the map function come into the picture.We can use javascript map functions on arrays that allows us to loop through each array elements and will return a new array.We can modify the array elements if needed.
If the above explanation doesn't make sense to you, no problem.You will defenitely understand it as we move forward with the examples.

const numbers = [1,2,3,4,5,6,7,8];
   const modifiedArray = array.map((number,index) => {
     number * 2
   })
  console.log(modifiedArray)

Output

[2,4,6,8,10,12,14,16]

In the above code snippet, we are applying map function on an array numbers that consists of 8 elements.We want an array that contains each elements of the array numbers multiplyed by 2. The map function takes an anonymous function as callback.The anonymous function have two parameters.The first parameter is an array element and second parameter is index of corresponding element.

Map fuction is super common in javascript frameworks like react.We know that react returns jsx that is pretty similar to html.Consider a scenario where we want to render each elements of the array without hardcoding them into html.Here, we can make use of map fuction to loop through the array and return each element within html tags
eg:

const App = () => {

const fruits = ["apple","orange","mango","pineapple"];

return(
<>
{
fruits.map(fruit => 

<h3> fruit </h3>

}
</>
)
}

Output

Filter

Filter is a javascript high order function that can be used to filter items from an array.

const data = [1,2,3,4,5]
const filteredArray = data.filter((data) => data != 4)
console.log(filteredArray)

The syntax of filter function is pretty similar to map function.Filter function takes a callback function as argument which contains each array elements as arguments and return a filtered array based on the given condition.The above example will console [1,2,3,5] since the condition for filtering is that the element should not be equal to 4

Reduce

The reducer function seems a little tricy compared to map and filter.Reducer basically returns a single value that is the accumulated result of the function.

const data = [1,2,3,4,5];
const sum = data.reduce((acc, data) => {
  return acc + data; //Adding cuurent elemt to the accumulator
}, 0);
console.log(sum);

Reducer mainly takes two parameters.The first one is a callback function that has an accumulator and the array element(The element we get when we loop through the array.Similar to map and filter functions).The second parameter is an initial value of accumulator.The operation that we have to perform is written in the body of callback function and the value is returned.The output of above example will be 21.In the above example we are adding the current element to the accumulator value and returning it

Conclusion

In this we looked at the popular javascript higher order functions that we can use to make our code more efficient.

Why tailwind ?

Nikesh Kumar T K — Wed, 21 Sep 2022 17:27:51 +0000

Tailwind is an amazing utility-first css framework that boosts our development process. Anyone, who is familiar with normal css can easily migrate to tailwind css for faster development and designing of webpages.

Merits of tailwind

It gives more flexibility to developers.
It has awesome documentation. So that we can easily reach out for what we needed.
It allows creating custom classes so that we can customize the classes in the way we needed.
It can be added via CDN or installed using npm.
Its documentation contains guides to installing tailwind in different
frameworks like React js, Vue js, Next js, etc.

So, i strongly recommend all the upcoming developers to start using tailwind for saving time and building incredible pieces of stuff.

NPM OR YARN.

Nikesh Kumar T K — Thu, 07 Jul 2022 12:36:44 +0000

WHAT IS NPM?

NPM stands for Node Package Manager which is a package manager for nodejs.It have the CLI tool that helps us to install, manage, and remove Node.js packages.Moreover npm is the world's largest Software Registry. The registry contains over 800,000 code packages. Open-source developers use npm to share software. Many organizations also use npm to manage private development.

WHAT IS YARN?

Yarn is introduced by the facebook in 2016 as a replacement of npm.It was developed with an objective to offer more advanced features that npm doesnot have and create a more secure, stable, and efficient product.

DIFFERENCE BETEWEEN NPM AND YARN

1.INSTALLATION
NPM - npm is installed automatically when node is
installed.
YARN - yarn is installed using npm.

             npm install yarn --global

2.LOCK FILE
NPM - npm createes a package-lock.json file
YARN - yarn creates a yarn lock file.

3.SPEED
NPM - npm install packages sequentially
YARN - yarn install packages parallel

4.SECURITY

NPM - Security threats were a significant issue in early versions of NPM. As of version 6, NPM performs a security audit every time you install a package. This helps prevent vulnerabilities and ensures there aren't any conflicting dependencies.

YARN - Yarn performs a security check as a background process while downloading packages. It uses the package license information to ensure it doesn't download any malicious scripts or cause any dependency conflicts.

ADVANTAGES

NPM

usage is easy for developers who follows old workflows.
save space due to the optimization in package
installations.
YARN
newer versions of Yarn offer a more secure form of version
locking.
increased performance due to parallel installation of packages

I developed a live news app using bling news API and react.

Nikesh Kumar T K — Fri, 01 Jul 2022 16:25:39 +0000

I used react and bling news API to create a live news app which update the news from different categories.I got the API from rapid api .com.I used css flexbox to make the application responsive.It is a very beginner friendly project which gives us a basic idea about APIs and how can we integrate them with our apps .I am leaving the live link of app with the linl of my github repo.
Live link of app.
Github link.

I developed a random quote generating app using react and api.adviceslip.com

Nikesh Kumar T K — Fri, 24 Jun 2022 16:10:17 +0000

I used react and api.adviceslip.com to create a random quote generating app.Since i am a beginner to development,i am pretty sure that this is a best project for beginners in react.I am leaving the live link of the app along with the link of my github repo.

Live link of project
Github link

How to deal with errors while coding

Nikesh Kumar T K — Sun, 19 Jun 2022 14:03:49 +0000

Errors are the usual thing that occur in our journey of programming.
Beginners are the primary group who are exposed to the hesitation caused by errors.There is also a possibibility of droping programming field due to errors in beginners.But one thing we should remeber is

The skill of a programmer is not writting a bunch of code
without error,but finding the optimal solution for error.

When we solve a particular error we can understand the core reasons for that error and avoid such
situations of error later in our code
The usual categories of error that occur are

syntax error -ocuurs when we violates the rules of a programming language.
logical error-occurs due to the improper logic in the code.
How to deal with syntax errors
By using the plugins and editors that can detect syntax errors instandly.
Usual case of syntax errors are missing parenthesis,semicolons etc.So, make sure they are inserted properly.

How to deal with logical errors
It is difficult to detect logical errors at compile time.It can be avoided by

By using try-catch block for complex code for tracing the error.
By making a better comprehention in the logic of the code.

Use Stack Overflow for debugging

Stack Overflow is the biggest community of programmer where we can find the solutions for our errors.I usually used to copy paste my error message in stack overflow.Programmers who faced similar errors might posted their issue and there will be solutions.If no solutions found you can ask for help by mentioning your isuue with your code snippet.

What is APIs.

Nikesh Kumar T K — Thu, 16 Jun 2022 04:41:04 +0000

API stands for Application Programming Interface.It allows different softwares to talk to eachother.It is used by developers to integrate different services into their product.

API created by server side scripting languages are used by clients to interact with webserver.

For instance lets consider a MERN stack web app in which API is created by node js which is connected with mongo database.The created API is used by REACT, which is a front end javascript library.Here front end interact with webserver using API

EXAMPLES OF API

Booking movie tickets
Acessing weather info
Travel bookings

DIFFERENT TYPES OF APIs

REST API
RPC
Composite APIs
Internel APIs

BEST PROGRAMMING LANGUAGE TO START CODING.

Nikesh Kumar T K — Tue, 14 Jun 2022 04:49:15 +0000

I started my coding by learning c,c++and java.C gave me basic undestanding in how instructions are executed in a program.I learned the basic concepts of loops,arrays,variables,datatypes etc.
Learning java was a wonderful experience for me.In the begining it was difficult for me to catchup the object oriented concept.However,eventually i learned what are classes and how objects are created in java.Now i am in a good shape with java.Learning java helped me to easily catch up new languags with object oreinted concepts.

So, i strongly recomment new commers to the coding field to start with java and c

java tutorial
Learn c programming