{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/43","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"While creating Lead Generation form at LoginRadius, Marketers wanted to sure that visitors enter business emails. To that end, I created a…","fields":{"slug":"/engineering/open-source-business-email-validator-by-loginradius/"},"html":"

While creating Lead Generation form at LoginRadius, Marketers wanted to sure that visitors enter business emails. To that end, I created a list in JSON format to block free mail providers like Gmail, Outlook etc.

\n

Business mail validator makes sure users enters only business emails in submission forms on a web page. User can’t enter with free email’s that provided by the third party (free email) service provider.

\n

Ex. Gmail.com, Yahoo.com, Yahoomail.com, Rediff.com etc.

\n

We can classified business email validation in two ways.

\n

1. Client side

\n

In client side validation we use javascript(js) OR jQuery to validate entered the email at time of submission the html form. So we can follow the following steps to validate it on client side.

\n\n
<script>\n    var emailValidator = {\n        "123.com": true,\n        "123box.net": true,\n        "123india.com": true,\n        …………………….\n        …………………..\n        "ymail.com": true,\n        "yandex.com": true\n    };\n</script>
\n

Our complete list is available here

\n\n
<script>\nfunction validateForm(id) {\n                            var emailValue = jQuery('#'+id).val();\n                            var emailArray = emailValue.split("@");\n                            var provider = emailArray[1] ? emailArray[1] : '';\n                            for(var domain in emailValidator){\n                            if(emailValidator[domain]){\n                                                        if(domain == provider){\n                                                        alert("Please Provide Business Email Address.");\n                                                        return false;\n                                                                        }\n                                                      }\n                           }\n return true;\n}\n</script>
\n\n
<form name="myForm" action="emailsubmit.php" onsubmit="return validateForm('business_email');" method="post">\n    <input type="text" placeholder="Full Name"/><br>\n    <input type="email" id="business_email" name="email" placeholder="Email Address"/><br>\n    <input type="submit" value="submit"/>\n </form>
\n

Note: if you have already have html form where you want to apply this avalidator, look up for the buysiness_email and replace it accordingly.

\n\n

2. Server side

\n

In Server side validation we use php scripting language to validate entered email at time of submission the html form. So we can flow the following steps to validate it.

\n\n
<?php\n$email = isset($_POST[‘email’]) ? trim($_POST[‘email’]):’’;\nif(!empty($email)){\n                 $tempEmail = explode('@', $email);\n                     if (isset($tempEmail['1']) && !empty($tempEmail['1'])) {\n                 $validEmail = json_decode(file_get_contents('freeEmailService.json'), true);\n                     if (is_array($validEmail) && in_array($tempEmail['1'], array_keys($validEmail))) {\n                     echo "Please use business email address.";\n                  }\n                }\n}else{\n                     echo ‘email is required field.’;\n}\n?>
\n\n

Feel free to add, edit or modify this script as per your requirements. You can contact us if you have any queries.

\n","frontmatter":{"date":"April 25, 2017","updated_date":null,"description":null,"title":"Open Source Business Email Validator By Loginradius","tags":["Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.746268656716418,"src":"/static/a657ff09e846d7d100b0fae0ea7714e9/fa668/Open-Source-Business-Validator-By-Loginradius.webp","srcSet":"/static/a657ff09e846d7d100b0fae0ea7714e9/61e93/Open-Source-Business-Validator-By-Loginradius.webp 200w,\n/static/a657ff09e846d7d100b0fae0ea7714e9/fa668/Open-Source-Business-Validator-By-Loginradius.webp 377w","sizes":"(max-width: 377px) 100vw, 377px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best…","fields":{"slug":"/engineering/the-ultimate-guide-to-website-pop-ups/"},"html":"

POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best practices to use popup. While the article discussed how to optimize popup, in this article I am going to list down the types of articles and how you can implement them. I have added codes for every type of popup for a better idea.

\n

1. Creating a basic popup:

\n

\"Creating

\n

This section talks about creating a basic popup using simple HTML and CSS. There is a separate section for header, footer and content. I have also added a close button at top right corner of the popup. There are three steps to create this popup.

\n

A. Add HTML [manage a structure of a popup]

\n
&amp;amp;lt;div class="popup-content"&amp;amp;gt;\n&amp;amp;lt;span class="popup-close"&amp;amp;gt;&amp;amp;amp;times;&amp;amp;lt;/span&amp;amp;gt;\n&amp;amp;lt;div class="popup-header"&amp;amp;gt;Header&amp;amp;lt;/div&amp;amp;gt;\n&amp;amp;lt;div class="popup-body"&amp;amp;gt;\n&amp;amp;lt;p&amp;amp;gt;Your popup code goes here&amp;amp;lt;/p&amp;amp;gt;\n&amp;amp;lt;/div&amp;amp;gt;\n&amp;amp;lt;div class="popup-footer"&amp;amp;gt;Footer&amp;amp;lt;/div&amp;amp;gt;\n&amp;amp;lt;/div&amp;amp;gt;\n&amp;amp;lt;/div&amp;amp;gt;\\
\n

B. Add CSS [Display Like a popup]

\n
&amp;lt;style&amp;gt;\n.popup-layout {\nposition: fixed;\nz-index: 1;\nleft: 0;\ntop: 0;\nwidth: 100% ;\nheight: 100% ;\noverflow: auto;\nbackground-color: rgb(0, 0, 0);\nbackground-color: rgba(0, 0, 0, 0.4);\n}\n.popup-header,\n.popup-footer{\nbackground: #29f;\npadding: 20px;\ncolor: #fff;\nfont-weight: bold;\n}\n.popup-body{\npadding: 20px;\n}\n.popup-content {\nbackground-color: #fefefe;\nmargin: 15% auto;\nborder: 1px solid #888;\nwidth: 60% ;\n}\n.popup-close {\ncolor: #FFF;\nmargin: 10px;\nfloat: right;\nfont-size: 28px;\nfont-weight: bold;\n}\n.popup-close:hover,\n.popup-close:focus {\ncolor: black;\ntext-decoration: none;\ncursor: pointer;\n}\n&amp;lt;/style&amp;gt;
\n

Moreover, you can also check out this tutorial of creating a basic popup if you want to learn the basic understanding.

\n

C. Add Script [for action on close button]

\n
&amp;amp;lt;script&amp;amp;gt;\nvar popup\\_close = document.getElementsByClassName('popup-close');\nfor (var i = 0; i &amp;amp;lt; popup\\_close.length; i++) {\nvar closeThis = popup\\_close\\[i\\];\ncloseThis.addEventListener("click", function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, false);\n}\n&amp;amp;lt;/script&amp;amp;gt;
\n

2. Creating a timer based popup:

\n

\"Creating

\n

This is a timer based popup which can be displayed at a certain time after the page is loaded.

\n

For reference, I have added the code to display the popup after 5 second [Add following code]. Steps are as below.

\n

Follow all the steps mentioned in section 1. (Creating a simple popup) and add the following code below that code.

\n
&amp;amp;lt;script&amp;amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}, 5000);\n&amp;amp;lt;/script&amp;amp;gt;
\n

