DEV Community: Karim Elghamry

Authentication and Authorization: A comprehensive guide

Karim Elghamry — Sun, 19 Nov 2023 13:10:53 +0000

Hello there 👋 In this article, we will go through the basics of Auth, outline the pros and cons of each type, and how to decide on an Auth solution based on your system requirements.

I- Basic Auth flow explained
II- Authentication
- Stateful Authentication
  - Pros
  - Cons
- Stateless Authentication
  - Pros
  - Cons
III- Authorization
- Role Based Access Control (RBAC)
  - Pros
  - Cons
- Attribute Based Access Control (ABAC)
  - Pros
  - Cons
- Discretionary Access Control (DAC)
  - Pros
  - Cons
IV- How to choose your Auth solution
- Authentication
- Authorization
V- Conclusion

I- Basic Auth flow explained

To protect business resources in any system, there are two fundamental building layers that protect access to such resources: Authentication and Authorization. The following diagram illustrates how a basic Auth flow works:

Authentication: this layer is responsible for checking if the requesting user is part of the system, nothing more nothing less. This can be done in endless ways, typically by providing a username and a password to verify the user's identity. If the user has been logged in previously, the authentication layer might have issued an "access token" for the user to use for subsequent requests to avoid sending the username/password with each request.
Authorization: this layer is responsible for checking if the requesting user has access to the business resource. Authorization assumes that the user has been already authenticated and is part of the system. There are many ways to authorize the user's permissions, which we will talk about later.

Essentially, on each client request, the request has to go through both layers in order before granted access to the said resource. Let's dive deeper into how each of these layers work.

II- Authentication

In essence, authentication can be classified into two different categories: Stateful and Stateless.

Stateful Authentication

In this authentication model, once the user provides valid login credentials, the authentication layer creates a new session for the requesting user and stores the session data on the server side. Subsequently, the authentication layer returns a "Session ID" for the client to use for any subsequent request. Essentially, with each client request, the authentication layer fetches the session details for the corresponding session ID and validates it. The following diagram outlines a stateful authentication flow, assuming the user has been previously logged in:

Pros

Server-side control: a user session is entirely managed/controlled by the backend, which gives the ability for the admins to revoke access on demand.
Easier to mitigate security breaches: if a session ID was compromised by any means, it is easy to revoke the session from the server-side to deny access entirely.

Cons

Database read with each request: since it is required to fetch the session data with each request, additional latency and complexity might be introduced to the system.
Scalability: as mentioned previously, each request maps to one database read operation, which accumulates additional operational costs. Assume we have thousands of requests coming into the system each minute, it would be complex to scale this solution with reasonable costs.

Stateless Authentication

Unlike stateful authentication, stateless authentication does not store any session data on the server side, and validates the user request on the fly. This is typically done using the following methodology; once the user provides valid login credentials, the authentication layer issues a signed "access token" (using a secret key only known to the server) and returns it to the client. The client then uses this token to make subsequent requests to the system. The token signature is validated on the fly by the server on each request, eliminating the need to store additional session data. The following diagram outlines a typical stateless authentication flow, assuming the user has been previously logged in:

In essence, an access token may include the following data:

non-confidential user information
token expiry date/time
token signature and signing algorithm

There are various stateless authentication implementations out there, including JSON Web Token (JWT) and Platform Agnostic Security Tokens (PASETO).

Pros

No session data stored: an access token is validated on the fly, which saves us from storing any additional session data on the server side. This dramatically cuts the storage costs and does not introduce the database latency to our system.
Scalability: Eliminating the need for a database read on each request allows for better scalability, and enables you to integrate with third party identity providers in your system with ease.

Cons

No way to revoke access on demand: the server does not keep any session information to be able to keep track of the currently logged in users. As long as the client provides a valid token, there's virtually no way to revoke the user's access to the protected resources, unless you change the token signature key. This makes it hard for admins to manage and monitor the currently logged in users.
Potential security breaches: if an access token of a certain user has been somehow leaked or compromised, there's no way you could revoke the user's access to the protected resources. One way to work around this issue is to set a short expiry date on the issued tokens, but that does not solve the problem entirely.

III- Authorization

As previously mentioned, authorization is the process of identifying the requesting user's permissions and validating whether the user has the required permissions to access the target business resource. Authorization comes in many shapes and forms, and we'll talk about a few of them in this section.

Role Based Access Control (RBAC)

Role based access control, or RBAC for short, is one of the most popular and versatile authorization frameworks that allows you to map system users to one or many organizational roles. In RBAC, you create a role, or a set of roles, that govern one or more granular permissions to guard access to resources. There are four main entities that are always present in an RBAC environment:

User: this is the entity that describes a unique user in a given system.
Permission: is the lowest level of access control that describes an action that can be done over a resource in a system.
Role: is an entity that governs a collection of permissions, in addition to other meta-data.
Role assignment: is an entity that describes the mapping between a system user and an organizational role. This may be present as a part of the issued access token, or explicitly defined in the system's database.

