{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/51","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"With Information Technology becoming more and more Cloud based nowadays (due to industry demanding reliability and scalability in their…","fields":{"slug":"/engineering/cloud-storage-vs-traditional-storage/"},"html":"

With Information Technology becoming more and more Cloud based nowadays (due to industry demanding reliability and scalability in their infrastructure), the Cloud storage system has become a very feasible solution. Various organizations are migrating their data to cloud storage, due to a few simple reasons. They want data to be easily accessible, cost effective and reliable.

\n

**How is Cloud storage better than any traditional  data storage**

\n\n

**Use Case**

\n

LoginRadius identity storage provides the above solution, LoginRadius is managing its infrastructure on the cloud and has never experienced data breaches or down-times. Infrastructure that makes sure you retain certain vital attributes in the storage is critical, this necessitates your user's identities being stored in an extremely reliable system such as is implemented with LoginRadius identity storage. Utilizing some extremely robust cloud storage providers(Microsoft Azure) LoginRadius offers top of the line availability and reliability of user data.

\n","frontmatter":{"date":"April 21, 2015","updated_date":null,"description":null,"title":"Cloud storage vs Traditional storage","tags":["Cloud","Storage"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/ec860aadce60db7e207314a0453a6853/7fbdd/cloud-vs-traditional-storage-1.webp","srcSet":"/static/ec860aadce60db7e207314a0453a6853/61e93/cloud-vs-traditional-storage-1.webp 200w,\n/static/ec860aadce60db7e207314a0453a6853/1f5c5/cloud-vs-traditional-storage-1.webp 400w,\n/static/ec860aadce60db7e207314a0453a6853/7fbdd/cloud-vs-traditional-storage-1.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and…","fields":{"slug":"/engineering/getting-started-phonegap/"},"html":"

PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and quickly generate out various mobile compatible apps. This prevents your developers from having to learn and understand multiple platform specific languages and instead use the PhoneGap framework which is based in HTML to create the app and then generate it into any one of the following platforms:

\n
    \n
  1. iOS
    2. \n
  2. Android
    3. \n
  3. Windows Phone
    4. \n
  4. Windows
    5. \n
  5. Firefox OS
    6. \n
  6. Amazon Fire OS
    7. \n
  7. Blackberry
    8. \n
\n

With time saved on learning development languages for the above platforms your team can focus on the features of your app.

\n

Setting up your Environment

\n
    \n
  1. Download and install node.js, This will be used to install the Cordova/PhoneGap framework.
    2. \n
  2. Download and install a Git Client, This is used by the Cordova/PhoneGap framework when creating projects.
    3. \n
  3. Open command prompt and verify that both of the above systems have been installed by running npm and git.
    4. \n
  4. Install the Cordova/PhoneGap system by running the following command in your command prompt (Note: this may take a few minutes)
    5. \n
\n
C:\\>npm install -g cordova
\n

Verify your installation of Cordova/PhoneGap by running cordova in command prompt. This should display a list of the available Cordova commands.

\n

Setting up your Project

\n
    \n
  1. Create a directory which will contain your PhoneGap/Cordova project code.
    2. \n
  2. Open the created directory in command line and create a project with the command cordova create < sitename >
    3. \n
\n
C:\\>rootdir\\cordova create FirstSite
\n
    \n
  1. \n

    This will create a project in the root folder with the specified site-name. This project will contain:

    \n
      \n
    1. \"hooks\" directory- Contains special scripts that can be used to customize Cordova commands.
      2. \n
    2. \"platforms\" directory- This contains the app specific projects that you will include below.
      3. \n
    3. \"plugins\" directory- Contains add-on code for interfacing with native features. You can create your own custom interface or use one of pre-compiled plugins.
      4. \n
    4. \"www\" directory- Contains the PhoneGap/Cordova structure and some standard js and css files.
      5. \n
    5. config.xml file- This file contains meta data for controlling common features of your apps like the app title, description and author.
      6. \n
    \n
    2. \n
  2. \n

    Add platforms to the project with the cordova platform add command. Note: adding platforms requires that the relevant dependencies are installed in your system for example adding android requires that you have installed the Android SDK. Available platforms for a windows environment are:

    \n\n

    And for Mac:

    \n\n
    C:\\>rootdir\\cordova platform add android
    \n
    3. \n
  3. \n

     You can now get a list of the added platforms by running the following command:

    \n
    C:\\>rootdir\\cordova platform ls
    \n
    4. \n
  4. \n

    You can remove a specific platform from the list with the following command:

    \n
    C:\\>rootdir\\cordova platform remove android
    \n
    5. \n
  5. Once you have added in the desired platforms build the platform specific apps by running the following command:
    6. \n
\n

Note: Building platforms requires that the relevant dependencies are installed in your system for example building android requires that you have installed the Android SDK

\n
C:\\>rootdir\\cordova build
\n
    \n
  1. You can use these built projects found in the \"platforms\" directory in platform specific IDEs or emulate the projects directly with the following command:
    2. \n
\n
C:\\>rootdir\\cordova emulate android
\n

At this point you have a basic PhoneGap project configured and your desired platforms added and you can get started with adding or building out additional features and content in the \"www\" directory and run the command in step 7 above to create the platform specific projects. You can find detailed instructions on setting up additional features and implementing PhoneGap on the PhoneGap site.

\n","frontmatter":{"date":"March 31, 2015","updated_date":null,"description":null,"title":"Getting Started with Phonegap","tags":["Engineering","PhoneGap","Mobile"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/02771814b93eac090637b118855c7008/22f90/dev-sprites2.webp","srcSet":"/static/02771814b93eac090637b118855c7008/61e93/dev-sprites2.webp 200w,\n/static/02771814b93eac090637b118855c7008/1f5c5/dev-sprites2.webp 400w,\n/static/02771814b93eac090637b118855c7008/22f90/dev-sprites2.webp 580w","sizes":"(max-width: 580px) 100vw, 580px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a  popup by Zoie Carnegie. If not, you…","fields":{"slug":"/engineering/animating-simple-css-popup-tutorial/"},"html":"

By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a  popup by Zoie Carnegie. If not, you can click this link to go and follow that tutorial. Cool?

\n

Once you’re done creating your css popup. We’re now going to animate it with CSS3. Why? because we’re tired of seeing things that just pop onto users screen and you don’t know where it came from. Also, to make it fun for your users. Let's get started.

\n

First things first. CSS3 animations don't work on \"display: none\" or \"block\". So, we need to modify Zoie's code to not do that and just simply add and remove the relevant class.

\n
// Close Popup Event\nclosePopup.onclick = function() {\n    overlay.className = ''; /*This removes all classes, use at your own risk*/\n    popup.className = ''; /*This removes all classes, use at your own risk*/\n};\n// Show Overlay and Popup\nbutton.onclick = function() {\n    overlay.className = 'show';\n    popup.className = 'show';\n}
\n

We need to modify the CSS too.

\n
#popup {\n  visibility: hidden;\n  opacity: 0;\n  z-index: -1; /*hide it in the back of the page*/\n}\n#overlay {\n  visibility: hidden;\n  opacity: 0;\n  z-index: -1; /*hide it in the back of the page*/\n}
\n

Now, why did I do that? Since, we can't use display: none, we need to find a way to hide it differently. CSS3 animation works perfectly with \"visibility: hidden\", \"opacity\" and \"z-index\". I know it's a bit more CSS but, I assure you that it's worth it.

\n

Slide Down

\n

Let's start with a simple one. Sliding them pops, yo!

\n
/*Add defaults*/\n#popup {\n  top: -50%; /*Put it on the very top*/\n  transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n   top: 50%; /*slide it down smoothly*/\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

The \"top: -50%\" will push our pop-up outside while \"top: 50%\" will bring it back to the center. Now, combine it with a CSS transition and it will gracefully slide down along with the fading effect of opacity. Pretty neat huh? How about making it pop up from the center of the page? I mean it's called \"pop-up\" for a reason right?

\n

We can achieve that effect by using the same code we made earlier. Just change the \"top: -50%\" to \"transform: scale(0)\". This will scale our beloved pop-up to a small size. The showing it part will have to change too. Same as the default, change the \"top: 50%\" to \"transform: scale(1)\". This will then scale it back to original size.

\n
/*Add defaults*/\n#popup {\n  transform: scale(0) /*scale it to a smaller size*/\n  transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n  transform: scale(1) /*scale it to a default size*/\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Want to try something different than that? I got your back.

\n

Swirly Pop

\n

Have you heard of CSS keyframes? We're going to use that to achieve what we want. I just want to say first that CSS keyframes do not work on older browsers like IE8 and IE9. Use this trick at your own risk.

\n

The keyframes code looks like this

\n
@keyframes pop-swirl {\n  0% {\n    transform: scale(0) rotate(360deg);\n  }\n  60% {\n    transform: scale(0.8) rotate(-10deg);\n  }\n  100% {\n    transform: scale(1) rotate(0deg);\n  }\n}
\n

The word \"pop-swirl\" is the variable we need to call later on to trigger that animation or keyframe. You can name this to whatever you want, there are no restrictions. The animation works by specifying your start and end points. There's 2 ways you can do that, either by using \"from\" and \"to\" or \"0%\" to \"100%\". I prefer the 2nd way because you can add like 100 keyframes to it.

\n

Calling that code will need the help of an \"animation\" tag. This is like a transition but more advanced. I also like to point out that right now, It's not fully supported yet but you can still use it by appending your vendor prefix like \"-webkit-\". Like this...

\n
\\-webkit-animation: pop-swirl 1s ease forwards;
\n

Let's break this down

\n

-webkit- = Vendor prefix.
\nanimation = Used to call the keyframes.
\npop-swirl = The variable we used on keyframes.
\n1s = Duration of animation.
\nease = Timing function. This can also make the animation smoother.
\nforwards = This is the animation play state.

\n

Using the same method as Slide Down and Pop In. We just need to remove top or transform tags and add the animation tag in it.

\n
/*Don't need the defaults*/\n/*Now show it*/\n#popup.show {\n  -webkit-animation: pop-swirl 1s ease forwards; /*trigger the keyframe*/\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Bonus!

\n

The Anvil Effect

\n

Let's shock your screen with this heavy pop-up. You can achieve the anvil effect by using this code.

\n
@keyframes anvil {\n  0% {\n    transform: scale(5) rotate(0);\n    opacity: 0;\n    box-shadow: 0 0 0 rgba(241, 241, 241, 0);\n  }\n  50% {\n    transform: scale(1) rotate(-0.2deg);\n    opacity: 1;\n    box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);\n  }\n  75% {\n    transform: scale(1) rotate(0.2deg);\n    opacity: 1;\n    box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);\n  }\n  100% {\n    transform: scale(1) rotate(0);\n    opacity: 1;\n    box-shadow: 0 0 500px rgba(241, 241, 241, 0);\n  }\n}\n#popup[data-pop="anvil"].show {\n  -webkit-animation: anvil 1s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n}\n#popup[data-pop="anvil"].show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Of course a tutorial won't be complete without a demo.