To Auto hide after 5 second, add following code.

\n
&amp;amp;lt;script&amp;amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, 5000);\n&amp;amp;lt;/script&amp;amp;gt;
\n

3. Creating a Scroll popup:

\n

This one shows up when you scroll down the page. I have set it to 500 pixels, you can change as per requirements

\n
&amp;amp;lt;script&amp;amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop &amp;amp;gt; 500 || document.documentElement.scrollTop &amp;amp;gt; 500) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}\n}\n&amp;amp;lt;/script&amp;amp;gt;
\n

4. Creating a Scroll / Time [5 second] popup:

\n

Pretty much the same as above but this one shows popup after 5 seconds of scrolling .

\n
&amp;amp;lt;script&amp;amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop &amp;amp;gt; 500 || document.documentElement.scrollTop &amp;amp;gt; 500) {\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n},5000 }\n}\n&amp;amp;lt;/script&amp;amp;gt;
\n

5. Creating an Exit popup:

\n

\"Creating

\n

Only confirmation alert popup will show and you can’t make changes in html of this popup. Use following line of code on a single page.

\n
&amp;amp;lt;script&amp;amp;gt;\nwindow.onbeforeunload = function() {\nreturn "You are about to leave"\n}\n&amp;amp;lt;/script&amp;amp;gt;
\n

There is another variation you can make here. In this scenario, if the user moves his cursor beyond the browser screen, you can create a popup to convince the user to stay. Below is the line of code you will need.

\n
&amp;amp;lt;script&amp;amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\ndocument.addEventListener("mouseout", function (event) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n});\n&amp;amp;lt;/script&amp;amp;gt;
\n

So guys, I hope this guide helped you through various types of popups. If you love animating your pop-up, you might want to check out this tutorial of creating an animated CSS pop-up. Do try them and let us know your experiences.

\n","frontmatter":{"date":"April 20, 2017","updated_date":null,"description":null,"title":"Know The Types of Website Popups and How to Create Them","tags":["CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/d404c01e7d4da26cf8ec6404c910921c/5239a/The-Ultimate-guide-to-website-pop-ups.webp","srcSet":"/static/d404c01e7d4da26cf8ec6404c910921c/61e93/The-Ultimate-guide-to-website-pop-ups.webp 200w,\n/static/d404c01e7d4da26cf8ec6404c910921c/1f5c5/The-Ultimate-guide-to-website-pop-ups.webp 400w,\n/static/d404c01e7d4da26cf8ec6404c910921c/5239a/The-Ultimate-guide-to-website-pop-ups.webp 560w","sizes":"(max-width: 560px) 100vw, 560px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"JavaScript or JS helps implement complex things on web pages. Many of the developers know the importance of an minified Javascript file but…","fields":{"slug":"/engineering/16-javascript-hacks-for-optimization/"},"html":"

