DEV Community: Debojyoti Chatterjee

What is SSO (Single Sign-On)? How SSO Works?

Debojyoti Chatterjee — Wed, 02 Jul 2025 18:44:18 +0000

What is Single Sign-On (SSO)?

We all know ho we can log into Gmail and then access YouTube, Google Drive, and Google Maps without entering your password again? That's the what we can call Single Sign-On (SSO) at work. We use dozens of applications on a daily basis, SSO has become a important method for both users and organizations.

Single Sign-On (SSO) is an authentication method that allows users to access multiple applications or services using a uniform way login and keep single credentials. Instead of storing various usernames and passwords, users log in using SSO and it seamlessly grants access to authorized resources. It improves the user experience in many ways.

Key Characteristics of SSO

SSO systems incorporates several important characteristics that make them effective:

Centralized Authentication: All user credentials are managed from a single source.
Trust Relationships: Secure connections between identity providers and service providers.
Token-Based Access: Digital tokens verify user identity across applications.
Session Management: Single logout terminates access to all connected systems.

SSO Authentication Flow Diagram

Core Components of SSO

Identity Provider (IDP)

The Identity Provider is the authentication server that verifies user credentials and issues security tokens.
Some popular IDPs are:

Azure Active Directory
Okta
Auth0
Google The IdP maintains user profiles at their end, handles authentication, and returns secure tokens containing user information for the application to consume.

Service Provider (SP)

Service Providers are the applications that users access via SSO login. They can be webApps, other services or applications. Service Providers trust the IDPs to authenticate users and rely on the tokens provided to grant access.

Authentication Tokens

Tokens are digital data that contain user's identity information. These tokens are tamper proof. Some common token formats are:

SAML claims
JWT tokens
OAuth access tokens

![[Pasted image 20250702221945.png]]

The SSO Authentication Flow

A typical SSO authentication workflow follows the steps below:

User Access Request: A user attempts to access a protected application or service.
Redirect to IDP: The application redirects the user to the Identity Provider for authentication.
User Authentication: The user enters their credentials at the IDP login page.
Token Generation: The IDP creates a secure token containing user information upon successful authentication.
Token Validation: The application receives the token and validates it from the IDP again.
Access Granted: Upon successful validation, the user gains access to the application.

SSO Protocols and Standards

Different protocols power SSO implementations, each with its own strengths and use cases. Understanding these protocols helps you choose the right approach for your organization.

PROPERTY	SAML	OAuth	OpenID Connect
Purpose	XML based Authentication and AUthorization	Authorization Protocol	Authentication Protocol
Use Case	Secure and Centralized authentication.	Grant access to resources.	Authenticate users across applications.
Technology	XML based standard	Authorization framework.	Built on top of OAuth2.o
Tokens	SAML Assertions.	Access tokens.	JSON Web tokens(JWTs).
Actors	Identity Provider(IDP) Service Provider(SP)	Resource Owner, Client and Authorization Server	Identity Provider(IDP) Service Provider(SP)
Scenarios	Enterprise SSO, Federated SSO	API access, Third-Party authorization	Single Sign On Social logins.

SAML (Security Assertion Markup Language)

SAML is an XML-primarily based wellknown this is particularly famous in company environments. It presents sturdy protection capabilities and distinct characteristic sharing abilities. SAML is ideal for corporations requiring strict compliance and precise audit trails.

Key Features of SAML:

XML-primarily based assertions for precise user information.
Strong digital signature for protection.
Excellent for enterprise SSO use cases.
Supports both Service Provider-initiated and IDP-initiated flows.

OAuth 2.0

OAuth 2.0 is primarily an authorization framework instead of protocol. It's extensively used for API access and third-party integrations. OAuth excels in scenarios wherein applications want to get access with out exposing credentials.

Key Features of OAuth 2.0:

JSON-based tokens for lightweight communication.
Excellent for mobile apps and webApps.
Supports various grant types for different scenarios.
Widely adopted by social media platforms.

OpenID Connect (OIDC)

OpenID Connect is built on top of OAuth 2.0 and adds an authentication layer. It provides simplicity with proper authentication capabilities. OIDC is becoming the preferred choice for modern web applications.

Key Features of OpenID Connect:

ID tokens for user authentication.
JSON Web Token (JWT) format for easy parsing.
Standardized endpoints for user info.
Perfect for modern web and mobile applications.

Code Examples

Let's look at practical code examples for implementing SSO using different protocols.

SAML Implementation Example

Here's a Python Flask application implementing SAML-based SSO:

# Python example of SAML-based SSO implementation using python3-saml library

from flask import Flask, request, redirect, session
from onelogin.saml2.auth import OneLogin_Saml2_Auth
from onelogin.saml2.settings import OneLogin_Saml2_Settings
import os

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'
app.config['SAML_PATH'] = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'saml')

def init_saml_auth(req):
    auth = OneLogin_Saml2_Auth(req, custom_base_path=app.config['SAML_PATH'])
    return auth

def prepare_flask_request(request):
    return {
        'https': 'on' if request.scheme == 'https' else 'off',
        'http_host': request.host,
        'server_port': request.environ.get('SERVER_PORT', ''),
        'script_name': request.path,
        'get_data': request.args.copy(),
        'post_data': request.form.copy(),
        'query_string': request.query_string
    }

@app.route('/login')
def login():
    req = prepare_flask_request(request)
    auth = init_saml_auth(req)
    return redirect(auth.login())

@app.route('/acs', methods=['POST'])
def acs():
    req = prepare_flask_request(request)
    auth = init_saml_auth(req)
    auth.process_response()
    errors = auth.get_errors()

    if len(errors) == 0:
        session['user_data'] = auth.get_attributes()
        return redirect('/dashboard')
    else:
        return f"Authentication failed: {errors}"

This example demonstrates the basic structure of a SAML SP implementation. The code handles authentication requests, processes SAML responses, and manages user sessions.

OAuth 2.0 Implementation Example

Here's an OAuth implementation using Flask and Authlib:

# OAuth 2.0 SSO implementation with Google

from flask import Flask, redirect, url_for, session
from authlib.integrations.flask_client import OAuth

app = Flask(__name__)
app.secret_key = 'your-secret-key'

oauth = OAuth(app)
oauth.register(
    name='google',
    client_id='YOUR_GOOGLE_CLIENT_ID',
    client_secret='YOUR_GOOGLE_CLIENT_SECRET',
    access_token_url='https://accounts.google.com/o/oauth2/token',
    authorize_url='https://accounts.google.com/o/oauth2/auth',
    api_base_url='https://www.googleapis.com/oauth2/v1/',
    client_kwargs={'scope': 'openid email profile'},
)