\n

Slide Down Demo Pop In Demo Pop Swirl Demo Anvil Demo

\n

And there you have it. A little something to spice up your pop-up game. I hope this helps you woo your users and entertain them. Until next time. Cheers.

\n","frontmatter":{"date":"March 23, 2015","updated_date":null,"description":"Learn how to animate the modal popup using CSS keyframe","title":"Animate the modal popup using CSS","tags":["Slide","CSS","Swirl","PopUp"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fd58cd8b2750bcda4251057bf96d6b25/ad85c/simplepop.webp","srcSet":"/static/fd58cd8b2750bcda4251057bf96d6b25/61e93/simplepop.webp 200w,\n/static/fd58cd8b2750bcda4251057bf96d6b25/1f5c5/simplepop.webp 400w,\n/static/fd58cd8b2750bcda4251057bf96d6b25/ad85c/simplepop.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that…","fields":{"slug":"/engineering/css-responsive-grid/"},"html":"

I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that's the problem, \"automatically\". That means you have no control over it when it messes things up. Even if you do, you might mess things up for other stuff too.

\n

This is why controlling your own code is better than letting other apps do it. Just like what my mentor said, \"Don't let the apps write your own code, they screw it up\".

\n

Let's get started

\n

Let's make a responsive grid without using any crazy percentages or complicated margins. Sounds cool? Good.