JavaScript or JS helps implement complex things on web pages. Many of the developers know the importance of an minified Javascript file but few are aware of an Optimized Javascript code.

\n

An optimized code is a combination of smartly programmed logics and small hacks to optimize performance, speed and save time.

\n

Here are sweet 16 JS hacks and tips for developers  for optimizing Javascript to improve JS performance and improve execution time without affecting server resources.

\n

1. Use Array Filter

\n

It is a small hack to filter out bucket of elements from the array pool. This method creates an array filled with all array elements that pass a test (provided as a function). According to requirement create a callback function for non-required elements.

\n

In below example the bucket elements are null and are ready to get filtered out.

\n

Example:

\n
schema = ["hi","ihaveboyfriend",null, null, "goodbye"]\nschema = schema.filter(function(n) {\n return n\n });
\n
Output: ["hi","ihaveboyfriend", "goodbye"]
\n

This hack will save some time and lines of codes for developers.

\n

2. Using String replace function to replace all the values

\n

The String.replace() function allows you to replace strings using String and Regex.

\n

Basically this function replaces the string at its first occurrence. But to replace all using replaceAll() function, use /g at the end of a Regex:

\n

Example:

\n
var string = "login login"; \nconsole.log(string.replace("in", "out")); // "logout login" \nconsole.log(string.replace(/in/g, "out")); //"logout logout"
\n

3. Use breakpoints and Console for Debugging

\n

With the help of breakpoints or debugging points you can set multiple barriers to rectify source of error at every barrier.

\n

\"Use

\n

Press F11 for next call function and f8 to resume script execution.

\n

\"Use

\n

You can also check what dynamic values are generated by a function, using console and can check output on different values.

\n

4. Convert to floating number without killing performance

\n

Often we use math.floor, math.ceil and math.round for eliminating decimals. Instead of using them use “~~” to eliminate decimals for a value.

\n

It is also helpful in increasing performance when it comes to micro optimizations in a code.

\n

Example:

\n
Use\n\n~~ (math.random*100)\n\nInstead of\n\nmath.round(math.random*100)
\n

5. Using length to delete empty in an array

\n

This technique will help you in resizing and emptying an array.

\n

For deleting n elements in an Array, use array.length.

\n
 array.length = n\n\nSee this example:\n\nvar array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.length); // 6 \narray.length = 3; \nconsole.log(array.length); // 3 \nconsole.log(array); // [1,2,3]\n\nFor **emptying array** use\n\narray.length = 0;.
\n

Example:

\n
var array = [1, 2, 3, 4, 5, 6]; \narray.length = 0; \nconsole.log(array.length); // 0 \nconsole.log(array); // []
\n

This technique is mostly preferred over any other methods to resize/unset the array elements and is one of the best javascript practices most of the developers follow.

\n

6. Merging arrays without causing server load

\n

If your requirement is of merging two arrays, use Array.concat() function

\n

For merging two arrays:

\n
var array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.concat(array2)); // [1,2,3,4,5,6];
\n

This function works best for small arrays.

\n

To merge large arrays we use

\n
Array.push.apply(arr1, arr2)
\n

Reason is using Array.concat() function on large arrays will consume lot of memory while creating a separate new array.

\n

In this case, you can use Array.push.apply(arr1, arr2) which instead will merge the second array in the first one, hence reducing the memory usage.

\n

Example:

\n
var array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
\n

It will also optimize the performance of your Javascript code irrespective of size of array.

\n

7. Use splice  to delete array elements

\n

This is probably the one of the best optimization tips for javascript. It optimizes speed of your JS code.

\n

Using splice instead of delete is a good practice, it will save some”null/undefined space” in your code.

\n

The downside of using delete is it will delete the object property, but will not reindex the array or update its length, leaving undefined values. Also it consumes a-lot of time in execution.

\n

Using splice

\n

Example

\n
myArray = ["a", "b", "c", "d"] \nmyArray.splice(0, 2) ["a", "b"]\n\nResult: myArray ["c", "d"]
\n

8. Checking values in an Object

\n

To check whether an object is empty or not,  use

\n
Object.keys(YOUR\\_OBJECT).length \n\n// 0 returns if object is empty
\n

Following code return the number of elements in an Object.

\n

9. Cache the variable

\n

Caching the variable tremendously increase javascript performance.

\n

Everytime we use document.getElementById() or getElementsByClassName(), JS travels through all elements repeatedly upon each similar element request.

\n

In Order to boost performance, cache your selections to some variable (if using the same selection multiple times).

\n

Example:

\n
var cached = document.getElementById('someElement');\ncached.addClass('cached-element');
\n

It is a simple optimization tip with drastic impact on performance, recommended for processing large arrays in loop(s).

\n

Check this link for performance results.

\n

10. Use switch case instead of if/else

\n

