{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/52","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"In this post I will show you how easy it is to implement Facebook social login to a web page using Facebook’s JavaScript SDK. The nice thing…","fields":{"slug":"/engineering/implement-facebook-social-login/"},"html":"

In this post I will show you how easy it is to implement Facebook social login to a web page using Facebook’s JavaScript SDK. The nice thing about Facebook social login is the great documentation and instructions already provided at  Facebook Login for the Web. There is also a code snippet that is provided to you by Facebook to implement their login system. I have gone ahead and customized this code and have provided a codepen here which I will explain.

\n

The first thing you’ll need to do is create a Facebook app since an app Id is required to implement login using Facebook. You can create a facebook app by going to  http://developers.facebook.com. You'll notice in the codepen nothing is displayed since I have not added a app Id. You'll need to remember to replace this placeholder with your own Facebook app Id once you have created your Facebook app.

\n

Next, we’ll implement login using Facebook. All we need to do is copy and paste the code provided to us by Facebook to create the Facebook social login and replace the placeholder with your own Facebook app id. I will be explaining the same code with my customization provided in the codepen below.

\n

Let's add the Facebook login interface. You'll want to place this code in the body section of your html code.

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

Next, you'll notice this section of code at the end of the JavaScript section. This code snippet loads the Facebook SDK JavaScript asynchronously. It also provides the JavaScript library which is used to render your Facebook login interface.

\n
// Load the SDK asynchronously\n(function(d, s, id) {\n    var js, fjs = d.getElementsByTagName(s)[0];\n    if (d.getElementById(id)) return;\n    js = d.createElement(s); js.id = id;\n    js.src = "//connect.facebook.net/en_US/sdk.js";\n    fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));
\n

Now we just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId : '{your-app-id}'. This function is just above loading JavaScript asynchronously.

\n
window.fbAsyncInit = function() {\n    FB.init({\n        appId : '{your-app-id}',\n        cookie : true, // enable cookies to allow the server to access the session\n        xfbml : true, // parse social plugins on this page\n        version : 'v2.1' // use version 2.1\n    });\n\n    // Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus().\n    // This function gets the state of the person visiting this page.\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n};
\n

Next we'll add the function that handles the response and alters the page contents based on the type of response. I have this function located at the very top of the scripts section.

\n
// This is called with the results from from FB.getLoginStatus().\nfunction statusChangeCallback(response) {\n    // The response object is returned with a status field that Let's the app know the current login status of the person.\n    if (response.status === 'connected') {\n        console.log('Welcome! Fetching your information.... ');\n        FB.api('/me', function(response) {\n            console.log('Successful login for: ' + response.name);\n            document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';\n        });\n    } else if (response.status === 'not_authorized') {\n        // The person is logged into Facebook, but not your app.\n        document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';\n    } else {\n       // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.\n       document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';\n    }\n}
\n

As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. You'll also notice the not_authorized status. When the login is not authorized, this function changed the html on your page to ask you to log in. But how does this function get used? In this next function this is handled when someone clicked on the Facebook button on the page. Notice the onlogin=\"checkLoginState(); in your body html code for the Facebook button.

\n
// This function is called when someone finishes with the Login Button.\nfunction checkLoginState() {\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n}
\n

Now if you save this page as index.html and open it in a browser you should see the Facebook Login button. You can use the code provided by facebook at the link listed above or you can used the codepen code that I have altered to make it a bit shorter for explanation.

\n

Facebook Page example

\n

\"zoie-facebookblog\"

\n

Log In and look at the console output. You’ll now see some basic info including id, email, first_name, gender, last_name, link, locale, name, timezone, updated_time, verified

\n

That is all there is to it. Of course, there are many more scopes you can use which allow you to collect more data currently this script has a scope of public_profile and email, features and API calls you can play with to create your desired app just explore the Facebook documentation to discover all these features.

\n

Want to extend your social systems with additional provider functionality check out these posts on LinkedIn social login and Twitter social login.

\n","frontmatter":{"date":"February 24, 2015","updated_date":null,"description":null,"title":"How to Implement Facebook Social Login","tags":["Facebook","SocialLogin"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/6c361cdd8b58e5ed76e50ba960c74e49/403a4/fb-feat-img.webp","srcSet":"/static/6c361cdd8b58e5ed76e50ba960c74e49/61e93/fb-feat-img.webp 200w,\n/static/6c361cdd8b58e5ed76e50ba960c74e49/403a4/fb-feat-img.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"If you have stored a GUID through the C# driver to mongoDB and now you want to run a query by GUID, you can't query directly because mongoDB…","fields":{"slug":"/engineering/guid-query-mongo-shell/"},"html":"

If you have stored a GUID through the C# driver to mongoDB and now you want to run a query by GUID, you can't query directly because mongoDB doesn't recognize GUID so when we query through mongo shell no result will be returned. To use the power of mongo shell for querying data on mongo by GUID, you should follow these steps.

\n

1. Convert GUID data to Base64

\n

Convert you GUID data to base64 , you can use any online tool for this.

\n

So suppose your GUID is: 00112233-4455-6677-8899-aabbccddeeff

\n

Then the base 64 version will be: MyIRAFVEd2aImaq7zN3u/w==

\n

2. Query by BinData object in mongo shell

\n
db.Users.find({"useUniqueId": new BinData(3,"MyIRAFVEd2aImaq7zN3u/w==")}).limit(1)
\n

Actually BinData constructor takes 2 parameters:

\n

New BinData(subtype,data)

\n\n

mongoDB's C# driver stores data to mongo by converting it into binary data rather than string.

\n","frontmatter":{"date":"February 23, 2015","updated_date":null,"description":null,"title":"GUID Query Through Mongo Shell","tags":["Engineering","GUID","Mongo"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/cf4e048dfb4a9d2610d3137dfaa7b5e7/403a4/mongo-db-guid.webp","srcSet":"/static/cf4e048dfb4a9d2610d3137dfaa7b5e7/61e93/mongo-db-guid.webp 200w,\n/static/cf4e048dfb4a9d2610d3137dfaa7b5e7/403a4/mongo-db-guid.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience…","fields":{"slug":"/engineering/integrate-linkedin-social-login-website/"},"html":"

It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience for your user and also lets you obtain more information about your user. The most welcomed social platforms are Facebook, Twitter, LinkedIn and Google. In this article, we will cover how to integrate LinkedIn social login authentication into your website.

\n

Create a LinkedIn App

\n

Creating an app for the social platform is always the first step, no matter which platform you are working with. In this case, the created app will service the LinkedIn social login. Basically, you are creating a gate to let your user go through this gate and access the service, and in this gate, you can specify the permissions and the preferences you want to grant to your user. You can refer to the instructions here for clear instructions on how to create a LinkedIn social login app.

\n

Set your App

\n

After creating the app, you need to set the \"JavaScript API domain\" field for your app.  In that field, fill in your website URL. Here we have used http://localhost for this article.

\n

\"luciusblog2-1\"

\n

Implement the script in your html file

\n

Now you are ready to code! First, put this JavaScript code snippet inside your head tag:

\n
<!--<script type="text/javascript" src="http://platform.linkedin.com/in.js">\napi_key: your_api_key_goes_here\n-->
\n

You can find your API key inside your application, the first entry under OAuth Keys \"Consumer Key / API Key.\"  This script is used to load the LinkedIn script into your website, and it will not display anything on your page, at least not the frontend.

\n

\"luciusblog2-2\"

\n

Next, you will need to add another script inside your body tag. It is actually used to display the sign-in button.

\n
<!--\nHello, ; .\n-->
\n

If everything has been implemented correctly, load your page, and you will see this lovely button appear on your site.

\n

\"luciusblog2-3\"

\n

Want to extend your social systems with additional provider functionality? Check out this post on Twitter social login.

\n","frontmatter":{"date":"February 11, 2015","updated_date":null,"description":null,"title":"Integrating LinkedIn Social Login on a Website","tags":["LinkedIn","SocialLogin"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp","srcSet":"/static/dacf65e1b50df78fc0c763813d3cb64f/61e93/linkedin-feat-img.webp 200w,\n/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"Social Sharing is an extremely powerful tool to expand your user base and product recognition, customizing and implementing this to be…","fields":{"slug":"/engineering/social-provider-social-sharing-troubleshooting-resources/"},"html":"

Social Sharing is an extremely powerful tool to expand your user base and product recognition, customizing and implementing this to be efficient on your site can be quiet difficult. Most of the most relevant Social Providers have setup testing and troubleshooting tools that can help to identify where you have gone astray. Below is a brief overview of some useful tools that have been setup to assist with implementing custom Social Sharing options.

\n

Facebook Open Graph Object Debugger

\n

Setting up custom sharing with Facebook uses Facebook Open Graph meta tags, which are cached on Facebooks end and can lead to some confusion when making updates to your customizations. In order to identify the cached details that are being used for your implementation Facebook provides the Open Graph Debugger tool. All you need to do is input your sites URL and click on Debug.

\n

\"karlblog1-1_001\"

\n

This will then crawl your page and display some useful information on the currently scraped details and warnings and error messages. It also give you the option at this point to refresh this scrapped data with any changes that you have made to our existing cached details.

\n

Google Structured Data Testing Tool

\n

Google uses a combination of a few different methods in order to define the customized sharing options:

\n\n

The structured data testing tool allows you to view what Google has interpreted from your webpage. Start by entering the URL of the page that you are sharing and click on preview.

\n

\"karlblog1-2\"

\n

You will be able to view the scrapped data as well as a listing of the meta tags that have been included on the page.

\n

LinkedIn Share Generator Tool

\n

LinkedIn also uses Open Graph Tags to determine the content that will be shared with your sharing interface. You can view the relevant tags and details here.

\n

You can view the details that will be shared by generating out the sharing button on LinkedIn's build a share button tool.

\n

Insert the URL in the \"URL to be shared field\" and click on Get Code. This will generate a sample share icon in the preview section.

\n

\"karlblog1-3\"

\n

To test the share functionality click on the generated icon to display the share interface as determined by the provided URL.

\n

Twitter Button Generator Tool

\n

Twitter also uses multiple systems to determine the content that will be tweeted by the tweet buttons. The most commonly used meta tags, which allow you to set any of the available customizable fields in your tweet.

\n

To test the tweet you can use Twitters button generator. Select the \"Share a link\" option under \"Choose a button\".

\n

\"karlblog1-4\"

\n

Input your site URL in the \"share URL\" field, This will cause the Tweet button under \"Preview and code\" to be updated.

\n

Click on the generated button to see a sample of the Tweet that has be defined by your URL.

\n","frontmatter":{"date":"February 09, 2015","updated_date":null,"description":null,"title":"Social Provider Social Sharing Troubleshooting Resources","tags":["Engineering","SocialSharing","Facebook","Google","LinkedIn"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/93b68aeb2b2537eb1ada887c2289dc4c/58556/social.webp","srcSet":"/static/93b68aeb2b2537eb1ada887c2289dc4c/61e93/social.webp 200w,\n/static/93b68aeb2b2537eb1ada887c2289dc4c/1f5c5/social.webp 400w,\n/static/93b68aeb2b2537eb1ada887c2289dc4c/58556/social.webp 800w,\n/static/93b68aeb2b2537eb1ada887c2289dc4c/99238/social.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs…","fields":{"slug":"/engineering/social-media-colors-hex/"},"html":"

Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs to find our beloved social media colors and listed it out in hex form.

\n

Facebook #3b5998

\n

Google Plus #F90101

\n

Linkedin #007bb6

\n

Twitter #55acee

\n

Yahoo #400090

\n

Amazon #FF9900

\n

Aol #066cb1

\n

Delicious #67b6e3

\n

Digg #486ca3

\n

Disqus #35a8ff

\n

Foursquare #1cafec

\n

Github #181616

\n

Google #0266C8

\n

Hyves #f9a539

\n

Instagram #406e94

\n

Kaixin #bb0e0f

\n

Live #004C9A

\n

Livejournal #3770a3

\n

Mixi #d1ad5a

\n

Myspace #313131

\n

Odnoklassnikki #f69324

\n

Orange #ff6600

\n

Paypal #13487b

\n

Persona #e0742f

\n

Pinterest #cb2128

\n

QQ #009BD9

\n

Reddit #ff5700

\n

Renren #005baa

\n

Salesforce #219CDF

\n

Stackexchange #4ba1d8

\n

Steam Community #666666

\n

Tumblr #32506d

\n

Verisign #0261a2

\n

Virgilio #eb6b21

\n

Vkontakte #45668e

\n

Sinaweibo #bb3e3e

\n

WordPress #21759c

\n

Mailru #1897e6

\n

Xing #007072

\n

Openid #f7921c

\n

Did I miss anything? Add it in the comments and help build this awesome list.

\n","frontmatter":{"date":"February 06, 2015","updated_date":null,"description":null,"title":"Social Media Colors in Hex","tags":["SocialMedia","Facebook","Google","Color"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fe80482126ca4794c0c2411058451279/e7487/darrylblog1-150x150.webp","srcSet":"/static/fe80482126ca4794c0c2411058451279/e7487/darrylblog1-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"W3C stands for the World Wide Web Consortium, a recognized global web standards body. Tim Berners-Lee founded this organization and is run…","fields":{"slug":"/engineering/w3c-validation/"},"html":"

W3C stands for the World Wide Web Consortium, a recognized global web standards body. Tim Berners-Lee founded this organization and is run by a full-time staff to continue creating and preserving web standards.

\n

These specifications are then used to direct the creation of code that lives up to those standards by web developers and browsers. They write the rule-book in a nutshell, which helps determine whether our code is well-written or poorly written.

\n

Let's understand some essential points of W3C validation.

\n

What is W3C Validation?

\n

World Wide Web Consortium (W3C) allows internet users to check HTML and XHTML documents for well-formatted markup. Markup validation is an important step towards ensuring the technical quality of web pages.

\n

Why Validate a Site on W3C?

\n

W3C validation is the process of checking a website's code to determine if it follows the formatting standards. If you fail to validate your website's pages based on W3C standards, your website will most likely suffer from errors or poor traffic owing to poor formatting and readability.

\n

1. Help Improve Rankings in Search Engines

\n

W3C validation helps you to get better rankings in search engines (SEO). Errors in your code can affect your site's performance and make a big impact on your site's SEO. Search engines check the HTML or XHTML code of your website when searching. 

\n

If they find invalid HTML or XHTML code – meaning code that does not follow the official rules, you might be removed from their indexes. If there is an error on your web page code, robots will stop searching your whole website's content.

\n

2. Validation Helps Teach Best Practices

\n

Having a standards-compliant code is the best practice for web design. It also teaches and encourages best practices for web design. While many veterans have learned to create error-free code and make relatively few validation errors, most beginners make more errors.

\n

Computer validation checks can help beginners learn from their mistakes.

\n

\"These technologies, which we call \"web standards,\" are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web.\" — Web Standards Group

\n

3. Improved Website User Experience

\n

W3C validated websites will be easily accessed by people with modern browsers. Validation improves usability and functionality because your users are less likely to run into errors when displayed on browsers compared to non-validated websites.

\n

Validation is fully compatible with a wide range of dynamic pages, scripting, active content, and multimedia presentations.

\n

The website validation process allows website designers to correct formatting errors that impact website performance, and following international standards, the code used in websites is reduced in size while improving efficiency.

\n

Because of this, web pages are displayed much faster and flow much better compared to websites that have not been validated.

\n

4. Make Website Browsers Friendly

\n

Making website browsers friendly is one of the biggest reasons why W3C code validation was introduced. Websites that are not validated may display correctly in one browser but not in other browsers. Many websites face cross-browser problems.

\n

Websites that are not validated may display formatting problems when used in certain browsers. On the other hand, W3C validated websites are displayed without errors regardless of what browser is used.

\n

There are five major web browsers: Google Chrome, Firefox, Microsoft Edge, and Safari, and usage among them translates to millions of internet users.

\n

5. Multiple Device Accessibility

\n

With the recent boom in smartphones and tablets, more people will be accessing the Internet from mobile devices than desktop computers.

\n

By 2020, mobile commerce will reach $2.91 trillion worldwide, and some sectors are seeing an even higher proportion of mobile traffic, so there is a growing need for website owners to maximize the usability of their websites on new devices.

\n

Unfortunately, many website owners do not take advantage of this growth and forego W3C validation that makes sure their websites and web pages are mobile-friendly too. If you want your website to be visited by as many users as possible, accessibility should be a big factor.

\n

6. Validation Help for Easy Coding and Maintenance

\n

Websites or web pages that validate using W3C website validation have code formatted efficiently and are easy to edit, and it helps website owners to create a new page or another new website with similar formatting.

\n

The validated code used in W3C HTML validation, W3C XHTML validation, or W3C CSS validation can be used in future sites.

\n

7. Validation as a Debugging Tool

\n

Validators tell you where you have errors in your code. If your page isn't displaying as expected, a validator might very well point you to the cause of the display problems.

\n

Also, an invalid code that may display fine in one document may show stopping errors in another because of the encompassing code.

\n

How Do You Validate Your Code?

\n

Validation is comparing your code to W3C standards. The best way to validate your code is by using the W3C validation tools.

\n\n

HTML Validator:

\n

This validator checks the markup validity of web documents in HTML, XHTML, SMIL, MathML, etc

\n

CSS Validator:

\n

This validator checks the CSS validity of web documents in HTML, XHTML etc.

\n

There are plenty of browser extensions that will test the page you're viewing against the W3C validators.

\n

HTML Tidy is another option for validating pages, though it may not offer the exact same results as the W3C validator. One advantage of HTML Tidy is using an extension; you can check your pages directly in the browser without visiting one of the validators sites.

\n

Conclusion

\n

If at all possible, any website should follow W3C validation requirements. It is the right way to do it, but it has many enduring advantages, such as extending the lifespan of the pages, maintaining browser stability, and much more. This will help you understand why W3C is necessary to test all our websites for W3C validation before calling a project complete.

\n","frontmatter":{"date":"January 26, 2015","updated_date":null,"description":"Learn what w3c is and why to use it, and also how to validate your web page for W3C standards, a simple guide on W3C validation.","title":"W3C Validation: What is it and why to use it?","tags":["W3C","Validation"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/61a5831ae676536f6f686f26efd47eea/58556/w3c.webp","srcSet":"/static/61a5831ae676536f6f686f26efd47eea/61e93/w3c.webp 200w,\n/static/61a5831ae676536f6f686f26efd47eea/1f5c5/w3c.webp 400w,\n/static/61a5831ae676536f6f686f26efd47eea/58556/w3c.webp 800w,\n/static/61a5831ae676536f6f686f26efd47eea/99238/w3c.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"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":306,"currentPage":52,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}