\n

By now you know how complicated it is to calculate all the width and margins to make sure they correspond with each other. Not to mention that you need to use percentages on both of them which sometimes doesn't work, especially with our friend IE8.

\n

What if we create a grid that doesn't need margins for spacing? Or using percentages to separate objects? Sounds awesome right? No more calculating for the right percentages and getting crazy numbers.

\n

Let's start with 4 grids first. So 100 / 4 = 25 then add a percentage (%) sign and we get 25% for our 4 grid system. No crazy numbers there, but we need spacing. To add spaces between those elements just add padding on left and right. Pixels or percent, it's up to you. Yes, yes, padding adds width but, if you add \"box-sizing: border box\" on our lovely grid, the padding will start respecting your decision to add a width of 25% and start pushing everything inside.

\n

\"grid\"

\n

There you have it, Spacing. By now your CSS code will look like this.

\n
div {\n    width: 25%;/*4 grid system*/\n    padding: 0 5px;/*spacing*/\n    box-sizing: border-box;/*removes the added with from padding*/\n    float: left; /*put them side by side*/\n}
\n

Problem

\n

Of course, there's no perfect code. Since we're using padding on both left and right. you'll see some spacing too on the left and right side of your website. For example, I used 5px padding. That means I will have a 5px offset on the left and right side of my screen. It doesn't align with my site anymore.