Generally switch cases are used over if/else statements to perform almost the same tasks.

\n

The fact that in switch statements  expression to test is only evaluated once, execution time becomes less for the script compared to if/else where for every if , it has to be evaluated.

\n

11. Short-circuits conditionals

\n

Short circuiting  is when a logical operator doesn't evaluate all its arguments.

\n

The code

\n
if (loggedin) { \nwelcome\\_messege();\n }
\n

Make it short by using combination of a verified variable and a function using && (AND operator) in between both.

\n

Now above code can be made in one line

\n
loggedin && welcome\\_messege();
\n

12. Getting the last item in the array

\n

Array.prototype.slice(begin, end) is used to cut arrays when you set the start and end arguments.  But if you don't set the end argument, this function will automatically set the max value for the array.

\n

A smart hack is it can also accept negative values and by setting a negative number as begin argument, you will get the last elements from the array.

\n
var array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.slice(-1)); // [6] \nconsole.log(array.slice(-2)); // [5,6] \nconsole.log(array.slice(-3)); // [4,5,6]
\n

13. Default values using || operator

\n

In JS there is a basic rule of having a default value otherwise process will halt at undefined values.

\n

To provide default value in a variable use || to stay away from this most common issue.

\n
var a = a || 'hello'
\n

The developer must check whether there are any conflicting values that might be passed to the function to avoid Bugs.

\n

14. Beautifying JS code

\n

For beautifying your Javascript  code use jsbeautifier. It formats a clumsy JS code into well structured code.

\n

Code before Beautifying

\n

\"Beautifying

\n

Code after Beautifying

\n

\"Beautifying

\n

15. Checking JS Performance

\n

To check how well a Javascript code is performing and share results use jsperf. It is easiest way to create and share testcases.

\n

16. Online javascript editor

\n

Jsfiddle and jsbin is a tool for experimenting with your Javascript code and other web languages.

\n

It is also a code sharing site. As you type into one of the editor panels the output is generated in real-time in the output panel.

\n

These are some useful hacks and tips for optimizing javascript performance. It is not mandatory to use them all the time because cases and conditions will vary. If you have tricks other than these, do share with us in comment section.

\n","frontmatter":{"date":"April 07, 2017","updated_date":null,"description":"Learn how to optimize performance using some useful javascript hacks, tips and tricks.","title":"Javascript tips and tricks to Optimize Performance","tags":["Engineering","JavaScript","Hacks","Array"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3793103448275863,"src":"/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp","srcSet":"/static/0d6472e55ba0b111b3dfa895ec2dec57/61e93/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 200w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/1f5c5/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 400w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Gone are the days when learning coding or programming was reserved for the geeks or nerds. The case is exactly different nowadays. The…","fields":{"slug":"/engineering/learn-to-code-using-10-websites/"},"html":"

Gone are the days when learning coding or programming was reserved for the geeks or nerds. The case is exactly different nowadays. The latest buzz of “How to code” is here to stay. Making sure that you have little coding knowledge under your belt is proving to be an incredible skill no matter whether you are a marketer or an entrepreneur or a member of any of business team. Talk to any entrepreneur, marketer or freelancer, you will get an idea about learning coding will help you get through. The reasons are more than one! Half of the 2016 is gone, so if you haven’t included this incredible skill in your 2017’s new year resolution, you need to reconsider. Here is why!

\n

Why?

\n

With softwares ruling the digital world, the demand of learning coding is becoming must for every professionals in every field whether it is marketing, technology, commerce, finance and what not. As the digital age is making us more and more dependant on computer softwares for business, learning to code has become helpful here. Learn to code is already in the must have technical skills list of 21st century and this demand of technical skills is growing like never before.

\n

Coding is problem solving. Coding is no different than the way you can fuel up your car, check the oil and get it serviced by reading the manual you are provided with. But coding takes you a long way ahead. It is beyond these simple things. It teaches you to repaint your car, customize the engine to make it work in the way you want. Hope you got an idea why coding is important and why you should also learn it.

\n

You are convinced! Now what?

\n\n

Yeah, yeah, I know this coding thing is not the only factor behind their success (or should I say making them billionaire), but it didn’t hurt either.

\n

But unlike them, most of us were not gifted with this kind of exposure to the digital world and most of us are still naive to how the world of programming works. Many of the people around are still wondering how to write and combine the long string of code to create a beautiful website, app and more! And trust me you are not alone!

\n

But don’t worry because with so many information available online, you can also master the same. No need to spend a lot of money or put yourself in debt in coding learning, as these resources are definitely going to help you to get through this.

\n

10 handful resources to make the process of learning coding easier!

\n

1. Codecademy :

\n

Price - Free but pro-version also available at $19.99/moPro for $19.99/moPro for $19.99/mo

\n

Codecademy - Teaching the world how to code, definitely tops my list while talking about the top resources for how to learn programming. Currently owning around 25 million users, one can start learning as soon as he registers himself on the website. They can learn to design websites with HTML, CSS and also customize it with Javascript.