RBAC is a purely additive system, meaning that we assume that a user does not have any permissions to access resources unless explicitly defined in a role assignment. It is always a best practice to assign the minimum required permissions to a certain user to avoid any malicious activities in your system.

Pros

re-usability: RBAC allows you to define a role and assign it to as many as users as you want, increasing the role's resuability and modularity. For instance, if you want to give the bare minimum permissions to the new users in your system, you can create a single "guest" role that governs the common permissions for these users and assign it to them on demand.
Ease of auditing and management: RBAC allows admins to easily add, remove and change the users' permissions on demand by adding or removing the corresponding role assignments. It also makes it easy to tackle any security related issues, since each role assignment governs a set of well-defined roles.
Simple computational model: RBAC is only concerned with the fact that if the requesting user has the sufficient permissions to access the target resource or not. This increases your system scalability and heavily cuts down on the computation costs.

Cons

Role explosions: since RBAC allows you to create as many roles as you want, you can end up creating an infinite number of roles, possibly duplicates, which will inevitably clutter your system and may introduce orphan roles.
God role: if you're not highly cautious about the granularity and modularity of your roles, you might end up creating multiple "god roles" which contain a lot of uneeded permissions, introducing more security issues to your system.
RBAC is static: RBAC does not care about the actual content or meta data (ex: creation date, number of records, etc.) of your business resources, which makes it hard to map between your organizational needs and the implemented RBAC roles.

Attribute Based Access Control (ABAC)

rather than evaluating roles like RBAC, Attribute Based Access Control (ABAC) is a model that assesses attributes to grant access to the system resources. Attributes may include resource creation date, file owner, file ID, etc. ABAC runs a series of evaluation statements on the user's request to determine whether to allow access or not. All evaluation statements in an ABAC logic must return true in order to grant access to the target resource. There are four main entities that are present in an ABAC system:

User: this is the entity that describes and governs a set of attributes for a unique user in a given system.
Resource: an entity that holds the asset that the user wants to access. Resources may contain certain attributes such as creation date, owner, size, modification date, etc.
Request/Action: an entity that describes the intention of the user in a given system. For instance, a user may want read content from a specific resource, or write some data to another resource.
Environment: an entity that describes the setting at which the request/action is taking place. An environment may contain certain attributes such as current date/time, system uptime, current number of concurrent users, etc.

ABAC gives more control over the authorization process, and confines the auth logic in one place.

Pros

Dynamic authorization: ABAC allows you to evaluate the user's access level at runtime, giving you more control over the authorization process.
Encapsulated authorization logic: ABAC allows you to confine most of the authorization logic in one place, making it easier for developers to append and maintain security rules.
Fine grained access control: since ABAC operates over attributes & characteristics, it makes it easier to map the user's access level to suit the organizational needs.

Cons

Complex computations: ABAC logic can get complex at times, which might introduce some latency into your system, as well as increase the operational costs.
Hard to audit: since ABAC is dynamic and encapsulates the auth logic behind a black box, it is hard for IT & admins to audit the permissions of each user in the system.

Discretionary Access Control (DAC)

Discretionary Access Control, or DAC for short, is a simple model that determines access control via policies set by the resource's owner. Essentially, each resource has an owner, usually the initial creator, that has the power to determine the access level of other users, and has the ability to transfer ownership to other users. DAC is fairly simple to implement, and does not have a lot of complexity in its core. There are four main entities that are present in a DAC system:

User: is an entity that describes a unique user in a given system.
Owner: is an entity that describes an owner of a specific resource.
Resource: an entity that holds the asset that the user wants to access.
access policies: an entity that describes the rules that determines which user has access (read, write, etc.) to the resource, which is set by the owner.

Pros

Easy to implement: compared to RBAC and ABAC, DAC is really easy to implement and does not imply any complex computations under the hood.
Minimizes administration activities: since access control is purely managed by resource owners, the administration workload is divided upon multiple users, making it easier to maintain the system.

Cons

No centralized management: since each resource is managed by an owner, DAC implies a decentralized management approach by design. This might make it hard to audit and monitor the system from a security perspective.
Less secure: since resource owners have the ability to give other users access, and as more owners are introduced to the system, data can be easily mishandled and possibly leaked outside of the organization.

IV- How to choose your Auth solution

when it comes to choosing an Auth solution for your application, it might be tricky to determine the best Auth combination based on your system's requirements. The following series of questions should help you decide on an Auth solution that best fits your needs.

Authentication

Do you expect alot of concurrent users in your system?
- YES: stateless
- NO: stateful
Does your system require low latency and high throughput?
- YES: stateless
- NO: stateful
Do you want more control over the current user's sessions?
- YES: stateful
- NO: stateless
Do you care about the scalability of your system?
- YES: stateless
- NO: stateful
Does your system operate in an hostile environment where you need to revoke user access frequently?
- YES: stateful
- NO: stateless
Do you want to easily integrate with third party identity providers?
- YES: stateless
- NO: stateful
Do you care about the complexity of logic in your server?
- YES: stateless
- NO: stateful