\n

Solution

\n

To tackle this problem we need to add a margin on the parent of our grid. Since my padding is 5px, I need to add a -5px margin on left and right to stretch it back to it's intended size. So our code will look like this now.

\n
parent {\n    margin: 0 -5px;\n}\nparent div {\n    width: 25%;/*4 grid system*/\n    padding: 0 5px;/*spacing*/\n    box-sizing: border-box;/*removes the added with from padding*/\n    float: left; /*put them side by side*/\n}
\n

 I'd like to also point out that if your parent has a width (which it doesn't really need because our grid css will add a width to the parent), the negative margins won't work. So, be careful.

\n

Another thing to watch out for, because we're using floats, we will also need to use a clearfix hack on our parent.

\n

Using the simple code we learned today will create all the grids you want.

\n

1 = 100%
\n2 = 50%
\n3 = 33.33%
\n4 = 25%
\n5 = 20%
\n6 = 16.66%
\n7 = 14.28%
\n8 = 12.5%
\n9 = 11.11%
\n10 = 10%

\n

and so on.

\n

See it on codepen.

\n

And this is where it ends. I hope this will help you easily create a grid in the near future. If you have any other tips, leave it in the comments and I'll be happy to try it out. Cheers.

\n","frontmatter":{"date":"March 16, 2015","updated_date":null,"description":null,"title":"CSS Responsive Grid, Re-imagined","tags":["CSS","Grid","Responsive"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"What are they? cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is…","fields":{"slug":"/engineering/intro-curl-fsockopen/"},"html":"

What are they?

\n

cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is included in PHP and cURL is a library that can be installed on a server or utilized on many different platforms.

\n

Example:

\n

cURL-

\n
<!---->
\n

Fsock-

\n
<!--<?php\n$fp = fsockopen("www.example.com", 80, $errno, $errstr, 30);\nif (!$fp) {\n    echo "$errstr ($errno)\\n";\n} else {\n    $out = "GET / HTTP/1.1\\r\\n";\n    $out .= 'Host: www.example.com\\r\\n';\n    $out .= "Connection: Close\\r\\n\\r\\n";\n    fwrite($fp, $out);\n    while (!feof($fp)) {\n        echo fgets($fp, 128);\n    }\n    fclose($fp);\n}\n?>-->
\n

How to check if you have cURL enabled

\n

Run phpinfo() to see if cURL is enabled on your server then navigate to the cURL section. You will see the setting cURL support - enabled or disabled.

\n

Or use the php script below to create a curl_check.php file

\n
<!--<?php\n// Script to test if the cURL extension is installed on this server\n// Define function to test\nfunction _is_curl_installed() {\n    if (in_array('curl', get_loaded_extensions())) {\n        return true;\n    }\n    else {\n        return false;\n    }\n}\n// Output text to user based on test\nif (_is_curl_installed()) {\n    echo 'cURL is installed on this server';\n} else {\n    echo 'cURL is NOT installed on this server';\n}\n?>-->
\n

