Forem: Julie Nachmias

Basic SOLID: must to do

Julie Nachmias — Wed, 20 Mar 2024 14:27:14 +0000

SOLID principles are an essential base of software engineering because they give recommendations for projects on how to change and add new functionality without breaking existing code and creating bugs, save maintainability and easy understandable software.

SOLID principles are:

Single responsibility principle
Open/closed principle
Liskov substitution principle
Interface segregation principle
Dependency inversion principle

Using all 5 principles at the same time may be complicated (with good or bad consequences) and is not necessary for quality software, but there is an approach on how to deal with common software engineering problems.
These principles should be applied depending on the actual problem and situation.

Let’s start with an overview of each of 5 principles.

Single responsibility principle: 1 class - 1 aim With time, the complexity of class will grow dramatically and it will cause code redundancy, maintaining difficulties and as a result higher code breaks probability.

Write the class with the 1 only aim, for more - extend super class with subclass.

Avoid tight coupling!

Tight coupling is the state of a system where the components are highly dependent on each other. Better use loose coupling (state of a system where components are independent).

Open/close principle: add to class - yes, change - big no

Don’t change the class, add new functionality to it with subclass.

Stop breaking other parts of software that are dependent on the piece of code you change. If new functionality for your software, add it but don’t erase the existing versions.

Liskov substitution principle: while extending the super class, subclass behaves like parent class and does not alter superclass behavior

Similarities in behavior are:

Subclass takes the same parameters, returns the same, throws (or not) the same errors.
Subclasses don’t change (generally) conditions and results to save behavior predictable.
Always true conditions or relations of superclass must be preserved.
Subclass can’t change private fields of superclass.

Interface segregation principle: tiny interface - yes!

Don’t add a lot of not necessary functionality in 1 class, break it in many ones.

Dependency inversion principle: high-level class depends on low-level class - no, low-level depends on abstraction - yes!

This way dependency “high-class -> low-level class” is changed to “high-level class -> abstract class <- low-level class”.

High level classes has high-level abstraction classes and low-lever classes depend on high-level abstraction class.

Quick start with MongoDB references | Mongoose, Nest.js + Examples

Julie Nachmias — Wed, 27 Sep 2023 12:57:36 +0000

References in not relational document databases may be implemented:

Manually
Using references

Example of manual implementation:

Model and scheme of user collection:
user.model.ts

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { HydratedDocument } from 'mongoose';
import { BaseModel } from '../base/base.model';
import { Types } from 'mongoose';

export type UserDocument = HydratedDocument<UserModel>;

@Schema()
export class UserModel extends BaseModel {
@Prop()
username: string;

@Prop()
description: string;

@Prop()
password: string;

_id: Types.ObjectId
}

export const UserSchema = SchemaFactory.createForClass(UserModel);

_id of User may be manually saved in any other collection document (like Pos) and by getting this _id current user may be found in User collection with the additional query.

*But let’s avoid additional querying and use References to save and retrieve data.
*

Here post model is presented:
post.model.ts

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { HydratedDocument } from 'mongoose';
import { BaseModel } from '../base/base.model';
import { Types } from 'mongoose';

export type PostDocument = HydratedDocument<PostModel>;

@Schema()
export class PostModel extends BaseModel {
@Prop()
name: string;

@Prop()
description: string;

@Prop({ type: Types.ObjectId, ref: 'UserModel' })
authorId: { type: Types.ObjectId; ref: 'UserModel' };

_id: Types.ObjectId;
}

export const PostSchema = SchemaFactory.createForClass(PostModel);

Type of User may be/better be added to authorId.
Here we sign the property for reference and put the model for reference.

At this point, reference is saved, let’s get the data!

Mongoose provides an alternative for MongoDB $lookup and it is populate method.
Let’s give arguments for this method (reference filed and selected field of the new object)

Service function:

async findOneAndPopulate(id: string, fieldName: string, chosenFields: Record<string, number>) {
return await this.baseModel
.findById(id)
.populate({ path: fieldName, select: chosenFields })
.exec();
}

Controller function:

@Get(':id')
findOne(@Param('id') id: string) {
return this.postService.findOneAndPopulate(id, 'authorId', {
username: 1,
});
}

