{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/48","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon…","fields":{"slug":"/engineering/social-network-branding-guidelines/"},"html":"

I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon color to green. But, hey at least you didn’t distort the logo.

\n

Hello and welcome to another segment of me telling you things that you need to know but will ignore at some point. Let’s get started.

\n

Social Login and Social Sharing are everywhere. Some people even combine it with with their User Registration. There’s no surprise that on every website you go to, you’ll see either well designed social icons or just plain ugliness. We can’t blame them, they want their icons to be unique and eye catching.

\n

\"1\"Beauty!

\n

But, the universe is full of holes inside an “A” whom sometimes destroy a thing of beauty.

\n

\"2\"Just. Stop!

\n

Then there’s the “I use my own brand color” kind of people.

\n

\"3\"

\n

So, what’s happening here? What’s the orange f? Does that stands for forangebook? *badum tsss* I’ll see myself out.

\n

Changing the branding color is a big no no for them. You’ll be surprised how strict those social branding guidelines can be. Yet, we still violate them.

\n

One thing we need to realize is, we don’t own these icons. The companies still own them. So, for your convenience I searched the interwebs to gather most of the things you need to remember for social network branding guidelines.

\n

Let’s start with the most used social network, Facebook and their “ f ” logo. They’re pretty straightforward, as long as you don’t modify the “ f ” logo’s design and color, you’re good to go. To simplify this more; don’t make the facebook logo look like it’s been scratched by a chicken and made it bleed too much that it turns red.

\n

\"4\"

\n

Quick, somebody call 911!

\n

Twitter branding is a little bit complicated. Probably because they had multiple drastic changes in their logo design.

\n

\"5\" Nonetheless, it’s simple.

\n\n

On Google+ (yes “ + “ not “plus“), they prefer that you don’t change or remake their icon. But if you must, you can style it to match your design, as long as you don’t...

\n\n

If you’re using the icon with the title, You should use “Google” without the plus (word and sign), because… well… that’s redundant.

\n

LinkedIn is kind of ridiculous with their branding guidelines. They still have the same drill with no distorting or changing the color and so forth. But there’s one thing you won’t expect, you cannot change the radius or the box. \"6\"

\n

We’re all going to LinkedIn Jail!

\n

Keep it to a minimal radius, like 2px. That means no circle, square, iOS style rounded icons — hold the phone, did LinkedIn just violate their own branding guidelines? Tsk tsk, LinkedIn. Breaking your own rules, eh?

\n

What about the other 30+ social icons? Well, by now you’ve probably seen the pattern here. No? Well, let me break it down for you.

\n\n

But, who am I to tell you what to do? Just do what makes you happy and hope to god they don’t catch you. Keep in mind too that these branding guidelines are part of your user experience and affect your users impression of the site.

\n

Let me know in the comments if there’s a specific guideline that I miss.

\n","frontmatter":{"date":"September 08, 2015","updated_date":null,"description":null,"title":"Social Network Branding Guidelines","tags":["Social","SocialLogin","Branding"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/63460374fc13a4962cd40dfa765485b1/403a4/social-network-branding-300x300.webp","srcSet":"/static/63460374fc13a4962cd40dfa765485b1/61e93/social-network-branding-300x300.webp 200w,\n/static/63460374fc13a4962cd40dfa765485b1/403a4/social-network-branding-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database…","fields":{"slug":"/engineering/index-in-mongodb/"},"html":"

 Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database system. This article gives insight about the index in MongoDB, for query optimization.

\n

Index in Mongo:

\n

Default

\n

_id is an ObjectId object, 12-byte BSON type that guarantees uniqueness within the collection. The ObjectId is generated based on timestamp, machine ID, process ID, and a process-local incremental counter.

\n

Single Field

\n

For a single-field index and sort operations, the sort order (i.e. ascending or descending) of the index key does not matter because MongoDB can traverse the index in either direction. The value of index is the type of index. For example, 1 indicates ascending order and -1 specifies the descending order.

\n
db.friends.createIndex( { "name" : 1 } )
\n

\n

Compound Field

\n

The order of fields listed in a compound index has significance. For instance, if a compound index consists of { userid: 1, score: -1 }, the index sorts first by userid and then, within each userid value, sorts by score.

\n
db.products.createIndex( { "item": 1, "stock": 1 } )
\n

\n

Multiple Key

\n

MongoDB uses multiple index to index the content in an array. MongoDB creates separate index entries for every element of the array. You do not need explicitly create multiple key.

\n

Text Index

\n

A collection can have at most one text index.
\nPerformance cost for text index:
\ntext indexes can be large. They contain one index entry for each unique post-stemmed word in each indexed field for each document inserted.
\ntext indexes will impact insertion throughput because MongoDB must add an index entry for each unique post-stemmed word in each indexed field of each new source document.

\n
db.reviews.createIndex( { comments: "text" } )
\n

Hash index

\n

Query content by its hashed value. The hash is a function to computed by its value. The hashed value is designed to be distinct value. The one advantage is it is so quick, which take O(1) at most but by contract the normal binary search tree will take O(Log(N)). Hash will be theoretically quicker than normal binary search tree implementation. But the disadvantage is hash index performing range search will be extremely slowly than normal index.

\n

This an example in python to build a hash index

\n
db.active.createIndex( { a: "hashed" } )
\n","frontmatter":{"date":"September 01, 2015","updated_date":null,"description":null,"title":"Index in MongoDB","tags":["MongoDB","Database"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e5befb74a597194f6d10cdce76d28a00/58556/mongo-db-index1.webp","srcSet":"/static/e5befb74a597194f6d10cdce76d28a00/61e93/mongo-db-index1.webp 200w,\n/static/e5befb74a597194f6d10cdce76d28a00/1f5c5/mongo-db-index1.webp 400w,\n/static/e5befb74a597194f6d10cdce76d28a00/58556/mongo-db-index1.webp 800w,\n/static/e5befb74a597194f6d10cdce76d28a00/99238/mongo-db-index1.webp 1200w,\n/static/e5befb74a597194f6d10cdce76d28a00/b40dc/mongo-db-index1.webp 1278w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mark Duan","github":null,"avatar":null}}}},{"node":{"excerpt":"Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element…","fields":{"slug":"/engineering/ab-use-css2-sibling-selectors/"},"html":"

Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.

\n

I’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.

\n

What are sibling selectors.

\n

Sibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).

\n

Squiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.

\n

Great, give me the deets.

\n

\"lr-home\"

\n

Have you ever seen our support docs?

\n

Would you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.

\n

Anyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.

\n
.sibling:first-child {\n/*styles for first sibling*/\n}
\n

Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.

\n
.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}
\n

Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.

