DEV Community: waqas

Day 02: Implementing JWT Authentication in NestJS with Passport (Part 1)

waqas — Tue, 31 Dec 2024 12:09:13 +0000

First steps

nest g resource auth

This will further ask you for a selection
❯ REST API GraphQL (code first) GraphQL (schema first) Microservice (non-HTTP) WebSockets

select REST API and this will generate the whole module for you with the dtos services controller and module

Register User

since we are implementing email/password-based authentication as the first step we will register the user.

Validate first to make sure the data is legitimate and add password strength validation to mitigate brute force attacks.
Sanitize afterward to ensure the data is safe to use.
Check that the user record already exists in the database if exists it means the user already has an account so send a response that's this email already registered.
if the above checks failed it means we need to register a user take the user password and hash it with a good hashing library like bcrypt or argon2
after hashing insert user record in DB.
send an email to the user to verify is email legitimate.
add rate-limiting to route to avoid DDoS attacks

1 Validate incoming data

Since nest js has strong integration with recommended validation packages like class validator but from my previous experience I use zod for validation lot in react js front ends and so I found an awesome
solution for nest js ecosystem called nests zod so I'll prefer to go with this one for now. To get started first install the library
npm i nestjs-zod

import { createZodDto } from 'nestjs-zod';
import { z } from 'zod';
const passwordStrengthRegex =
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const registerUserSchema = z
  .object({
    email: z.string().email(),
    password: z
      .string()
      .min(8)
      .regex(
        passwordStrengthRegex,
        'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character',
      ),
    confirmPassword: z.string().min(8),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: 'Passwords do not match',
  });

export class RegisterUserDto extends createZodDto(registerUserSchema) {}

and then apply validation pipe on the route

import { Controller, Post, Body, Version, UsePipes } from '@nestjs/common';
import { AuthService } from './auth.service';
import { RegisterUserDto } from './dto/register.dto';
import { ZodValidationPipe } from 'nestjs-zod';

@Controller('auth')
export class AuthController {
  constructor(private readonly authService: AuthService) {}

  @Version('1')
  @Post()
  @UsePipes(ZodValidationPipe)
  async registerUser(@Body() registerUserDto: RegisterUserDto) {
    return await this.authService.registerUser(registerUserDto);
  }
}

if we provide all inputs correct

so we are done with the first step

Let's Sanitize Data

we have three inputs

password: typically passwords should not be Sanitize because they are never gonna sent and displayed to frontend even if someone sends a malicious script to the password eventually it'll be hashed do not need
confirmPassword: same story as above one
email: yes emails are sent and rendered to clients so the email field must be Sanitize to mitigate injections and scripting attacks

but we explicitly added email: z.string().email() which is enough for this use case

but to add an extra lyre of security we can add a sanitization layer

import { createZodDto } from 'nestjs-zod';
import { z } from 'zod';
import * as xss from 'xss'; 

const passwordStrengthRegex =
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

const registerUserSchema = z
  .object({
    email: z.string().transform((input) => xss.filterXSS(input)), // Sanitizing input using xss
    password: z
      .string()
      .min(8)
      .regex(
        passwordStrengthRegex,
        'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character',
      ),
    confirmPassword: z.string().min(8),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: 'Passwords do not match',
  });

export class RegisterUserDto extends createZodDto(registerUserSchema) {}

This was a test we also added again back

email: z .string() .email()

Step3,4,5

import {
  BadRequestException,
  Injectable,
  InternalServerErrorException,
} from '@nestjs/common';
import { RegisterUserDto } from './dto/register.dto';
import { PrismaService } from 'src/prismaModule/prisma.service';
import * as argon2 from 'argon2';

@Injectable()
export class AuthService {
  constructor(private readonly prismaService: PrismaService) {}
  async registerUser(registerUserDto: RegisterUserDto) {
    // data is validate and sanitized by the registerUserDto
    const { email, password } = registerUserDto;

    try {
      // check if user already exists
      const user = await this.prismaService.user.findFirst({
        where: {
          email,
        },
      });

      if (user) {
        throw new BadRequestException('user already eists ');
      }
      //if use not exists lets hash user password
      const hashedPassword = await argon2.hash(registerUserDto.password);

      // time to create user
      const userData = await this.prismaService.user.create({
        data: {
          email,
          password: hashedPassword,
        },
      });

      if (!userData) {
        throw new InternalServerErrorException(
          'some thing went wrong while registring user',
        );
      }

      // if user is created successfully then  send email to user for email varification
      return {
        success: true,
        message: 'user created successfully',
      };
    } catch (error) {
      throw error;
    }
  }
}