Response results

Before ref and populate:

{
    "_id": "6513ef6da50adaaa3d811721",
    "name": "00000000000000000000000000",
    "description": "tuyityityutyututuuutyutyutyutyutyuytutyutyuytutyutyutyutyutyutyutyutyutyuytutyutyutyutyu",
    "authorId": "65082a6acd765074d09f38b0",
    "__v": 0
}

After:

{
    "_id": "6513ef6da50adaaa3d811721",
    "name": "00000000000000000000000000",
    "description": "tuyityityutyututuuutyutyutyutyutyuytutyutyuytutyutyutyutyutyutyutyutyutyuytutyutyutyutyu",
    "authorId": {
        "_id": "65082a6acd765074d09f38b0",
        "username": "juliechernen@gmail.com"
    },
    "__v": 0
}

You are welcome to leave comments on other ways to use references in MongoDB and Mongoose.

Steps and approaches to web app optimization

Julie Nachmias — Mon, 28 Aug 2023 11:00:06 +0000

Despite high speed internet, low loading web page speed nowadays is not a rare issue.

Main reasons of low speed may be:

Video and images size
Too large bundle size
Slow response from 3rd party
Unnessible dependencies and files

Steps to solve these problems may be:

Using CDN
Optimizing image size
Gziping files
Using external optimized video players
Minifiers
Lazy loading
Writing reusable code and removing unused imports, variables, packages
Using Browser caching or storage connected Browser API.
Implementing SSR or SSG

Tools for checking:

Google Speed Test | https://pagespeed.web.dev/
Lighthouse (available in Chrome DevTools as well) | https://developer.chrome.com/docs/lighthouse/

The next step may be analyzing the bundle by the size of each file and getting its diagram with a percentage per file.
This can point to the specific file and its possible performance problems.

A tool for Javascript libraries/frameworks may be source-map-explorer package. Check docs on npm.

For projects using Webpack, we can get statistics from its CLI:

webpack --json --config webpack.config.js > stats.json

Or get visualized version with webpack-bundle-analyzer package npm docs.

Another approach may be analyzing dependencies and their bundle size (minified and gzipped/not) and download time on Bundlephobia.

7 steps to Angular Material Dialog instead of Angular Component

Julie Nachmias — Fri, 13 Jan 2023 16:14:43 +0000

Another way to create Angular UI Component is using Dialog from Angular Material. It is not recommended to replace all components with it but it is rather useful for interactive elements like pop-ups, warnings, errors, etc.
There are 7 steps on how to start using dialogs in your Angular project.

Step 1: Adjust Angular Material for your project and create a basic Angular component (current name example: MyCreatedDialog) and add dialog reference.

Import MatDialogRef from @angular/material and add it to the constructor.

class MyCreatedDialog implements OnInit {
    constructor (
        public dialogRef: MatDialogRef<MyCreatedDialog>,
        …
    ) {}
    ngOnInit() {
        …
    }
    …
}

Step 2: Set modules in app.module.ts.

Import MatDialogModule, MatButtonModule (and others if needed) from Angular Material to app.module.ts and imported your MyCreatedDialog.component.ts.

Add your imported component to declarations and entryComponents of NgModule.

Add needed dialog modules to import of NgModule.
Example:

@NgModule({
    declarations: [..., 
        MyCreatedDialog
    ],
    entryComponents: [...,
        MyCreatedDialog
    ],
    imports: [...,
        MatDialogModule,
        MatButtonModule
    ], 
    …
})

Step 3: Import MyCreatedDialog into its father component (current name: FatherComponent). Import MatDialog from Angular Material and add it to the constructor.
Example:

class FatherComponent {
    constructor(
        …,
       private dialog: MatDialog
    ){}
    ...
}

Step 4: Control dialogs: open and get outputs.
Example:

openMyCreatedDialog() {
    const myCreatedDialogRef = this.dialog.open(MyCreatedDialog);
    myCreatedDialogRef.afterClosed().subscribe((res) => {
        //do things according to the received response and the aim
    })
}

Step 5: Add data input to MyCreatedDialog.
Add it to the function that opens the dialog:

openMyCreatedDialog() {
    const myCreatedDialogRef = this.dialog.open(MyCreatedDialog, { data: { title: I am a dialog } }););
    myCreatedDialogRef.afterClosed().subscribe((res) => {
        //do things according to the received response and the aim
    })
}

Step 6: Use passed data in MyCreatedDialog.

Import MAT_DIALOG_DATA from @angular/material and inject it in the constructor. Import Inject from @angular/core as well.

class MyCreatedDialog implements OnInit {
    dialogTitle: string;
    constructor (
        public dialogRef: MatDialogRef<MyCreatedDialog>,
        @Inject(MAT_DIALOG_DATA) public data: any,
        …
    ){}
    ngOnInit() {
        this.dialogTitle = this.data.title;
    }
    …
}

Step 7: Add function to html file of MyCreatedDialog.
Example:

<button (click)=openMyCreatedDialog(“New meaningful title”)></button>

Step 8 - Extra: continue enjoying Angular :)

7 tips to improve your Typescript

Julie Nachmias — Sat, 28 May 2022 18:53:16 +0000

To master your TS skills you need to delve into the topic of types and explore their full possibilities. This article is dedicated only to types in particular.

So to improve your skills and to study how the functionality of types can improve the development, I strongly recommend at least getting acquainted with:

Generics
Template literal
Indexed Access Types
Utility types
KeyOf/TypeOf operators
Conditional types
Mapped types

While learning current examples will be used for each case:


type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

Pay attention that provided information is not full as not intended to be and it only describes the most popular use cases. You can find full info that covers 100% of the topic you can find on the official TS website.

And now let’s start with…

Generics

The main aim of generics is to provide re-usability.

Let’s learn with our todo example.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

Here no generics are used and each property has its own defined type.
And here generic is implemented:

type FirstTodo<T> = {
   text: T,
   type: "very urgent" |"urgent" | "not urgent",
   daysToFinish: number,
   isFinished: boolean
}

What does T mean?
T that provided is the triangle brackets defines type and text has the same T type.

For example, we want to give a type string for text property (that’s logical) and we have no problems with TS.

const firstTodo: FirstTodo<string> = {
   text: "first todo",
   type: "urgent",
   daysToFinish: 6,
   isFinished: false
}

And now let’s add generics for each of the property:

type SecondTodo<S, T, N, B> = {
   text: S,
   type: T,
   daysToFinish: N,
   isFinished: B
}

type TypeOptions = "very urgent" |"urgent" | "not urgent"

const secondTodo: SecondTodo<string, TypeOptions, number, boolean> = {
   text: "first todo",
   type: "urgent",
   daysToFinish: 6,
   isFinished: false
}

Here we also set logical types for each property, but for example, we set for B not boolean but a number that will mean that “isFinished” should equal to the number. As well for “T” we set his own custom type that could be changed with another type.

Template literal

It works rather similar to JS and here we create a special type to collect all levels of urgency.

type UrgencyRate = "very " | "" | "not "

type ThirdTodo<T> = {
   text: T,
   type: `${UrgencyRate}urgent`,
   daysToFinish: number,
   isFinished: boolean
}

const thirdTodo: ThirdTodo<string> = {
   text: "third todo",
   type: "not urgent",
   daysToFinish: 6,
   isFinished: false
}

Indexed Access Types

With Indexed Access we can create a type that can access a type of property of another type by putting one (or some) names of the properties in the square brackets.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

type TodoText = Todo["text"] // string

type TodoTextAndIsFinished = Todo["text" | "isFinished"] // string | boolean

With keyOf operator get all the properties types for 1 element.

type AllTypes = Todo[keyof Todo] // string | number | boolean

And with typeOf operator we can get the type.

typeof "todo" // console.log -> string

It is the way how to create a new type according to the current element.


const forthTodo: Todo = {
  text: "forth todo",
  type: "not urgent",
  daysToFinish: 6,
  isFinished: false
}

type AllTodoTypes = typeof forthTodo

// type AllTodoTypes = {
//   text: string;
//  type: "very urgent" | "urgent" | "not urgent";
//   daysToFinish: number;
//   isFinished: boolean;
}

Utility types