Authorization

Do you want to give your users the ability to manage their own resources?
- YES: DAC
- NO: ABAC or RBAC
Does your system have complex access control requirements?
- YES: ABAC
- NO: RBAC or DAC
Should your access control system have a similar hierarchy to your organizational roles?
- YES: RBAC
- NO: ABAC or DAC
Do you want to be able to control access to resources based on runtime attributes?
- YES: ABAC
- NO: RBAC or DAC
Do you want a simple access control solution that does not contain complex logic?
- YES: RBAC or DAC
- NO: ABAC
Do you care about access control auditing and monitoring?
- YES: RBAC
- NO: DAC
Do you have fixed and well defined permissions for each group of users?
- YES: RBAC
- NO: ABAC or DAC

V- Conclusion

In this article, We've gone through the basics of Auth, and how would one go about choosing the right Auth framework for their application. Auth is a huge topic in the security world and its concepts extend way beyond what has been mentioned in this article. Treat this article as a guide rather than a set of rules, and I encourage you to read more about these topics to further extend your knowledge. Thank you for reading thus far 😄

Using RxJS/BLoC as a state management solution for React

Karim Elghamry — Fri, 25 Nov 2022 12:21:01 +0000

Hello fellow programmers 👋. in this article, we will discuss how we would use the RxJS library to implement the BLoC pattern as a state management solution for a React project.

Prerequisite knowledge
What is BLoC?
Creating a Todo app using BLoC/RxJS
- App initialization
- Folder structure
- Creating the models
- Creating the BLoC's
- Creating the hook
- Creating the view
Considerations and closing remarks

Prerequisite knowledge

Before going through the content of this article, it is assumed that the reader has prior basic knowledge in Rx, at least with observables and observers. The article will try to briefly go over these concepts, if needed.

What is BLoC?

BLoC, which stands for Business Logic Component, is a pattern created by Paolo Soares and Cong Hui from Google that aims to separate the business logic from the view in a given application. One of its primary goals is to make the business logic reusable and independent from the corresponding view. Initially, this pattern was introduced within the Flutter community, but throughout this article, we will take the concepts of BLoC and implement them in a React application. To start with, BLoC has these main rules:

Each BLoC should have a dispose() method to cleanup any ongoing streams.
Any data coming in a BLoC or any change in state within a BLoC must be done through a method.
Any data coming out of a BLoC should be done through a stream/observable.

The following diagram illustrates how the view and a BLoC interacts with each other.

Creating a Todo app using BLoC/RxJS

Now that we've gone briefly over the concepts of the BLoC pattern, we will attempt to implement it in an example todo react application.

App initialization

First, lets initialize a react typescript project using vite:

npm create vite@latest todo-bloc --template react-ts

this should create a folder called todo-bloc. Navigate to that folder and install the dependencies:

cd todo-bloc && npm install

once done, we'll proceed by installing the RxJS package and the uuid package (we'll need it later):

npm install rxjs uuid

we can now run the app in dev mode:

npm run dev

Folder structure

In our simple todo app, we will create the following sub directories inside the src directory:

src/
 ├───blocs/
 ├───components/
 ├───hooks/
 └───models/

blocs: will encapsulate all of the reusable business logic components in our app.
components: will govern the view (UI) react components.
hooks: will hold all of our custom hooks.
models: will contains the interfaces and abstract classes that are shared across the app.

Creating the models

To simulate a real world application, we will start first by creating a Todo interface, which all of the todo objects in our app will conform to. We'll create a Todo.ts file under the models directory and add the following interface:

id: to distinguish between different todo objects.
text: the actual content of the todo object.
isDone: to keep track of whether this specific todo is marked as done or not.

Secondly, we'll create the base bloc interface which will include all common methods/properties shared between the BLoC's in our app. Ultimately, we'll only need a dispose() method on the bloc interface as previously mentioned. We'll proceed by creating a Bloc.ts file under the models directory and adding the following interface:

dispose(): a method invoked to close any opened streams and complete all observables within our BLoC.

Creating the BLoC's

Now that we have the interfaces in place, lets start by defining our business requirements for our app. Essentially, our app should:

display todo items chronologically.
provide a way to add a todo item.
provide a way to mark todo items as finished.

First off, we'll create a TodoBloc class that will implement the Bloc interface that was previously imposed. Ultimately, this class will live in a file called TodoBloc.ts under the blocs directory. To implement the first business requirement, we'll have to find a way to keep track of the current list of todo items. This is where Subject from RxJS comes into play. To recall, any data coming out of a BLoC should be through a stream/observable. To achieve that, we will create a BehaviourSubject that will hold the most recent list of todos, and emit new items whenever the state changes:

_todos$: is a private property of type BehaviorSubject<Todo[]> that will be responsible for holding our Todo objects.
dispose(): we close/cleanup the _todos$ subject in the previously defined dispose method.

you might now be wondering, how are we going to expose the _todos$ subject to the view if the field is marked as private? good question. This is a bit tricky, because we don't want to expose the whole Subject to the view as we don't want the view to be emitting data directly to the Subject (we have to do it through a method as previously mentioned). Instead, we will create a getter for the _todos$ field that will only expose the Observable side of our subject:

To cover the second business requirement, we will create a method called addTodo, which will be responsible for taking in a Todo object and adding it to the _todos$ subject:

Explanation: the previous method accepts a Todo object as a param, gets the current list of todos from the _todos$ subject, concatenates the given todo to the list of todos, and finally pushes the new list of todos to the _todos$ subject.

To implement the final business requirement, we will add a toggleTodo method, which will be responsible for marking the given Todo item as done/undone:

Explanation: toggleTodo accepts a Todo object as a param, gets the current list of todos from the _todos$ subject, loops over the retrieved list and toggles the given Todo item by id, and finally pushes the new todo list to the _todo$ subject.

The final TodoBloc class should look like this:

Creating the hook

Now that we're done implementing our business logic, we need to start thinking of a way to connect our BLoC to the anticipated view in our app. We can facilitate this process by creating a custom hook that will have the following responsibilities:

accept an Observable of a generic type as a param.
consume the values coming from the Observable by subscribing to it when the components mounts.
preserve the state of the most recent value from the Observable and update the state each time a new value comes in.
cleanup the subscription when the component unmounts.

Having these points in mind, we'll create a useSubscribe hook under the hooks directory to fulfill these responsibilities:

Explanation: useSubscribe accepts an Observable of a generic type as a param. A state is created to store the most recent value emitted from the given observable using the useState hook. We then use the useEffect hook to subscribe to the given observable on component mount and update the state with the most recent value. We also add a cleanup callback that will unsubscribe from the observable once the components unmounts. Finally, we return a copy of the state to the view to be able to effectively use it in display.

Creating the view

Now that we have everything in place, let us create the view to demonstrate how we can tie these all pieces together. First, we create a simple TodoItem component under our components directory to display a single todo item:

Explanation: the TodoItem component accepts two params - todo, which is the given Todo object, and onToggle callback, which will be triggered when the user marks the items as done/undone. The component displays the text property of the given todo in a li tag, and style is rendered according to the isDone property.

Finally, in our App.tsx file, we will tie all the pieces together:

Explanation: we create an instance of the TodoBloc outside of our App component. We then consume the most recent value from the the TodoBloc by using the previously defined useSubscribe hook and passing the todos$ observable as a param. Now, the todo variable will always hold the most recent list of todos, and will update accordingly. To give the user the ability to add new todo items, we create a simple form with a single controlled input element and a submit button. On submit, the addTodo method on the TodoBloc will be invoked, and a new Todo object will be pushed to the list of todos. Finally, to display the list of todo items, we map over the todos list and render a TodoItem component for each given todo. Each TodoItem will be provided an onToggle callback that will invoke the toggleTodo method on the TodoBloc for each item, respectively.

The final result will look/behave as follows:

Considerations and closing remarks

As your application grows, your number of BLoC's will grow respectively and you'll need to find a way to manage them cleanly. Multiple view components may consume a single BLoC and you'll need to find a way to provide it to these components. One way to go about that is to use the context api to provide a single bloc to multiple components. You may also want to look into the Singleton design pattern to preserve a single copy of a given BLoC within your app. You would also want to manage the disposal of each BLoC when it is no longer needed in your app (in our todo app, we did not call dispose() anywhere because the TodoBloc has the same lifespan as our application). Nevertheless, be flexible and reasonable with your design and do not over engineer your solutions. Happy coding 🎉!

Bash Basics: useful commands and tools

Karim Elghamry — Fri, 18 Nov 2022 10:38:38 +0000

Introduction

Hello fellow programmers 👋 In this article, I will shed the light on some useful/basic bash commands and tools that might help you save time while scripting. To make it easy to follow, the article will adhere to the following format:

command
description
format
examples

Commands

1. `man`

Description: man is a useful command that displays the documentation/user manual to any command that you pass as an argument.
Format

$ man [COMMAND]

Example

Lets try to display the manual for the echo command:

$ man echo

the output of the previous line is:

ECHO(1)                          User Commands                         ECHO(1)                                                                                                                

NAME                                                                                                                                                                                          
       echo - display a line of text                                                                                                                                                          

SYNOPSIS                                                                                                                                                                                      
       echo [SHORT-OPTION]... [STRING]...                                                                                                                                                     
       echo LONG-OPTION                                                                                                                                                                       

