{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/50","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended…","fields":{"slug":"/engineering/shopify-embedded-app/"},"html":"

Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended by Shopify called \"phpish\" does not support the feature to \"PUT\" assets into your shopify shop's theme. The link to \"phpish\" git repository can be found  here, I'd like to thank these guys for their great work, it saved me lots of time to get the implementation on the right track.

\n

So if you want to do a PUT API call to Shopify web service, you can do it in raw PHP by customizing a CURL request, this is not very hard. But prior to make the Asset API call, first you need to retrieve the currently activated theme ID by calling the Shopify Theme API call, this part can be done easily with the help of phpish.

\n

Then it is the time to customize your CURL request to do the PUT API call, remember phpish stores our information such as Oauth Token and Shop into the $_SESSION, we can leverage on that or manually fill in the correct information

\n
<!-- array("key" => "snippets/put-asset.liquid", "value" => "this is a test to put assets"));\n$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");\n$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";\ncurl_setopt( $ch, CURLOPT_HTTPHEADER, $headers );\ncurl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);\necho "";\necho curl_error($ch)."";\nvar_dump($response);\ncurl_close($ch);\n?>-->
\n

Let me briefly explain this snippet, so first you define an array with key and value, key maps to the file name that you want to create, and value is the actual code or asset you want to pass in. Then you create a curl request with method \"PUT\" like all the other requests

\n
$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
\n

Next is something special for Shopify, to make an API call to Shopify you have to specify Oauth_Token in your request to tell Shopify who you are, and so does Content-Type.

\n
$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";
\n

Last but not least, json encode your data array into JSON format and send the request.

\n
curl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);
\n

The last part is just to catch the returned response or show the error message from your CURL request if something is going wrong.

\n

Hope this can help someone, happy coding.

\n","frontmatter":{"date":"June 02, 2015","updated_date":null,"description":null,"title":"Shopify Embedded App","tags":["Shopify","PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8867924528301887,"src":"/static/c5210d2bc3581dbaa177626908ec770c/53cab/shopify.webp","srcSet":"/static/c5210d2bc3581dbaa177626908ec770c/61e93/shopify.webp 200w,\n/static/c5210d2bc3581dbaa177626908ec770c/53cab/shopify.webp 308w","sizes":"(max-width: 308px) 100vw, 308px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"Are you having trouble with accessing API endpoint? Unsure why your API is not returning data? Most modern browsers have tools or plugins…","fields":{"slug":"/engineering/api-debugging-tools/"},"html":"

Are you having trouble with accessing API endpoint? Unsure why your API is not returning data? Most modern browsers have tools or plugins that allows you to quickly and easily test your API calls and see the sample returned data. In this post we go through some tools available for common browsers and web tools that will cut down the total troubleshooting time.

\n

Google Chrome

\n

Chrome offers a wide variety of apps that are quick and easy to install through the Chrome app webstore. Postman is one of those app and it offers a very robust REST API testing solution. It allows you to quickly create and format a wide range of API calls, and keeps a record of previously accessed APIs for easy reference and reuse. Postman have an easy to understand interface that allows you to quickly reformat the included parameters, headers, and form data. Returned data can be viewed in multiple different formats depending on your preferences.

\n

Another added benefit of Postman is its built-in support for common authentication procedures like: Basic Auth, Digest Auth, and OAuth 1.0/2.0. These \"helpers\" allow you to bypass some of the common tasks that can be troublesome in the mentioned protocols such as signing your request(OAuth 1.0) or requesting an Access token(OAuth 2.0).

\n

Mozilla Firefox

\n

Poster or RestClient are both useful tools that allow you to test out your API calls within Mozilla Firefox. They offer many similar systems as Postman, allowing you to set various parts of your API quickly and easily. With built in features to set such as Base URL, Auth method, Timeout, Action, Content, headers, and query parameters; It returns a complete response object allowing you to troubleshoot APIs before integrating them into your systems. Both RestClient and Poster allow you to save your requests for future use.

\n

Other Systems

\n

Runscope: This is a powerful tool that allows you to set up test cases for your APIs. Which makes it easy for you to not only handle many of the features as described in the above two systems, but to also schedule these requests to perform periodically. This allows you to monitor your APIs and have email notifications sent out when specific conditions are met. You can also mask the API requests to run them from different locations worldwide allowing you to test user cases from a global audience.