We will observe only 6 Utility types and they are Required, Readonly, Partial, Record, Pick, Omit and NonNullable.

Readonly doesn’t allow to change the object from outside.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

const fifthTodo: Readonly<Todo> = {
  text: "fifth todo",
  type: "not urgent",
  daysToFinish: 6,
  isFinished: false
}

fifthTodo.text = "new text" // Cannot assign to 'text' because it is a read-only property.

Required and Partial (Required vs Partial)

Required and Partial define if all properties of the type are mandatory.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

const todoWithRequired: Required<Todo> = {
   text: "todo",
   type: "very urgent",
   daysToFinish: 10,
   isFinished: true
}

const todoWithPartial: Partial<Todo> = {
   text: "todo",
   type: "very urgent"
}

Record (Record) is a constructor that helps to create a new type as an object of properties and types.

type TodosText = "first todo" | "second todo"

type TodoDescription = {
   type: "very urgent" |"urgent" | "not urgent",
   daysToFinish: number,
   isFinished: boolean
}

const todos: Record<TodosText, TodoDescription> = {
   "first todo": {
       type: "not urgent",
       daysToFinish: 10,
       isFinished: false
   },
   "second todo": {
       type: "urgent",
       daysToFinish: 0,
       isFinished: false
   }
}

Pick and Omit (Pick vs Omit)
They help to create a new type by picking/or omitting the properties.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

type todoWithPick = Pick<Todo, "text" | "isFinished">

const todoPick: todoWithPick  = {
   text: "todo",
   isFinished: true
}

type todoWithOmit = Omit<Todo, "isFinished">

const todoOmit: todoWithOmit = {
   text: "todo",
   type: "not urgent",
   daysToFinish: 40
}

NonNullable creates new type by excluding undefined and null from the initial type:

type PossibleNullishTodo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
} | null | undefined


type NotNullishTodo = NonNullable<PossibleNullishTodo>
// type NotNullishTodo = {
//   text: string;
//   type: "very urgent" | "urgent" | "not urgent";
//   daysToFinish: number;
//   isFinished: boolean;
}

Conditional types

Conditional types are aimed to define the relations between types.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}

interface UrgentTodo extends Todo {
   type: "very urgent"
}

type ConditionalType = UrgentTodo extends Todo? true : false // true

Mapped types

A mapped type is created on the base of the other types and helps to avoid repeating code. Let’s add readonly and to each property and make it optional while mapping.

type Todo = {
text: string,
type: "very urgent" |"urgent" | "not urgent",
daysToFinish: number,
isFinished: boolean
}


type customType<Type> = {
 readonly [Property in keyof Type]?: Type[Property];
};

type ReadonlyPerson = customType<Todo>

//type ReadonlyPerson = {
   //readonly text?: string | undefined;
   //readonly type?: "very urgent" | "urgent" | "not urgent" | undefined;
   //readonly daysToFinish?: number | undefined;
   //readonly isFinished?: boolean | undefined;
}

That is all for types intro, I hope you enjoined it :)

Prototypes in Javascript in 5 minutes

Julie Nachmias — Fri, 06 May 2022 10:27:52 +0000

JavaScript is an object-oriented language and according to Wilkipedia:

Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

So let’s dive into Javascript objects and their prototypes by building a simple object.

A method “message” was added with the anonymous function. “This” in the method is used to connect the variables inside of the method with the object.

const object = {
 user: "guest",
 where: "dev.to",
 message: function () {
   console.log(`${this.user}, welcome to ${this.where}`)
 }
}

console.log(object) // result from the console
// {user: 'guest', where: 'dev.to', message: ƒ}
// message: ƒ ()
// user: "guest"
// where: "dev.to"
// [[Prototype]]: Object

console.log(object.message()) // guest, welcome to dev.to

console.log(object.__proto__)// result from the console

//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, //hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
//constructor: ƒ Object()
//hasOwnProperty: ƒ hasOwnProperty()
//isPrototypeOf: ƒ isPrototypeOf()
//propertyIsEnumerable: ƒ propertyIsEnumerable()
//toLocaleString: ƒ toLocaleString()
//toString: ƒ toString()
//valueOf: ƒ valueOf()
//__defineGetter__: ƒ __defineGetter__()
//__defineSetter__: ƒ __defineSetter__()
//__lookupGetter__: ƒ __lookupGetter__()
//__lookupSetter__: ƒ __lookupSetter__()
//__proto__: (...)
//get __proto__: ƒ __proto__()
//set __proto__: ƒ __proto__()

