![\"Dictionary\"](\"/e4a5b4578afa0881d70c2574866850f7/dictionary.webp\")
A lot has been written and talked about Unit Testing in the IT industry for the last couple of years. I have heard and discussed the same over the previous 2.5 decades of my IT career.
\nEven though a lot is talked about and is done in this field but still today, every company is struggling with this. But before we proceed with the above situation, let us first understand its importance.
\nA strong foundation is the basis of a strong building in the same way a proper unit testing is the foundation of high-quality software.
\nUnit Testing, if done correctly, ensures that each of the building blocks of the software product is robust and will make high-quality software when put together.
\nUnit testing is an essential tool in any serious software developer's toolbox. However, writing a good unit test for a specific piece of code can often be very hard.
\nDevelopers frequently believe that their struggles are triggered by a lack of essential testing expertise or hidden unit testing techniques after experiencing trouble testing their own or someone else's code.
\nTesting of the unit requires testing individual components of the programme or application software. The primary objective behind this is to verify that all the individual components function as expected.
\nAs the smallest possible part of the software that can be evaluated, a unit is known. It usually has a couple of inputs and a single output.
\nBoth testers and developers can isolate each module, detect and repair device defects at a very early stage of the life cycle of software development with this testing method (SDLC).
\nBy considering stubs, mock artifacts, drivers, and unit testing frameworks, this methodology effectively helps validate the consistency of a section of code.
\nBecause it is practiced at the initial testing level, this testing methodology ensures that the vulnerabilities are detected and corrected at the early stage of SDLC, even before they become costly for businesses to repair when they are later identified.
\nThe developers and testers can help save time with a suitable unit testing practice as bugs can be found early in the process as it is the initial testing step. Skipping or restricting the unit testing practice will adversely increase the defects, and repairing them later becomes difficult.
\nTherefore before preparing for the integration testing, it is essential to practice unit testing at the initial stage of the software testing process.
\nWell, it is not that a developer loves to find bugs in his/her coded code. Still, when it comes to unit testing, they at times(most of the time) see it has an additional overhead on them, especially when one has to follow and stick to a lot of protocols, frameworks, and documentation, etc.
\nAlso, it is commonly misunderstood that finding issues is the QC team's problem. We have to code. In my view, it is incorrect thinking as Quality Software is standard or combines commitment from a company and it's the team.
\nHere are a few benefits of unit testing:
\nThe most significant advantage of unit testing is this. You would need to make improvements to the old design and code when you add more functionality to any programme, which can be costly and risky. If you use the technique of unit testing, this will save a lot of time and can make the whole process much quicker and simpler.
\nUnit testing increases code consistency dramatically. It allows designers to recognize the smallest faults present in the units before they go for integration testing.
\nAt a very early point, unit testing helps detect all sorts of problems with the programme. Until going any further, software developers should then focus on those problems first.
\nThis is the primary benefit of this because no other program component is compromised as the issues are fixed at an early stage. This results in improved performance, decreased downtime, and lower costs that would otherwise occur due to the entire design process's stalling.
\nWhen you test each part of the program individually, refactoring the code or upgrading the device library becomes much simpler. If there are any issues, they are found early on, and it thus becomes much easier to make improvements to the system.
\nBefore it goes on to the next level, the accuracy of each unit is checked. This implies that until it's incorporated with other companies, the device is proven to be in good working order.
\nUnit verification considers the whole system's documentation. By reading each module's documentation, developers who want to learn about the features of a specific programme or framework will quickly learn about the device.
\nIt makes it possible for them to have a detailed understanding of the system and what each part does.
\nTo a great degree, unit testing will simplify the debugging process. If a particular test fails, it is essential to debug only the most recent improvements made to the code.
\nIn the early stages, any problems or glitches in the system are detected by unit testing, and the cost of bug fixes is significantly reduced because of this. If these vulnerabilities are found later, so repairing them would be even more costly.
\nIt is important for the unit testers to get a step-by-step instructional document in order to practice unit testing with the manual testing process.
\nHowever, automated unit testing is often chosen by most companies, taking into account the efforts necessary for manual testing.
\nIn the end, remember that I am the first and the most basic foundation in a big building of Quality and have to always keep the same in mind whenever I code since no one is interested in buying a well-packaged product if its ingredients are not of high quality.
\nBy doing the above I am not only contributing to high-quality software but I can devote later high bug-fixing time to things like improving the performance/security of my code and avoiding going back to the drawing board for issues related to performance or security etc.
\nAlways remember in the software development unit testing serves as \"A stitch in time saves nine\".
\n","frontmatter":{"date":"September 29, 2020","updated_date":null,"description":"Unit testing is one of the types of software testing that requires an initial phase of testing. Find out the benefits and why its important for developers.","title":"Unit Testing: What is it and why do you need it?","tags":["Unit Testing","QA","Testing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6327467722c4e2f8951e626f58fbf29f/58556/unit-testing.webp","srcSet":"/static/6327467722c4e2f8951e626f58fbf29f/61e93/unit-testing.webp 200w,\n/static/6327467722c4e2f8951e626f58fbf29f/1f5c5/unit-testing.webp 400w,\n/static/6327467722c4e2f8951e626f58fbf29f/58556/unit-testing.webp 800w,\n/static/6327467722c4e2f8951e626f58fbf29f/99238/unit-testing.webp 1200w,\n/static/6327467722c4e2f8951e626f58fbf29f/7c22d/unit-testing.webp 1600w,\n/static/6327467722c4e2f8951e626f58fbf29f/f8fd9/unit-testing.webp 5472w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudhanshu Pandey","github":null,"avatar":null}}}},{"node":{"excerpt":"Golang Maps is a compilation of unordered key-value pairs. It is commonly used because it offers simple searches and values with the aid of…","fields":{"slug":"/engineering/golang-maps/"},"html":"Golang Maps is a compilation of unordered key-value pairs. It is commonly used because it offers simple searches and values with the aid of keys that can be retrieved, modified or deleted. It is a reference to a table with a hash.
\nThis blog will cover the basic use of maps in Go, and how a newcomer to the language may utilize them for their applications.
\nMaps (also called dictionaries) are a very useful tool in helping to store and organize objects to be accessed in an efficient method.
\nMost basic implementations of a map involve using a key to access a value in the map, resulting in key-value pairs, in which one key is associated with a specific value in the map. Within Golang, maps follow this definition.
\n
Initialization of a map can be done using the make command. This is similar to the initialization of a slice:
mapObject := make(map[string]string)In this case, mapObject is a map that uses strings as a key to map to another string. When creating a map, the key type must be a type that is Comparable, or more specifically types that can be compared using the == operator.
Examples of valid key types include booleans, numbers, strings and several other primitives can be used as keys.
\nOne more thing to note is that structs can be used as a key, provided that all the properties of the struct are Comparable.
Maps can also be created using a map literal. For an empty map:
\nmapObject := map[string]string{}Or for a map with initial data:
\nmapObject := map[string]string{\n\t“Key1”: “Value1”,\n\t“Key2”: “Value2”,\n\t“Key3”: “Value3”,\n}Interaction with Go maps are similar to the dictionaries and maps of other languages. A simple way to return a value associated with the key is to use bracket notation. For example, to set a string value mapped to a string key:
\nmapObject[“test”] = “test_value”![\"Fetching\"](\"/c529fc135c0b7780aaed9d5e7b1325b1/fetching.webp\")
Retrieving a value uses the same format.
\nresult := mapObject[“test”]The value of result will be the value assigned to “test” in the map. In the case where no key is found, the zero value of the type is returned instead. In this case, if there is no associated value with “test”, an empty string is returned.
A boolean that returns the key’s existence can also be returned if two arguments are assigned from the retrieval. For example:
\nresult, exists := mapObject[“test”]If “test” exists in the map, result will be the value associated with “test” and exists will be true. If “test” does not exist, result will be an empty string and exists will be false. This is useful when the map being used contains zero-values to distinguish between existence or whether the value is just zero.
Using Go’s built in delete method, key-value pairs can be deleted off the map. To delete the previous “test” key from the map, the following can be called:
delete(mapObject, "test")The delete method does not have a return value, so if the key does not exist in the map, nothing will happen.\nLength
\nThe number of key-value pairs of a map can be found using the len method:
\nlength := len(mapObject)Using Go’s range keyword, a map can be iterated through.
\nfor key, value := range m {\n fmt.Println("Key:", key, "Value:", value)\n}There is no specific order in which the map is iterated. If a specific order is needed, a slice or other data structure can be used to store or hold data which can then be sorted and iterated through.
\nAlthough Go has a lot of support for concurrency through the use of goroutines and channels, maps alone are not a reliable approach to handling data in a concurrent setting.
\nTo work with maps that support concurrency, a separate synchronization method should be used, like sync.RWMutex. Alternatively, an open source map package which implements the synchronizations can be used.
With the market space and number of applications being created by Go increasing, hopefully this blog will help touch onto the basics of one of the major structures in Go.
\nAlthough it doesn’t support concurrency, maps in Go are still a useful tool in most applications developed in Go, to reliably access and manage data.
\nIf you want to learn more about golang here is a quick guide on, how to send email with golang. If you like what you read leave a comment or any question and will communicate further.
\n","frontmatter":{"date":"September 25, 2020","updated_date":null,"description":"A map is a builtin sort used for storing key-value pairs. Find out more in this article on how Golang maps work and why to use them.","title":"Golang Maps - A Beginner’s Guide","tags":["Go","dictionaries","maps"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6caba3d40f8e06af28c2d45a8fbd6ea7/58556/index.webp","srcSet":"/static/6caba3d40f8e06af28c2d45a8fbd6ea7/61e93/index.webp 200w,\n/static/6caba3d40f8e06af28c2d45a8fbd6ea7/1f5c5/index.webp 400w,\n/static/6caba3d40f8e06af28c2d45a8fbd6ea7/58556/index.webp 800w,\n/static/6caba3d40f8e06af28c2d45a8fbd6ea7/99238/index.webp 1200w,\n/static/6caba3d40f8e06af28c2d45a8fbd6ea7/90fb1/index.webp 1500w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Chris Yee","github":null,"avatar":null}}}},{"node":{"excerpt":"LoginRadius Open Source Projects Just 1 week left in hacktoberfest 2020 and being part of it, we at LoginRadius are all set with lots of our…","fields":{"slug":"/engineering/loginradius-opensource-repos-for-hacktoberfest-2020/"},"html":"Just 1 week left in hacktoberfest 2020 and being part of it, we at LoginRadius are all set with lots of our projects going open source this year.
\n\n\nTo get LoginRadius swags see our Hacktoberfest Launch Blog. We have around 500 swags for our open source contributors.
\n
Here is a list of our open source projects available on Github for hacktoberfest 2020
\n![\"loginradius-hacktoberfest\"](\"/02fcd3f81a4a4130403e1ae6713b83f8/lr-open-source.webp\")
LoginRadius Engineering Portal
\nCascade
\n\n\n","frontmatter":{"date":"September 25, 2020","updated_date":null,"description":"Checkout LoginRadius Open Source Repositories where you can contribute for hackotberfest 2020","title":"LoginRadius Open Source For Hacktoberfest 2020","tags":["hacktoberfest","open-source","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp","srcSet":"/static/9a2056972f92077b2af8b32ecc2fcbdd/61e93/hacktober-fest-banner.webp 200w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/1f5c5/hacktober-fest-banner.webp 400w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp 800w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/e30b5/hacktober-fest-banner.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"excerpt":"JWT Signing Algorithms When JSON Web Tokens are created, they are typically signed by its issuer. This allows the recipient of the token to…","fields":{"slug":"/engineering/jwt-signing-algorithms/"},"html":"Check the open issues on each of the projects as well as Pull Request before creating a new one. Happy Coding!\nStay tuned for more updates from LoginRadius and don't forget to check our Hacktoberfest Page to get around 500 swags from LoginRadius.
\n
When JSON Web Tokens are created, they are typically signed by its issuer. This allows the recipient of the token to validate that the token received contains all of the information encoded by the issuer unmodified and as intended.
\nA signature is not to be mistaken for encryption! The fact that a JSON token is signed does not mean that the data enclosed is unreadable by third parties. All a signature does is ensure that the message is authentic, which it achieves by allowing the recipient to compare the data they’ve received with a trusted claim included in the data (the signature).
\nJWTs are most commonly signed using one of two algorithms: HS256 (HMAC using SHA256), and RS256 (RSA using SHA256).
\nA signature can only be created by someone possessing a secret key, and the original payload. Signatures are generally formed by combining the data to be signed with a secret key, either by appending them together and hashing them (HS256), or by encrypting a representation of that data (a hash) using the secret key (RS256).
\nIn both signing algorithms, the data is formatted into an immutable representation in a way that a recipient can check that the creator of the signature was in possession of that particular secret key.
\nHS256 is a symmetric signing method. This means that the same secret key is used to both create and verify the signature.
\nThe issuer appends the JWT header and payload with the secret key, and hashes the result using SHA256, creating a signature. The recipient uses their copies of the secret key, JWT header and payload in the same way to reproduce the signature, checking to see if they match.
\nAside from some incredibly unlikely scenarios, the only way for these signatures to be consistent is if the JWT header, payload and secret shared between the two parties are identical.
\nRS256 is an asymmetric encryption method. This differs from a symmetric scheme in that rather than using a single secret key, a pair of seperate keys are used to encrypt and decrypt the data.
\nThe issuer generates a hash of the JWT header and payload using SHA256, and encrypts it using the RSA encryption algorithm, and their private key. The recipient uses their public key to decrypt the signature ciphertext, and then compares it to a hash they’ve reproduced using their copy of the JWT header and payload, checking for consistency.
\nThe only way that these resulting hashes are consistent is if the JWT header and payload shared between the two parties are identical, and the public key corresponds to the private key used to encrypt the hash.
\nBoth signing schemes are effectively secure, with HS256 being a little faster. However, given this use case, the difference in speed is not particularly relevant.
\nThe main consideration on which to use, is in my opinion the symmetric vs asymmetric property of each:
\nHaving an unsecured publicly available key is useful in many cases. For example, it can be published openly on the internet as part of a metadata endpoint, allowing JWT configurators to automatically retrieve the key, making for a straightforward and automatic JWT setup. As such, RS256 may be more suitable for situations where data is exchanged between two independent parties.
\nHaving a shared secret key can however also be useful in some cases. For example, if the issuer and recipient were both managed by a single party, the two applications would be able to share configurations without having to manage two separate keys. As such, HS256 may be more suitable for situations where data is exchanged within a single party
\n","frontmatter":{"date":"September 24, 2020","updated_date":null,"description":"Deciding between which signing algorithm to use.","title":"JWT Signing Algorithms","tags":["JWT","JSON Web Tokens"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/2fd4c7f86c996d936d9b217235d6257d/58556/unsplash.webp","srcSet":"/static/2fd4c7f86c996d936d9b217235d6257d/61e93/unsplash.webp 200w,\n/static/2fd4c7f86c996d936d9b217235d6257d/1f5c5/unsplash.webp 400w,\n/static/2fd4c7f86c996d936d9b217235d6257d/58556/unsplash.webp 800w,\n/static/2fd4c7f86c996d936d9b217235d6257d/99238/unsplash.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"excerpt":"Rendering is an essential procedure a programmer has to manage in frontend development. In React, the render() method is the only required…","fields":{"slug":"/engineering/understanding-react-rendering/"},"html":"Rendering is an essential procedure a programmer has to manage in frontend development. In React, the render() method is the only required method in a class component and is responsible for describing the view to be rendered to the browser window. Coupled with the clever way React operates around its virtual DOM concept, there are certain subtleties in how this method works. Understanding them will greatly benefit any aspiring React developer.
\nThroughout this writing, I will reference this codepen for a demonstration of discussed behaviors.
\nrender() 101First of all, render() is not user callable. It is part of the React component lifecycle. Generally, it gets called by React at various app stages when the React component instantiates for the first time, or when there is a new update to the component state. Render does not take any arguments and returns a JSX.Element which contains the view hierarchy of the current component. This view hierarchy will later be translated into HTML and displayed in the browser window.
As mentioned before, render() is not user callable as it is an event that happens in the component’s lifecycle. With that said, if it is absolutely necessary to render the view manually, you can instead call the built-in class method forceUpdate(). Keep in mind that this is considered an anti-pattern. If you were designing sensible React components, its state and props changes should naturally control the render process, and you should never feel the need to make a manual call.
Within the lifecycle, these are the scenarios where render is called:
\nconstructor() call.setState() callIf you have the Codepen opened at this point, before anything is rendered you will see 2 alert messages from the browser: \"render() is called in Parent component!\", and \"render() is called in Child component!\". These messages are invoked from the corresponding render() methods of the example's parent and child component. They serve to introduce the first case of render() invocation: when the component is first instantiated.
Once the set of alerts is dismissed, a very simple UI will render:
\n![\"Example](\"/86a7253364a0299e9ca03339073fecfb/image1.webp\")
The dotted border line distinguishes between elements that belong to the Child component of the example (inside the dotted line) versus the Parent component.
\nchildElementText state of the Parent component, which in turns updates the text prop of the Child component, triggering a render in both Parent and Child. onChildPropChange = () => {\n this.setState({\n childElementText: "I am the child element! I am updated following a prop change."\n })\n }helloWorldMessage state within Child component, triggering a render following a state change. onTextChange = () => {\n this.setState({\n helloWorldMessage: "Hello React! (state change after setState call)"\n })\n }A visual and interactive reference to the React lifecycle can be found here.
\nIt is worth noting that following a props update or setState(), the method shouldComponentUpdate() is invoked to determine whether render() should be called. By default, this method always returns true. But it can be overloaded to implement custom logic. It is the actual way to define custom render behavior in each React component.
The shouldComponentUpdate() provides you with nextProp and nextState as arguments, which allows you to compare the current state and props of the component. For example, this code block will invoke render() only when the text prop changes:
shouldComponentUpdate(nextProps: NewComponentProps, nextState: NewComponentState) {\n if (this.props.text !== nextProps.text) {\n return true;\n } else {\n return false;\n }\n }The characteristics and behaviors mentioned above made it imperative that render() is a pure function. That means inside render(), you should not make an update to the component's states or props (no setState() call nor Redux state update). This makes sense because an update to the component will then trigger a new render() call, which can potentially lock you into an infinite render loop.
In terms of return value: render() returns a single JSX element, as mentioned above. This comes with certain implications:
<div>, or a <React.Fragment>. It is worth noting that once rendered, <React.Fragment> will vanish from the DOM structure. It is only meant to be a wrapper component and does not appear in the final DOM in the browser. This makes it a more sensible choice over a <div> wrapping to avoid nesting div’s.render() method, it is helpful to think about how the entire UI will look like at a moment in time, instead of thinking about how a certain element updates over time. “Thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.”key propThe render() method in each React component then feeds into what is called the Reconciliation Algorithm. This is the primary algorithm that dictates how React renders the real DOM in your browser based on a virtual DOM maintained internally by React. To intelligently determine what needs to be rendered on every call, React compares the current state of the virtual DOM and the real one and only makes changes to the physical DOM where it recognizes that the UI has been updated.
While not every single detail is known about React’s reconciliation algorithm, the characteristics detailed in the official documentation are enough for us to start phasing out certain suboptimal rendering patterns, thus writing a more robust render() method.
For instance, given this DOM subtree:
\n<div>\n <span key="li-1">list item 1</span>\n\n <span key="li-2">list item 2</span>\n\n <span key="li-3">list item 3</span>\n</div>If a <NewComponent> is then added to the top of the list:
<div>\n <!-- previously <span>list item 1</span> - element is detached and <NewComponent /> instantiated -->\n <NewComponent />\n\n <!-- previously <span>list item 2</span> - content will be updated to "list item 1" -->\n <span>list item 1</span>\n\n <!-- previously <span>list item 3</span> - content will be updated to "list item 2" -->\n <span>list item 2</span>\n\n <!-- new <span>list item 3</span> is element created -->\n <span>list item 3</span>\n</div>If instead <NewComponent> is added to the bottom:
<div>\n <!-- previously <span>list item 1</span> - no change -->\n <span>list item 1</span>\n\n <!-- previously <span>list item 2</span> - no change -->\n <span>list item 2</span>\n\n <!-- previously <span>list item 3</span> - no change -->\n <span>list item 3</span>\n\n <!-- new instance of <NewComponent /> is added -->\n <NewComponent />\n</div> In the example above, appending <NewComponent> to the end of the list will result in 1 new instantiation, versus 1 instantiation, 3 updates and 1 tear down. In a larger application scale, this will prove to be a significant performance difference in the long run.
If you have ever tried to use the map() method to iterate over an array to render a list of elements, it is likely that you have seen React complaining about a missing key prop to each rendered list item. So what does the key actually do?
A key is React’s way to recognize elements in the DOM tree, comes reconciliation time. When React is parsing all children of an element, it can leverage keys to match elements that were present from the last update. That allows you to shuffle the order of child elements without interfering with the algorithm. As long as the key matches between updates, React will preserve the element configuration.
Coming back to the example above, let’s add keys to all the existing list items:
\n<div>\n <span key="li-1">list item 1</span>\n\n <span key="li-2">list item 2</span>\n\n <span key="li-3">list item 3</span>\n</div>In this case, if we were to add an extra “list item 4” at the top of the list, it would not come with the same performance penalty:
\n<div>\n <!-- new item - <span> is instantiated -->\n <span key="li-4">list item 4</span>\n\n <!-- matched with the old "li-1" key - element stays unchanged between renders -->\n <span key="li-1">list item 1</span>\n\n <!-- matched with the old "li-2" key - element stays unchanged between renders -->\n <span key="li-2">list item 2</span>\n\n <!-- matched with the old "li-3" key - element stays unchanged between renders -->\n <span key="li-3">list item 3</span>\n</div>In case a subtree is generated using a map() or other iterative methods, React requires that keys are provided with the element. However, even in case a DOM subtree is manually added, keys should be provided on subtrees that have complex behaviors regarding conditional rendering.
React is a clever framework that offers performance through its rendering scheme, so it follows that, as developers, we should leverage it appropriately to help build performant applications. With that said, it is not a miracle device that optimizes out inefficiencies from the developer’s end, but a tool to be utilized. Understanding the render() nd its implication to the reconciliation algorithm is the first step to make sure we are leveraging the framework instead of working against it. It is also one of the first steps to mastering React.
Ajax stands for Asynchronous Javascript and XML. Ajax is a programming technique that allows us to create dynamic, complex, and asynchronous web applications. Ajax allows us to send and receive data from the webserver asynchronously without interfering with the current state or behavior of the web page or application.
\nXHR is the XMLHttpRequest Object which interacts with the server. Ajax technique in the nutshell leverages the XHR request to send and receive data from the webserver. This object is provided by the browser’s javascript environment. It transfers the data between the web browser and server.
\n![\"Ajax](\"/1513d4dbffc972d8a7d67063cf7d9886/ajax.webp\")
Dynamic content modification of web page: Using Ajax reloading of a web page is not required. The content of a web page can be modified dynamically by calling the XHR request in the background and changing the content using DOM Modification.
\nTo send and receive data from the server and implement the Ajax simple steps are explained below:
\nvar xhrobj = new XMLHttpRequest();xhrobj.open('GET','example.com/get');\nxhrobj.send();| \n | \n |
|---|---|
| open(method, url[, async[, user[, password]]]) | \nIt initializes the request. | \n
method | \nrequest type such as GET,POST etc | \n
url | \nRequest URL | \n
Async | \ntrue or false | \n
user | \nUsername for basic authentication | \n
password | \nPassword for basic authentication | \n
| send(body) | \nIt sends the request to the server body : it is optional to send body of data with request. | \n
In case of sending POST request :
\n xhrobj.open("POST", 'example.com/post', true);\n xhrobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");\n xhrobj.send("username=john");| \n | \n |
|---|---|
setRequestHeader(header,value) | \nIt sets the header for the HTTP request. | \n
header | \nname of header parameter | \n
Value | \nvalue of the parameter | \n
On completion of the request, the server sends the response to the request.
\nxhrobj.onreadystatechange = function () {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById("response").innerHTML = xhrobj.responseText;\n }\n}| \n | \n |
|---|---|
onreadystatechange = callback() | \nIt is a EventHandler called when the readyState attribute changes. | \n
readyState attribute | \nIt is an attribute that returns the current state of XMLHttpRequest object | \n
status attribute | \nIt is an attribute that returns the status code to the HTTP XHR request. | \n
responseText attribute | \nIt is an attribute that returns the DOMstring response as the text. | \n
Implementing the Ajax technique by using the XHR in javascript instead of going with using other javascript library functions like jQuery.ajax has advantages as well. For example, it gives you the freedom to embed your application or script with other applications or platform even if the particular library is not used by other applications. Thus it also helps in code reusability.
\n","frontmatter":{"date":"September 22, 2020","updated_date":null,"description":"Learn the concept of AJAX and XHR in JavaScript, the benefits of AJAX, and how easy it is to implement the AJAX into our web application.","title":"Ajax and XHR using plain JS","tags":["XHR","JavaScript","AJAX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/c19cc11ae05c7a1224ef47b974bbf68f/58556/index.webp","srcSet":"/static/c19cc11ae05c7a1224ef47b974bbf68f/61e93/index.webp 200w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/1f5c5/index.webp 400w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/58556/index.webp 800w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/99238/index.webp 1200w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/135cd/index.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Apeksha Gupta","github":"ApekshaAgarwal","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":"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.
\nWith 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.
\nIn this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.
\nYou’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.
\nWhether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.
\nJSON 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.
\nA JWT consists of three parts:
\nExample of a token structure:
\n<base64Header>.<base64Payload>.<signature>
\n![\"Flowchart](\"/f29edbf2978577390c7ffa02e9bc4dda/lr-JWT-authentication.webp\")
JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.
\nLoginRadius 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.
\nIf 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:
\nThe 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![\"Screenshot](\"/9fb19dd9c88c7916aeebd03ab6e661b7/lr-admin-console.webp\")
{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",
\n\"expires_in\": 1800
\n}
\nThis 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.
\nIf 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:
\nSend a POST login request to the LR Authentication URL:
\nPOST /identity/v2/auth/login
\nInclude the user’s credentials (email + password) in the request body.
\n{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",
\n\"expires_in\": 3600
\n}
\nWith 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.
\nWith this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.
\nNOTE- 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.
\nTo get started with JWT implementation, you can read our complete developer documentation.
\n![\"Illustration](\"/15ec02ac98d24a9f1f28e5d0f06b9174/IDX-vs-Direct-API-JWT.webp\")
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.
\nIn 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.
\nIn 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.
\nGood session management ensures:
\nUser Logs In
\nClient Stores the Token
\nAccess Token Expiry
\nToken Renewal
\nWhen the user logs out, both the access token and refresh token should be cleared from client storage.
\nHowever, access tokens are stateless and cannot be revoked mid-lifecycle unless:
\nCombining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.
\n![\"illustration](\"/e55ae4bbc8ce62e13f03e46e29ebe7cc/api-economy.webp\")
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.
\nChoosing where to store the JWT is a crucial security decision. The most common storage options are:
\nEach option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.
\nAccess Tokens
\nRefresh Tokens
\nJWT 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.
\nWith 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.
\nA: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.
\nA: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.
\nA: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.
\nA: 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":162,"currentPage":28,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}