DESCRIPTION                                                                                                                                                                                   
       Echo the STRING(s) to standard output.                                                                                                                                                 

       -n     do not output the trailing newline                                                                                                                                              

       -e     enable interpretation of backslash escapes                                                                                                                                      

       -E     disable interpretation of backslash escapes (default)                                                                                                                           

       --help display this help and exit                                                                                                                                                      

       --version                                                                                                                                                                              
              output version information and exit        
...

Notice how the man command displays the output in a formatted manner. The output usually contains the name, description and the available options/flags for the given command.

Fun fact: you can use the man command to display the manual for the man command.

2. `tldr`

Description: tldr is a community driven tool that enhances the output of the man pages and displays brief and meaningful examples for the given command. This tool is not available by default, so you will have to install it first. You can visit the tool's official page to easily add it to your environment.
Format

$ tldr [COMMAND]

Example

Lets try to display the tldr formatted docs for the echo command:

$ tldr echo

the output of the previous line is:

echo

Print given arguments.

Print a text message. Note: quotes are optional:

    echo "{{Hello World}}"

Print a message with environment variables:

    echo "{{My path is $PATH}}"

Print a message without the trailing newline:

    echo -n "{{Hello World}}"

Append a message to the file:

    echo "{{Hello World}}" >> {{file.txt}}

Enable interpretation of backslash escapes (special characters):

    echo -e "{{Column 1\tColumn 2}}"

Note how it gives concise examples to illustrate the usage of the given command, unlike man.

Similar to man, you can use the tldr command to display the formatted docs for tldr.

3. `cat`

Description: cat is an awesome command that lets you display files in the standard output, concatenate files together or create new files.
Format

$ cat [OPTION]... [FILE]...

Example

Suppose that we want to print out the content of a file named example to the standard output. It can be done using:

$ cat example

If we want to append two files, named foo and bar respectively, and save the output in a file called output:

$ cat foo bar > output

To create a new file called new_file:

$ cat > new_file

who doesn't like cats?

4. `grep`

Description: grep is a powerful tool that lets you match patterns (using regex) or exact strings in a given text. It prints out the lines that contain the given pattern/string.
Format

$ grep [OPTION...] PATTERNS [FILE...]

Example

Suppose that I have a python file called stock_analysis.py and it contains the following code:

import requests
import numpy as np
from matplotlib import pyplot as plt

eminem = requests.get("https://www.google.com/")

import pandas as pd

df = pd.read_csv('my_file.csv')

and I want to display all the imports included in that file. We can simply use:

$ grep -F "import" stock_analysis.py

the output of the previous command is:

import requests
import numpy as np
from matplotlib import pyplot as plt
import pandas as pd

Suppose that instead of displaying all the imports, We want to display the aliased imports only. We can use the grep command along with regex:

$ grep  "import.*as.*" stock_analysis.py

the output of the previous command is:

import numpy as np
from matplotlib import pyplot as plt
import pandas as pd

5. `curl`

Description: curl is a cli tool that lets you transfer data from/to a server over various protocols such as HTTP and FTP. curl is a massive tool that has lots of powerful features and is open source, so I encourage you to read more about it.
Format

$ curl [OPTION...] [URL...]

Example

Suppose that I want to retrieve a random dad joke from the icanhazdadjoke API using curl. I would send a GET request and specify that I want to only accept text/plain data in the header:

$ curl -X GET https://icanhazdadjoke.com/ -H "Accept: text/plain"

this was the joke that I've received:

Is the pool safe for diving? It deep ends.

this API is a lot of fun and I encourage you to try your luck with it!

6. `|` - pipes

Description: |, or shall I say, pipes let you use the output of a program as an input to another program. A series of bash commands connected together using pipes is usually called a pipeline.
Format

$ [COMMAND1] | [COMMAND2] | ...

Example

Suppose that we want to retrieve all Eminem songs that contains the word "love". We would first use curl to retrieve the list of songs from the internet, then use the output from the request as an input to the grep command to search for exact matches of the word "love":

$ curl -X GET https://pastebin.com/raw/6nfK1QRb | grep -F -i "love"

the final filtered list of songs is:

14. Never Love Again$
14 M-bM-^@M-^T Love Game (feat. Kendrick Lamar)$
Rihanna M-bM-^@M-^S Love The Way You Lie Part II (feat. Eminem)$
09 M-bM-^@M-^S No Love (feat. Lil Wayne)$
15 M-bM-^@M-^S Love the Way You Lie (feat. Rihanna)$
17 M-bM-^@M-^S Crazy in Love$
02 M-bM-^@M-^S I Love You More$
03 M-bM-^@M-^S I Love You More (Original)$
02 M-bM-^@M-^S Love Me M-bM-^@M-^S Obie Trice, Eminem & 50 Cent$
Eminem M-bM-^@M-^S Thug Love (feat. 50 Cent & Beyonce) (Remix)$

7. `!` - bang