\n

The courses provided are not lecture style but the students actually get to do hands on coding and witness changes real time. Sims, the owner of Codecademy says that the website allows students to learn the coding by providing preview for every line they write immediately instead of watching an instructor. Apart from that, Codecademy also provides students access to QnA forums and groups to learn on topics like Python, Ruby on Rails, Etsy, etc.

\n

2. W3schools :

\n

Price : Free

\n

W3schools - the largest web developer site, as they define it, provides free tutorials on JavaScript, HTML, CSS, jQuery and what not along with lot of references. So if you want to know what

means, it will quickly show up that “
defines a division or section in HTML document.”

\n

3. Tuts+ :

\n

Price : $15/mo and pro version at $360/year

\n

The website provides tiered subscription plan that allows users to download multiple ebooks too along with the course. The ebook comprises of a huge catalog that comes with different code specifics like Jekyll, Sass, SVG, etc. I should definitely not forget to mention that even professionals can take the ongoing education courses to brush up their programming skills. The website provides learner tutorials in the form of write-ups about various topics.

\n

Price : Free but pro version available at $29/mo

\n

The famous e-learning course provider offers a wide range of courses in several types of programming languages, web tools and designing. The website offers both free as well as paid versions. With free version users can get access to the 10 introductory courses that include topics like SQL, Objective C, jQuery which are great for getting started. While with the paid version, users can get access to 200 videos and 50+ interesting courses. The website basically works on learn, practice, win and track model which means first the users can learn via watching videos and then challenges are placed in front of them to track their learning experience.

\n

5. Khan Academy :

\n

Price : Free

\n

The academy is best for those who prefer short videos to learn things. Started in 2006, by Salman Khan, the idea of this website was generated after creating and sharing video tutorials on Youtube. One of the original e-courses providers, the Khan Academy has become widely popular over the years and offers courses in numerous programming languages, both for beginners as well as experts. Relying heavily on videos, users can learn to code animations, games, drawings and a lot more. For those who are planning to start their coding career, or are beginners at coding, the Khan Academy is the best place.

\n

6. Treehouse :

\n

Price : Free trial for 2 weeks, Basic version at $25/mo and pro version at $50/mo

\n

The online technology courses provider, Treehouse provides programming courses for both beginners as well as experts. The website works on learn, practice and earn model. With 222+ courses, videos, challenges, the website makes sure that the learners are kept busy. Apart from that, it also helps you learn new business strategies to make the best out of your knowledge. But unlike above mentioned options, for this one, you need to spend some cash before you go ahead. The basic version comes at $25/mo with which you get access to around 1000+ videos and can take interesting challenges. While if you go for the pro version at around $50/mo users can unlock the bonus content and download videos to watch offline too.

\n

7. Code.org :

\n

Price : Free

\n

Another player in the field of online coding courses, the website’s mission is to provide more and more people opportunity to learn programming. The website works more like games with drag & drop tiles. Learners can see the code both during challenge as well as when it is completed.

\n

The next three in the list are massive open online courses provider ie MOOC. These websites provide courses related to not only coding but other fields too like life science, engineering, health habits, etc.

\n

8. Coursera :

\n

Price : Both free and paid

\n

Despite of being founded just 4 years ago, Coursera has become a major Major Open Online Courses provider that offers around 1990 courses from 119 well known institutions. Though there are certain programs that require you to spend money to get certified, there are hundred of other free introductory courses that provide specializations from well known universities like University of Toronto and Vanderbilt, etc. One of the widely popular MOOCs provided by Coursera is “Programming for everybody (Getting started with Python)

\n

9. Udemy :

\n

Price : Free to hundreds of dollars

\n

Another MOOC provider, Udemy is one place you can find resources for just anything. It is a great place to develop your coding skills with courses like Complete Java Developer Course. Though the courses fee varies from free to hundreds of dollars, Udemy has created its own position when it comes to learning programming. Another feature that it brings along is to allow user to sign up as an instructor and create his/her own course.

\n

10. edX :

\n

Price : Free

\n

Similar to above, this one is also a MOOC provider, serving millions of students around the globe. But this one is a non profit and open source which means anyone can build his own tools and contribute to the edX platform. Some of the most popular edX course is “Fundamentals of Computer Science” by IIT Bombay. Most of the courses I found here were free, but to get a verified certificate you need to spend some cash which differs between the type of courses you are enrolled with.

\n

Though there are hundreds of other websites that help you to enhance your coding skills, these are the top ten sites I found to be the best. Have you tried any of these? How was your experience? I would love to know about it in the comments below.