@app.route('/login')
def login():
    redirect_uri = url_for('authorize', _external=True)
    return oauth.google.authorize_redirect(redirect_uri)

@app.route('/authorize')
def authorize():
    token = oauth.google.authorize_access_token()
    resp = oauth.google.get('userinfo')
    user_info = resp.json()
    session['user_info'] = user_info
    return redirect('/dashboard')

This OAuth example shows how to integrate with Google's OAuth service for user authentication.

SSO Security Challenges and Best Practices

While SSO has its own benefits, it also comes with a few security considerations that must be addressed.

Common Security Challenges

Single Point of Failure

If the SSO system goes down or fails, users would not be able to access any connected applications. This makes high availability crucial for SSO implementations it can affect on a very large scale.

Increased Attack Surface
A compromised SSO account potentially provides access to all the connected systems. This increases the impact of security breaches for other connected applications.

Complex Token Management
Tokens must be properly validated, secured, stored, and expired. Improper token handling can lead to security vulnerabilities.

Security Best Practices

Enforcing Multi-Factor Authentication (MFA)

MFA significantly reduces the risk of unauthorized access, even if credentials are compromised.

Use Strong Token Security

Follow token best practices including proper and timely expiration, secure storage, and HTTPS transmission. Token payloads should never contain sensitive data.

Regular Security Audits

Regular reviews of user access rights and SSO configurations must be conducted. It is also a good idea to implement automated monitoring for suspicious authentication patterns.

Adopt Least Privilege Access
Users should only be granted the minimum required access or permissions necessary for their roles.

Plan for Disaster Recovery

Implementation of a backup authentication method is highly advisable. One should ensure that a user can access the application even if SSO fails.

Emerging Trends

Zero Trust Security Models

Single Sign-On (SSO) is becoming a key part of zero trust architectures. Every access request is verified, no matter where it comes from.

Passwordless Authentication

Integration of biometric authentication and hardware tokens is also being adopted by many platforms that are more concerned about security standards, reducing reliance on traditional passwords.

AI-Powered Security

Machine learning algorithms are being used to detect abnormality in authentication patterns and raising alarms before any potential security threats happen.

Mobile-First Design

SSO solutions are increasingly designed with mobile devices as the primary access method.

Conclusion

Providing secure, centralized access to multiple applications, SSO maintains security and user experience while reducing security overhead for an application.

The important part of SSO implementation are planning, proper security measures, and ongoing monitoring. While challenges exist, the benefits are more than the risks when SSO is implemented correctly.

Original Post: https://codebounce.debojyotichatterjee.com/index.php/2025/07/02/sso/

Array Methods Quick Glance

Debojyoti Chatterjee — Sun, 04 Jul 2021 18:25:33 +0000

Methods


1. forEach()	2. map()	3. filter()	4. reduce()
5. slice()	6. splice()	7. sort()	8. concat()
9. fill()	10. includes()	11. join()	12. reverse()
13. push()	14. pop()	15. unshift()	16. shift()
17. indexOf()	18. lastIndexOf()	19. every()	20. some()
21. find()	22. findIndex()	23. from()	24. isArray()
25. flat()

1. forEach()

The forEach() method executes a provided function once for each array element.

const numArr = [1,2,3,4,5,6,7,8,9,10];
let sum = 0;
numArr.forEach((elem, index, arr) => {
    console.log(`numArr[${index}] - ${elem}`)
    sum +=elem;
})
console.log(sum) //55

2. map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