\n

Let’s go crazy.

\n

How do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.

\n
<div:first-child + div + div {\n/*styles*/\n}
\n

The best part is. It’s backwards compatible.

\n

What about the 12th child? Well, you can just painfully type all those “+ div”.

\n

Now, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.

\n

Keep experimenting with this technique and be free from any restrictions of IE8.

\n","frontmatter":{"date":"August 18, 2015","updated_date":null,"description":null,"title":"How to ab-USE CSS2 sibling selectors","tags":["Engineering","Selector","CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp","srcSet":"/static/bc4587907a3f51743e5602c5512e6236/61e93/sibling-selectors.webp 200w,\n/static/bc4587907a3f51743e5602c5512e6236/1f5c5/sibling-selectors.webp 400w,\n/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text…","fields":{"slug":"/engineering/customize-user-login-register-and-forgot-password-page-in-drupal-7/"},"html":"

Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text or changing theme is not a difficult task.

\n

To help you out with that, I have compiled some simple steps to customize your registration or login page. All that you need to do is to add the following code :

\n

Steps:

\n
    \n
  1. In the first step of customization, you need to implement hook_theme in your module file.
    2. \n
\n
 array(\n      'template' => 'user_login',\n      'render element' => 'form',\n      'path' => drupal_get_path('module', 'yourmodule') . '/templates'\n    ),\n    'user_pass' => array(\n      'template' => 'user_pass',\n      'render element' => 'form',\n      'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n    ),\n    'user_register' => array(\n      'template' => 'user_register',\n      'render element' => 'form',\n      'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n     ),\n  );\n  return $theme;\n}-->