\n","frontmatter":{"date":"October 21, 2016","updated_date":null,"description":null,"title":"Learn How To Code Using The 10 Cool Websites","tags":["Courses","Learning Websites"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3605442176870748,"src":"/static/984ce3cc0d4c43ee0925e08cc7b336fc/403a4/How-to-code-using-the-10-cool-websites-768x564-300x220.webp","srcSet":"/static/984ce3cc0d4c43ee0925e08cc7b336fc/61e93/How-to-code-using-the-10-cool-websites-768x564-300x220.webp 200w,\n/static/984ce3cc0d4c43ee0925e08cc7b336fc/403a4/How-to-code-using-the-10-cool-websites-768x564-300x220.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Many of the developers believe that they are immune to the need of marketing/branding themselves. As a developer your job is to create…","fields":{"slug":"/engineering/personal-branding-for-developers/"},"html":"

Many of the developers believe that they are immune to the need of marketing/branding themselves. As a developer your job is to create ultimate applications, right? After all you are not a celebrity or some rockstar! But isn’t it better to be in demand for fruitful consultations, speaking and writing? Well, all this is possible if you are able to create a personal brand!

\n

In this article I am going to focus on why as a developer you should focus on personal branding, how it is going to help your job and career and finally, will guide you on how you can also create a personal brand. First thing first, let’s start with what is personal branding.

\n

What is personal branding?

\n

\"AppleDo you recognize this logo? Well, Of course  you do! But have you ever wondered how come you recognized this logo without even a name? Well, you recognized it because the brand is so strong that without even a proper title, you are able to recognize it and that’s what branding do.

\n

The concept of personal branding is quite similar to that of company branding. Personal branding is all about thinking yourself as a brand. It is about showing people who you are and what is your passion. When you think about some specific programming language, your mind goes back to some specific names associated with that language, who are either the father of that language or have done some amazing work in that field, right?

\n

To get the more clear idea, here is what Paul Irish, the front end developer of Google Chrome team, has to say on the concept of personal branding -

\n

“Personal branding is the art of consistently presenting, online and offline, the essence of how you stand out from the crowd.”

\n

Personal branding is all about you and only you :

\n\n

and more! Personal branding is basically about everything that defines you from the languages you are expertize to the blogs you write.

\n

Why you should focus on personal branding?

\n

Personal branding is no longer an option, but it has become crucial for everyone. After all we are living in the digital world where it is simpler to reach to the next level. So it’s not exactly about being the rockstar but maybe it is. May be it is about becoming popular! May be it is about getting that power. Here I am presenting you three key reasons why personal branding is important for you-

\n
    \n
  1. You are not crucial!
    \nC’mon, no matter how rude that sounds, but you know it is true. The competition is increasing day by day and you know, there are millions of others waiting out there to take your place. So yeah, face it, YOU ARE NOT CRUCIAL! and this gives you one of the key reason to try your hand in personal branding. Let people know what you do and why you are better than others..
    2. \n
  2. \n

    No job is permanent!

    \n
    Another harsh reality! No matter how much your company loves you but you know no job is forever. So be prepared! You don’t know when the situation changes. As a developer personal branding matters when you are looking to change your job. You want your employers to hire you not only as a good developer but also as an innovative leader. To make that possible, you need to cultivate a personal brand that can highlight your value to your potential employers.
    \n
    3. \n
  3. \n

    Sky's the limit!

    \n
    The process of learning has no end. While creating personal brand, you meet many people from your niche. You interact with them, share your knowledge, learn from them, discuss ideas and all this will give you the level of expertise that wouldn’t have been possible otherwise. Doesn’t matter how you want to improve your career, personal branding is the key!
    \n
    4. \n
\n

How to manage your personal brand?

\n

As a developer, breaking through the glass ceiling demands much more than excellent programming skills. Cultivating a strong personal brand can really help you out. GET VISIBILITY is all I want to say!

\n

You might have the best expertise in certain technology, you might have designed an amazing product but all this is meaningless if nobody can see you. Here are some tips on how you can get visibility :

\n
    \n
  1. \n

    Try your hand at blogging :
    \nBlogging is an amazing way to tell people who you are. Blog about anything you hold expertize in, whether it is a programming language or it is some kind of technology, let people understand who you actually are. There are many developers out there who have some awesome technical blogs where they share their knowledge and write about their specialities.For inspiration you can have a look at the blog of John Resig, the creator and founder of jQuery. Another tech blog champion is Scott Hanselman. Make sure to have a look on his popular blogs www.hanselman.com, hanselminutes, etc.

    \n

    \"bloggingStick to one topic, you are best at and select the blogging platform that suits you like Wordpress, Tumblr, Blogspot, etc. Post informative content on regular basis and soon you will have a huge audience waiting for your content and engaging with you. Posting two to three informative blog is enough to keep you in demand. Also there are some specific sites likewww.asp.net where you can submit articles to gain immense popularity.

    \n
    2. \n
  2. \n

    Embrace Social Media :

    \n

    You might have heard that Facebook and Twitter are all about wasting time, but let me tell you this is not at all true. Social media provides you a great opportunity to build networks. It is must to get visibility on various social media networks if you want to be found by people who share same niche as you.
    \n\"social
    \nThere are various ways how you can track your brand on social media. My personal favorite is Google Alert which notifies whenever people are talking about me or my projects. While some times they are talking about the work I have done, sometimes they also complaint which helps me understand where I am wrong. There are many others, like on Twitter, you can use Tweetdeck . Apart from that, create a strong persona on Linkedin, Facebook, Google+, etc. Interact with people, reply to their queries and become social media champion.
    \nSome popular developers who are social media champions as well include Scott Hanselman, John Resig, etc

    \n
    3. \n
  3. \n

    Participate in Communities:

    \n

    Communities like Quora, Stackoverflow, Warrior Forum, etc can be your best friends if you are intending to create brand online. Join these communities and try your best to solve the queries of users from your niche. It will not only help you interact your kind of people but will also improve your problem solving skills. Sites like Stack Overflow, GitHub allow users to work together on projects, that can open a wide opportunity to learn.

    \n
    4. \n
  4. \n

    Contribute to Open source or start Open source :

    \n

    Another great way to cultivate personal brand is to contribute to open source or start open source. While contributing to an open source can be an amazing experience it will earn you recognition among your fellow community. Also you can start open source. If you are getting difficulties to start open source, have a look at this interesting article.

    \n
    5. \n