The main point to notice I just returned a success message with no data related
to the user like ID or email because it does not need to send back data to the user in this step. after registration user will be redirected to the login page to fill in details so avoiding sending unnecessary data is a good security practice

Rate limiting

implementing rate limiting in nestjs is very easy just install nestjs/throttler configure it globally and you're done .
to install package run npm i --save @nestjs/throttler


@Module({
  imports: [
    ThrottlerModule.forRoot([{
      ttl: 60000,
      limit: 10,
    }]),
  ],
})
export class AppModule {}

then add nestjs throttle guard as global guard

 providers: [
    AppService,

    {
      provide: APP_GUARD,
      useClass: ThrottlerGuard,
    },
  ],

and here it is

import { Controller, Post, Body, Version, UsePipes, Req } from '@nestjs/common';
import { AuthService } from './auth.service';
import { RegisterUserDto } from './dto/register.dto';
import { ZodValidationPipe } from 'nestjs-zod';
import { Throttle } from '@nestjs/throttler';

@Controller('auth')
export class AuthController {
  constructor(private readonly authService: AuthService) {}
  @Throttle({
    default: {
      ttl: 100000, // 1 minute
      limit: 5, // 5 requests per minute
    },
  })
  @Version('1')
  @Post()
  @UsePipes(ZodValidationPipe)
  async registerUser(@Body() registerUserDto: RegisterUserDto, @Req() req) {
    return await this.authService.registerUser(registerUserDto, req);
  }
}

since registering the user endpoint is a sensitive endpoint brute-force
or dictionary attack can happen we kept the rate limit strict

Send Verification Email

for sending a verification email to a user's use Resend is an awesome easy-to-use service. but I decided to create a separate episode for the whole notification service so that understanding it becomes easier for everyone

Day 01 Designing Database Schema

waqas — Mon, 30 Dec 2024 11:50:09 +0000

Lets Design Database Schema For First User Story

As we know from from first episode we have these functional requirements

The user should be able to create an account.
The user must have the ability to add prayers only during the designated prayer times.
Prayer timings must be aligned with the user's time zone, considering the different prayer times in various cities and countries

So the above requirement demonstrates we need to register the user to our system and the user should be able to mark prayers done or if he missed it will be marked missed. To meet requirements we need a user entity and prayer entity but for more granular control and to avoid redundancy, we also need a profile table. note I skipped analytics to
make starting more easier.

Bit Explanation

I added support of credentials and Google Oauth support in the user table for now I'll add just credentials authentication but later in the next phases, I'll add signIn with Google support. In the profile table which has a one-to-one relation with the user table, I added the user's social information.in the prayer table, I added all necessary fields to track and store user prayer information.

What's Next

In the next episode, we'll implement complete credentials based authentication with a stateless JWT auth mechanism with

Building a Prayer Tracker: My 100 Days of Code Journey

waqas — Mon, 30 Dec 2024 10:14:42 +0000

Building a Prayer Tracker: My 100 Days of Code Journey

Building a project while learning to code alone can be boring, and creating clones by watching YouTube tutorials didn’t help much. I tried a few times but didn’t learn a lot.

So what I decided

I decided to solve a real-world problem, starting with my own.

Motivation

I’m not very religious, and I find it challenging to pray five times a day consistently. I’ve tried several prayer-tracking apps, but most feel too basic they only offer a simple checklist to mark whether I’ve prayed. I want something more personalized, with gamified challenges, progress tracking, and a sense of community to keep me motivated and engaged

Requirements Gathering

Since I’m the originator of this idea, I started by creating a detailed requirements list. I divided the project into three phases to streamline development and follow an agile mindset. Each phase is further broken down into sprints, ensuring a structured and manageable approach to building the application.
## Phase 1

User Stories

As a user, I can mark my prayers as completed or missed.
As a user, I can see the history of my previous days.

Although these requirements may seem simple at first glance, their implementation involves more complexity than it appears. To address this, I’ve outlined detailed functional requirements to ensure clarity and proper execution.

The user should be able to create an account.
The user must have the ability to add prayers only during the designated prayer times.
Prayer timings must be aligned with the user's time zone, considering the different prayer times in various cities and countries.
There should be a feature to display user analytics on a calendar, allowing them to track progress and make improvements.

Tech Stack

Since I'm a JavaScript/TypeScript developer, for building APIs, I chose Nest.js. But why Nest.js and not Express.js? As a learner, using opinionated frameworks provides many benefits, such as project architecture, and industry-standard design patterns for implementing features, and it's easier to maintain the codebase and write clean, modular code. The list goes on and on. For the web front end, I chose React.js, and for the mobile app, I'll go with React Native.