\n

Now that you have implemented hook theme in module file, the next step is to implement three pre-process functions. These functions are used if module needs to override or you want to add something in theme pre-processing.

\n

In the third step, you need to create following template files for login/register/forgot password.

\n
    \n
  1. user_login.tpl.php
    2. \n
  2. user_register.tpl.php
    3. \n
  3. user_pass.tpl.php
    4. \n
\n

Now paste the following code into user_login.tpl.php. Also, don’t forget to modify user_register.tpl.php and user_pass.tpl.php template files accordingly.

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

Now your login page will contain new intro text This is my awesome login form. Customization of registration page in Drupal 7 is not difficult and if you follow above mentioned tips, you can design an amazing registration / login / forgot password page according to your audience.

\n","frontmatter":{"date":"August 11, 2015","updated_date":null,"description":null,"title":"Customize User Login, Register and Forgot Password Page in Drupal 7","tags":["Drupal"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7d36e49fa408c02e5e79fd3e845c9379/7fbdd/drupal-custom-login-register-password-pages1.webp","srcSet":"/static/7d36e49fa408c02e5e79fd3e845c9379/61e93/drupal-custom-login-register-password-pages1.webp 200w,\n/static/7d36e49fa408c02e5e79fd3e845c9379/1f5c5/drupal-custom-login-register-password-pages1.webp 400w,\n/static/7d36e49fa408c02e5e79fd3e845c9379/7fbdd/drupal-custom-login-register-password-pages1.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"QQ is the most popular ID provider for Chinese people since the 90s, it is always the first choice for websites who want to provide social…","fields":{"slug":"/engineering/best-practice-reviewing-qq-app/"},"html":"

QQ is the most popular ID provider for Chinese people since the 90s, it is always the first choice for websites who want to provide social login functionality for their Chinese users. But similar to other ID providers from China, the app you created needs to be reviewed before actually launching it. Reading Chinese and using Google translate for each line is not that much of fun, and in this tutorial we will go through step by step to figure out how to submit a QQ app for review. Do note: You can always download a Google translate extension for your browser to translate each page to English, it would probably be the easiest way for you, but here I decide to keep it Chinese, Let's go.

\n
    \n
  1. \n

    Navigate to QQ Connect

    \n

    And click the 4th tab (in orange box)

    \n

    \"homepage\"

    \n
    2. \n
  2. \n

    Registration

    \n

    After being redirected to QQ connect login page, it asks you to fill in your credentials, since I do not have one, I will register for one and feel free to skip this step if you have already got one.

    \n

    Click \"register a new account\", like shown:

    \n

    \"qq-register-1024x630\"

    \n

    It will link you to this page, it is written in English, sweet! I am pretty sure you can register an account by yourself. After filling in the information, it will send a confirmation email to your email box. After your email is verified go back to the login page, and use the QQ number you just got to log in with.

    \n
    3. \n
  3. \n

    Creating the app

    \n

    Click the big green button on the right side of your screen to create an app, and here we will create a website type app.

    \n

    \"create_app_button\"

    \n

    \"app_for_website\"

    \n

    After choosing the type, you need to fill in some basic information for your website, in case if you do not use Google translate to translate the page, I did a little translations for you, there you go.

    \n

    \"form_with_english_translations\"

    \n

    Here is what I have filled in

    \n

    \"lucius_fillin_info\"

    \n

    Please note, when you fill in your website address, it will ask you to verify your website, so you need to copy and paste the javascript code under your website page, and then click the button beside to verify it.
    \n\"verify_successfully\"

    \n

    Once all the information is filled, then move on to next step, click the blue text link, it asks you to upload different sizes of the images about your company.

    \n

    \"add_assets\"

    \n

    \"upload_different_assets\"
    \nThen, it is time to submit by clicking that big green button in the middle.

    \n

    \"app_submit\"

    \n

    Confirm it by clicking the right button again.

    \n

    \"confirm_submit\"

    \n
    4. \n