\n

What I’m trying to say is

\n

Maybe you don’t want to become a rockstar developer or you are happy with your current job, but still there is a huge difference between doing the job and doing the job in excellent way. After all, you have worked hard to be where you are today and you deserve to get recognized for it. So why tomorrow, start now and reach the next step.

\n","frontmatter":{"date":"September 23, 2016","updated_date":null,"description":null,"title":"Personal Branding For Developers: Why and How?","tags":["Branding"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/cb6590bb3c439f5b33ab6c250865863c/e7487/Personal-Branding-For-Developers-150x150.webp","srcSet":"/static/cb6590bb3c439f5b33ab6c250865863c/e7487/Personal-Branding-For-Developers-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Sreekant","github":null,"avatar":null}}}},{"node":{"excerpt":"I often come across people and clients who would like to build their custom login, registration, and lost password form in WordPress instead…","fields":{"slug":"/engineering/wordpress-custom-login-form-part-1/"},"html":"

I often come across people and clients who would like to build their custom login, registration, and lost password form in WordPress instead of using the default wp-login.php page. It's probably because it's too wordpress-y.

\n

In this tutorial, I will demonstrate how to build a custom login form using the default functionality that wordpress gives us.

\n\n

Building a WordPress Login Form (Out of the box)

\n

This is what WordPress gives us out of the box.

\n

\"wp-login\"
\nThere are quite a few different options available to make a custom login page. You can build a shortcode so that you could simply put [wp-login] or something you like on any page/post, make a page theme file and use that page to attach to a post/page, a widget could be a good solution too, or maybe you'd like to simply edit the existing form and add some pizzazz to it.

\n

I am going to show you all of this tutorial using the page-theme method because it is probably the easiest to implement for beginners. This will also give you an intro into page themes, if your not familiar with it.

\n

To start our theme, you will need to do the following:

\n
    \n
  1. Install WordPress
    2. \n
  2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one
    3. \n
  3. create a file called page-login.php in the theme directory
    4. \n
  4. Next open that file with a text editor of your choosing and add the following at the top of the php file.
    5. \n
\n
&amp;amp;amp;lt;?php\n/*\nTemplate Name: Login\n*/\n \nget_header(); ?&amp;amp;amp;gt;\n \n&amp;amp;amp;lt;div id="primary" class="content-area"&amp;amp;amp;gt;\n&amp;amp;amp;lt;div id="content" class="site-content" role="main"&amp;amp;amp;gt;\n \n&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;!-- #content --&amp;amp;gt;\n&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;!-- #primary --&amp;amp;gt;\n \n&amp;amp;amp;lt;?php get_sidebar(); ?&amp;amp;amp;gt;\n&amp;amp;amp;lt;?php get_footer(); ?&amp;amp;amp;gt;
\n

To initialize this page template, make sure to activate the theme you've selected in \"Appearance/Themes\" in your admin dashboard and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template under \"Page Attributes\". Change your template to \"Login\" or to the name that you specified in \"Template Name:\" and that will attach that page theme to this page/post.

\n

Now we're ready to start editing this page-login.php template file. So first open this file in your favorite editor and Let's get a login page started.

\n

To quickly show you how to get this login on the page Let's paste the following code between the div with id of content.

\n
&amp;amp;amp;lt;div id="primary" class="content-area"&amp;amp;amp;gt;\n&amp;amp;amp;lt;div id="content" class="site-content" role="main"&amp;amp;amp;gt;\n&amp;amp;amp;lt;?php wp_login_form(); ?&amp;amp;amp;gt;\n&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;!-- #content --&amp;amp;gt;\n&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;!-- #primary --&amp;amp;gt;
\n

Look at what that small piece of code do

\n

\"custom-login\"

\n

Now we need to set some arguments that we can provide to this form to customize it. Let's take a look at the documentation for wploginform()

\n

In that document, it explains all the uses and arguments of wploginform(). Let's use those arguments section and see what happens. Paste the $args section shown in the wordpress doc right above our login form.

\n
&amp;amp;amp;lt;?php $args = array(\n'echo' =&amp;amp;amp;gt; true,\n'redirect' =&amp;amp;amp;gt; ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],\n'form_id' =&amp;amp;amp;gt; 'loginform',\n'label_username' =&amp;amp;amp;gt; __( 'Username' ),\n'label_password' =&amp;amp;amp;gt; __( 'Password' ),\n'label_remember' =&amp;amp;amp;gt; __( 'Remember Me' ),\n'label_log_in' =&amp;amp;amp;gt; __( 'Log In' ),\n'id_username' =&amp;amp;amp;gt; 'user_login',\n'id_password' =&amp;amp;amp;gt; 'user_pass',\n'id_remember' =&amp;amp;amp;gt; 'rememberme',\n'id_submit' =&amp;amp;amp;gt; 'wp-submit',\n'remember' =&amp;amp;amp;gt; true,\n'value_username' =&amp;amp;amp;gt; '',\n'value_remember' =&amp;amp;amp;gt; false\n); ?&amp;amp;amp;gt;\n&amp;amp;amp;lt;?php wp_login_form( $args ); ?&amp;amp;amp;gt;
\n

It will look the same as the one we did earlier but, by customizing the arguments above, you can customize elements of the login form.

\n

Handling the login form response (Custom)

\n

To handle the Login Form response we need to grab the $_POST parameters and login the user. You can create this as complex as you like, but I will demonstrate a simpler but effective method.

\n

For this action, we'll be using the aftersetuptheme and wp_authenticate. I have added the following two functions within the functions.php file. The first function optionalemailaddress_login searches for a users email address based on their username, with this functionality you can log in using your email address or the username.

\n

The second function, login_user, handles the actual functionality of the login by receiving the $POST parameters and passing them into the wpsignon method.

\n
/**\n* optional_email_address_login allows the user\n* to log in with a email address as well as a username\n* @param string &amp;amp;amp;$username username or email\n* @param string &amp;amp;amp;$password password\n*/\nfunction optional_email_address_login( &amp;amp;amp;$username, &amp;amp;amp;$password ) {\n$user = get_user_by( 'email', $username );\nif ( ! empty( $user-&amp;amp;amp;gt;user_login ) )\n{\n$username = $user-&amp;amp;amp;gt;user_login;\n}\n}\n// Allows the use of email logins\nadd_action( 'wp_authenticate', 'optional_email_address_login', 1, 2 );\n \n/**\n* login_user handles the $_POST array and logs in users\n*/\nfunction login_user() {\nif ( ! is_user_logged_in() ) {\n$creds = array();\n$creds['user_login'] = isset( $_POST['log'] ) ? $_POST['log'] : '';\n$creds['user_password'] = isset( $_POST['pwd'] ) ? $_POST['pwd'] : '';\n$creds['remember'] = isset( $_POST['rememberme'] ) ? true : false;\n$user = wp_signon( $creds, false );\n \nif ( is_wp_error( $user ) ) {\nerror_log( $user-&amp;amp;amp;gt;get_error_message() );\n}\n}\n}\n// Run login_user before headers and cookies are sent\nadd_action( 'after_setup_theme', 'login_user' );
\n

In this example I have used the default WordPress login form that you could customize and style to your desire. In the next blog, I will be demonstrating how to build a login form that is fully customized. We won’t be using the provided wordpress functions!

\n","frontmatter":{"date":"March 01, 2016","updated_date":null,"description":null,"title":"Wordpress Custom Login Form Part 1","tags":["WordPress","Learning"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d7e167a0f378c80cdc10b3b3d49b0825/e7487/wordpress-icon-150x1501-150x150.webp","srcSet":"/static/d7e167a0f378c80cdc10b3b3d49b0825/e7487/wordpress-icon-150x1501-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zoie Carnegie","github":null,"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
    • LoginRadius returns an access token (JWT) and, optionally, a refresh token.
      • \n
    \n
    2. \n
  2. \n

    Client Stores the Token

    \n
      \n
    • Access tokens are stored in memory, sessionStorage, or secure cookies.
      • \n
    • They’re sent on every request via the Authorization: Bearer header.
      • \n
    \n
    3. \n
  3. \n

    Access Token Expiry

    \n
      \n
    • These tokens are short-lived by design (e.g., 15–30 minutes).
      • \n
    • Once expired, the client can use the refresh token to request a new access token.
      • \n
    \n
    4. \n
  4. \n

    Token Renewal

    \n
      \n
    • LoginRadius validates the refresh token and issues a new JWT, i.e., no user re-authentication is needed.
      • \n
    • Refresh tokens can be revoked at any time.
      • \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":252,"currentPage":43,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}