// returns a new array and does not change the original array
const numArr = [1,2,3,4,5,6,7,8,9,10];
const newArr = numArr.map((elem, index, array) => {
    return elem*index
});
console.log(numArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(newArr); // [ 0, 2, 6, 12, 20, 30, 42, 56, 72, 90 ]

Another Array.map() example:

// finding total price of each item
const productsArr = [
    {
        name: "Laptop",
        price: 1000,
        count: 8
    },
    {
        name: "Mouse",
        price: 500,
        count: 5
    },
    {
        name: "Keyboard",
        price: 800,
        count: 4
    }
];

const newArr = productsArr.map(product => {
    return ({
        name: product.name,
        totalPrice: product.price * product.count
    });
});
console.log(newArr);
/*
  [ { name: 'Laptop', totalPrice: 8000 },
  { name: 'Mouse', totalPrice: 2500 },
  { name: 'Keyboard', totalPrice: 3200 } ]
 */

Another Array.map() example:

// converting array of strings to numbers
const strArr = ["1","2","3","4","a","5"];
const numArr = strArr.map(Number);
console.log(strArr)
console.log(numArr) // [ 1, 2, 3, 4, NaN, 5 ]

3. filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

// finding even
const numArr = [1,2,3,4,5,6,7,8,9,10];
const evenArray = numArr.filter(elem => {
    return elem %2 === 0;
});
console.log(evenArray); // [ 2, 4, 6, 8, 10 ]

Another Array.filter() example:

// finding persons above 18 yrs age
const personsArr = [
    {
        name: "John",
        age: 12
    },
    {
        name: "Mary",
        age: 21
    },
    {
        name: "William",
        age: 50
    }
]
const adultArr = personsArr.filter(person => person.age > 18);
console.log(adultArr)
/*
[
    { 
        name: 'Mary', 
        age: 21 
    }, 
    { 
        name: 'William', 
        age: 50 
    }
]
*/

4. reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

/* the last parameter is the initial value of the accumulator, the accumulator basically stores the persisting value on every iteration */
// find the sum of all elems
const numArr = [1,2,3,4,5,6,7,8,9,10];
const totalVal = numArr.reduce((accumulator, elem, index, arr) => {
    return accumulator + elem;
},0);
console.log(totalVal); //55

Another Array.reduce() example:

// find the max value
const numArr = [1,2,3,4,5, 99, 6,7,8,9,10];
const maxVal = numArr.reduce((accumulator, elem, index, arr) => {
    return accumulator > elem ? accumulator : elem
}, 0);
console.log(maxVal); // 99

Another Array.reduce() example:

// find total worth of all products
const productsArr = [
    {
        name: "Laptop",
        price: 1000,
        count: 8
    },
    {
        name: "Mouse",
        price: 500,
        count: 5
    },
    {
        name: "Keyboard",
        price: 800,
        count: 4
    }
];
const totalWorth = productsArr.reduce((accumulator, elem, index, arr) => {
    return accumulator += elem.price * elem.count;
},0);
console.log(totalWorth); // 13700

5. slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

// does not include the second argument as index into consideration
const numArr = [1,2,3,4,5,6,7,8,9,10];
let slicedArr = numArr.slice(-5,-1);
console.log(slicedArr); // [ 6, 7, 8, 9 ]
slicedArr = numArr.slice(1,5);
console.log(slicedArr); // [ 2, 3, 4, 5 ]

6. splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements.

// manipulates the original array and returns the array of removed elements
const numArr = [1,2,3,4,5,6,7,8,9,10];
const removedElems = numArr.splice(5,3);
console.log(removedElems); // [ 6, 7, 8 ]
console.log(numArr); // [ 1, 2, 3, 4, 5, 9, 10 ]

Another example of array.splice():

// remove and insert elements into array
const numArr = [1,2,3,4,5,6,7,8,9,10];
const removedElems = numArr.splice(5,3, "a", "b", "c");
console.log(removedElems); //[ 6, 7, 8 ]
console.log(numArr); // [ 1, 2, 3, 4, 5, 'a', 'b', 'c', 9, 10 ]

Another example of Array.splice():

// insert an array
const numArr = [1,2,3,4,5,6,7,8,9,10];
const removedElems = numArr.splice(5,3, ["a", "b", "c"]);
console.log(removedElems); // [ 6, 7, 8 ]
console.log(numArr); // [   1,   2,   3,   4,   5,   [     "a",     "b",     "c"   ],   9,   10 ]

Another example of Array.splice():

// using the spread operator
const numArr = [1,2,3,4,5,6,7,8,9,10];
const removedElems = numArr.splice(5,3, ...["a", "b", "c"]);
console.log(removedElems); // [ 6, 7, 8 ]
console.log(numArr); // [ 1, 2, 3, 4, 5, 'a', 'b', 'c', 9, 10 ]

7. sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

/* converts the elements into strings and compares their UTF-16 code values
this manipulates the original array */

const charArr = ["C", "Z", "A", "B", "X", "D", "Y"]
const sortedCharArr = charArr.sort();
console.log(charArr); // [ 'A', 'B', 'C', 'D', 'X', 'Y', 'Z' ]
console.log(sortedCharArr); // [ 'A', 'B', 'C', 'D', 'X', 'Y', 'Z' ]

Another example of Array.sort():

// sorting a number array by writing a custom comparison function
const numArr = [6, 7, 10, 1, 2, 8, 9, 3, 4, 5];
const sortedNumArr = numArr.sort((a, b) => {
    /*
        1. Negative result will return a
        2. Zero result will do nothing
        3. Positive result will return b
    */
   return (a - b);
});
console.log(numArr);
console.log(sortedNumArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Another example of Array.sort():

// sort number array in reverse
const numArr = [6, 7, 10, 1, 2, 8, 9, 3, 4, 5];
const sortedNumArr = numArr.sort((a, b) => b - a);
console.log(numArr);
console.log(sortedNumArr); // [ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]

8. concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const numArr1 = [1, 2, 3];
const numArr2 = [4, 5, 6];
const numArr3 = [7, 8, 9, 10];

const newArr1 = numArr1.concat(numArr2, numArr3);
console.log(newArr1); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

const newArr2 = numArr1.concat(77, 88, 99, 100);
console.log(newArr2); // [ 1, 2, 3, 77, 88, 99, 100 ]

const newArr3 = numArr1.concat([11, 22, 33, 44]);
console.log(newArr3); // [ 1, 2, 3, 11, 22, 33, 44 ]

const newArr4 = numArr1.concat(...[11, 22, 33, 44]);
console.log(newArr4); // [ 1, 2, 3, 11, 22, 33, 44 ]

const newArr5 = numArr1.concat("a", "b", "c", numArr2, numArr3);
console.log(newArr5); // [ 1, 2, 3, 'a', 'b', 'c', 4, 5, 6, 7, 8, 9, 10 ]

9. fill()

The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

// used to fill in an array with certain elements can also take index as an argument
const numArr = [1,2,3,4,5,6,7,8,9,10];

const newArr1 = numArr.fill(0);
console.log(newArr1); // [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

const newArr2 = numArr.fill("$",1,7);
console.log(newArr2); // [ 0, '$', '$', '$', '$', '$', '$', 0, 0, 0 ]

const newArr3 = numArr.fill("#", -3);
console.log(newArr3); // [ 0, '$', '$', '$', '$', '$', '$', '#', '#', '#' ]

Another example of Array.fill():

// generate number array using fill()
const createNumArr = (value) => {
    return Array(value).fill(0).map((elem, index) => {
        return index + 1;
    });
}
const newArr1 = createNumArr(7)
console.log(newArr1); // [ 1, 2, 3, 4, 5, 6, 7 ]

10. includes()

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

// checks if an element includes in the array
const myArr = ["Tokyo", "Paris", "Italy"];

const res1 = myArr.includes("London");
console.log(res1); //false

const res2 = myArr.includes("Paris");
console.log(res2); //true

11. join()

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

/* joins all the elements from an array separated by
separator of your choice (default is a comma) and forms
a new string */

const myArr = ["Tokyo", "Paris", "Italy"];

const res1 = myArr.join();
console.log(res1); // Tokyo,Paris,Italy

const res2 =  myArr.join("|");
console.log(res2); // Tokyo|Paris|Italy

12. reverse()

The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

/* reverses the array element, since it manipulates the
original array hence we can create a shallow copy using concat anything
or use the spread operator to work on a new array on the fly */

const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const revNumArr = [...numArr].reverse();
console.log(numArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(revNumArr); // [ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]

const charArr = [ 'A', 'B', 'C', 'D', 'X', 'Y', 'Z' ];
const revCharArr = [...charArr].reverse();
console.log(charArr); // [ 'A', 'B', 'C', 'D', 'X', 'Y', 'Z' ]
console.log(revCharArr); // [ 'Z', 'Y', 'X', 'D', 'C', 'B', 'A' ]

Another example of reverse():

// reverse a string
const myStr = "Moonlight is horrible !!";

const revMyStr1 = myStr.split(" ").reverse().join(" ");
const revMyStr2 = myStr.split("").reverse().join("");

console.log(revMyStr1); // !! horrible is Moonlight
console.log(revMyStr2); // !! elbirroh si thgilnooM

13. push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

// add elements to the end of the array and returns the new length
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const res = numArr.push(11,12,13);

console.log(numArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ]
console.log(res) // 13

14. pop()

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

// removes the last element of the array and returns the removed element
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const res = numArr.pop();

console.log(numArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(res) // 10

15. unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

// add elements to the beginning of the array and returns the new length
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const res1 = numArr.unshift(11);

console.log(numArr); // [ 11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(res1); // 11

const res2 = numArr.unshift(12, 13);

// adds from the right
console.log(numArr); // [ 12, 13, 11, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(res2); // 13

16. shift()

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

// removes the first element from an array and returns the removed element
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const res = numArr.shift();

console.log(numArr); // [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(res); // 1

17. indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const nameArr = ["Fred", "Dorothy", "Barney", "William"]

const res = nameArr.indexOf("Barney");
console.log(res); // 2

const res2 = nameArr.indexOf("Jayden");
// if an elem is not found it will return -1
res2 > -1 ? console.log(res2) : nameArr.push("Jayden")
console.log(nameArr.indexOf("Jayden")); // 4

18. lastIndexOf()

The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.

// returns the index of the last matching element
const nameArr = ["Fred", "Dorothy", "Barney", "William", "Dorothy"]

const res = nameArr.lastIndexOf("Dorothy");
console.log(res); // 4

19. every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

/* returns true/false based on an operation carried on all the elems of an object
if any one elem does not match the condition, it will return false */
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const res1 = numArr.every((elem, index, arr) => {
    return elem % 5 === 0;
});
console.log(res1); // false

const res2 = numArr.every((elem, index, arr) => {
    return elem > 0
});
console.log(res2); // true

Another example of Array.every():

// checking a 2D array
const twoDArr = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
];
const res = twoDArr.every((item, index, arr) => {
    return Array.isArray(item);
});
console.log(res) // true

20. some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

/* returns true/false based on an operation carried on all the elems of an object
if any one element matches the condition it will reurn true */
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const res1 = numArr.some((elem, index, arr) => {
    return elem % 5 === 0;
});
console.log(res1); // true

const res2 = numArr.some((elem, index, arr) => {
    return elem > 10
});
console.log(res2); // false

21. find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

// finds an element from an array and returns the element itself

const persons = [
    {
        name: "Fred",
        age: 25
    },
    {
        name: "Dorothy",
        age: 50
    },
    {
        name: "William",
        age: 47
    },
    {
        name: "Jayden",
        age: 19
    }
];

const res = persons.find((person, index, arr) => {
    return person.name === "William";
});

console.log(res); // { name: 'William', age: 47 }
console.log(res.age); // 47

22. findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

// finds an element from an array and returns the index of it
const persons = [
    {
        name: "Fred",
        age: 25
    },
    {
        name: "Dorothy",
        age: 50
    },
    {
        name: "William",
        age: 47
    },
    {
        name: "Jayden",
        age: 19
    }
];

const res = persons.findIndex((person, index, arr) => {
    return person.name === "William";
});

console.log(res); // 2
console.log(persons[res].age); // 47

23. from()

The Array.from()* static method creates a new, shallow-copied Array instance from an array-like or iterable object.

// creates an array from a string
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

const myStr = "123456789";

const res = Array.from(myStr, (elem, index, array) => {
    return Number(elem)
});

const res2 = Array.from(myStr, Number);

console.log(res); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(res2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Another exampleof Array.from():

// remove dupes from an array
const faultyArr = [1, 2, 3, 1, 2, 3, 4, 5];

const uniqueSet = new Set(faultyArr);
console.log(uniqueSet); // Set { 1, 2, 3, 4, 5 }

const uniqueArr = Array.from(uniqueSet);
console.log(uniqueArr); // [ 1, 2, 3, 4, 5 ]

24. isArray()

The Array.isArray() method determines whether the passed value is an Array.

// check if the arguement passed is an array type
const numArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const myString = "JavaScript";

let res = Array.isArray(numArr);
console.log(res); // true

res = Array.isArray(myString);
console.log(res); // false

25. flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

/* creates a new new array with all the sub arrays elems
by default the depth is 1 but you can mention the depth or just Infinity */
const numArr = [ 1, 2, [3, 4, [5, [6, 7], 8,], 9, 10 ]];

let res = numArr.flat(3); // can also use Infinity
console.log(res); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

JavaScript Modules: A walkthrough.

Debojyoti Chatterjee — Mon, 31 May 2021 15:18:13 +0000

In JavaScript, modules are pieces of encapsulated code that can reused in different parts of your application or program whenever you need it.

Basically you can write your JavaScript code without modules but breaking down your code into multiple reusable modules helps you to keep your code clean, readable, reusable and mode manageable when you have dependencies.

The syntax for modules was officially introduced in ES6. Let's have a look at the various ways we can achieve this:

1. Asynchronous Module Definition (AMD):

This method is used for the browser environments. Large web applications require many external modules. Now, the traditional way of loading them is using the <script> element. When using <script> the browser loads them in a synchronous(sequential) fashion. Now it would be much better if we can load those external modules in parallel provided that there are no dependencies among each other.
So, lets have a look at the Asynchronous Module Definition(AMD) syntax:

define('yourModuleName',
    ['foo', 'bar'], /* dependencies(optional) */
    // module definition function
    // dependencies (foo and bar) are mapped to function parameters
    function (foo, bar) {
        // return a value that defines the module export
        // (i.e the functionality we want to expose for consumption)

        // create your module here
        var yourModuleName = {
            someAction: function () {
                console.log('This is a log statement!');
            }
        }

        return yourModuleName;
    });

2. CommonJS Format:

This format is used in NodeJS. It uses module.export and require keywords to define and consume the modules.
Let's have a look at the syntax:

/* file: yourModule.js */
exports.findLength = str => str.length;

/* otherFile.js */
const stringFunc = require("yourModule.js");
const val = stringFunc.findLength("I love pancakes!");
console.log(val) // 16

You can export more than one function or value and require them using destructuring.

/* file: yourModule.js */
exports.findLength = str => str.length;
exports.changeToCaps = str => str.toUpperCase();
exports.changeToLowCaps = str => str.toLowerCase();

/* otherFile.js */
const {findLength, changeToCaps, changeToLowCaps} = require("yourModule.js");
const val = findLength("I love pancakes!");
const upper = changeToCaps("I love burgers!");
const lower = changeToLowCaps("Stop talking about food!")

3. Universal Module Definition (UMD):

Well, this pattern for JavaScript modules are efficient to work everywhere, be it a client on server or elsewhere. The main attempt of this format is compatibility.
The pattern is a bit verbose, but is both AMD and CommonJS compatible, as well as supporting the “global” variable definition style.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        /* AMD. 
        Register as an anonymous module. */
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        /* Node. 
        Does not work with strict CommonJS, but
        only CommonJS-like environments that support module.exports,
        like Node. */
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
    const findLength = str => str.length;
    const changeToCaps = str => str.toUpperCase();
    const changeToLowCaps = str => str.toLowerCase();

    return ({
        findLength,
        changeToCaps,
        changeToLowCaps
    });
}));

4. System.register:

System.register can be considered as a new module format designed to support the exact semantics of ES6 modules within ES5.
Let's take an example here, the following module is defined in ES6 syntax:

import dependencyModule1 from "./dependencyModule1.js";
dependencyModule1.api1();

// Named export:
export const findLength = function (str) { return str.length };
export const changeToCaps = function (str) { return str.toUpperCase() };
export const changeToLowCaps = function (str) { return str.toLowerCase() };

// Or default export:
export default {
    findLength,
    changeToCaps,
    changeToLowCaps
}

The above in System.register format:

System.register(["./dependencyModule1.js"], function (_export, _context) {
    "use strict";
    var dependencyModule1, findLength, changeToCaps, changeToLowCaps;
    var __moduleName = _context && _context.id;
    return {
        setters: [
            function (dependencyModule1) {
                dependencyModule1 = dependencyModule1;
            }
        ],
        execute: function () {
            dependencyModule1.default.api1();
            // Named export:
            _export("findLength", findLength = function (str) { return str.length };
            _export("changeToCaps", changeToCaps = function (str) {
                return str.toUpperCase();
            };);
_export("changeToLowCaps", changeToLowCaps = function (str) {
    return str.toLowerCase();
};);
// Or default export:
_export("default", {
    findLength,
    changeToCaps,
    changeToLowCaps
});
        }
    };
});

5. ES6 module:

The goal for ES6 modules was to create a format that both users of CommonJS and of AMD are content. The basic syntax is import and export keyword.
You can use the export keyword for exporting the public API of a module.

export const findLength = function (str) { return str.length };
export const changeToCaps = function (str) { return str.toUpperCase() };
export const changeToLowCaps = function (str) { return str.toLowerCase() };
export default theDefaultFunc = function () {console.log("This is a default export!!")}

And use the import keyword for importing it for use.

// So, this is how you make default import and named imports
import theDefaultFunc, {findLength, changeToCaps, changeToLowCaps} from "./yourModuleFile.js"

//  You can use alias while importing
import theDefaultFunc as defFunc from "./yourModuleFile.js"

// You can also import a complete module like below
import * from "./someModule.js"

For browser, <script>’s nomodule attribute can be used as a fallback option.

<script nomodule>
    alert("Module not supported.");
</script>

JavaScript has standard built-in language features for modules. This is supported in NodeJS but not by all the browser versions yet. But, we can already use the ES6 module format. We need a transpiler like Babel, Webpack etc. to transpile our code to an ES5 module format such as AMD or CommonJS before we can actually run our code in the browser.

react-scripts start in specific browser

Debojyoti Chatterjee — Wed, 05 May 2021 19:22:26 +0000

During my early stages of learning react, a specific thing bugged me the most. Whenever I used to run the react project on my local system, it would launch in the system default browser.
Now I am a kind of person who likes to use a lot of different products and learn what each has to offer. For example, right now in my system I have the following browsers installed:

Google Chrome (The reliable son).
Firefox
Firefox Developer Edition
Vivaldi

I also tried Brave Browser and Yandex Browser and bumped into Opera Neon while writing this. I am gonna try that one later.

Okay, coming back to the problem statement. I always wanted to run the react script and be able open on a specific browser or not open at all. Let me choose which browser I want to hit the localhost.

I am sure many of the developers in their beginning stage want the same too.

Recently there's another thing I have noticed that if you restart your script React used to reconnect to an existing tab instance on the browser but now it will open another new tab every time.

By default, Create React App will open the default system browser, favouring Chrome. Alternatively you can set the BROWSER variable to prevent this behaviour. Now let me tell you quickest 3 ways you can override this:

1. Setting an environment variable:

Open up your terminal window and set a shell variable as following:

$ BROWSER=none

Now you just need to export this variable to make it an environment variable:

$ export BROWSER

Check if the environment variable has been set properly:

$ printenv BROWSER

The above should return none. Now you can hit a npm start or yarn start to run your project without launching any browser.
One drawback of this is you have to set the environment variable every time in a new instance of the terminal.

2. Create a .env file:

In your project folder where the file package.json exists, create a file and name it .env. This is your environment file where you can set some environment variables for your specifically project.
Within this file add the line:

BROWSER=none

And, we're done. Run the script to start your project and no browser should pop up.
(You can also configure other variables like HOST, PORT as per your need. Find out more about Advanced Configuration)

3. Modify the start script:

In you package.json file you can update the scripts section and change the 'start' script as following:

"scripts": {
    "start": "BROWSER=none react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

You are basically letting React know that there is no default browser set on every time you run the start script, so it does not open your application in any browser.

4. Happy go Typy:

If you do not want to make changes in the package.json file or add a .env file, you can set the BROWSER variable every time you run the react using the package manager of your choice:

$ BROWSER=none npm start

OR

$ BROWSER=none yarn start

If you want to open in a specific browser, replace the none with firefox, vivaldi, google-chrome-stable or any browser of your choice.

Well, that's how you do it. Hope this helps you, please add comments in the post if you see something is not right or could be explained better. I am gonna go check that Opera Neon. Have a good day!

Decorator Functions in Python.

Debojyoti Chatterjee — Sat, 17 Apr 2021 18:14:24 +0000

A decorator function allows you to add or modify an existing function without actually modifying it's structure.

This is a very basic explanation of a decorator function.

But the question here is why should we use a decorator function when we can just change a function as required?

Well, it's not always you have one single function that you might want to modify. Suppose you have a bunch of functions in your project where you want to make a specific change to all the function as a part of your requirement.

Now it would be very tedious to find and modify each and every function and also test each one of them to make sure it does not break your application.

For that you have decorator function using which you can modify it without actually altering any of the code inside the function. Decorator function can have many use cases but is typically used when you want to make minor changes to your existing set of functions.

Let's have a look at the simple example:

def deco_func(val):
    def wrapper():
        print("Trigger")
        print(val)
        print("Kill")
        print("------------------------------")
    return wrapper

holder = deco_func("Hello Python")
print(holder)
holder()

Output:

<function deco_func.<locals>.wrapper at 0x7efcdc4e8550>
Trigger
Hello Python
Kill
------------------------------

The above example is possible in python because the functions here are treated as first class objects, which means that functions can be passed as or used as parameters/arguments.

Here's some quick pointers to keeps in mind:

A function is an instance of the Object type.
A function can be stored in a variable.
A function can be passed as a parameter.
A function can return a function.

Now, let's make some minor changes in the above code:

def deco_func(func):
    def wrapper():
        print("Trigger")
        func()
        print("Kill")
        print("------------------------------")
    return wrapper

def func1():
    print("This is Function 1")

def func2():
    print("This is Function 2")

def func3():
    print("This is Function 3")

func1 = deco_func(func1)
func2 = deco_func(func2)
func3 = deco_func(func3)
print(func1)
func1()
func2()
func3()

Output:

<function deco_func.<locals>.wrapper at 0x7f6960526820>
Trigger
This is Function 1
Kill
------------------------------
Trigger
This is Function 2
Kill
------------------------------
Trigger
This is Function 3
Kill
------------------------------

In the above code we have updated the deco_func and now it accepts a function as an argument.
We have also created three functions that just print a statement.
Now, the line
func1 = deco_func(func1)
allows us to store the deco_func which accepts a parameter func1, all that in a variable func1. Hence, we can now call func1() to get the desired results.
By seeing the above piece of code, you can now figure out a bit, how decorator function works behind the scenes.

So, whenever you are creating a decorator function you have to create this wrapper function/functionality.
The outer function takes the function itself as an argument and the inner wrapper function calls the actual function upon which you are making the modifications.

Below is an example of the above code as a decorator function syntax in Python:

def deco_func(func):
    def wrapper():
        print("Trigger")
        func()
        print("Kill")
        print("------------------------------")
    return wrapper
@deco_func
def func1():
    print("This is Function 1")
@deco_func    
def func2():
    print("This is Function 2")
@deco_func    
def func3():
    print("This is Function 3")

func1()
func2()
func3()

Now, these are sort of dumb functions that just print a statement.
What happens when one of the functions requires one or more parameters to be passed and some doesn't. Or, some functions return a value and some doesn't??

Below is an example when one or more functions requires and arguments/parameters to be passed or one or more functions happen to return some value back when they are called. The whole point of decorator functions is to be able to use in any functions use-case, hence for that we use the unpack or splat operator i.e. * args and ** kwargs:

def deco_func(func):
    def wrapper(*args, **kwargs):
        print("Trigger")
        res = func(*args, **kwargs)
        print("Kill")
        print("------------------------------")
        return res
    return wrapper
@deco_func
def func1(val):
    print("This is Function 1")
    print("Function 1 value: ", val)
@deco_func    
def func2(val1, val2):
    print("This is Function 2")
    return val1 + val2
@deco_func    
def func3():
    print("This is Function 3")

func1(20)
result2 = func2(45, 40)
func3()
print("Function 2 sum value: ", result2)

Output:

Trigger
This is Function 1
Function 1 value:  20
Kill
------------------------------
Trigger
This is Function 2
Kill
------------------------------
Trigger
This is Function 3
Kill
------------------------------
Function 2 sum value:  85

As you can see that the splat operator helps the decorator function to accept none or any number of parameters and the res variable stores the returned value of the decorated function to serve it's purpose.

So, That's all about decorator function. I know it's a bit too much to take at a single reading, but I suggest open your python console or jupyter notebook and follow each line of the code snippets to understand the functionality and it will be a piece of cake for you!

Touchbase with Base64

Debojyoti Chatterjee — Fri, 19 Mar 2021 20:18:34 +0000

Base64 is a method of representing binary data in an ASCII string format. This is achieved by converting a binary data into 6-bit character representation.

Base64 uses a specific algorithm for encoding which helps to convert the binary data into the desired output. This is a reversible algorithm, and we can retrieve the original data from a Base64 string by back-pedalling (reversing the algorithm).

Let’s have a quick run-through on how this algorithm works. Just for fun we will convert the word “Base.64” into a Base64 string.

The very first thing that we would want to do is split the word into separate characters. So we have 7 characters n our selected word:
- B
- a
- s
- e
- .
- 6
- 4
Now let’s convert each of the above into their corresponding binary values, you can also use the Base64 Index Table if you want:
- 01000010
- 01100001
- 01110011
- 01100101
- 00101110
- 00110110
- 00110100
Now we need to form a single string out of the above by concatenating them one after the other. The resulting string will be as following:

01000010011000010111001101100101001011100011011000110100
Once we have done this, we have to carefully break it again so that each part has 6 characters. Something like this:
- 010000
- 100110
- 000101
- 110011
- 011001
- 010010
- 111000
- 110110
- 001101
- 000000
(Note: If your last part is less than 6 characters, append it with zeros. That'll do fine. Here we added 4 zeros “0000” to make it 6-bit bytes.)
Now each part is of 6-bit bytes, prepend with “00” and convert each part to 8-bit bytes:
- 00010000
- 00100110
- 00000101
- 00110011
- 00011001
- 00010010
- 00111000
- 00110110
- 00001101
- 00000000
Now it’s time to convert them to their corresponding decimal values:
- 16
- 38
- 5
- 51
- 25
- 18
- 56
- 54
- 13
- 0
The above list of integers you have received are called Base64 indices. You can map the Base64 indices to the Base64 Character Table and form your final Base64 string. So what are we waiting for? Let’s do that:
- Q
- m
- F
- z
- Z
- S
- 4
- 2
- N
- A
Now, do you remember we added 4 zeros to the last part in the 4th step? So for every two zeros we will append 1 padding character “=”. Voila! Now you have your final Base64 string for the word “Base64”.

QmFzZS42NA==

Cool! Don’t you think? Now to decode a Base64 string you have to perform the same steps but backwards, if you do that correctly you will reach the actual string. I would suggest that you give it a try!

I'll just keep the Wiki Liquid tag for the Base64 Index Table, it might help:

The Base64 index table:

Index	Binary	Char	Index	Binary	Char	Index	Binary	Char	Index	Binary	Char
0	000000	`A`	16	010000	`Q`	32	100000	`g`	48	110000	`w`
1	000001	`B`	17	010001	`R`	33	100001	`h`	49	110001	`x`
2	000010	`C`	18	010010	`S`	34	100010	`i`	50	110010	`y`
3	000011	`D`	19	010011	`T`	35	100011	`j`	51	110011	`z`
4	000100	`E`	20	010100	`U`	36	100100	`k`	52	110100	`0`
5	000101	`F`	21	010101	`V`	37	100101	`l`	53	110101	`1`
6	000110	`G`	22	010110	`W`	38	100110	`m`	54	110110	`2`
7	000111	`H`	23	010111	`X`	39	100111	`n`	55	110111	`3`
8	001000	`I`	24	011000	`Y`	40	101000	`o`	56	111000	`4`
9	001001	`J`	25	011001	`Z`	41	101001	`p`	57	111001	`5`
10	001010	`K`	26	011010	`a`	42	101010	`q`	58	111010	`6`
11

…

View on Wikipedia

Custom service to Upload and Delete Image in Amazon S3 Bucket using Node.js

Debojyoti Chatterjee — Sun, 07 Mar 2021 20:34:00 +0000

AWS S3, is an object based storage system where every file is saved as an object. It’s easy to use with a simple web service interface that facilitates the storage and retrieves any amount of data.

So before we proceed you need to signup and create a bucket in Amazon S3. You can easily do this by using the AWS Management Console. In this article I am assuming that you have already completed those prerequisites. If not you can quickly jump on to here: Setting up Amazon S3 wrap all that up and continue.

Okay. so let’s begin. Take an example where you have a user profile and you want that the user to upload his/her image as profile picture or profile avatar. You want to store the image to AWS S3.Also, everytime the user uploads a image the previous image should be deleted.

1. Let’s create a pretty straight route path `/image/upload` which would serve POST request.

const express = require('express');
const router = express.Router();
const usersHelperObj = require('../helpers/usersHelper')
const { v4: uuidv4 } = require('uuid');

/* Upload image to S3. */
router.post('/image/upload', async (req, res, next) => {
    const [payload] = [req.body];

    // throw error on blank payload
    if (Object.keys(payload).length === 0) {
        return res.status(400).send({
            error: {
                message: 'Blank payload supplied.'
            }
        });
    }

    // throw error on wrong payload
    if ((!payload.hasOwnProperty('image')) || (payload.image == '')) {
        return res.status(400).send({
            error: {
                message: 'Image missing.'
            }
        });
    }

    if (payload) {
        const user_id = uuidv4(); //generating a random user_id
        const uploadedAvatarResponse = await usersHelperObj.uploadUserAvatar(user_id, payload);
        // check if the response is correct
        if (uploadedAvatarResponse.hasOwnProperty('id') && uploadedAvatarResponse.hasOwnProperty('location')) {
            res.status(200).send(uploadedAvatarResponse);
        }
        else {
            res.status(400).send({ error: uploadedAvatarResponse });
        }
    }
    else {
        return res.status(400).send({
            error: {
                message: "Bad Request."
            }
        });
    }
});


module.exports = router;

2. Now let’s create a helper function in a separate file `helpers/usersHelper.js` that would validate the payload content and call the actual service imageUploadService.

Create a file usersHelper.js in the path helpers/usersHelper.js.
Once you’re done try to create something like below:

const { v4: uuidv4 } = require('uuid');
const imageUploadServiceObj = require('../utils/imageUploadService')

exports.uploadUserAvatar = async (userId, payload) => {
    try {

        if (payload.hasOwnProperty("image")) {
            const base64Image = payload.image;
            const imageCategory = 'avatar';
            const prevImage = uuidv4().replace(/[ -]/g, '');
            const params = {
                userId,
                base64Image,
                prevImage,
                imageCategory
            }
            // creating an object for custom imageUploadService
            let imageServiceObj = new imageUploadServiceObj.ImageService(params);
            // checking if the string in the payload is in valid base64 format.
            if (!imageServiceObj.isValidBase64()) {
                return ({
                    message: 'Supplied image is not in base64 format.'
                })
            }
            // checking if file size is more than a specified size.
            else if (imageServiceObj.isGreaterThan(5)) { //5 MB
                return ({
                    message: 'Supplied image is greater than 5 MB.'
                })
            }
            // checking if the file is of valid type
            else if (!imageServiceObj.isValidImageType()) {
                return ({
                    message: 'Supplied image type is invalid.'
                })
            }
            else {
                const amazonResponse = await imageServiceObj.uploadToS3Bucket();
                // if the response from aws is correct return the data
                if (amazonResponse.hasOwnProperty('eTag') && amazonResponse.hasOwnProperty('location')) {
                    const fileLocation = `${amazonResponse.location}`
                    return ({
                        id: userId,
                        location: fileLocation
                    });
                }
                else {
                    // else return error with message
                    return ({
                        ref: 'UPLOAD_FAILED',
                        message: amazonResponse.message
                    })
                }
            }
        }
        else {
            return (false);
        }
    }
    catch (err) {
        return {
            ref: 'GENERAL_ERROR',
            message: err.message
        }
    }
}

3. The final step is to create a service file that would do the actual work of uploading and deleting the image.

Create a file imageUploadService.js in the path utils/imageUploadService.js.
Once you’re done you can follow the below code to create your custom service:

const AWS = require('aws-sdk');
const config = require('config');
const { v4: uuidv4 } = require('uuid');


exports.ImageService = class ImageService {

    constructor(params) {
        this.base64Image = params && params.base64Image ? params.base64Image : '';
        this.userId = params && params.userId ? params.userId : '';
        this.prevImage = params && params.prevImage ? params.prevImage : '';
        this.imageCategory = params && params.imageCategory ? params.imageCategory : '';
    }

    allowedFileTypes = ['jpg', 'jpeg', 'png', 'tiff'] // ARRAY OF ALLOW IMAGE EXTENSIONS

    /**
     * FUNCTION TO CHECK IF THE STRING IS IN BASE64 FORMAT
     * INFO: ADDITIONAL OPTION PARAMETERS TO PASS
        {
        allowMime: boolean value,
        mimeRequired: boolean value,
        paddingRequired: boolean value,
        allowEmpty: boolean value,
    }
     * @param {String} base64String 
     * @param {Object} options 
     */
    isValidBase64(base64String = this.base64Image, options = { mimeRequired: true, allowEmpty: false }) {
        if (base64String instanceof Boolean || typeof base64String === 'boolean') {
            return false
        }

        if (!(options instanceof Object)) {
            options = {}
        }

        if (options.allowEmpty === false && base64String === '') {
            return false
        }

        var regex = '(?:[A-Za-z0-9+\\/]{4})*(?:[A-Za-z0-9+\\/]{2}==|[A-Za-z0-9+\/]{3}=)?'
        var mimeRegex = '(data:\\w+\\/[a-zA-Z\\+\\-\\.]+;base64,)'

        if (options.mimeRequired === true) {
            regex = mimeRegex + regex
        } else if (options.allowMime === true) {
            regex = mimeRegex + '?' + regex
        }

        if (options.paddingRequired === false) {
            regex = '(?:[A-Za-z0-9+\\/]{4})*(?:[A-Za-z0-9+\\/]{2}(==)?|[A-Za-z0-9+\\/]{3}=?)?'
        }

        return (new RegExp('^' + regex + '$', 'gi')).test(base64String)
    }

    /**
     * FUNCTION TO CHECK THE TYPE OF THE IMAGE (FILE EXTENSION)
     * @param {String} base64String 
     */
    isValidImageType(base64String = this.base64Image) {

        const fileType = base64String.split(';')[0].split('/')[1];

        return this.allowedFileTypes.includes(fileType.toLowerCase());
    }

    /**
     * FUNCTION TO CHECK THE SIZE OF THE IMAGE FILE
     * @param {Number} allowedSize 
     * @param {String} base64String 
     */
    isGreaterThan(allowedSize = 3, base64String = this.base64Image) { //Default size is set to 3 MB
        let [stringLength, sizeInKB, sizeInMB] = [base64String.length, '', ''];
        let imageSize = (stringLength * (3 / 4));

        // checking if padding is present and appling the algorithm as required
        // Ref: https://en.wikipedia.org/wiki/Base64#Padding
        if (base64String.slice(-2) === '==') {
            imageSize = imageSize - 2;
            sizeInKB = imageSize / Math.pow(1024, 1);
            sizeInMB = imageSize / Math.pow(1024, 2);
            // console.log(sizeInMB);
        }
        else if (base64String.slice(-1) === '=') {
            imageSize = imageSize - 2;
            sizeInKB = imageSize / Math.pow(1024, 1);
            sizeInMB = imageSize / Math.pow(1024, 2);
            // console.log(sizeInMB);
        }
        else {
            sizeInKB = imageSize / Math.pow(1024, 1);
            sizeInMB = imageSize / Math.pow(1024, 2);
            // console.log(sizeInMB);
        }
        if (sizeInMB > allowedSize) {
            return true;
        }
        return false;
    }

    /**
     * FUNCTION TO UPLOLOAD THE AVATAR IMAGE FILE TO AMAZON S3 BUCKET
     * @param {String} base64Image 
     * @param {String} userId 
     */
    async uploadToS3Bucket(base64Image = this.base64Image, userId = this.userId, prevImage = this.prevImage, imageCategory = this.imageCategory) {
        const { AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, FILE_UPLOAD_BUCKET, region } = config.get('aws');
        //turning on the logger to print log entries in the console,
        AWS.config.logger = console;
        let s3;
        // Configuring AWS with access and secret key.
        if (AWS_ACCESS_KEY_ID && AWS_SECRET_ACCESS_KEY) {
            AWS.config.update({ accessKeyId: AWS_ACCESS_KEY_ID, secretAccessKey: AWS_SECRET_ACCESS_KEY, region: region });
            // Creating a s3 instance with credentials

            s3 = new AWS.S3({
                params: {
                    Bucket: FILE_UPLOAD_BUCKET
                },
                region: region,
                accessKeyId: AWS_ACCESS_KEY_ID,
                secretAccessKey: AWS_SECRET_ACCESS_KEY
            });
        }
        else {
            AWS.config.update({ region: region });
            // Creating a s3 instance with credentials
            s3 = new AWS.S3({
                params: {
                    Bucket: FILE_UPLOAD_BUCKET
                },
                region: region,
            });
        }
        const type = base64Image.split(';')[0].split('/')[1];
        const imageBuffer = new Buffer.from(base64Image.replace(/^data:image\/\w+;base64,/, ""), 'base64');
        const filename = uuidv4().replace(/[ -]/g, '');
        const params = {
            Bucket: FILE_UPLOAD_BUCKET,
            Key: `assets/images/${imageCategory}/${userId}/${filename}.${type}`, // the path, filename and type. (type is not required)
            Body: imageBuffer,
            // ACL: 'public-read', // granting public access to the sub resource object
            ContentEncoding: 'base64', // required
            ContentType: `image/${type}` // required (Notice the back ticks)
        }
        let amazonResponse = {};
        try {
            // delete previous image if prevImage exists
            if(prevImage) {
                const delResp = await s3.deleteObject({
                    Bucket: FILE_UPLOAD_BUCKET,
                    Key: `uploads/${imageCategory}/${userId}/${prevImage}`,
                }, async (err, data) => {
                    if (err) {
                        console.log("Error: Object delete failed.");
                    }
                    else {
                        console.log("Success: Object delete successful.");
                    }
                });
            }


            //uploading the object to the bucket
            const { ETag, Location, Key, Bucket } = await s3.upload(params).promise();
            amazonResponse = {
                eTag: ETag,
                location: Location,
                key: Key,
                bucket: Bucket
            }


        }
        catch (error) {
            console.log(error)
            const { message, code, time, statusCode } = error
            amazonResponse = {
                message,
                code,
                time,
                statusCode
            }
        }

        return amazonResponse;
    }
};

Our custom service does the following for us:

Check if the file type is a valid one based on the base64 Data URI. Read more…
Check the file size. Default is set to 3MB if no value is passed as parameter to the isGreaterThan function of the custom service.
Delete the previous image in the location provided.
Upload the new image in the location provided. The parameters required to create a AWS S3 object are stored in the config file which can be updated with your own values. I have added comments throughout wherever I felt is required for better understanding. You can design the service your way and you feel something can be tweaked to make this better you’re always welcome to create a pull request.

I have created a Sample Express Application which does the work of uploading and deleting a S3 object here:

debojyotichatterjee9 / s3imageUpload

s3imageUpload

s3imageUpload is an example for creating a custom service to Upload and Delete Image in Amazon S3 Bucket using Node.js.

Installation

Use the package manager npm or yarn to install dependencies.

npm install

yarn install

Usage

node ./bin/www

If you have nodemon installed:

nodemon ./bin/www

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

View on GitHub

All you have to do is clone the repository and:

$ npm install

$ yarn install

DEV Community: Debojyoti Chatterjee

What is SSO (Single Sign-On)? How SSO Works?

What is Single Sign-On (SSO)?

Key Characteristics of SSO

Core Components of SSO

The SSO Authentication Flow

SSO Protocols and Standards

SAML (Security Assertion Markup Language)

OAuth 2.0

OpenID Connect (OIDC)

Code Examples

SAML Implementation Example

OAuth 2.0 Implementation Example

SSO Security Challenges and Best Practices

Common Security Challenges

Security Best Practices

Emerging Trends

Conclusion

Array Methods Quick Glance

Methods

1. forEach()

2. map()

3. filter()

4. reduce()

5. slice()

6. splice()

7. sort()

8. concat()

9. fill()

10. includes()

11. join()

12. reverse()

13. push()

14. pop()

15. unshift()

16. shift()

17. indexOf()

18. lastIndexOf()

19. every()

20. some()

21. find()

22. findIndex()

23. from()

24. isArray()

25. flat()

JavaScript Modules: A walkthrough.

1. Asynchronous Module Definition (AMD):

2. CommonJS Format:

3. Universal Module Definition (UMD):

4. System.register:

5. ES6 module:

react-scripts start in specific browser

1. Setting an environment variable:

2. Create a .env file:

3. Modify the start script:

4. Happy go Typy:

OR

Decorator Functions in Python.

Touchbase with Base64

Custom service to Upload and Delete Image in Amazon S3 Bucket using Node.js

1. Let’s create a pretty straight route path /image/upload which would serve POST request.

2. Now let’s create a helper function in a separate file helpers/usersHelper.js that would validate the payload content and call the actual service imageUploadService.

3. The final step is to create a service file that would do the actual work of uploading and deleting the image.

debojyotichatterjee9 / s3imageUpload

s3imageUpload

Installation

Usage

Contributing

License

1. Let’s create a pretty straight route path `/image/upload` which would serve POST request.

2. Now let’s create a helper function in a separate file `helpers/usersHelper.js` that would validate the payload content and call the actual service imageUploadService.