\n

SoapUI: This is an extremely robust solution that can handle your entire testing environment. It also have built in features to test out RESTful API calls, as well as SOAP calls. This solution is very extensive and has many options that cover the full suite of features detailed in the above technologies. On top of that, they have a well formatted instructions available on their site, detailing how to setup and configure the program.

\n","frontmatter":{"date":"May 26, 2015","updated_date":null,"description":null,"title":"API Debugging Tools","tags":["Engineering","GoogleChorme","MozilaFirefox","SoupUI","RunScope"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/e2aa1e0f5566cdcc1948cf54ce59632d/403a4/api_debugging-tools-300x300.webp","srcSet":"/static/e2aa1e0f5566cdcc1948cf54ce59632d/61e93/api_debugging-tools-300x300.webp 200w,\n/static/e2aa1e0f5566cdcc1948cf54ce59632d/403a4/api_debugging-tools-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Overview Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always…","fields":{"slug":"/engineering/use-php-to-generate-filter-portfolio/"},"html":"

Overview

\n

Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always nice to keep it into different categories and allow your user to play with them.

\n

But adding a tag and a div on hundreds of images is definitely not fun. Our goal today is to use PHP to generate the Filter Portfolio instead of manually adding them one by one.

\n

The logic is like this, first we have a folder to contain all the portfolio images. It could be like this:

\n

\"assets->img->logos->businesses\"

\n

\"folder-structure\"

\n

And in the \"businesses\" folder, we have some sub-folders to put all the images in different categories, like this:

\n

Each sub-folder contains different images in that category, and our goal is to use those sub-folders name as the filters, and the images under each category will be added automatically. Let's do it.

\n\n

I know people hate this, but we are going to use a little pre-built javascript file called MixitUp, I promise it is a very easy but powerful tool to use, see a demo here.

\n

There is already very comprehensive tutorial on how to install that plugin  in their github repository, you can follow either of these.

\n
    \n
  1. Download the javascript file from github
    2. \n
\n

Click this link git -> src to open the repository for the javascript file, download and save it in your asset folder.

\n
    \n
  1. Import js and css
    2. \n
\n

You can do this right before the closing body tag. You probably have Jquery installed already, but just in case you don't.

\n
<!--\n-->
\n

It is recommended to link your Mixitup function while your document is ready, so add this after the importing lines.

\n
<!--\n$(document).ready(function(){\n    jQuery(function(){\n        $(function() {\n            $('#Container').mixItUp();\n        });\n    });\n});\n-->
\n
    \n
  1. Add the code
    2. \n
\n

Here is where the fun begins! I am not going to do any stylings in this tutorial, since you can always customize it yourself. Okay, first of first, add a div as a container of your filter portfolio section, so:

\n
<!---->
\n

Next, we need to add those clickable filter buttons to the div we just created. We can add them programmatically, but to be honest, it is not that bad to do it manually.

\n
<!-- All \n Eateries \n Cafes \n Bars, Clubs & Lounges \n Lifestyle \n\n Health & Fitness \n Fashion \n Beauty & Spas \n Entertainment -->
\n

Please note, for these <a> tags, you need to follow the patterns of MixitUp. Basically in class attribute you need to specify \"filter\" for it, and in data-filter, you need to tell which category it is. Next we are going to write some PHP code, to iterate through the destination folder, and process the files within it.