\n

If everything works well, you will get you app approved in a week, just remember to check it back periodically, good luck!

\n","frontmatter":{"date":"August 04, 2015","updated_date":null,"description":null,"title":"Best practice for reviewing QQ app","tags":["SocialLogin","QQ"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/a89009e858e98fb020d251158f47dd23/7fbdd/qq-app-review-best-practices.webp","srcSet":"/static/a89009e858e98fb020d251158f47dd23/61e93/qq-app-review-best-practices.webp 200w,\n/static/a89009e858e98fb020d251158f47dd23/1f5c5/qq-app-review-best-practices.webp 400w,\n/static/a89009e858e98fb020d251158f47dd23/7fbdd/qq-app-review-best-practices.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using…","fields":{"slug":"/engineering/css3-responsive-icons/"},"html":"

What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using CSS sprites. On top of that, we will also add a fallback for browsers that do not support SVG files.

\n

Quick FAQ.

\n

SVG - Stands for Scalable Vector Graphics. In short it scales perfectly and you don’t need to worry about having a pixelated image anymore.

\n

Sprite - Google said it’s a fairy. This is not a fairy. It’s just a bunch of different icons in 1 image. Use it as background image and shift the positioning to show 1 icon. This saves you a lot of loading time. Because instead of loading, say 10 images, you’re loading just 1.

\n

CSS - Cascading Style Sheet. If you don’t know what this is, I have bad news for ya.

\n

Let's Begin

\n

\"icons\"

\n

First things first, we need a sprite image that consists four icons – or more, it’s up to you. Luckily, I have one in my digital pocket.

\n

We’re just going to use a normal PNG file at first and change it later. Make sure it has a transparent background.

\n

Now, let’s make their placeholder. The icons you see above is using a grid of 32px by 32px and it’s lining up vertically. I made it like that so it’s easier to find anything, you’ll see why later.

\n
</pre>\n  <div class="frame"></div>\n<pre>
\n

Now we need to style them.

