![\"Authorization](\"/47e9006e434b8236e62cf478cf75e1ef/image4.webp\")
OAuth has been a jargon for quite some time now and it is difficult for a beginner to learn it, not because OAuth is hard, but because of the confusing facts found about OAuth on the web. So I wrote this article to explain why and how OAuth is used in very simple terms.
\nLet’s start with the basics: OAuth stands for Open Authorization. It’s a process through which an application or website can access private data from another website.\nIt provides applications the ability for “secure designated access.” For example, you can tell Google that it’s OK for abc.com to access your google account or contact without having to give abc.com your google password.
\nOAuth never share password data but instead uses authorization tokens to prove an identity between consumers and service providers. OAuth is an authentication protocol that allows you to approve one application interacting with another on your behalf without giving away your password.
\nWe have a pretty good understanding of OAuth 2.0 and Terminology, let’s move further and discuss the OAuth grant type that is widely used in this protocol.
\nIn total, there are five different grant type flows defined and described to perform authorizations tasks. Those are
\nThe Authorization Code Grant Type is the most commonly used grant type.
\n
The Story: A user tries to log in on abc.com but he can’t remember his password and he discovers an option to sign in with google, by clicking on this, the user will easily get logged using google account.
\nFlow
\nThe client redirects the user to the authorization server having the following parameters in the query string.
\nStep 1
\nAfter successful authentication, the user will be redirected to the Consent screen where he needs to provide consent to abc.com to access the account detail.\nAuthorization code is generated by the authorization server and sent back to the client with redirect Uri.
\nStep 2\nThe client will now send a POST request to the authorization server with the following parameters:
\nIn the entire flow, the access token is never exposed to a web browser.
\nThe Implicit flow was a simplified OAuth flow previously recommended for client-side applications like JavaScript apps where the access token was returned immediately without an extra authorization code exchange step.
\n![\"Implicit](\"/14a734511c957c8301b0085584c59814/image2.webp\")
The Story: In this flow abc.com directly get access token without an extra authorization code exchange steps and able to access resources on a resource server
\nFlow
\nThe client will redirect the user to the authorization server with the following parameters in the query string:
\nIt is not recommended to use the implicit flow (and some servers prohibit this flow entirely) due to the inherent risks of returning access tokens in an HTTP redirect without any confirmation that it has been received by the client.
\nThe resource owner password credentials grant type is suitable in cases where the resource owner has a trust relationship with the client, such as a highly privileged application. The authorization server should take special care when enabling this grant type and only allow it when other flows are not viable.
\nThis grant type is suitable for clients capable of obtaining the resource owner’s credentials (username and password, typically using an interactive form). It is also used to migrate existing clients using direct authentication schemes such as HTTP Basic or Digest authentication to OAuth by converting the stored credentials to an access token.
\nFlow
\nThe client will ask the user for their authorization credentials (usually a username and password).\nThe client then sends a POST request with following body parameters to the authorization server:
\nUsing this flow the client can request an access token using only its client credentials (or other supported means of authentication).
\n![\"Client](\"/ea2d4e2857578a4ac594bac0213a684c/image3.webp\")
The Story: The client application presents its client credentials (client identifier and client secret) to the authorization server requesting approval to access the protected resource (owned by the client application) on the resource server.\nThe authorization server authenticates the client credential and issues an access token.
\nFlow
\nThe client sends a POST request with following body parameters to the authorization server:
\nAccess tokens eventually expire, however, some grants respond with a refresh token which enables the client to refresh the access token.
\nFlow
\nThe client sends a POST request with following body parameters to the authorization server:
\nI hope you got an idea of how OAuth works and why it is needed. Now it’s time for you to go explore, find out more about the OAuth flow and implement it into your application.\nGood Luck and have fun! Thank you for following this article and hope it helped you! Please do buzz me if you want any help: indrasen.kumar@loginradius.com
\n","frontmatter":{"date":"August 24, 2020","updated_date":null,"description":"Using this blog one can easily understand the basic concept of Oauth 2.0","title":"Getting Started with OAuth 2.0","tags":["Engineering","Oauth","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/2b98b97b1a199e3e7378bcf740073407/58556/oauth2.webp","srcSet":"/static/2b98b97b1a199e3e7378bcf740073407/61e93/oauth2.webp 200w,\n/static/2b98b97b1a199e3e7378bcf740073407/1f5c5/oauth2.webp 400w,\n/static/2b98b97b1a199e3e7378bcf740073407/58556/oauth2.webp 800w,\n/static/2b98b97b1a199e3e7378bcf740073407/1fb14/oauth2.webp 960w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Indrasen Kumar","github":"indrasen715","avatar":null}}}},{"node":{"excerpt":"What is the Rest API? RESTful programming provides stateless and a uniform interface, Rest API is HTTP-based URLs that hide the back-end…","fields":{"slug":"/engineering/best-practice-guide-for-rest-api-security/"},"html":"RESTful programming provides stateless and a uniform interface, Rest API is HTTP-based URLs that hide the back-end infrastructure from the user. Rest APIs provide the back end for modern web and mobile applications.
\nRest APIs are the most important layer in the back-end infrastructure for most modern applications. Cybercriminals are increasingly targeting APIs. Ensuring web API security is the most important and crucial. Let’s see what you can do to ensure REST API security.
\nAPI security start with Http Connection. All requests from clients to your API should be encrypted (HTTPS). Unfortunately, many client HTTP do not enable HTTPS/secure connections by default it’s necessary to enforce that from the server. When Clients who attempt to connect via HTTP should forcefully be redirected to secure HTTPS connections.
\nYou can use HTTP Strict Transport Security security header enforcing Https for web and You can return error for API in case Rest API call on HTTP
\nYou can get a free certificate with Let's Encrypt. SSL provides security from basic API vulnerabilities with almost minimal effort
\nA Distributed Denial of Service (DDoS) is a targeted cyber attack on a web site or device where a malicious attacker flood of traffic is sent from single or multiple sources. the main purpose of DDos is to make a machine or network resource unavailable to its genuine users by temporarily or disrupting services of a host connected to the Internet. if we are not using appropriate security practice or tools then it makes RESTful API into a non-functional situation.
\nAPI DoS attacks are more common these days. Rest APIs utilizations also increasing day-by-day. The organization's dependency is increasing day-by-day because of business needed a unified platform. An attacker can use multiple ways for the DDoS attack so as developer or security engineer you need to implement long-term solution not a temporary
\nAttackers can make so many repeated calls on the APIs. it can make resources unavailable to its genuine users. A rate limit is the number of API calls an app or user can make within a given period. When this limit is exceeded, block API access temporarily and return the 429 (too many requests) HTTP error code.
\nI m adding node js examples to implement the rate limit. multiple npm packages are available for node js
\nNodeJs
\nimport rateLimit from 'express-rate-limit';\n\nexport const apiRatelimit = rateLimit({\n windowMs: 60 * 60 * 1000, // 1 hrs in milliseconds\n max: 100,\n message: 'You have exceeded the 100 requests in 1 hrs limit!', \n headers: true, // it will add X-RateLimit-Limit , X-RateLimit-Remaining and Retry-After Headers in the request \n});\n\n// you can add this in the middleware. it will apply rate limit for the all requests \napp.use(apiRatelimit);Active cache means if the service first attempts to read from the cache backend and falls back to reading from the actual source. The service is not dependent or requesting the data from the actual upstream server. a cache backend is a key-value store (e.g. Redis) or In-Memory cache and the actual source of data is an SQL, MongoDB, etc.
\nPassive cache architecture ensures high volume traffic never hit to actual server or service.
\nI m adding node js examples to implement the passive cache. multiple npm packages are available for node js
\nNodeJs
\nimport nodeCache from "node-cache";\n\nconst myCache = new nodeCache();\n\n// set object in the cache \n\nobj = { userid: 909887, name: "example" };\n\nsuccess = myCache.set( "userKey", obj, 600 ); // ttl is 600 seconds \n\n\n//read object from the cache \nvalue = myCache.get( "userKey" );\nif ( value == undefined ){\n\t// handle miss!\n}Sensitive data exposure happens when an application, organization, or other entity unable to properly secure sensitive data. It is different from a data breach, it includes personal information, tokens, etc. We can make sure sensitive data security using
\nmultiple ways which include encryption at rest or in transit and masking
Cross-Site Scripting (XSS) attacks are a type of injection, in which attacker aims to execute malicious scripts in a web browser of the victim. an attacker can transfer untrusted data into the API as part of a query or command.which can result in an attacker obtaining unauthorized access to information or carry out other damages.
\nAt the point where user input is received, filter as strictly as possible based on what is expected or valid input.
\nTo prevent XSS in HTTP responses that aren't intended to contain any HTML or JavaScript, you can use the Content-Type and X-Content-Type-Options headers to ensure that browsers interpret the responses in the way you intend.
\nIf you want to know more details about the security headers. Please go to Security Headers
\nAs a last line of defense against attackers, you can use Content Security Policy (CSP) to reduce the severity of any XSS vulnerabilities that still occur.
\nNode js we can use xss-clean package. This dependency will prevent users from inserting HTML & Scripts on input.
NodeJs
\nimport xssClean from "xss-clean";\n\n// Use this as middleare \napp.use(xssClean())We can discover suspicious activity using proper logging and monitoring. When We have insufficient logging and monitoring in that case sometimes we can miss some system access or user activity logs, a step of the particular activity and security alerts.
\nA lot of logging and monitoring tools are available. We can choose the best tools as per our requirement also we can define some policies like data retention policy that includes how far backlogs will be kept. Instrument your API access actions to record key metrics and events. Keep logs indexable and searchable.
\nEach API should limit access, API only able to perform what tasks they need to do. We can do this with Role-Based Access, separate read/write API Keys, OAuth Scopes, and permissions systems. This minimizes the chances that you’ll accidentally expose a sensitive field.
\nSometimes, people find security vulnerabilities, and they would like to report them so the vendor or the developer can fix them. you must have a public contact point where security issues can be reported.
\nWe can create a security.txt file on the site. security.txt is a proposed standard for websites' security information that will allow security researchers to easily report security vulnerabilities. The \"security.txt\" that is similar to robots.txt. security.txt files have been adopted by Google, GitHub, LinkedIn, and Facebook
You can easily create secuirty.txt file using the securitytxt.org
Now days lot of data breaches are happing. We can save mostly data breaches after following some basic security guidelines.You have to pay attention to security during Rest API development. I have covered most of the general Rest API security issues with resolution. these guidelines will help you for developing more secure and quality REST API service.
\n","frontmatter":{"date":"August 20, 2020","updated_date":null,"description":null,"title":"Best Practice Guide For Rest API Security | LoginRadius","tags":["RestAPI","Rest API","Rest API Security","Best Practice","Rest API Developer Guide","Security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/0072087246a78a28a06a6c6744a6823a/58556/index.webp","srcSet":"/static/0072087246a78a28a06a6c6744a6823a/61e93/index.webp 200w,\n/static/0072087246a78a28a06a6c6744a6823a/1f5c5/index.webp 400w,\n/static/0072087246a78a28a06a6c6744a6823a/58556/index.webp 800w,\n/static/0072087246a78a28a06a6c6744a6823a/99238/index.webp 1200w,\n/static/0072087246a78a28a06a6c6744a6823a/7c22d/index.webp 1600w,\n/static/0072087246a78a28a06a6c6744a6823a/25f09/index.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel…","fields":{"slug":"/engineering/write-a-javascript-library-using-webpack-and-babel/"},"html":"In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel.
\nLet's create the source code for our library. For that we will be create two utility functions into two separate files in our source folder.
\ndemo and run following command in it. $ npm init -yThe above command will create a package.json in your project root. I am using a --y to initialize it with default options.
Directory Structure
\ndemo\n |-- src/\n |-- package.jsonLet's add our source code into src directory:
src\n |--index.js\n |--capital.js\n |--addDOMContent.jsOur utility library contains two functions capital, to capitalize a string and addDOMContent, to add content to a web page, each in it's own module.
capital.js
function capital(string) {\n const capitalizedString =\n string.substring(0, 1).toUpperCase() + string.substring(1)\n return capitalizedString\n}\n\nexport default capitaladdDOMContent.js
function addDOMContent(content) {\n const node = document.createElement("h1")\n node.innerText = content\n document.body.appendChild(node)\n}\n\nexport default addDOMContentInside our index.js, we will import these two functions.
index.js
import capital from "./capital"\nimport addDOMContent from "./addDOMContent"\n\nexport { capital, addDOMContent }So far we got the source code ready but we still need to bundle it so that the browsers can understand and oh boy!, we need to support some older browsers too 🙄. Anyway, being responsible developers we are going to do that 😎.
\n $ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loaderWe need webpack to bundle our code and webpack-cli is a command-line tool that uses webpack to do the same. Also webpack requires babel-loader to transpile our ES6 code to ES5 before bundling (Remember, what I said about being responsible developers 😃).
4.1. Create a webpack.config.js at the root of the project.
webpack.config.js
const path = require("path")\n\nmodule.exports = {\n entry: path.resolve(__dirname, "src/index.js"),\n output: {\n path: path.resolve(__dirname, "dist"),\n filename: "index_bundle.js",\n library: "$",\n libraryTarget: "umd",\n },\n module: {\n rules: [\n {\n test: /\\.(js)$/,\n exclude: /node_modules/,\n use: "babel-loader",\n },\n ],\n },\n mode: "development",\n}There are a couple of things we need to understand about webpack configuration. Stay with me for a couple more minutes.
\nentry: In order for webpack to know where to start with, it needs to know the entry point to our app.module.rules: Each file in Node is treated like a module. Webpack itself understands only Javascript and JSON modules. Since we want to transpile ES6, we need babel-loader and webpack needs to know the rules on how to process the Javascript using the given loader.output: After creating the bundle, webpack needs to know what name to give it and where to put it.library and libraryTarget are used to expose our library where library being the name,$ here and libraryTarget is the property to configure, how the library will be exposed. Here we will be using UMD. UMD is a module system capable of working everywhere, be it in the client, on the server or elsewhere.mode: Webpack bundles code into either development mode (unminified) or in production(minified) mode. I am using a hard coded value here for the demo. You can set it using environment variables too.
\n4.2. Create a .babelrc file at the root of the project.
.babelrc
{\n presets: ["@babel/preset-env"]\n}@babel/preset-env let's us use the latest Javascript without any polyfills and syntax transforms.babel-loader uses babel under the hood.
By Now our Project Structure should look like this:
\ndemo\n|-- src\n| |-- index.js\n| |-- capital.js\n| |-- addDOMContent.js\n|-- webpack.config.js\n|-- .babelrc\n|-- package.json\n|-- node_modulesWe have added our source files, now let's add an npm script to build final code using webpack and modify the main property inside our package.json to point it to our bundled code.
package.json
{\n "name": "demo",\n "version": "1.0.0",\n "description": "",\n+ "main": "dist/index_bundle.js",\n+ "scripts": {\n+ "build": "webpack"\n+ },\n "keywords": [],\n "author": "Hridayesh Sharma",\n "license": "ISC",\n "dependencies": {},\n "devDependencies": {\n "@babel/core": "^7.10.4",\n "@babel/preset-env": "^7.11.0",\n "babel-loader": "^8.1.0",\n "webpack": "^4.44.1",\n "webpack-cli": "^3.3.12",\n }\n}In package.json the main property is a direction to the entry point of the module that the package.json is describing.
Run $npm run build to generate the bundled code and use it in the next step.
index.html
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Demo</title>\n </head>\n <body>\n <script src="dist/index_bundle.js"></script>\n <script>\n console.log($)\n alert($.capital("hridayesh"))\n $.addDOMContent("Well It Works Fine!!!")\n </script>\n </body>\n</html>Save it and run it in your browser. You will see the name capitalized.
\nThe complete code is available at LoginRadius Engineering Blog Sample Repo
\nThanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:
\n\n","frontmatter":{"date":"August 18, 2020","updated_date":null,"description":"Writing your own webpack configuration for a JavaScript library in ES6 and learn webpack along the way.","title":"Let's Write a JavaScript Library in ES6 using Webpack and Babel","tags":["JavaScript","Webpack","NodeJs"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b9b74a766ec8c0c06733b438fefae5ae/58556/cover.webp","srcSet":"/static/b9b74a766ec8c0c06733b438fefae5ae/61e93/cover.webp 200w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/1f5c5/cover.webp 400w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/58556/cover.webp 800w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/cc834/cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"excerpt":"Every Web Developer should know about cross-domain security While working in the world of the internet, all of the complex systems are…","fields":{"slug":"/engineering/cross-domain-security/"},"html":"While working in the world of the internet, all of the complex systems are interconnected in a shareable environment. But exposing systems in the outer world will invite security vulnerabilities and data breach for the organization. Cross-domain security address this security threat by enabling information sharing in more reliable and secure environments. Cross-domain security is an inclusive approach to defending against all kinds of threats to data connections at the boundaries of sensitive or classified networks.
\nThere is no way of being 100% protected from being hacked. If anyone ever tells you that, they are wrong.
\nYou can’t just say…
\n\n\n\"Oh, because I even have CSP implemented, I am safe. I can cross out cross-site scripting from my vulnerabilities list because that can’t happen now.\"
\n
Maybe that is a given to some, but it is easy to find yourself thinking in this manner. In my opinion one reason that programmers can easily find themselves thinking this way is because so much of coding is black and white, 0 or 1, true or false. Security is not that so simple.
\nHave you ever gotten an error that looked something like this?
\nNo 'Access-Control-Allow-Origin' header is available on the requested resource. Origin 'null' is therefore not allowed access.You are certainly not alone. And then you Google it, and someone tells you to urge this extension which will make all of your problems go away!
\n\n\nAwesome, right?
\n
CORS is there to protect you, not hurt you!
\nIn order to explain how CORS helps you, let’s starts about cookies, specifically authentication cookies. Authentication cookies are wont to tell a server that you are simply logged in, and that they are automatically sent with any request you make to that server.
\n\n\nLet’s think you’re logged in to yahoo, and they use authentication cookies. You click on bit.ly/r43nugi which redirects you to cryptoearn. A script within cryptoearn makes a client-side request to yahoo.com which sends your authentication cookie!
\n
In a no-CORS world, they might make changes to your account without you even knowing. Until, obiviously , they post bit.ly/r43nugi on your timeline, and everyone of your relative orfriends click on thereon, and then the cycle continues in an evil breadth-first scheme that conquers all of yahoo’s users, and the world is consumed by cryptoearn. ?
\nIn CORS world, however, yahoo would only allow requests with an origin of yahoo.com to edit data on their server. In other words, they might limit cross-origin resource sharing. You might then ask…
\n\n\nWell can cryptoearn just change the origin header on their request, so that it looks like it is coming from *yahoo.com?*
\n
They will try, but it won’t work because the browser will just ignore it and use the actual origin.
\n\n\nOk, but what if cryptoearn made the request server-side?
\n
In this case, they can bypass CORS, but they can't crack this because they won’t be ready to send your authentication cookie along for the ride. The script should be executed on the client side to urge access to your client side cookies.
\n\n\nServers are generally host web sites, applications, images, fonts, and many more. When you use any browser, you are likely attempting to access a definite website (that is hosted on a server). Websites often request these hosted resources from different locations (servers) on the web. Security policies on servers mitigate the risks associated with requesting assets hosted on distinct server. Let’s take a glance at an example of a security policy: same-origin.\nThe **same-origin *policy is very restrictive. Under this policy, a document (i.e., sort of a web page) hosted on server A can only interact with other documents that also are on server A. In short, the same-origin policy enforces that documents that interact with one another have the same *origin.
\n
The CORS standards manage cross-origin requests by adding a new HTTP headers to the standard list of headers. The following are the new HTTP headers added by the CORS standard:
\nTo dig in to CSP, we first need to talk about one of the most common vulnerabilities on the web: XSS, which means cross-site scripting.
\nXSS is when some evil guy injects JavaScript into your client-side code. You might think…
\n\n\nWhat are they going to do? Change a color from red to blue?
\n
Let’s think of someone has successfully injected JavaScript into client-side code of a website you are visiting.
\nWhat could they do that would be malicious?
\nThe possibilities are endless.
\nCSP is something prevent this from happening by limiting:
\nwhere requests can be made, etc.
\nSo how does it work?
\nWhenever you click on a link or type a website URL in the address bar of your internet browser, your browser makes a GET request. It eventually makes its way to a server which serves up HTML along with HTTP headers. for more details about what headers, open up the Network tab in your console, and visit some sites.
\nYou might see a response header that looks like below:
\ncontent-security-policy: default-src * data: blob:;script-src *.yahoo.com *.fbcdn.net *.yahoo.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' *.atlassolutions.com blob: data: 'self';style-src data: blob: 'unsafe-inline' *;connect-src *.yahoo.com yahoo.com *.fbcdn.net *.yahoo.net *.spotilocal.com:* wss://*.yahoo.com:* https://fb.scanandcleanlocal.com:* *.atlassolutions.com attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;That is the content security policy of yahoo.com. Let’s reformat it to make it easier to read:
\ncontent-security-policy:\ndefault-src * data: blob:;\n\nscript-src *.yahoo.com *.fbcdn.net *.yahoo.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' *.atlassolutions.com blob: data: 'self';\n\nstyle-src data: blob: 'unsafe-inline' *;\n\nconnect-src *.yahoo.com yahoo.com *.fbcdn.net *.yahoo.net *.spotilocal.com:* wss://*.yahoo.com:* https://fb.scanandcleanlocal.com:* *.atlassolutions.com attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;Now, let’s break down the directives.
\nNote: there are many more CSP directives than just these four shown above. The internet browser will read the CSP header and apply those directives to everything within the HTML file that was served. If the directives are set correctly, they allow only what is required.
\nIf there is no CSP header is present, then everything goes, and nothing is restricted. Everywhere you see * , that is a wildcard. You can think of replacing * with anything and it will be allowed.
\nSecurity is something that should be important to everyone, not just the people who have it explicitly named in their job title, and always try to have additional layer for better security.
\n","frontmatter":{"date":"August 16, 2020","updated_date":null,"description":"Cross domain security address security threat by enabling the information sharing in more reliable and secure environments. Cross domain security is an inclusive approach to defending against all kind of threats to data connections at the boundaries of sensitive or classified networks.","title":"Cross Domain Security","tags":["Security","Web Security","Cross-Domain"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f2c34b70cad9028b5628b052956b4561/58556/cross_domain_security.webp","srcSet":"/static/f2c34b70cad9028b5628b052956b4561/61e93/cross_domain_security.webp 200w,\n/static/f2c34b70cad9028b5628b052956b4561/1f5c5/cross_domain_security.webp 400w,\n/static/f2c34b70cad9028b5628b052956b4561/58556/cross_domain_security.webp 800w,\n/static/f2c34b70cad9028b5628b052956b4561/99238/cross_domain_security.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Contents UX Design Education Inspiration Colour Components Mockups Design System Font Prototyping Tools Free Stock Photos Tools that speed…","fields":{"slug":"/engineering/best-ui-ux-design-tools-2020/"},"html":"Found the world-class UX Design Courses.
\nYour one-stop design school to learn new design skills.
\nWebsite | Courses | Topics | Join our community
\nWe share knowledge with the world.
\n\nLearn to think like a UX designer and gain the concepts, skills, and confidence to build your UX career.
\n\nWe envision a world where anyone, anywhere has the power to transform their lives through learning.
\n\nThese are the websites where the world’s top design talents share their works and ideas.
\nShowcase and discover the latest work from top online portfolios by creative professionals across industries.
\n\nDribbble is where designers gain inspiration, feedback, community, and jobs and are your best resource to discover
\n\nAwwwards are the Website Awards that recognize and promote the talent and effort of the best developers and designers.
\n\nCheck out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.
\nmobbin.design.com
\nOver 500+ interactions from the world's best designed and highest-grossing apps.
\n\nThe largest collection of the best portfolio websites from top designers in the industry.
\n\nDesigners' Secret Source: all the design inspiration you need. Served fresh.
\n\nUse these tools to explore different color schemes quickly.
\nCreate color schemes with the color wheel or browse thousands of color combinations from the Color community.
\n\nCreate and share color palettes for your UI, and measure the accessibility of any color combination.
\n\nSearch, discover, test and create beautiful color palettes for your projects
\n\nContrast is the difference in luminance or color that makes an object (or its representation in an image or display)
\n\nColorbox is a color tool to produce color sets.
\n\nCome to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop, and Sketch.
\n\nThe biggest collection of official brand color codes around. Includes hex color codes for 500+ brands including…
\n\nA curated collection of the most popular and trendy color palettes. Get the perfect color ideas for your design.
\n\nDrawing illustration could be time-consuming, why not start with this template and use it as a draft/underlay and build your design on top of that?
\nOpen-source illustrations for every project you can imagine and create.
\n\nCreators who don't draw face the problem of the boring content for app screens, articles, landing pages, and emails.
\n\nA library of sketchy illustrations of people free for personal and commercial use.
\n\nFree illustrations, for everything. Memorable products, brands, & presentations start with our curated royalty-fr
\n\nIconscout comes with integrated Plugins, conversion Tools, and simple, powerful Editors that enhance and streamline your workflow.
\n\nAn aggregator that indexes various free avatar sources that you can use in your design mockups by copy-paste, API, plugins…
\n\nA collection of star vectors in various styles and illustrations with over 30 collections and 290k images.
\n\nImages and Sketch files of popular devices.
\n\nBig library of high quality best free UI & UX mockups
\n\nHuge collection of free mockups, patterns, illustrations, scene creators, DIY scenes, for Photoshop, Sketch, and Figma
\n\nA directory of the best free design mockups for Photoshop, Sketch, Figma, and InVision Studio.
\n\nFind documentation and resources for designing great apps for Apple platforms.
\n\nBuild beautiful, usable products faster. Material Design is an adaptable system-backed by open-source.
\n\nBehind the scenes of our new design system, This article is part of a series on our new Design Language System.
\n\nWith our company’s growth and new direction, we need a brand identity that is efficient to use, flexible across applications, and able to feature localized content in a globally consistent way.
\n\nOur style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants.
\n\nUse Atlassian’s end-to-end design language to create straightforward and beautiful experiences.
\n\nA collection of tools and resources from Facebook Design.
\n\nMaking the web more beautiful, fast, and open through great typography
\n\nTypewolf helps designers choose the perfect font combination for their next design project-features web fonts in the…
\n\nArchive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
\n\nFont Squirrel scours the internet for high quality, legitimately free fonts.
\n\nHere at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites…
\n\nCreate a testable design prototype for your interviewee and get feedback
\nAdobe XD is your UI/UX design solution for website and mobile apps creation. Design, prototype, and share. Try it now.
\n\nInVision is the digital product design platform used to make the world's best customer experiences.
\n\nFigma helps teams create, test, and ship better designs from start to finish. Meet our customers Packed with design…
\n\nSeamless integration to the Mac app makes saving to Cloud as easy as hitting ⌘S. From there, you can organize designs…
\n\nA new tool for designing modern interfaces, built and used by designers at Facebook
\n\nA framer is coming to the web. Learn more › Why Framer X Resources Framer X Framer is coming to the web. Learn more › The…
\n\nThe principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a…
\n\nThe world's first user flow diagramming tool tailored for designers. Build and present beautiful user flow diagrams…
\n\nFree stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required
\n\nBeautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…
\n\nStunning stock images, perfect for blogs and websites Explore stock photography by category, all free for commercial…
\n\nA collection of stock photography in a single style. Good for collages. Free for commercial use.
\n\nGlitch images, videos, or webcam using WebGL effects. Save output as image, gif, or video.
\n\nFind beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and…
\nduotone.shapefactory.co
\nCompressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining…
\n\nExcellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is…
\n\nmade with ♥ All trademarks, service marks, trade names, product names, logos, and trade dress appearing on our…
\n\nThis toolkit is an introduction to the methodology of service design
\nwww.servicedesigntoolkit.orgs
\nConnected space for product teams. Handoff designs and style guides with accurate specs, assets, code…
\n\nScalable, secure, cross-device, and enterprise-ready team collaboration tool for distributed teams. Join 2M+ users &…
\n\n","frontmatter":{"date":"August 13, 2020","updated_date":null,"description":"As a designer, often wondered which new tools and utilities, other designers are using? So here is a list of all the tools and utilities famous around the world in designers.","title":"Best Free UI/UX Design Tools/Resources 2020","tags":["Design","UX","Tools"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/056d16dfcc7fa66e5b31f51aa531383a/ad85c/ux-ui.webp","srcSet":"/static/056d16dfcc7fa66e5b31f51aa531383a/61e93/ux-ui.webp 200w,\n/static/056d16dfcc7fa66e5b31f51aa531383a/1f5c5/ux-ui.webp 400w,\n/static/056d16dfcc7fa66e5b31f51aa531383a/ad85c/ux-ui.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Hitesh Kumawat","github":null,"avatar":null}}}},{"node":{"excerpt":"Migrating your existing code to a new programming language is a very tedious task. We need to have a proper set of requirements and some…","fields":{"slug":"/engineering/a-journey-from-node-to-golang/"},"html":"Migrating your existing code to a new programming language is a very tedious task. We need to have a proper set of requirements and some obvious benchmarking between the new and existing technology.
\nSo here our journey started to transform (not convert) our existing code to a new language. You might be thinking why I have used the word transformation instead of conversion, so -
\nConversion: Conversion is just about writing your existing code in different languages as it is.
\nTransformation: Transformation is about leveraging all possible benefits of a new language and convert accordingly.
\nThe idea of migrating code to a new programming language started with a simple requirement: we wanted to take our cloud solution to on-premise as well. Till now, our services were written in NodeJS for a cloud solution and it was doing pretty well. The performance was also good but there is nothing that cannot be improved upon. So, along with performance improvement, we started to find out that can we make a GUI or CLI using existing NodeJS code that can take our solution on-premise?
\nAnswer for that was practically YES. but, technically NO. If we’re writing apps with a GUI, Node can’t do it on its own. We had to use some other projects which provide GUI creation capabilities (eg: ElectronJS, NW.js, etc). Making CLI seemed doable but there were also problems like the inablility to have single file distribution for our code. And the ability to download a single file and execute commands - without an installer, or even a setup process - does wonders for a user. This also makes the product easily backward-compatible.
\nAlso, another factor came in that it was better to switch to a technology that works closely with gRPC.
\nSo, we drew out a few goals for our new solution
\nAfter research with our requirement, we were able to figure out that we can achieve these with GoLang, developed by Google.\nOn the basis of our research, we also did some benchmarking on different node js frameworks and GoLang.
\nBenchmarking sever we’ve used with below configurations
\n![\"server\"](\"/a9b12b02c985072861152d1de65032b9/server.webp\")
The benchmarking result was pretty much similor to what we are thinking. Here are the benchmarking results -
\n![\"sheet1\"](\"/bc71c0c2ed131f0b4ba9ac1fe9bdb155/sheet1.webp\")
![\"sheet2\"](\"/0d6023167db0ad99d3fe1d8dfb1f1870/sheet2.webp\")
There was a big difference. For better clarity let’s see the below graphs.
\nIn the below chart, we can clearly see that Golang won the competition and Hapi has taken the maximum time to finish the test.
\n![\"total-time-taken-for-test\"](\"/13b747de9eb5e9d9ed52d041de7a483a/total-time-taken-for-test.webp\")
In the below chart, we can see that Golang served maximum requests per second.
\n![\"request-per-second-and-transfer-rate-kb-s\"](\"/4129f7fdfaf409d18266224a68e8d07e/request-per-second-and-transfer-rate-kb-s.webp\")
The below chart is showing that the Number of requests is very high compared to other node js frameworks.
\n![\"request-per-second-and-time-per-request\"](\"/9dd0dd6c131fe4efbd1b3fd543283d81/request-per-second-and-time-per-request.webp\")
![\"chart\"](\"/844246f974c34aef12770c0a7458a864/chart.webp\")
All the data clearly shows the direction so we decided to move to GoLang.
\n","frontmatter":{"date":"August 11, 2020","updated_date":null,"description":"If your existing technology is not fulfilling all your needs and you are thinking about switching to the new one. Also, if you are concerned about the performance. Here is the blog that can help you in this direction.","title":"A journey from Node to GoLang","tags":["NodeJs","Golang","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7495b241d8dd853cf8580344cc9332f2/ad85c/node-go.webp","srcSet":"/static/7495b241d8dd853cf8580344cc9332f2/61e93/node-go.webp 200w,\n/static/7495b241d8dd853cf8580344cc9332f2/1f5c5/node-go.webp 400w,\n/static/7495b241d8dd853cf8580344cc9332f2/ad85c/node-go.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Narendra Pareek","github":"pareek-narendra","avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.
\nWe’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.
\nThe goal? Having them spend less time searching and more time building.
\nLoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.
\nHere’s a closer look at what’s new and why it’s important:
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.
\nThe new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.
\nSo, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.
\n![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:
\nThis structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.
\nThe new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.
\n![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.
\nOur platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.
\nCheck out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.
\nDo not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!
\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":750,"currentPage":126,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}