Pay attention that in the prototype of the object is a property of one more prototype and inside of this prototype can be one more prototype and so on.

Another (and preferable) way to get the prototype of the object is:

Object.getPrototypeOf(object)

Lets try to extract one of prototype’s method

console.log(object.hasOwnProperty()) // false

It works!

Let's add the same property to the object and console.log it:

const object = {
 user: "guest",
 where: "dev.to",
 message: function () {
   console.log(`${this.user}, welcome to ${this.where}`)
 },
 hasOwnProperty : function () {
  console.log("the method was added to the object")
 }
}

console.log(object.hasOwnProperty()) // the method was added to the object

So we can make an assumption about what the order of the search in the object is:

First search in the object
After in the prototype of the object
After in the prototype of the prototype…

How to set prototype:

With Object.create()

const objectWithProto = Object.create(object)

console.log(objectWithProto)// {} - empty object
console.log(objectWithProto.message()) // guest, welcome to dev.to - message method of prototype

console.log(objectWithProto.__proto__)// results from the console
//{user: 'guest', where: 'dev.to', message: ƒ}
//message: ƒ ()
//user: "guest"
//where: "dev.to"
//[[Prototype]]: Object

With constructor

Creating constructor

function User (user, where) {
  this.user = user;
  this.where = where
}

Creating method for the prototype

const userPrototype = {
 message () {
    console.log(`${this.user}, welcome to ${this.where}`)  }
}

Adding the method to the prototype of the object

User.prototype = userPrototype;

Adding User constructor to prototype (that takes parameters from the constructor and that can be passed to message method in the prototype)

User.prototype.constructor = User;

console.log(User) // ƒ User (user, where) {
  this.user = user;
  this.where = where
}

console.log(User.__proto__) // ƒ () { [native code] }

Let’s check what we’ve got:

const myUser = new User('Julie Cherner', ‘dev.to - author’);

myUser.message() // Julie Cherner, welcome to dev.to - author

console.log(myUser) // User {user: 'Julie Cherner', where: 'dev.to - author'}

console.log(myUser.__proto__) // results from console
//{message: ƒ, constructor: ƒ}
//constructor: ƒ User(user, where)
//message: ƒ message()
//[[Prototype]]: Object

So, prototypes provide great opportunities for the inheritance of properties for objects in Javascript.

Storybook for React.js

Julie Nachmias — Tue, 03 May 2022 20:13:51 +0000

Often I face the problem that I want to start UI development from bottom to top: start with designing buttons, inputs and other small components and only after that create pages and set routing.

This problem is solved with… Storybook!

Storybook is a tool that allows developing components in isolation.

According to official web site of Storybook:

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

Let’s look at basic Storybooks functionality with a simple example of Button component.

In this example we will add Storybook to React App, but here is the list of libraries/frameworks with which you can implement Storybook: React, Vue, Angular, Web Components, Ember, HTML, Svelte, Preact.

First of all let’s install Storybook.

npx create-react-app my-app
cd my-app
npx sb init

Typescript is also supported and it doesn’t require extra configuration. Don’t forget to install types.

npm i @storybook/react

Storybook uses Webpack5 and if you have a previous version so run:

npx sb@next automigrate

To run the application use:

npm run storybook

Browser should open localhost on port 6006 and you will see this. If you want to change the port you can do it in package.json file.

In larger projects you can also add folders in sections for convenience. You can do it later inside of your stories.

Current part of the code in Button.stories.js

export default {
 title: 'Example/Button',
...
};

Schema how you can split it into sections and folders:

export default {
 title: 'NameOfSection/NameOfFolder/NameOfComponent',
...
};

After every package is downloaded we have updates: we see folder .storybook inside the main folder and folder screens inside of src folder with Button.js, Button.stories.js and other files.

I prefer dividing code logically into separate files so I deleted everything in the src folder and created separate folders for components and stories.