\n
.icon {\n  width: 32px;\n  height: 32px;\n  background: #eee;\n  float: left;\n  background-image: url("[ put your image here ]");\n  background-size: 100% auto;\n  /*extra fluff*/\n  margin: 10px;\n  border-radius: 5px;\n}
\n

Explanation

\n

Looks simple right? But the one thing that’s very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on ‘auto’ so the image scales proportionally.

\n

If you look at the image I provided, there’s only one icon on X-axis. That means we can just say 100% on X and auto on Y.

\n

So, we get background-size: 100% auto.

\n

Cool, right? No crazy percentage. Your icon should look like this:

\n

\"facebook-icon\"

\n

It’s time to map those icons properly. Facebook is not a problem because it’s first on the list. But for defaults sake, let’s add a code for it.

\n
 .icon.facebook {\n   background-position: 0 0;\n   background-color: #3b5998;\n }
\n

The positioning of 0 0 will map it to the top left of the element.

\n

\"here-icon\"

\n

For the background-color, you can get almost all of the official social icon colors in hex here.

\n

How about the rest? Well, there’s a simple formula for that.

\n

The raw CSS way

\n

Since we’re making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again.

\n

Now, we have to get the position of the icons. Let’s start by counting the icons starting with 0 (zero).

\n

0 = Facebook

\n

1 = Google

\n

2 = LinkedIn

\n

3 = Twitter

\n

Facebook isn’t really a problem because we already know where it is. So, let’s exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position.

\n

imageHeight = 100%
\niconCount = 3
\niconPosition = [1,  2 or 3]
\nWe need to go downwards on the sprite. That means it’s negative.

\n

-imageHeight / iconCount * iconPosition
\n-100% / 3 / 1 = 33.33% is Google’s position
\n-100% / 3 / 2 = 66.66% is LinkedIn’s position
\n-100% / 3 / 3 = 99.99% is Twitter’s position
\nThat gives us this code

\n
.icon.twitter {\n  background-position: 0 -33.33%;\n  background-color: #55acee;\n}\n.icon.linkedin {\n  background-position: 0 -66.66%;\n  background-color: #007bb6\n}\n.icon.google {\n  background-position: 0 -99.99%;\n  background-color: #F90101;\n}
\n

The Stylus way

\n

If you use stylus you can just do this:
\nCreate the mixin

\n
getPos(imageHeight, iconCount, iconPosition)\n  imageHeight / iconCount * iconPosition
\n

Then call it.

\n
.icon.twitter\n  background-position 0 getPos(-100%, 3, 1)\n  background-color #55acee\n \n.icon.linkedin\n  background-position 0 getPos(-100%, 3, 2)\n  background-color #007bb6\n \n.icon.google\n  background-position 0 getPos(-100%, 3, 3)\n  background-color #F90101
\n

By now your icon should look like this.

\n

\"color-icons\"

\n

It’s time to change that PNG background to an SVG background.

\n

and link it to your background image

\n
.icon {\n  width: 32px;\n  height: 32px;\n  background: #eee;\n  float: left;\n  background-image: url("[ put your PNG image here ]”);\n  background-image: linear-gradient(transparent, transparent), url("[ <b>put your SVG image here</b> ]”);\n  background-size: 100% auto;\n \n/*extra fluff*/\n  margin: 10px;\n  border-radius: 5px;\n}
\n

If you’re wondering why we’re adding 2 background images is because not all browsers support SVG file. The linear-gradient(transparent, transparent) tricks the CSS into falling back to the PNG image if it doesn’t support it.

\n

Now, Rescale your width and height and see the magic of responsive icons.

\n

Aaaaaand then we’re done. That’s how you create a responsive icon.

\n","frontmatter":{"date":"July 21, 2015","updated_date":null,"description":null,"title":"CSS3 Responsive Icons","tags":["CSS","Responsive","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp","srcSet":"/static/8d212eebb7243269b59bd9166d0a4cce/61e93/css3-responsive-icons-300x300.webp 200w,\n/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

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

\n

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

\n

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

\n

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

\n

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

\n

What is JWT?

\n

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

\n

A JWT consists of three parts:

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

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

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

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

\n

JWT Authentication with LoginRadius: Overview

\n

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

\n

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

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

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

\n\n

Configuration Steps:

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

\"Screenshot

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

Example Response:

\n

{

\n

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

\n

\"expires_in\": 1800

\n

}

\n

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

\n

2. Direct API Implementation – Self Managed Login

\n

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

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

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

\n

Step 2: Get JWT in Response

\n\n

{

\n

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

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

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

\n

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

\n

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

\n

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

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

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

\n

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

\n

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

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

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

    Client Stores the Token

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

    Access Token Expiry

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

    Token Renewal

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

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

\n\n

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

\n

\"illustration

\n

How to Store JWT Tokens?

\n

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

\n

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

\n\n

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

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

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

Conclusion

\n

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

\n

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

\n

FAQs

\n

1. What is JWT authentication used for?

\n

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

\n

2. How does LoginRadius simplify JWT integration?

\n

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

\n

3. Is JWT authentication secure?

\n

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

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

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

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