Final Words

As I mentioned earlier, I am learning to code, so any suggestions, constructive feedback, or corrections will be highly appreciated. The main motive of writing here is to add a sense of accountability and to build in public, which will only be accomplished with your help. Thanks in advance for assisting me on my journey.

All You Need To Know About Arrays In JavaScript (1)

waqas — Mon, 19 Dec 2022 22:51:48 +0000

Let's Try To Know Why We Need Arrays In Programming.

let's try this scenario we need to write a straightforward program average to five numbers.

let  a=1 ,b=2 ,c=3 ,d=4 ,e=5;
let avarage= (a+b+c+d+e) /5
console.log(avarage) // 3

Problems we can figure out

No efficient way to store data
it's so time-consuming
we can not access data in a super easy way
if we use only variables it will be so hard to debug and figure out things.

Soulution

Array

Array Syntex
let arrayname= [elemet1 .elemet2 ,elment3 ... ]

characteristics of array data structure

we can store any data type in array like(number, string, boolean, NaN, undefined, other arrays, objects…).
Data is stored in an array in a contiguous fashion that makes it easy to access data from the array

Let numbers = [1,2,3,4,5]

Second less used way To Create Array

let arr = new array(1,2,3,4,5,6,7,8)

*Benefits *
Data is organized in contagious blocks which are easy to access and modify.

Operations On Arrays Data structure.

1.How To Acess?
2. how to modify

So in the above image, we can look at each element of the array as stored at a specific index so we can Access that eleDelete element 3ment through the index.
syntex: arrayname[index]

1 Acess

console.log(numbers[0]) // 1
console.log(numbers[3]) // 4

The first element in the array has an index of 0, the second element has an index of 1, and so on.

2 modify

Add Element

numbers[3] ="mydogname"
console.log(numbers) // [1,2,3,'mydogname' 5]

yes, we can store any data type in arrays also.

Delete element

 Delete numbers[3] 
console.log(numbers)  // [1,2,3, empty ,5]

the very interesting thing to notice we try to delete the array element
traditionally and we see "empty" at the undefined index.

resulted array also called spare array.

let's add again value at index 3.

numbers[3]=4

Array properties necessary to know
Before we work on the array we need to know about the array property length

console.log(numbers.length)  // 5

what if we need to access all elements, not just a single element?

Iterating On Array

for (let i =0 ; i<numbers.length ; i++ ) {
    console.log(numbers[i])     //  1,2,3,4,5    
}

so what it will work like that

first iteration. value of i =0 numbers[0] --> element at index 0 second iteration. value of i =1 numbers[1] --> element at index1 third iteration. value of i =0 numbers[2] --> element at index2 fourth iteration. value of i =0 numbers[3] --> element at index3 fifth iteration. value of i =0 numbers[4] --> element at index 4

so I <numbers. length condition is met loop will be stopped.

*Now we are ready to get the average of numbers in an array in an efficient way. *

let numbers = [1,2,3,4,5] 
let average=0;
let sum=0


for(let i=0 ;i<numbers.length ;i++)
{
    console.log(numbers[i])
    sum=sum +numbers[i]

}

  average = sum/numbers.length
   console.log(average)

Benefits again to Remember

now we can add how my numbers as we want without repeating ourselves