Let’s have a look what we have in Button.js

import PropTypes from "prop-types";

function Button({
 label,
 backgroundColor = "red",
 color = "black",
 size = "md",
 handleClick,
}) {
 let scale = 1;
 if (size === "sm") scale = 0.5;
 if (size === "lg") scale = 2;

 const style = {
   backgroundColor,
   padding: `${scale * 0.5}rem ${scale * 1}rem`,
   border: "2px solid black",
   borderRadius: "25px",
   color,
 };

 return (
   <button onClick={handleClick} style={style}>
     {label}
   </button>
 );
}

Button.propTypes = {
 label: PropTypes.string,
 backgroundColor: PropTypes.string,
 size: PropTypes.oneOf(["sm", "md", "lg"]),
 color: PropTypes.oneOf(["blue", "white", "black"]),
 handleClick: PropTypes.func,
};

export default Button;

Function Button takes parameters by default and inside of object style we add CSS and return the component.
After that we define the type of props of the component by adding or type of props with or without options for choice.

Let’s look through Button.stories.js

import Button from "../components/Button";

export default {
 title: "Components/Controls/Button",
 component: Button,
 argTypes: {
   handleClick: { action: "logging it in action section" },
 }
};

const Template = (args) => <Button {...args} />;

export const Green = Template.bind({});

Green.args = {
 backgroundColor: "green",
 label: "Middle Green button",
 size: "md",
 color: "black",
};


export const Pink = Template.bind({});

Pink.args = {
 backgroundColor: "pink",
 label: "Middle Pink Button",
 color: "blue",
 size: "md",
};


export const Small = Template.bind({});

Small.args = {
 backgroundColor: "blue",
 label: "Small button",
 size: "sm",
 color: "white",
};

export const Large = Template.bind({});

Large.args = {
 label: "Very very very large button",
 size: "lg",
 color: "black",
 backgroundColor: "red",
};

To activate actions we add argTypes and define function handleClick that logs out events.

Let's check what happened to our stories on local host.

By hand you can change background color, label, size and color as well as click on the button and get action.

I clicked the undo icon and got this component in the initial state.

Also we can add styling to the stories with the help of a decorator.
For example let’s add margin to story with decorators according to schema

Component.stories.js

export default {
 …..
  decorators: [
    (Story) => (
      <div style={{ margin: '5em' }}>
        <Story />
      </div>
    ),
  ],
};

Button.stories.js

import Button from "../components/Button";

export default {
 title: "Components/Controls/Button",
 component: Button,
 argTypes: {
   handleClick: { action: "logging it in action section" },
 },
   decorators: [
     (Story) => (
       <div style={{ margin: "5rem" }}>
         <Story />
       </div>
     ),
   ],
};

const Template = (args) => <Button {...args} />;

export const Green = Template.bind({});

Green.args = {
 backgroundColor: "green",
 label: "Middle Green button",
 size: "md",
 color: "black",
};


export const Pink = Template.bind({});

Pink.args = {
 backgroundColor: "pink",
 label: "Middle Pink Button",
 color: "blue",
 size: "md",
};


export const Small = Template.bind({});

Small.args = {
 backgroundColor: "blue",
 label: "Small button",
 size: "sm",
 color: "white",
};

export const Large = Template.bind({});

Large.args = {
 label: "Very very very large button",
 size: "lg",
 color: "black",
 backgroundColor: "red",
};

Let's check in the browser if we had any changes of margin.

Yes, it worked :)

It is only a beginning and you can continue with learning advanced Storybook's topic such as Storybook Addons and testing.

Continue enjoying developing UI with Storybook official docs.

JWT Authentication in Typescript with Express

Julie Nachmias — Thu, 21 Apr 2022 10:15:43 +0000

I started my journey to the world of authentication in Typescript with the need to authenticate users on the front and the backend of the application.

The magic recipe for this was:

Backend part:

2 post routes for user authentication (for sign up and login)
1 controller, 1 service
1 model, 1 collection in MongoDb
1 bcrypt package for hashing and comparing passwords (+ its types)
1 JWT package for creating and verification of tokens (+ its types)
1 middleware for authentication