After saving this file as curl_check.php load it on a server installed with PHP and run the path yourpath/curl_check.php you will see a message shown that notifies you if cURL is enabled or disabled

\n

Check if fsockopen function exists

\n
<!---->
\n

Normally, by default your server will have cURL enabled and ready to use on your server. It is the most commonly used method to communicate to different types of servers. If you're ever having a problem communicating with a server run one of the above checks to verify your cURL and Fsock is working correctly.

\n","frontmatter":{"date":"March 09, 2015","updated_date":null,"description":null,"title":"An Intro to Curl & Fsockopen","tags":["curl","Fsock"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/60c66ca2257d555ebf5e86ccaa6d56c8/403a4/fsock-and-curl.webp","srcSet":"/static/60c66ca2257d555ebf5e86ccaa6d56c8/61e93/fsock-and-curl.webp 200w,\n/static/60c66ca2257d555ebf5e86ccaa6d56c8/403a4/fsock-and-curl.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing…","fields":{"slug":"/engineering/enqueuing-scripts-wordpress/"},"html":"

In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing process for new WordPress developers.

\n

There are three different areas that a developer can enqueue scripts for; the first is the client side, the second is the admin side and the third is the login pages.

\n

Each of these areas uses a specific hook to enqueue scripts to use in that area. For example, if a script was enqueued using the login_enqueue_scripts hook that script would not be loaded in the admin area. This allows WordPress to load only the scripts needed for that specific section. Optimization!

\n

When you don’t enqueue scripts using these hooks and instead use the <script> tag, it can cause the script to be loaded every time you load the site, admin area or login page. This can cause conflicts with other scripts, plugins or themes. WordPress takes care of these problems when you use the hooks intended.

\n

An example of the three enqueuing hooks are below:

\n

wp_enqueue_scripts hook – Front End

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
\n

admin_enqueue_scripts hook – Admin area

\n
function load_custom_wp_admin_style() {\n    wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );\n    wp_enqueue_style( 'custom_wp_admin_css' );\n}\nfunction my_enqueue($hook) {\n    if ( 'edit.php' != $hook ) {\n        return;\n    }\n    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );\n}\nadd_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );\nadd_action( 'admin_enqueue_scripts', 'my_enqueue' );
\n

login_enqueue_scripts hook – Login pages

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_style', 10 );\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_script', 1 );
\n

If you are calling the same script in many different areas you can register the script or stylesheet first and then use it when needed in your plugin. In the above examples you’ll notice the function being called is enqueuing a script or a style only and not registering a script or a style. When you register first it allows that script or style to be called in the area it was registered in when you enqueue it. Here’s an example of registering scripts first.

\n
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_scripts' );\nfunction my_plugin_admin_scripts() {\n    /* Register our script. */\n    wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );\n    wp_enqueue_script( 'my-plugin-script');\n}
\n

In the example above you can see first I have registered the script then used wp_enqueue_script to enqueue it. You don’t need to enqueue the script directly after registering as a practice, however after registering the script you can enqueue it on pages you require it. If you have registered the script or style using wp_enqueue_scripts it will only be available on the front end of your site and not the admin pages or the login pages.

\n","frontmatter":{"date":"March 02, 2015","updated_date":null,"description":null,"title":"Enqueuing Scripts in WordPress","tags":["WordPress","PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4e9051d7a28e019245372bfa4f533083/e557c/wordpress.webp","srcSet":"/static/4e9051d7a28e019245372bfa4f533083/61e93/wordpress.webp 200w,\n/static/4e9051d7a28e019245372bfa4f533083/1f5c5/wordpress.webp 400w,\n/static/4e9051d7a28e019245372bfa4f533083/e557c/wordpress.webp 750w","sizes":"(max-width: 750px) 100vw, 750px"}}},"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
    2. \n
  2. \n

    Client Stores the Token

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

    Access Token Expiry

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

    Token Renewal

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

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

\n\n

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

\n

\"illustration

\n

How to Store JWT Tokens?

\n

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

\n

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

\n\n

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

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

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

Conclusion

\n

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

\n

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

\n

FAQs

\n

1. What is JWT authentication used for?

\n

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

\n

2. How does LoginRadius simplify JWT integration?

\n

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

\n

3. Is JWT authentication secure?

\n

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

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

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

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