\n
<!--\nvalid()) {\n    if (!$it->isDot()) {\n        $subject = $it->getSubPathName();\n        // Mac OS automatically creates .DS_store file to store metadata\n        // The following regex is used to ignore those files\n        $pattern = '/\\\\.DS/';\n        preg_match( $pattern, $subject, $match );\n        if( !$match ) {\n            $file_path_name = str_replace("\\\\", "/", $subject);\n?>\n    <div class="mix getSubPath(); ?> col-md-3 ">\n        <img src="" alt="" class="business-logo-img"/>\n    \nnext();\n}\n?>\n-->
\n

The code is pretty straightforward, just want to label out a couple of things.

\n

First, we specified which folders we are working with and then we used a built-in recursive iterators to cycle through the folder.

\n

For each item we found in every sub-folder, $it->getSubPath will return the sub-folder name and $it->getSubPathName will return the name of the file. Create a div for each image, and play with those returned parameters to fit them into the pattern of MixitUp.

\n

The $it->isDot() function and regular expressions are used to filter out some system hidden files such as \".DS_Store\" and others, since we do not want to them to be shown as images.

\n

Easy, right? If you like this post, click share and help people who's having this kind of issue.

\n","frontmatter":{"date":"May 19, 2015","updated_date":null,"description":null,"title":"Use PHP to generate filter portfolio","tags":["PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/2bded56c56b18fac13fd210a0d98e4db/7fbdd/php-filter-portfolio.webp","srcSet":"/static/2bded56c56b18fac13fd210a0d98e4db/61e93/php-filter-portfolio.webp 200w,\n/static/2bded56c56b18fac13fd210a0d98e4db/1f5c5/php-filter-portfolio.webp 400w,\n/static/2bded56c56b18fac13fd210a0d98e4db/7fbdd/php-filter-portfolio.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"When we start thinking about authentication in any kind of software (it can be web, mobile, desktop, or even console), the first thing that…","fields":{"slug":"/engineering/password-secure/"},"html":"

When we start thinking about authentication in any kind of software (it can be web, mobile, desktop, or even console), the first thing that comes to mind is username/password, this is an older but still effective technique to protect and identify users. Securing these passwords is not an easy task we require better techniques to secure these passwords from attackers. Generally, passwords stored in databases, so we can secure passwords by traditional techniques to prevent access to databases like firewalls, role definitions, etc. but just to prevent database intrusions is not a fully secured way, we require further password protections by converting them into non-readable (encrypted) formats. To understand encrypting passwords we have to understand plain text passwords and how these kinds of passwords are insecure.

\n

Let's start our journey

\n

Plain text passwords [Never Store Plain text Passwords]

\n

Plain text passwords are stored directly in a database without any encryption. These passwords are very insecure because:\n- If someone hacks your database he can access any account and do anything possible after login.\n- Developers or employees who are working on a project commonly misuse the password and spread these passwords to other people for misuse.

\n

As a hard and fast rule plain text passwords should NOT be accepted in any case or used for any project or product.

\n

Encrypted passwords [Not recommended]:

\n

Encryption helps us by protecting data from hackers. In network communication, the same techniques can be used in saving passwords. Any encryption algorithm can be used to protect passwords. So on registration plain text passwords are encrypted and saved to your database.

\n
```\nEncryptedPassword = Encrypt ( Password, Key);\n```
\n

Get this encrypted password from database then de-crypt and match\nPassword = Decrypt ( EncryptedPasword, Key);

\n

Match with user entered password.

\n

But passwords will still not be fully secured because encrypted data can be always be de-crypted with the encryption key if someone get the key then they can de-crypt your password.

\n

Hashed passwords [Recommended]

\n

Hashing is a method of encryption to get original data from hash. Hashing algorithms are used in network data communications. The encryption encrypts the data but hashing protects tampering with the encrypted data. Hashing algorithms are widely used in securing passwords.

\n

In case of hashing validation of password performed refer to the following pseudo-code:

\n

On registration

\n
PasswordHash = HASH(Password);
\n

Some of the hashing algorithms support salts(a set of characters that is appended to your hash) like HMAC

\n
PasswordHash = HASH(Password, salt);
\n

On login the same process happens, get hash from users entered password

\n
  inputPasswordHash = HASH(inputPassword);
\n

And compare with the saved password

\n
  If(SavedPassworHash == inputPasswordHash){\n\n  //user get login\n\n  }
\n

For making a strong hash from non-salted hash algorithms, salt is appended or prepended to your password string. Appending and prepending also has two kinds of implementations one is a universal salt and the second is per password random salt, let us understand one by one.

\n

Universal salt : in this implementation every password has one salt.

\n\n

In this implementation every password has it's own random salt, but the question is how we preserve salt for a password? Answer is the salt is appended with password by a separator. And on login split that saved string by separator and get hashed password and salt.

\n

On registration when we save password

\n
  Salt = RandomString();\n  PasswordHashWithSalt = Hash(Password+Salt) + ":" + Salt;
\n

On login when compare password : first split salt and password hash

\n
  StringArray = Split(PasswordHashWithSalt , ":" );\n  Salt = StringArray\\[1\\];\n  PasswordHash = StringArray\\[0\\];
\n

Than get hash of user entered password by salt

\n
inputPasswordHash = Hash(inputPassword + Salt);
\n

Then compare both password hash

\n
If(PasswordHash == inputPasswordHash){\n\n//user get login\n\n}
\n

Some popular encryption methods : Most of people use following algorithms for hashing passwords, explaining all algorithms is out of scope of this blog. I am adding reference URLs for more reading. I am adding only strong hashing algorithms

\n
    \n
  1. PBKDF2
    2. \n
  2. bcrypt
    3. \n
  3. scrypt
    4. \n
  4. Argon2
    5. \n
\n

Hash cracking techniques

\n

Brute force: It is the most popular password cracking technique, in this loop every combination of numbers and alphabets are tried. Suppose one system have password minimum length is 6 digits then

\n

000000, 000001,000002……………….111111,111112……..AAAAAA etc.

\n

In any case user have set simple password like 123123, it will be cracked simply. How to prevent this kind of scenarios

\n
    \n
  1. Enforce to user to use at-least one number, one symbols, one capital letter and one small letter in password.
    2. \n
  2. On login form if someone entered more than three time wrong password for one username then ask for human verification by captcha, it will be prevented by automatic brute force password generator.
    3. \n
\n

Dictionary attacks:

\n

In crypt-analysis and computer security, a dictionary attack is a technique for defeating a cipher or authentication mechanism by trying to determine its decryption key or pass-phrase by trying hundreds or sometimes millions of likely possibilities, such as words in a dictionary. (Wikipedia)

\n

it is just extended version of brute force attack, in this attacker attack by dictionary words, most of time people set their password as meaningful name to keep easily in mind. And in this attack.

\n

Rainbow tables

\n

A rainbow table is a precomputed table for reversing cryptographic hash functions, usually for cracking password hashes. Tables are usually used in recovering a plain text password up to a certain length consisting of a limited set of characters. It is a practical example of a space/time trade-off, using less computer processing time and more storage than a brute-force attack which calculates a hash on every attempt, but more processing time and less storage than a simple look-up table with one entry per hash. Use of a key derivation function that employs a salt makes this attack unfeasible. (Wikipedia)

\n

Migrating Hashing algorithm

\n

Sometimes people realize that their Hashing algorithm is weak so they think to migrate system to one algorithm to another but hashing algorithms are one way so getting original password is not possible so the question becomes how to make this possible. There are two ways to do this.

\n

Reset all passwords: In this approach just migrate your algorithm from one to another but keep password hash same, but password will not be matched because hash of one algorithm doesn't match with hash of another algorithm, so email to user about it that our system has improved security system and send link with this email for resetting password, so user will reset password.

\n

Migrate on login: this approach is tricky in this case maintain one parameter for checking is password upgraded to new algorithm, set false for all user by default and when use come for login check this check if it is false then compare password with old algorithm and if password get matched then start user's session and get newer hash from plain text password and saved to database and update is password upgraded check to true. Now from next time user's password will be checked by newer algorithm.

\n","frontmatter":{"date":"May 14, 2015","updated_date":null,"description":null,"title":"Password Security","tags":["Security","Password"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/cc21bc708f0fdfa3428eecb3a473023b/7fbdd/password-security.webp","srcSet":"/static/cc21bc708f0fdfa3428eecb3a473023b/61e93/password-security.webp 200w,\n/static/cc21bc708f0fdfa3428eecb3a473023b/1f5c5/password-security.webp 400w,\n/static/cc21bc708f0fdfa3428eecb3a473023b/7fbdd/password-security.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy…","fields":{"slug":"/engineering/create-a-loading-spinner-using-css/"},"html":"

Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy resolution. What if you can create a gif(ish) element out of CSS? Because you can.

\n

CSS has come a long way we can now create our own GIF-ish contents and the best part, we have full control over it.

\n

\"yeah-css\"

\n

Great, how do I do it?

\n

First things first, we need our html structure that will hold all the things we need. There's the container:

\n
<div class="container"> <!--There's the container that centers it-->\n    <div class="spinner-frame"> <!--The background-->\n        <div class="spinner-cover"></div> <!--The Foreground-->\n        <div class="spinner-bar"></div> <!--and The Spinny thing-->\n    </div>\n</div>
\n

Easy, right? Now we need to add them styles to our html's.

\n
.container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    text-align: center;\n    background: #eee;\n}\n.container:before {\n    content: "";\n    height: 100%;\n    display: inline-block;\n    vertical-align: middle;\n}
\n

Since, it's a spinner and normally covers the whole page. The combination of \"position: fixed\" and bottom, top, left, right as 0 will do that for you. ( We don't want the users to click everywhere, right?).

\n

The :before pseudo element will help you center the spinner correctly (without the help of negative margins). How? If you look at the container class, it has a \"text-align: center\" which aligns inline elements like the pseudo element :before. But, we need to add height on that thing and inline elements do not like that. So, we need to change the display from inline to inline-block and add \"vertical-align: middle\" so it aligns vertically.

\n

Now the for the fun stuff.

\n

We need to style the spinner frame.

\n
.container .spinner-frame {\n    display: inline-block;\n    vertical-align: middle;\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n    border: 5px solid #fff;\n    padding: 10px;\n}
\n

A couple of things here. Since it's a DIV, by default it's a block element. We need to change that to an inline-block so it accepts the text-align and centers itself with the :before pseudo element. Then add a \"vertical-align: middle\" and viola!! Centered!

\n

A spinner won't be a spinner if it's not a circle. A 50% border-radius will work properly if you have a perfect 1:1 ratio. Now we need to push everything inside (and automatically center it), adding consistent padding will do that for you.

\n

Now for the foreground or spinner-cover.

\n
.container .spinner-frame .spinner-cover {\n    background: #fff;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    z-index: 2;\n}
\n

This will add a white cover on top of the spinner and hide everything that we don't need inside it. You know what they say... If you can't remove it, hide it.

\n

For the spinny thing:

\n
.container .spinner-frame .spinner-bar {\n    background: #29d;\n    width: 50%;\n    height: 50%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 100% 0 0 0;\n    -webkit-animation: spinny 2s linear infinite;\n    transform-origin: 100% 100%;\n}\n@-webkit-keyframes spinny {\n    0% {\n        transform: rotate(0deg);\n        background: #29d;\n    }\n    50% {\n        transform: rotate(180deg);\n        background: #00427c;\n    }\n    100% {\n        transform: rotate(360deg);\n        background: #29d;\n    }\n}
\n

This one needs more advance CSS in it because this is the only thing that moves.

\n

We need to tell the element that the center point is not on the center of the element but on the bottom right edge where it spins. The CSS \"transform-origin: 100% 100%\" will do that easily for you.

\n

Since it's an animated element, overflow hidden (for some reason) doesn't work on this guy. So, we need to curve to top left part of it. The CSS \"border-radius: 100% 0 0 0\" will do that for you.

\n

We also need to push it on the top left where it starts spinning \"position: absolute\" with top and left 0 will push it there.

\n

Now we need to animate it using key-frames. From 0% to 100% the \"transform: rotate()\" from 0 degrees (0deg) to 360 degrees (360deg) will rotate it forever. FOREVER!

\n

A tutorial wouldn't be complete without a demo.

\n

See the Pen azVwqj by Darryl Tec (@notdarryltec) on CodePen.

\n","frontmatter":{"date":"May 05, 2015","updated_date":null,"description":"Learn how to create a loading spinner using CSS","title":"Loading spinner using CSS","tags":["CSS","Loader"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7892c56df8d6f6a460669e168ad41a70/7fbdd/css3-loading-spinner.webp","srcSet":"/static/7892c56df8d6f6a460669e168ad41a70/61e93/css3-loading-spinner.webp 200w,\n/static/7892c56df8d6f6a460669e168ad41a70/1f5c5/css3-loading-spinner.webp 400w,\n/static/7892c56df8d6f6a460669e168ad41a70/7fbdd/css3-loading-spinner.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get…","fields":{"slug":"/engineering/relational-database-management-system-rdbms-vs-nosql/"},"html":"

Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get very confused with all the choice. They do not understand why they should consider a newer, alternative database when RDBMSs have been around for 25+ years. However, many big enterprises are already using alternative databases and are saving money, innovating more quickly, and completing projects.

\n

Relational Database Management System (RDBMS)

\n

RDBMS Database is a relational database. It is the standard language for relational database management systems.Data is stored in the form of rows and columns in RDBMS. The relations among tables are also stored in the form of the table SQL (Structured query Language) is a programming language used to perform tasks such as update data on a database, or to retrieve data from a database. Some common relational database management systems that use SQL are: Oracle, Sybase, Microsoft SQL Server, Access, etc.

\n

Features Of RDBMS

\n
    \n
  1. SQL databases are table based databases
    2. \n
  2. Data store in rows and columns
    3. \n
  3. Each row contains a unique instance of data for the categories defined by the columns.
    4. \n
  4. Provide facility primary key, to uniquely identify the rows
    5. \n
\n

Limitations for SQL database

\n

Scalability: Users have to scale relational database on powerful servers that are expensive and difficult to handle. To scale relational database it has to be distributed on to multiple servers. Handling tables across different servers is difficult .

\n

Complexity: In SQL server’s data has to fit into tables anyhow. If your data doesn’t fit into tables, then you need to design your database structure that will be complex and again difficult to handle.

\n

NoSQL

\n

NoSQL commonly referred to as “Not Only SQL”. With NoSQL, unstructured ,schema less data can be stored in multiple collections and nodes and it does not require fixed table sachems, it supports limited join queries , and we scale it horizontally.

\n

Benefits of NoSQL

\n

highly and easily scalable

\n

Relational database or RDBMS databases are vertically Scalable When load increase on RDBMS database then we scale database by increasing server hardware power ,need to by expensive and bigger servers and NoSQL databases are designed to expand horizontally and in Horizontal scaling means that you scale by adding more machines into your pool of resources.

\n

Maintaining NoSQL Servers is Less Expensive

\n

Maintaining high-end RDBMS systems is expensive and need trained manpower for database management but NoSQL databases require less management. it support many Features like automatic repair, easier data distribution, and simpler data models make administration and tuning requirements lesser in NoSQL.

\n

Lesser Server Cost and open-Source

\n

NoSQL databases are cheap and open source. NoSql database implementation is easy and typically uses cheap servers to manage the exploding data and transaction while RDBMS databases are expensive and it uses big servers and storage systems. So the storing and processing data cost per gigabyte in the case of NoSQL can be many times lesser than the cost of RDBMS.

\n

No Schema or Fixed Data model

\n

NoSQL database is schema less so Data can be inserted in a NoSQL database without any predefined schema. So the format or data model can be changed any time, without application disruption.and change management is a big headache in SQL.

\n

Support Integrated Caching

\n

NoSQL database support caching in system memory so it increase data output performance and SQL database where this has to be done using separate infrastructure.

\n

Limitations & disadvantage of NoSQL

\n
    \n
  1. NoSQL database is Open Source and Open Source at its greatest strength but at the same time its greatest weakness because there are not many defined standards for NoSQL databases, so no two NoSQL databases are equal
    2. \n
  2. No Stored Procedures in mongodb (NoSql database).
    3. \n
  3. GUI mode tools to access the database is not flexibly available in market
    4. \n
  4. too difficult for finding nosql experts because it is latest technology and NoSQL developer are in learning mode
    5. \n
\n

Conclusion

\n

RDBMS and NoSQL both dbs are great in data management and both are used to keep data storage and retrieval optimized and smooth. It’s hard to say which technology is better so developer take decision according requirement and situations

\n","frontmatter":{"date":"April 28, 2015","updated_date":null,"description":"Learn about RDBMS and NoSQL Database systems, their differences, benefits and limitations","title":"RDBMS vs NoSQL","tags":["Database"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/f5c32ff4008853f989d5847a4fb3b139/7fbdd/rdbms-vs-nosql.webp","srcSet":"/static/f5c32ff4008853f989d5847a4fb3b139/61e93/rdbms-vs-nosql.webp 200w,\n/static/f5c32ff4008853f989d5847a4fb3b139/1f5c5/rdbms-vs-nosql.webp 400w,\n/static/f5c32ff4008853f989d5847a4fb3b139/7fbdd/rdbms-vs-nosql.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":294,"currentPage":50,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}