Description: !, or shall I say, bang is a useful command that lets you execute and play around with bash commands history. Combined with other characters and keywords, It can be extremely time efficient to use it instead of retyping commands from the bash history.
Format

$ !! # execute the last executed command
$ !* # execute the last command except for the last argument
$ !$ # get the last argument of the last executed command
$ ![PATTERN] # execute the the first command that matches the given pattern from the bash history

8. `head` and `tail`

Description: head and tail are two useful bash commands that lets you display a portion of a given file. The former is used to display the first n lines of a file, and the latter is used to display the last n lines of a file. By default, n is equal to 10.
Format

$ head [OPTION]... [FILE]...
$ tail [OPTION]... [FILE]...

Example

Dump the first and last 20 lines of a file called main.js in a file called example:

$ head --lines=20 main.js > example
$ tail --lines=20 main.js >> example

9. `fzf`

Description: fzf is an awesome cli tool for performing fuzzy search on your files or stdout through the command line. Honestly, fzf is a really powerful tool that can do alot, but in this article, we will focus on two main usages for this tool: searching for files and search for content from the stdout. You can read more about fzf through their github page.
Format

$ fzf [OPTION]

Example

By default, running the fzf command without any options will open an interactive searching session within the current directory. The following gif shows how we could fuzzy search for files in the current directory:

We can also pipe the stdout to fzf and search for content within the provided context:

Closing Remarks

Knowing your way around bash commands and tools can accelerate your productivity immensely. This article has covered some of the useful ones the I use on a daily basis. Feel free to mention your favorite bash commands/tools in the comments. Nevertheless, Have a great day🎉.

Generators in Javascript: How to use them

Karim Elghamry — Fri, 05 Feb 2021 14:04:54 +0000

Opening Note

Hello fellow programmers 👋 In this article, we will walk-through the basics of generators in Javascript, which was introduced in ES6, and get across some real use cases.

What is a generator?

From its name, a generator is a function that allows you to generate one or more values by exiting and re-entering the execution procedure whilst saving its state (context) across multiple calls. To put it in simpler words, a generator is similar to normal functions, but has the ability to continue execution on demand at the point at which it was previously terminated, simply by saving its previous state. The following flowchart illustrates the difference between a normal function and a generator function.

Syntax

As you've already guessed, there are some syntactic differences between a normal function and a generator:

// Normal Function
function normalFunction(params) {
  // your logic goes here
  return value;
}

/* --------------------------------- */

// Generator Function
function* generatorFunction(params) {
  // your logic
  yield value1;

  // your logic
  yield value2;

  /*
    .
    .
    .
  */

  // your logic
  yield valueN;
}

The first noticeable difference in syntax is that a generator is declared using the function* keyword instead of function. Also, notice how we use the return keyword in a normal function, while we use the yield keyword in a generator function instead, respectively. The yield keyword inside the generator allows us to 'return' a value, terminate execution, save the state (context) of the current lexical scope and waits for the next invocation to resume execution at the last termination point.

note: In a normal function, you can only execute the return keyword once, which will return a value and terminate the function completely. In a generator, you can use the yield keyword multiple times as much as you want to 'return' values on consecutive calls. You can also use the return keyword inside a generator, but leave this discussion for a different day.

Invocation

Now that we've covered the differences in syntax between both functions, let us see how does one invoke a generator and yield its values. First, consider the following piece of code which illustrates the invocation of a normal function:

function normalFunction() {
  console.log('I have been invoked');
}

// invocation
normalFunction();

In general, you can invoke a normal function by typing the function's signature followed by a pair of parentheses (). The previous code will output:

I have been invoked

Now let's try to use the same procedure to invoke a generator. Inspect the following piece of code closely:

function* generatorFunction() {
  console.log('I have been invoked');
  yield 'first value';

  console.log('resuming execution');
  yield 'second value';
}

// does this invoke the generator?
generatorFunction();

What do you expect from such program? Technically, we would expect that the function is to be executed until it hits the first yield keyword. However, the output of the previous program was empty:

that is because the normal invocation syntax does not actually execute the body of the generator function. Instead, it creates a Generator Object that holds multiple properties and methods. To prove this, we can try to print out console.log(generatorFunction()) and the output should be as follows:

Object [Generator] {}

So, the question is; how do we actually yield our values from a generator?

well, there are some important methods that belong to the Generator Object that we can utilize. The first and the most important method is called next(), which, from its name, yields the next value from the defined generator. Now lets modify our previous code to actually yield our values:

function* generatorFunction() {
  console.log('I have been invoked');
  yield 'first value';

  console.log('resuming execution');
  yield 'second value';
}

// store the Generator Object in a variable
let foo = generatorFunction();

// execute until we yield the first value
console.log(foo.next());

// resume execution until we yield the second value
console.log(foo.next());

// execute until the function ends
console.log(foo.next());

the output of the previous code is:

I have been invoked
{ value: 'first value', done: false }
resuming execution
{ value: 'second value', done: false }
{ value: undefined, done: true }

Let's inspect the output line by line. When calling the first foo.next() method, the generator began to execute until it hit the first yield keyword and stops the execution. This is reflected in the first two lines of the output. Notice how the foo.next() returned an Object instead of the actual yielded value. This Object should always contain the following properties:

'value': which holds the current yielded value from the generator.
'done': a boolean flag which indicates whether the generator execution has reached the end or not.

Lets move on to the second foo.next() call. As expected, the generator resumes the execution from the last termination step and executes until it hits the second yield keyword, which is reflected in the third and fourth lines of the output. Notice how the done flag is still set by false, as it did not yet reach the end of the function.

On the last foo.next() call, the function resumes execution after the second yield keyword and finds nothing to execute, which indicates that we've reached the end of the function. At this point, there are no more values to yield and the done flag is set to true as reflected in the last line of the output.

Now that we've covered the basic concepts of generators in Javascript, lets take a look at some of its useful use cases.

Use Cases

Use case 1: Mimic the `range()` function from Python

According to the Python docs, "the range type represents an immutable sequence of numbers and is commonly used for looping a specific number of times in for loops." The range() function in Python usually contains the following parameters:

start (optional, default = 0): the first number in the sequence, inclusive.
end (required): the last number of the sequence, exclusive.
step (optional, default = 1): the difference between any two given numbers in the sequence.

Basically, the usage of the range() function in Python is shown below:

# Python code
for i range(3):
    print(i)

# output:
# 0
# 1
# 2

what we need to do is to mimic this functionality in Javascript using generators. Inspect the following piece of code closely:

/*
range function implemented in Javascript
*/
function* range({start = 0, end, step = 1}) {
  for (let i = start; i < end; i += step) yield i;
}

Lets take it step by step. Firstly, the function signature defines a generator that takes three params: start, end and step, in which start and step are defaulted to 0 and 1 respectively. Moving onto the function body, it contains a basic for loop that starts iterating from start inclusive till end exclusive. Inside the loop's scope, we yield the value i of the current number in the sequence.

Lets see it in action. The following piece of code illustrates different examples of the implemented range function:

// first example
for (let i of range({end: 4})) console.log(i);

/*
output:
0
1
2
3
*/

// second example
for (let i of range({start: 2, end: 4})) console.log(i);

/*
output:
2
3
*/

// third example
for (let i of range({start: 1, end: 8, step: 2})) console.log(i);

/*
output:
1
3
5
7
*/

Use case 2: Visualize the Bubble Sort algorithm

In this use case, we will attempt to output a step-by-step execution of the Bubble Sort algorithm on a given array to easily visualize it. Briefly, bubble sort works as follows; given an array of length n and i as the current iteration, propagate the max(array[0:n - i]) to the index n - i repeatedly until the array is sorted. The default implementation is shown below:

/*
Bubble Sort implementation in javascript
*/
function bubbleSort(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
    for (let j = 0; j < i; j++) {
      // if the current value is larger than its adjacent
      // swap them together
      if (arr[j] > arr[j+1]) {
        [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
      }
    }
  }

  return arr;
}

Our job is to visualize the step-by-step comparisons and swaps that are carried out throughout this algorithm. This can be easily done using generators. We simply yield the current array after each iteration in the inner loop. The new function will be as follows:

/*
visualize Bubble Sort implementation in javascript
*/
function* visualizeBubbleSort(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
    for (let j = 0; j < i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }

      yield arr;
    }
  }
}

This will yield the array for each iteration in the inner loop, showing us the current state of the array. Consider the following example:

let inputArray = [40, 30, 2, 20];
let currentStep = 1;
for (let val of visualizeBubbleSort(inputArray)) {
  console.log(`step #${currentStep}: [${val}]`);
  currentStep++;
}

The output of the previous program will be:

step #1: [30,40,2,20]
step #2: [30,2,40,20]
step #3: [30,2,20,40]
step #4: [2,30,20,40]
step #5: [2,20,30,40]
step #6: [2,20,30,40]

we can clearly see what is happening throughout the algorithm thanks to the implemented generator:

step 1 -> swap 40 with 30
step 2 -> swap 40 with 2
step 3 -> swap 40 with 20
step 4 -> swap 30 with 2
step 5 -> swap 30 with 20
step 6 -> do not swap anything, array is sorted

Note: this technique can be used to visualize any given algorithm easily. It can be very helpful sometimes.

Use case 3: Generate distinct random numbers on demand

In this use case, we will try to generate a series of distinct random numbers using generators. First, we would put some constraints on the inputs and outputs as follows:

The function should only generate positive integers.
The function should take a parameter limit, which determines the maximum number of generated integers as well as the largest possible generated integer.
The function should have a way to store the valid pool of integers to choose from.

Following the previous constrains carefully, we can implement this functionality using generators easily:

/*
distinctRandom implementation in js 
*/
function* distinctRandom({limit = 10}) {
  // we create an array that contains all numbers in range [0:limit)
  // this is our initial pool of numbers to choose from
  const availableValues = [...new Array(limit)].map((val, index) => index);

  // we repeatedly loop until the available pool of numbers is empty
  while (availableValues.length !== 0) {
    // generate a random index in range [0: availableValues.length)
    // then, yield the number that is present at the chosen index
    // Finally, remove the picked item from the pool of available numbers
    const currentRandom = Math.floor(Math.random() * availableValues.length);
    yield availableValues[currentRandom];
    availableValues.splice(currentRandom, 1);
  }
}

Briefly, the previous generator tries to maintain a pool of available integers to choose from. In each iteration, we randomly choose a number from this pool, then yield it and remove it from the valid pool. Theoretically, the maximum number of generated integers should be equal to limit and all generated integers must be distinct. We can easily proof this by exhausting the implemented generator until the end of execution:

// we set the limit to 8
for (const val of distinctRandom({limit: 8})) {
  console.log(val);
}

/*
sample output:
3
7
5
2
4
0
1
6
*/

Closing Note

Generators are a great addition to ES6 which provides a solution for multiple problems and use cases. You can use them anywhere for sure, but I would suggest looking into alternative solutions for the problem in-hand before settling for a generator, as they can introduce more complexity to your code as well as they can be hard to debug at times. Nevertheless, happy coding 🎉

GraphAV - A graph algorithms visualizer built using React and Typescript

Karim Elghamry — Tue, 28 Jul 2020 12:51:46 +0000

Aim of the project

GraphAV is an open source graph algorithms visualizer built 💯 from scratch using React and Typescript. It strives to facilitate the learning process of anyone who's struggling to grasp the concept of a certain graph algorithm. It can also be used as a tool by teachers to easily introduce a new algorithm to their students 👨‍🎓👩‍🎓.

links

website: https://karimelghamry.github.io/GraphAV/
Github repo: https://github.com/KarimElghamry/GraphAV

GraphAV does not include any UI dependencies in its code other than styled-components. 🎉🎉

NOTE: touch screen support is yet to be implemented. Use a PC/Laptop for a better experience.

Show some ❤️ and ⭐ the repo to support the project 😁

Features

✔️ Light/Dark themes

✔️ Add, move and delete nodes

✔️ Directed/Undirected edges

✔️ Unweighted edges

✔️ Control visualization speed

✔️ Control canvas zoom percentage

✔️ Shortest paths and predecessor node information

✔️ Visited nodes/edges animations

🚧 Weighted edges (to be implemented)

🚧 Touch screen support (to be implemented)

🚧 Save/share graphs (to be implemented)

Available Algorithms

✔️ DFS - Depth First Search

✔️ DLS - Depth Limited Search

✔️ IDDFS - Iterative Deepening Depth First Search

✔️ BFS - Breadth First Search (with shortest paths calculations)

✔️ Dijkstra (with shortest paths calculations)

🚧 Bellman-Ford (to be implemented)

🚧 Floyd-Warshall (to be implemented)

🚧 A* (to be implemented)

🚧 Kosaraju (to be implemented)

🚧 Tarjan's Strongly Connected Components* (to be implemented)

DEV Community: Karim Elghamry

Authentication and Authorization: A comprehensive guide

I- Basic Auth flow explained

II- Authentication

Stateful Authentication

Pros

Cons

Stateless Authentication

Pros

Cons

III- Authorization

Role Based Access Control (RBAC)

Pros

Cons

Attribute Based Access Control (ABAC)

Pros

Cons

Discretionary Access Control (DAC)

Pros

Cons

IV- How to choose your Auth solution

Authentication

Authorization

V- Conclusion

Using RxJS/BLoC as a state management solution for React

Table of Contents

Prerequisite knowledge

What is BLoC?

Creating a Todo app using BLoC/RxJS

App initialization

Folder structure

Creating the models

Creating the BLoC's

Creating the hook

Creating the view

Considerations and closing remarks

Bash Basics: useful commands and tools

Introduction

Commands

1. man

2. tldr

3. cat

4. grep

5. curl

6. | - pipes

7. ! - bang

8. head and tail

9. fzf

Closing Remarks

Generators in Javascript: How to use them

Opening Note

What is a generator?

Syntax

Invocation

Use Cases

Use case 1: Mimic the range() function from Python

Use case 2: Visualize the Bubble Sort algorithm

Use case 3: Generate distinct random numbers on demand

Closing Note

GraphAV - A graph algorithms visualizer built using React and Typescript

Aim of the project

links

Features

Available Algorithms

Demo

1. `man`

2. `tldr`

3. `cat`

4. `grep`

5. `curl`

6. `|` - pipes

7. `!` - bang

8. `head` and `tail`

9. `fzf`

Use case 1: Mimic the `range()` function from Python