which is the rule of programming DRY(DON'T REPEAT YOURSELF).

so guys that's, for now, stay tuned for the second episode about array methods.

Javascript Data Types in Depth(2)

waqas — Sun, 11 Dec 2022 19:49:22 +0000

In JavaScript, there are only two main non-primitive data types: objects and arrays. These data types are considered non-primitive because they are complex data structures that can be used to store and organize many different types of data.

1.Arrays
2.objects

Lets Learn prerequisites first

Heap

In computer science, the heap is a region of memory that is used to store objects and other complex data structures. It is a dynamic data structure, which means that it can grow and shrink in size as needed to accommodate the data being stored in it.

Stack
In computer science, the stack is a region of memory that is used to store primitive data types and the memory addresses of data structures on the heap. It is a Last In First Out (LIFO) data structure, which means that the last item added to the stack is the first item that can be removed.

So How Non Primitive(reference) Data Type Work

When you create a new object or array in JavaScript, the data structure is stored on the heap and a reference to it is stored on the stack. This means that when you access the object or array, you are actually accessing the reference on the stack, which points to the data on the heap.

`let arr =[1,2,3,4,5]

// The "arr" array is stored on the heap
// A reference to the "arr" array is stored on the stack

let person = {
name: "John Doe",
age: 35
};

// The "person" object is stored on the heap
// A reference to the "person" object is stored on the stack
`

But What Happen When We Mutate Array or Object

When you mutate an array or object in JavaScript, the data on the heap is updated to reflect the changes, but the reference on the stack remains the same. This means that when you access the array or object after mutating it, you are still using the same reference on the stack to find the updated data on the heap.
`
// Create a new array
let numbers = [1, 2, 3];

// The "numbers" array is stored on the heap
// A reference to the "numbers" array is stored on the stack

// Mutate the array
numbers.push(4);

// The data on the heap is updated to [1, 2, 3, 4]
// The reference on the stack remains the same

// Access the array
let lastNumber = numbers[3];

// The reference on the stack is used to find the updated data on the heap`

codepen link
"https://codepen.io/waqas-on-github/pen/vYrwNaz?editors=0012"

Javascript Data Types in Depth(1)

waqas — Sun, 11 Dec 2022 18:53:57 +0000

what are data types
in computer programming, a data type is a classification of types of data that determines the possible values and operations that can be performed on that data. Data types are an essential concept in any programming language, as they provide a way for programmers to represent and manipulate data in a structured and organized manner.

Data types in JavaScript **
**Primitive and reference (non primitive)

1. Numbers
let num =100;

2.strings
let str=hello world

3. boolean
let present =True

4.Undefined
let myundefined = undefined

5.Null
let mynull=Null

When a variable with a primitive data type is created, the value of that data type is directly stored in the memory allocated for the variable.
For example, if you have a string variable called 'myString' with the value "Hello", the string value "Hello" is directly stored in the memory allocated for the 'myString' variable. This means that the amount of memory required to store a primitive value is equal to the size of the value itself.

However, this does not mean that you can change the value of the string directly. As I mentioned earlier, primitive data types in JavaScript are immutable, which means they cannot be changed once they have been created. This means that if you want to change the value of a string, you have to create a new string with the new value, and then assign that new string to the same variable.

var myString = "Hello"; // Create a string variable with the value "Hello" myString = "Goodbye"; // Create a new string with the value "Goodbye" and assign it to the same variable

So, to summarize, it is possible to update the value of a variable with a primitive data type in JavaScript. However, this does not change the value of the primitive data type itself, which remains immutable. It is only reference data types that are mutable and can be directly modified.

Master Css Selectors The Easy Way (part 1)

waqas — Sat, 12 Nov 2022 21:25:02 +0000

so you are here to learn about css selectors. So question arise why we need selectors

In CSS, selectors are used to target the HTML elements on our web pages that we want to style.

so let me explain with code examples.

_Scenario _

we wanna change background color of "P" element the easiest way is to select an element.

Result

we selected an element and change its background color but we can do all sophisticated stuff in this way?

_Introducing ID and class selectors _

class selector

here's a solution to make our lives a little bit easier.

our customer wanna order "Dumplings" so we will add class attribute in second child of ul and change its background color green as ordered food.

_result _

oh no our customer changed mind and he want more food he want "Ma Po Tofu" also fortunately class selector come to save us we have to just add "orders" class in that element also.

NOTE classes always targeted with "." in css

result

so we get the idea of how classes work but what about "id's" and why? id's here when classes can do everything let's talk about that.

_Id selector _

id is simple just we can target one element with one id I mean id will be always unique we can't use it with multiple elements
NOTE id's always targeted with "#" in css

result

But if we want add same id to other element** we cant **
but we can add same class to multiple elements so i think it'll make sense obviously .

*So these are most basic selectors *

BUT

_if you wanna become css guru bear me more _

Next one
*_ chained selector_ *
lets assume we have requirement to style a button but not one button 3 buttons all buttons have similar styling but third one has bit different so let see how we can accomplish this with chained selectors

so in above example we can clearly see how chained selectors can help us in different situations.

*result *

let see another example to clear this concept more

here our goal is to target li element which have " bg_black and text_white" classes

_Css will be _

*result *

in this snippet we are telling in whole page any 'li' element which have "bg_black and text_white" classes change its background color and text color

_Direct Child Selector _

in same snippet with some changes we used above what if we want to target all "li" element so we accomplish this via Direct Child Selector.

result

Note

3rd li which is not direct child is not selected.

Adjacent Sibling Selector

The + selector is used to select an element that is directly after another specific element.

*result *

Hover selector
hover is relay simple selector when we mouse over on any element it'll apply CSS which we want

_result _

Before Selector

before selector is pseudo selector which inserts something before the content of each selected element.

_result _

_After selector _
After selector is completely opposite of before selector so its relay simple

_ result _

so we can clear see result now button is before blue box.

So today we learn few css selectors if you want to learn more in this beginner friendly way stay connected Thanks.