Frontend part:

Getting a token from the backend and storing it
Getting a token from storage and putting in headers

We have a plan, so let’s start our journey!

Step 1. Creating routes, controllers, services, models

This project was built according to MVC pattern, such a structure was created for logic division.

Routes

import * as userController from '../controllers/user.controller';

Router.post('/login', userController.loginOne);
Router.post('/register', userController.registerOne);

Controller

import { Request, Response } from 'express';
import { getErrorMessage } from '../utils/errors.util';
import * as userServices from '../services/user.service';
import { CustomRequest } from '../middleware/auth';

export const loginOne = async (req: Request, res: Response) => {
 try {
   const foundUser = await userServices.login(req.body);
   res.status(200).send(foundUser);
 } catch (error) {
   return res.status(500).send(getErrorMessage(error));
 }
};

export const registerOne = async (req: Request, res: Response) => {
 try {
   await userServices.register(req.body);
   res.status(200).send('Inserted successfully');
 } catch (error) {
   return res.status(500).send(getErrorMessage(error));
 }
};

Function getErrorMessage from utils folder includes:

export function getErrorMessage(error: unknown) {
 if (error instanceof Error) return error.message;
 return String(error);
}

Service

import { DocumentDefinition } from 'mongoose';
import UserModel, { I_UserDocument } from '../models/user.model';

export async function register(user: DocumentDefinition<I_UserDocument>): Promise<void> {
 try {
   await UserModel.create(user);
 } catch (error) {
   throw error;
 }
}

export async function login(user: DocumentDefinition<I_UserDocument>) {
 try {
   const foundUser = await UserModel.findOne({ name: user.name, password: user.password });
 } catch (error) {
   throw error;
 }
}

Model

import mongoose from 'mongoose';

export interface I_UserDocument extends mongoose.Document {
 name: string;
 password: string;
}

const UserSchema: mongoose.Schema<I_UserDocument> = new mongoose.Schema({
 name: { type: String, unique: true },
 password: { type: String },
});

const UserModel = mongoose.model<I_UserDocument>('User', UserSchema);

I didn’t include _id in interface I_UserDocument because he extends mongoose.Document and already includes _id.

Use Postman to check the results.

Step 2: Hashing passwords

Hashing is different from encrypting in that it is a one-way action: we get the password and salt to it and get a line of letters, numbers and symbols.

The crucial difference is that there is no way to get the initial password. So each time that user sets his password this password will be hashed the same way and hashed result will be the same.

Example of hashed password: $2b$08$LSAG/cRp.tSlvTWzp1pwoe50bDWEDjLfK7Psy5ORzf4C.PxJYZeau

While this step we keep in mind 2 aims:

Hash the password right after the signing up
While logging in check if the hashed version of the password is the same as stored in Mongo

Install Bcrypt and its types:

npm i bcrypt @types/bcrypt

Hashing the password while signing up

Here we use the option of schema to use middleware. We check the password and change it bcrypt and its salt.

A plain password is hashed with salt (a random string) that has an unpredictable result. The salt gets automatically included with the hash, so you do not need to store it in a database.

In this case, number 8 means salt rounds, the minimum that is recommended is 8.

Model

import mongoose from 'mongoose';
import bcrypt from 'bcrypt';

const saltRounds = 8

UserSchema.pre('save', async function (next) {
 const user = this;
 if (user.isModified('password')) {
   user.password = await bcrypt.hash(user.password, saltRounds);
 }
 next();
});

As a result of using middleware on the model we hash the password and store it hashed in the database.

Comparing the received password and hashed one

Service

export async function login(user: DocumentDefinition<I_UserDocument>) {
 try {
   const foundUser = await UserModel.findOne({ name: user.name });

   if (!foundUser) {
     throw new Error('Name of user is not correct');
   }

   const isMatch = bcrypt.compareSync(user.password, foundUser.password);

   if (isMatch) {
return foundUser 
   } else {
     throw new Error('Password is not correct');
   }
 } catch (error) {
   throw error;
 }
}

We search user by name and if the user with such name exists in the database we start comparing the received password from the user and the hashed password stored in the database with: bcrypt.compareSync(password-from-user, password-from-database)
If 2 passwords are the same we return the user.

