{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/47","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"So last week while I was setting the analyzers on ElasticSearch settings for Email field, it took me some good time to find the perfect…","fields":{"slug":"/engineering/elastic-search-analyzers-for-emails/"},"html":"

So last week while I was setting the analyzers on ElasticSearch settings for Email field, it took me some good time to find the perfect custom analyzer for my purpose, so I feel it might be useful to share this with someone who needs it.

\n
\n

When a document is indexed, its individual fields are subject to the analyzing and tokenizing filters that can transform and normalize the data in the fields. For example — removing blank spaces, removing html code, stemming, removing a particular character and replacing it with another. At indexing time as well as at query time you may need to do some of the above or similiar operations. For example, you might perform a Soundex transformation (a type of phonic hashing) on a string to enable a search based upon the word and upon its 'sound-alikes'.

\n
\n

Let me briefly explain what I am trying to do with my Email field. The email addresses will be stored as a comma separated string with potentially multiple email addresses, and what I am expecting is after the to search to retrieve the matching results. Besides the exact match like search for \"john.doe@gmail.com\", I also want to be able to search for \"john.doe\" or \"gmail.com\" to retrieve the relative information.

\n

Here is the full schema for it:

\n
    \n
  1. {\"email\": \"john.doe@gmail.com\"}
    2. \n
  2. {\"email\": \"john.doe@gmail.com, john.doe@outlook.com\"}
    3. \n
  3. {\"email\": \"hello-john.doe@outlook.com\"}
    4. \n
  4. {\"email\": \"john.doe@outlook.com\"}
    5. \n
  5. {\"email\": \"john@yahoo.com\"}
    6. \n
\n

And the search schema is:
\n[Search > Response]
\n\"john.doe@gmail.com\" > 1,2
\n\"john.doe@outlook.com\" > 2,4
\n\"john@yahoo.com\" > 5
\n\"john.doe\" > 1,2,3,4
\n\"john\" > 1,2,3,4,5
\n\"gmail.com\" > 1,2
\n\"outlook.com\" > 2,3,4

\n

If you decide to keep reading, then it means you have the same needs as I did so I hope the following solution can actually help.
\nSo... In the official documentation they did have a good solution but it was not easy to find, at least for me, by using regular expression:

\n
{\n   "settings" : {\n      "analysis" : {\n         "filter" : {\n            "email" : {\n               "type" : "pattern_capture",\n               "preserve_original" : 1,\n               "patterns" : [\n                  "([^@]+)",\n                  "(\\p{L}+)",\n                  "(\\d+)",\n                  "@(.+)"\n               ]\n            }\n         },\n         "analyzer" : {\n            "email" : {\n               "tokenizer" : "uax_url_email",\n               "filter" : [ "email", "lowercase",  "unique" ]\n            }\n         }\n      }\n   }\n}
\n

This setting will perfectly address the issues from above, and do not generate way to much tokens in your ES cluster.
\nAt the end I want to share two good gadgets that I found very helpful with ES analyzers and regular expression.

\n
    \n
  1. Inquisitor:
    \nThis Elastic Search tool allows you to quickly apply different analyzers, tokenizers and filters to your input, fork it here:
    \nElasticsearch Inquisitor
    2. \n
  2. regex 101:\nTo quickly test out your regular expression, try this link: regex101
    3. \n
\n","frontmatter":{"date":"October 15, 2015","updated_date":null,"description":null,"title":"ElasticSearch Analyzers for Emails","tags":["Elastic Search","Analyzers"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.9230769230769231,"src":"/static/20f8b4ec6bff03779c688504a1290883/58556/elastic-search.webp","srcSet":"/static/20f8b4ec6bff03779c688504a1290883/61e93/elastic-search.webp 200w,\n/static/20f8b4ec6bff03779c688504a1290883/1f5c5/elastic-search.webp 400w,\n/static/20f8b4ec6bff03779c688504a1290883/58556/elastic-search.webp 800w,\n/static/20f8b4ec6bff03779c688504a1290883/99238/elastic-search.webp 1200w,\n/static/20f8b4ec6bff03779c688504a1290883/7c22d/elastic-search.webp 1600w,\n/static/20f8b4ec6bff03779c688504a1290883/bd6f3/elastic-search.webp 3422w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"Integrating social into your site can drastically improve user engagement with your platform. Below are a few useful solutions and…","fields":{"slug":"/engineering/simple-social-media-solutions/"},"html":"

Integrating social into your site can drastically improve user engagement with your platform. Below are a few useful solutions and implementation instructions.

\n

Social Login

\n

Social Login, also known as Social Sign On, Allows you to bypass traditional registration forms and utilize the systems in place by social providers in order to retrieve a copy of the users data and a unique identifier for the user that can be used to identify that user in your system.

\n

The following guides go over setting up Social Login with a few common Social Providers:
\nFacebook: How to Implement Facebook Social Login
\nTwitter: Integrating Twitter Social Login
\nLinkedIn: Integrating LinkedIn Social Login on a Website

\n

Social Sharing

\n

Most major social providers offer an easy tool to formulate and include sharing buttons on your pages. Below is an example of setting up an easy to use social sharing button with Facebook:

\n
    \n
  1. Include the Facebook JavaScript SDK on your page:
    2. \n
\n
<!---->
\n
    \n
  1. \n

    Next include the div that will contain the sharing button on your page with the following data attributes:

    \n
      \n
    1. data-href - Set this to the URL that you want to share.
      2. \n
    2. data-layout - Set this to one of the following to control the style of button that is displayed:
      \na. box_count
      \nb. button_count
      \nc. button
      \nd. icon_link
      \ne. icon
      \nf. link
      3. \n
    \n
    2. \n
\n

Sample Div:

\n
<!-- -->
\n

You can find information on generating sharing links with other providers in the following locations:
\nTwitter

\n

Or you can contribute to our open source project on github- Github-Social9

\n

Follow Company

\n

Follow buttons work very much the same as the social sharing buttons above. Simply include the relevant SDK and div with some customizations and users will be able to follow(and un-follow) your brand directly from your page.

\n

Below is an example of setting up a Twitter follow button:

\n
    \n
  1. Include Twitters JavaScript SDK using their provided script:
    2. \n
\n
<!---->
\n
    \n
  1. Include a link tag in the location that you would like to display your follow button:
    2. \n
\n
<!-- Follow @TwitterDev -->
\n

You can set the data attributes in the above link to control various aspects of the follow button.

\n

Find information on generating follow buttons for other social providers in the following locations:
\nFacebook

\n

Social Linking

\n

One of the most common and easy to configure social integrations is setting up links to your companies Social profiles.
\nAll you need to do is create a link tag on your page:

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

You can improve upon this by utilizing one of the Social providers branded icons to better display the linking UX. Get a copy of Facebooks Branded Icon.
\nYou can store the image locally and include it in the a tag:

\n
<!--<img src="" alt="Facebook"> -->
\n

Conclusion

\n

Now that you have setup the above social features your users will have a variety of touch-points to keep them active and interacting with your site, seamlessly driving user conversions and making brand ambassadors of your users.

\n","frontmatter":{"date":"October 08, 2015","updated_date":null,"description":null,"title":"Social Media Solutions","tags":["Social Media","Social Login"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/4cfc9b0367107177ef79aa1662de925a/58556/social-media.webp","srcSet":"/static/4cfc9b0367107177ef79aa1662de925a/61e93/social-media.webp 200w,\n/static/4cfc9b0367107177ef79aa1662de925a/1f5c5/social-media.webp 400w,\n/static/4cfc9b0367107177ef79aa1662de925a/58556/social-media.webp 800w,\n/static/4cfc9b0367107177ef79aa1662de925a/1fb14/social-media.webp 960w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Introduction Authentication and authorization both are most important things for any system and application. This blog starts with…","fields":{"slug":"/engineering/alternate-authentication-asp/"},"html":"

Introduction

\n

Authentication and authorization both are most important things for any system and application. This blog starts with authentication and authorization concepts and after that explains the three default important ways and three custom authentication ways for doing authentication and authorization i.e. windows, forms ,passport, multipass, JWT  and SAML authentication. Plus, in this blog I will explain some fundamental concepts about the different authentication system.

\n

Authentication and Authorization

\n

Authentication is the process for checking the identity of a user based on the user’s credentials. Generally, user’s credentials are  in the form of user ID and password, and we check their credentials from database or equivalent alternative, if it exists then user is a valid candidate for next process - authorization.

\n

Authorization also known as “Permission Control” will come after authentication. Authorization is the process of deciding what kind of resource a user can access based on their identity and checking whether the authenticated user has sufficient rights to access the requested resources. Typically a resource can be an ASP.NET web page, media files (MP4, GIF, JPEG etc), compressed file (ZIP, RAR) etc.

\n

ASP.NET default authentication Providers

\n

1. Form Authentication

\n

Normally, form authentication is based on cookies, the authentication and permission settings are stored in cookies. However, we can also use form authentication without cookies, and in cookie-less form authentication we can use query string for passing user details. Remember, the key concept is always ONLY allow the user with correct credential also enough permission to view certain resources, so we need to capture their information and compare with what we have stored in the database. And no matter what kind of form authentication we use, after we receive the data on server end, we will compare them with the data stored in any storage method/provider. For example, we can store username and password in the web.config file, a JSON file, or a database table.

\n

Forms authentication flow:

\n
    \n
  1. When a user requests a page for the application, ASP.NET checks session cookie. If the cookie exists and valid, ASP.NET assumes the user is authenticated and processes the request.
    2. \n
  2. If session cookies does not exists or not valid then it redirect to login form.
    3. \n
  3. User will enter username and password and if they are valid then he will get authenticated and authorized.
    4. \n
\n

2. Passport Authentication

\n

Passport authentication is a centralized authentication service provided by Microsoft. The .NET Passport single sign-in service. When we use passport authentication then user authentication in your application is managed by Microsoft's passport service. Passport authentication uses encrypted cookies to manage the authentication.

\n

How Password authentication works Users do not need to retype their sign-in name and password when moving from site to site. Those .NET Passport–enabled sites will issue a set of encrypted cookies in the .NET Passport central servers' domain to facilitate silent and seamless sign-in across sites. In some cases, sites owners will first redirect their end-users to .NET Passport sign-in and to authenticate upon first viewing of their site. If the users are logged in already, they'll get authenticated by ASP.NET, and if they are not logged in they will get redirected to passport servers (i.e hotmail, Live etc.)  to login first. If user successfully authenticates himself, it will return a token to your website.

\n

3. Windows Authentication

\n

We use windows authentication when we are creating a web application for a limited number of users who already have Windows account and this type of authentication is quite useful in an intranet environment. This authentication method uses local users windows account 'credentials' for to validate the user. Dot Net web application generally hosted on IIS(Internet Information Server) so the requests go directly to IIS to provide the authentication process in a Windows-based authentication model.

\n

The entire responsibility of authentication is done by IIS. It first takes the user’s credentials from the domain login. If this process fails, IIS displays an alert dialog box so the user can enter or re-enter his login information.

\n

Windows authentication have some advantages and disadvantages:

\n

Windows authentication Advantage

\n
    \n
  1. Developers need to write less line of code for managing user's authentication.
    2. \n
  2. Users can use their existing windows accounts for login.
    3. \n
\n

Windows authentication dis-Advantage

\n
    \n
  1. You can't control windows authentication process.
    2. \n
  2. Windows authentication only works on Microsoft OS you can't use it on others OS.
    3. \n
\n

4. Custom authentication Provider

\n
    \n
  1. Multipass
    2. \n
\n

Multipass authentication is a single sign on authentication. Suppose you have multiple sites and you want to create a single account for a user on both sites then you can use Single Sign-On. Single Sign-On is authentication system it allow user to share his authentication details with your there site. This allows a seamless experience for your users without forcing them to create a separate account on your second site. A multipass is simply a hash of keys and values, provided as an AES encrypted JSON hash.

\n
    \n
  1. JWT (JSON Web token)
    2. \n
\n

JWTs represent a set of claims as a JSON object that is encoded in a JWS and/or JWE structure. This JSON object is called “JWT Claims Set”. The JSON object consists of zero or more name/value pairs (or members), where the names are strings and the values are arbitrary JSON values. These members are the claims represented by the JWT.

\n

Your JWTs can contain any information you want; the user's name, birthdate, email, etc. You do this with claims based authorization. You then just tell your provider to make a JWT with these claims from the claims principle.

\n
    \n
  1. SAML (Security Assertion Markup Language)
    2. \n
\n

SAML - Security Assertion Markup Language SAML. SAML is developed by the Security Services Technical Committee of \"Organization for the Advancement of Structured Information Standards\" (OASIS). SAML is an XML-based framework for exchanging user authentication. The purpose of SAML is to enable Single Sign-On for web applications across various domains.

\n

SAML have three components: assertions, protocol, and binding. Assertions are authentication, attribute, and authorization. Authentication assertion validates the user's identity. Attribute assertion contains specific information about the user. And authorization assertion identifies user role and permissions.

\n

SAML works with multiple protocols including Hypertext Transfer Protocol (HTTP), Simple Mail Transfer Protocol (SMTP), File Transfer Protocol (FTP) and also supports SOAP

\n

Summary

\n

Different authentication methods are available, and website’s owner always gets confused about which authentication method they should use, here I have explained some of the popular authentication and authorization methods, hope it made it a little bit clear for you. And I will provide some in-depth details about each type of authentication in my next blog, happy coding.

\n","frontmatter":{"date":"October 01, 2015","updated_date":null,"description":"Learn types of Authentication in Asp.Net and how it plays an important role in any system.","title":"Types of Authentication in Asp.Net","tags":["Engineering","Authentication","Asp.Net","Multipass","JWT","JSON Web Token"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/051582b8bfe0e3796cdccd575e275a97/e7487/alternate-authentication-asp-dot-net1-150x150.webp","srcSet":"/static/051582b8bfe0e3796cdccd575e275a97/e7487/alternate-authentication-asp-dot-net1-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Facebooks Graph API gives you the ability to better understand and target content to your user. In this blog we go over some useful…","fields":{"slug":"/engineering/using-facebook-graph-api-after-login/"},"html":"

Facebooks Graph API gives you the ability to better understand and target content to your user. In this blog we go over some useful implementations of the Graph API that you can use to pull in user data as well as publish on your users behalf.

\n

Getting Your Site Ready

\n

The first thing you will need to do is implement an authorization interface that will allow your users to Login with there Facebook credentials and grant access to your application to handle the features that we will go over in this blog.

\n

You can refer to this article on setting up a Facebook Login integration: Implement Facebook Social Login

\n

While implementing the Login detailed in the above blog you can modify the scope included in the Facebook button to request the scopes that we will be using.

\n

Define your Facebook button as follows:

\n
<!-- -->
\n

This will cause your interface to request additional permissions that may require you to submit your app for review in order for your users to get access to these permissions.

\n

Managing your users login credentials.

\n

After your user has authenticated you can capture the users access token for use in your application or backend systems. During the Facebook login in the function function statusChangeCallback you can check the response for an active Facebook session and store the access token from this object as follows:

\n
if (response.authResponse) { var access_token = FB.getAuthResponse()['accessToken']; }
\n

This token is valid for 2 hours by default and can be upgraded to a long lived with a server-side call as detailed here: Access Tokens for Meta Technologies

\n

The long lived token will be valid for 60 days over which you will be able to access the users data or handle actions that they have granted your app permissions.

\n

If you have stored an access token or long lived token and wish to reinitialize the Facebook JavaScript graph API you can handle this by including the following parameter when making FB.api calls:

\n
FB.api( '/me', 'get', { access_token : 'access_token_for_some_user_fetched_from_your_database' } );
\n

\n

Getting User Data and Specific Fields

\n

The simplest way to get a copy of the User Profile object is to access the /me endpoint:

\n
FB.api('/me', function(response) { });
\n

This will this will return the users name and an ID by default. You can add additional field requests to the me endpoint in order to retrieve further data-points for the user. Below we request the users id, name, age_range, bio, birthday, and email using a stored access-token.

\n
<!--FB.api( '/me?fields=id,name,about,age_range,bio,birthday,email', 'get', { access_token :  },function(response) { //Handle Data Here it will arrive in a Json object in the response } );-->
\n

There are additional edge cases which can be accessed through the /me endpoint. A full list can be found here. A below sample details how you can retrieve the videos that the user is tagged in or has uploaded.

\n
<!--FB.api( '/me/videos', 'get', { access_token :  },function(response) { //Handle Data Here it will arrive in a Json object in the response } );-->
\n

\n

Publishing Content to a Users Wall

\n

In order to publish content to a users wall you will have to have requested the publish_actions permission during login which we have done in the first part of this article. You can then access the following endpoint to publish a status post to a users wall:

\n
<!--FB.api( '/me/feed?message=', 'Post', { access_token :  },function(response) { //Handle Response which will contain a Post ID if successful } );-->
\n

\n

Conclusion

\n

Facebook offers many options to integrate their API into your site and offers a variety of easy to use SDKs for multiple languages. Check out their documentation for details on the various SDKs and additional graph endpoints.

\n","frontmatter":{"date":"September 29, 2015","updated_date":null,"description":null,"title":"Using Facebook Graph API After Login","tags":["Facebook","Graph API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8622c2fa04e9260ffffdf4635ebfb067/e7487/fb-feat-img-150x150.webp","srcSet":"/static/8622c2fa04e9260ffffdf4635ebfb067/e7487/fb-feat-img-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this…","fields":{"slug":"/engineering/my-name-is-darryl-this-is-how-work/"},"html":"

Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this episode, I'm going to tell you about the tools I use, the things I do to get design inspiration, and what I do when I get stuck on a project.

\n

Let's get started!

\n

Tools I use

\n

Coffee

\n

Let's face it, you all know this is the number 1 priority for pretty much everyone you know. Getting my fuel up and over driving my brain... And hope to god I don't break down in the middle of the day.

\n

Sublime Text 3

\n

The Photoshop to my coding skills. Sure, there are other text editors out there but this one really knows what it's doing. I have come to the point where I've installed so many Sublime Packages that I cannot function without them.

\n

Some of those packages are:

\n
    \n
  1. Emmet Boy, oh boy, Let me tell you about Emmet. But, it would take a long time to explain what it is, so just go to their site. It's basically premade snippets for pretty much everything you need.
    2. \n
  2. SidebarEnhancementSublime's sidebar is a little bit underdeveloped. Then again, that's what packages are for, right? This nifty little package ehances your sidebar with more options to choose from like: 'Reveal...' (which opens the file folder).
    3. \n
  3. ColorHighlighterIf you're the kind of person who remembers the hex code for colors, you are one talented individual. Ya see, it's hard to visualize colors using hex code. ColorHighlighter puts a background on those colors for you to easily visualize what kind of color #00427c is (regal blue, btw).
    4. \n
  4. SFTPThis one is a cool package. It lets you edit, sync, and save on-upload files from any of your sftp or ftp servers. But only if you configure it properly. If you use any preprocessors and you're worried that you have to upload the processed file manually. Worry no more as you can make sftp monitor that file if it has changed and automatically upload it. Pretty neat, huh?
    5. \n
\n

And since we're talking about sublime and packages, check out this nifty blog about sublime text and their packages.

\n

Codekit

\n

If you don't know what is codekit, you should. It compiles everything from SASS to HAML to Coffeescript. It also auto refresh your browser on every save. It... it just works. Bower is also built-in so you have access to over 6,000 components. Best part? No command line usage. Just drop your project files and go.

\n

What I do to get inspired.

\n

As a normal human being — and not an extraterrestrial or alien as you tiny humans may call it. I tend to get stuck in a design black hole. It is where every ideas you have is just 1 big blank canvas — or as some artists call it \"modern art\". So what do I do when I don't have any ideas? It's simple really. The first website I go to is dribbble.com. Dribble used to be an invite-only social network for designers. I think they probably opened their doors to everyone. I'm not really sure. But, I am sure that most of the designers there are still the best of the best. What I really like about it is when some designers show how their designs interact with users. With the help of GIF or codepen. Speaking of codepen, That's the place I go to if I am in need of some CSS trickery. At some point, I do get inspiration from that place too. If dribbble can't help my —oh so in the dark— brain, I go to Pinterest. Pinterest have their own design category with a bunch of different sub categories from Graphic Design to UI/UX. The best thing about it? It links back to another site with more design inspiration. YAY for Pinterest.

\n

Getting out of a sticky situation

\n

Now that my brain is full of design food. How do I put it to work? There's this thing called a notebook. If you don't know what that is. It looks like this. \"notebook\" This is where I start sketching or wireframing all the things I need before moving on to the digital format. And there you have it. A sneak peek on how I work. I hope that this gave you an idea on how to improve your everyday design life. A word of advice. There are a thousand ways to do 1 thing. If someone told you it can't be done; prove them wrong.

\n","frontmatter":{"date":"September 22, 2015","updated_date":null,"description":null,"title":"Hi, My Name is Darryl, and This is How I Work","tags":["Tools","Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/73f818bb44071a33e66d0518c85bb5ff/403a4/darryl-how-i-work-300x300.webp","srcSet":"/static/73f818bb44071a33e66d0518c85bb5ff/61e93/darryl-how-i-work-300x300.webp 200w,\n/static/73f818bb44071a33e66d0518c85bb5ff/403a4/darryl-how-i-work-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it…","fields":{"slug":"/engineering/beginners-guide-for-sublime-text/"},"html":"

Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it is just plain fun. The goal of this blog is to help you set-up the basic extensions that are required while working with Sublime: Package Control, a professional, sharp looking theme pack, and a core feature of Sublime, \"Goto Everywhere\". I am using a Mac, but the concept also works well in Windows, check the corresponding shortcut online, and it should be an easy and smooth process.

\n

Before marching forward, make sure Sublime Text Editor 3 is properly installed, if you haven't installed it yet, you can download it here.

\n

1. Package Control

\n

Still with me? Awesome! Let's get started. First of all, the most amazing thing about Sublime is the diverse collection of packages you can install. The packages vary from big ones such as Git and SublimetoCodeIntel to small handy widgets like color picker and path auto fill. Keep checking and digging for the most useful packages for yourself is a very important part for your daily coding with Sublime. Therefore, first things first, let's install the Package Control.

\n

Installation Guide is here

\n

Press

\n
ctrl + `(Normally the one under Esc)
\n

Then paste the code from above link into your console, it could be confusing to paste a big graph of code into your sublime python console, but it does work, so Let's do it.

\n

Now try pressing

\n
Cmd + Shift + p
\n

Then type \"Install Package\", you should see it now:

\n

\"install-package\"

\n

2. Theme

\n

Prior to installing any functional package, let's make sublime even prettier, let's search for a theme!

\n
    \n
  1. Install Package from above
    2. \n
  2. Then type \"Theme\"
    3. \n
\n

You should see a big list of themes right now, you can first search on the internet to have some previews of the themes, pick a good color scheme that you like and then search for it here. What I would suggest is the one I am using it, is called \"Theme - itg.flat\"

\n

After installing your preferred theme, the font and color scheme for sublime may have already been updated. But it doesn't quiet look like what you have seen from elsewhere does it? It's because you also need to update the UI preferences for sublime, for itg.flat it will give you a more flat look after the update.

\n

Navigate to:

\n

\"user-preference\"

\n

What this file does is actually overwrite the settings in the default-setting JSON file, if you mess up with this user file, just delete them to recover back to the original settings. So feel free to play around with it, from here you can define the settings from your theme provider's guidance, here I will post mine as a sample

\n
{\n  "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",\n  "font_size": 14,\n  "highlight_line": true,\n  "highlight_modified_tabs": true,\n  "theme": "itg.flat.dark.sublime-theme"\n}
\n

Please note JSON format is significant to Sublime Settings, when you are not sure about it, check it with an online JSON validator. Now with this step done, you will have a delightful working environment to write your code in:

\n

\"sample-code\"

\n

3. Goto Everywhere

\n

One of the most awesome features provided by sublime is called \"Goto Everywhere\", to me it is more like a \"Find Everything\". Once you get used to it, it will boost your productivity incredibly by saving enormous amount of time on finding stuff. Here is a brief list of its most common usage purpose:

\n\n

To trigger this feature, press key combination:

\n
Cmd + p
\n

Then for different purpose you just press different buttons to trigger the function,

\n\n

So far I have briefly covered the essential features sublime provides.In the next blog of this series I will explain how to make your work even easier by utilizing sublime Project, Snippet and Macro.\nUntil then, Adios!!!

\n","frontmatter":{"date":"September 15, 2015","updated_date":null,"description":"Getting started with one of the lightweight Code Editor Sublime Text and it's package control and shortcut commends","title":"Beginner's Guide for Sublime Text 3","tags":["SublimeText","CodeEditor"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp","srcSet":"/static/296e569fc8dd1576c6df798847aaf8ad/61e93/Beginner-Guide-Sublime-Text.webp 200w,\n/static/296e569fc8dd1576c6df798847aaf8ad/1f5c5/Beginner-Guide-Sublime-Text.webp 400w,\n/static/296e569fc8dd1576c6df798847aaf8ad/7fbdd/Beginner-Guide-Sublime-Text.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"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":276,"currentPage":47,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}