Step 3. Tokens Implementation

Our aims for this step:

Create a token while logging in
Verify token while logging
Send token to the frontend

What is it token?

It is a safe means that includes header, payload and signature.

How a token may look like?
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.vaYmi2wAFIP-RGn6jvfY_MUYwghZd8rZzeDeZ4xiQmk

The first part before the dot is a header that includes the algorithm and token type. The second is a payload that includes all data you want to set into a token and timestamps that indicate token’s expiration time
The third is a signature that you choose by yourself.

You can check your JWT on https://jwt.io/

An example of a decoded token:

Important! We don’t need to store JWT tokens in the database.

Creating tokens while logging in

Install JWT and its types:

npm i jsonwebtoken @types/jsonwebt

Service

if (isMatch) {
     const token = jwt.sign({ _id: foundUser._id?.toString(), name: foundUser.name }, SECRET_KEY, {
       expiresIn: '2 days',
     });

     return { user: { _id, name }, token: token };
   } else {
     throw new Error('Password is not correct');
   }

In the part with isMatch conditions I created a token and return it with the user.
In the token’s payload I put the user’s id and user’s name and didn’t send also the password. SECRET_KEY is a plain text that also is my personal signature for token that I imported.

Verifying (decoding) tokens

For this we need middleware that happens between controllers and service.
I created file auth.ts in folder middleware.

import jwt, { Secret, JwtPayload } from 'jsonwebtoken';
import { Request, Response, NextFunction } from 'express';

export const SECRET_KEY: Secret = 'your-secret-key-here';

export interface CustomRequest extends Request {
 token: string | JwtPayload;
}

export const auth = async (req: Request, res: Response, next: NextFunction) => {
 try {
   const token = req.header('Authorization')?.replace('Bearer ', '');

   if (!token) {
     throw new Error();
   }

   const decoded = jwt.verify(token, SECRET_KEY);
   (req as CustomRequest).token = decoded;

   next();
 } catch (err) {
   res.status(401).send('Please authenticate');
 }
};

We get a token from a header by deleting “Bearer “ from the string, decode the token and add to the user decoded (signatured) token.

So we come back to controllers to function LoginOne

Controllers

export const loginOne = async (req: Request, res: Response) => {
 try {
   const foundUser = await userServices.login(req.body);
   //console.log('found user', foundUser.token);
   res.status(200).send(foundUser);
 } catch (error) {
   return res.status(500).send(getErrorMessage(error));
 }
};

Now due to the middleware, we get not only the user but also the user.token (with signatured token).

Important!
We import auth and set it on all routes that we want to be authenticated.
2 routes that couldn’t be authenticated they are routes for signing in and signing up.

An example of another roots with required authentication:

Router.get('/all', auth, searchController.getAll);
Router.post('/', auth, searchController.addOne);
Router.delete('/:id', auth, searchController.deleteOne);

We finished with JWT Authentication on the backend so let’s move to the front.

Step 4. Move to front

Our steps on the frontend:

Get a token from the backend
Store a token
Extract token from storage and add it to the header for chosen axios requests (excluding signing up and signing)
Change UI

We won’t go throw all steps in detail, I will give only a general description how it can be implemented.

On the frontend I used React.js and axios package.

Get a token from the backend with axios request - done :)

Storing the token
Options for storing :

Global State (Redux, Context)
Cookies
Local or session storage

Getting the token from storage and puting it in the Header

I stored the token in cookies so I created and imported the function that gets the token from cookies. I_AuthHeader is a custom interface.

export const authHeader = (): I_AuthHeader => {
 const token = getTokenFromCookies();
 return {
   headers: {
     Authorization: "Bearer " + token,
   },
 };
};

An example of adding header

import axios from "axios";
let baseUrl = "http://localhost:8080/";
const ApiHeader = axios.create({
 baseURL: baseUrl,
});

export const getSearchWords = async (): Promise<I_Search[]> => {
 try {
   const { data } = await ApiHeader.get("api/search/all", authHeader());
   return data;
 } catch (error) {
   console.error(error);
   throw error;
 }
};

Enjoy improving UI !

I would love to get your feedback in comments :)