{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/41","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"A JSON Web Token (JWT) is a JSON object that is defined in RFC 7519 as a safe way of transmitting information between two parties…","fields":{"slug":"/engineering/jwt/"},"html":"

A JSON Web Token (JWT) is a JSON object that is defined in RFC 7519 as a safe way of transmitting information between two parties. Information in the JWT is digitally-signed, so that it can be verified and trusted.

\n

JWT Properties

\n\n

JWT Use Cases

\n\n

JWT contains three parts: Header, Payload, and Signature which are separated by a dot.

\n

Header.Payload.Signature

\n

Header

\n

The JWT Header consists of 2 parts:

\n\n
{  \n "typ" : "JWT",  \n "alg" : "HS256"  \n}
\n

Header Algorithm Types:

\n\n

alg Value

\n

Digital Signature or MAC Algorithm

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AlgoDescription
HS256HMAC using SHA-256 hash algorithm
HS384HMAC using SHA-384 hash algorithm
HS512HMAC using SHA-512 hash algorithm
RS256RSASSA using SHA-256 hash algorithm
RS384RSASSA using SHA-384 hash algorithm
RS512RSASSA using SHA-512 hash algorithm
ES256ECDSA using P-256 curve and SHA-256 hash algorithm
ES384ECDSA using P-384 curve and SHA-384 hash algorithm
ES512ECDSA using P-521 curve and SHA-512 hash algorithm
\n

The Base64Url-encoded Header, which is first part of our JWT, looks like the following:

\n

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

\n

Payload

\n

The Payload, also known as the JWT claim, contains all of the information we want to transmit.

\n

Different types of claims can be used to build the Payload:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CodeNameDescription
ississuerIdentifies the principal that issued the JWT.
subsubjectIdentifies the principal that is the subject of the JWT.
audaudienceIdentifies the recipients that the JWT is intended for.
expExpiration timeIdentifies the expiration time on or after which the JWT MUST NOT be accepted for processing.
nbfNot beforeIdentifies the time before which the JWT MUST NOT be accepted for processing.
iatIssue atIdentifies the time at which the JWT was issued.
jtiJWT idUnique identifier for the JWT, can be used to prevent the JWT from being replayed.
\n\n

Example Payload:

\n
{  \n "sub": "1234567890",  \n "name": "Frank Emic",  \n "jti": "4b5fcea6-2a5e-4a9d-97f2-3d8631ea2c5a",  \n "iat": 1521191902,  \n "exp": 1521195630  \n}
\n

This example contains a combination of registered and public claims. “sub”,”jti”,”iat”, and “exp” are registered claims and “name” is a public claim.

\n

The Base64Url-encoded Payload, which is the second part of our JWT, looks like the following:

\n
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkZyYW5rIEVtaWMiL  \nCJqdGkiOiI0YjVmY2VhNi0yYTVlLTRhOWQtOTdmMi0zZDg2MzFlYTJjNWEiLCJpYXQiOjE1MjExOTE5MDIsImV4cCI6MTUyMTE5NTYzMH0
\n

Signature

\n

The final part of our JWT is the Signature. To create the Signature, we need 3 components:

\n\n

var encodedString = base64UrlEncode(header) + \".\" + base64UrlEncode(payload);
\nHMACSHA256(encodedString, 'secret');

\n

The secret is the Signature held by the server in order to verify tokens and sign new ones.

\n

The above Base64Url-encoded Header and Payload are combined with a dot, and then digitally-signed using the secret. This generates the Signature as the third part of the our JWT:

\n

wGDoDSxfKj3Ns379NVxocwM9TOiwxhxWl

\n

Putting It All Together

\n
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkZyYW5rIEVtaWMiL  \nCJqdGkiOiI0YjVmY2VhNi0yYTVlLTRhOWQtOTdmMi0zZDg2MzFlYTJjNWEiLCJpYXQiOjE1MjExOTE5MDIsImV4cCI6MTUyMTE5NTYzMH0.wGDoDSxfKj3Ns379NVxocwM9TOiwxhxWl
\n

This is our final JWT, containing the Header, Payload, and Signature joined together with dots. It can be passed as a URL parameter, a POST parameter, or in the  HTTP header to authenticate or exchange information.

\n

Note: JWT does not hide information; it just encodes information using the digitally-signed signature and verifies that the information has not been altered over the network. So, do not add any sensitive information in the JWT claim.

\n

Conclusion

\n

JWT comprises three encoded parts: Header, Payload, and Signature. It can be passed as a URL or POST parameter, or in an HTTP header. Due to JWT's lightweight, self-containing, and versatile strucutre, it remains a popular tool for information exchange and authentication.

\n","frontmatter":{"date":"July 11, 2018","updated_date":null,"description":null,"title":"What is JSON Web Token","tags":["JWT","JSON Web Token"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/fca016963236696b6d07a52d211c1354/58556/jwt.webp","srcSet":"/static/fca016963236696b6d07a52d211c1354/61e93/jwt.webp 200w,\n/static/fca016963236696b6d07a52d211c1354/1f5c5/jwt.webp 400w,\n/static/fca016963236696b6d07a52d211c1354/58556/jwt.webp 800w,\n/static/fca016963236696b6d07a52d211c1354/99238/jwt.webp 1200w,\n/static/fca016963236696b6d07a52d211c1354/135cd/jwt.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mayank Agarwal","github":"mayankagrwal","avatar":null}}}},{"node":{"excerpt":"Nowadays, many API providers support JSONP requests. One reason for this is that most web browsers disable cross-domain requests when using…","fields":{"slug":"/engineering/understanding-jsonp/"},"html":"

Nowadays, many API providers support JSONP requests. One reason for this is that most web browsers disable cross-domain requests when using basic Ajax.

\n

For example, if your website has the domain \"a.com\", it will use JavaScript hosted on a.com. When the a.com JavaScript makes an Ajax call to make a request on b.com, most web browsers would automatically deem the Ajax call as insecure and disable it. This is called the Same-Origin Policy and web browsers have this to prevent malicious scripts from sending off information to a different domain. Because you need the a.com JavaScript to access b.com to provide your service, this seems to pose a pretty big issue … JSONP to the rescue!

\n

Before understanding JSONP, we already know JSON is an object notation of JavaScript. The \"P\" stands for padding. So it’s a padded JSON, and, to be more specific, the JSON object is padded with a JavaScript function! It looks like this:

\n
jsFunction({"name" : "Ash Ketchum", "role" : "Pokemon trainer"});
\n

Thus, technically, any call that retrieves JSONP, sends off an executable JavaScript line, if and only if your page has a JavaScript function that has the same function name that’s returned in the JSONP!

\n

Let’s look at an example: say the user is on a.com and the browser is using JavaScript hosted on a.com. Then I shouldn't have any issues making Ajax calls to a.com. Ajax GET requests to b.com however, would fail. To avoid this, I first create a method in the JavaScript code that's located on a.com with the following signature

\n
function getData(data){\n// use this data\n}
\n

With this, an Ajax call using JSONP will pass through fine and return this data:

\n
getData({"name" : "test", "value" : "test Value"});
\n

After processing the request, the web browser will call the \"getData\" function because whenever a JavaScript tag is loaded, it gets executed.

\n

Now, the JSON object will get passed as an argument to the getData function as the data parameter. So, you can think of the getData as a callback method of the request.

\n

You can see the below code clearly

\n
function addJavascriptFile = function (url, context) {\ncontext = context || document;\nvar head = context.getElementsByTagName('head')\\[0\\];\nvar js = context.createElement('script');\njs.src = url;\njs.type = "text/JavaScript";\nhead.appendChild(js);\nreturn js;\n}\n\nfunction getJsonp = function (url, handle) {\n\n//creating random name of function as to not conflict with others\nvar func = 'jsonpCallback' + Math.floor((Math.random() \\* 1000000000000000000) + 1);\n\n//adding randomly created function to global window object\nwindow\\[func\\] = function (data) {\n\n//calling handle\nhandle(data);\n\n//removing random named declared function\nwindow\\[func\\] = function () {};\n\n//removing added js\ndocument.head.removeChild(js);\n}\n\n//manipulating and adding js file to head\nvar endurl = url.indexOf('?') != -1 ? url + '&callback=' + func : url + '?callback=' + func;\nvar js = addJavascriptFile(endurl);\n}
\n

The above code is not doing any magic, it will accept the URL of the API and add a parameter callback with a random name, and also create a global method with this same random name. It will then create a script tag and add the complete URL to src of this tag.

\n

The API will read the callback parameter from the query string and, if the callback parameter has the value \"jsonCallback\", the response will be as follows:

\n
jsonpCallback({"name" : "test", "value" : "test Value"});
\n","frontmatter":{"date":"June 29, 2018","updated_date":null,"description":null,"title":"Understanding JSONP","tags":["JavaScript","JSONP","API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.834862385321101,"src":"/static/85e9390b35cfcd06b4e455bd05cc8ea7/50fff/Screenshot-2018-06-29-12.21.27.webp","srcSet":"/static/85e9390b35cfcd06b4e455bd05cc8ea7/61e93/Screenshot-2018-06-29-12.21.27.webp 200w,\n/static/85e9390b35cfcd06b4e455bd05cc8ea7/1f5c5/Screenshot-2018-06-29-12.21.27.webp 400w,\n/static/85e9390b35cfcd06b4e455bd05cc8ea7/50fff/Screenshot-2018-06-29-12.21.27.webp 730w","sizes":"(max-width: 730px) 100vw, 730px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"NuGet is a free and open-source package manager for the .NET ecosystem. We can create and install packages using NuGet client tools. All of…","fields":{"slug":"/engineering/using-nuget-to-publish-net-packages/"},"html":"

NuGet is a free and open-source package manager for the .NET ecosystem. We can create and install packages using NuGet client tools. All of the .NET packages are hosted for publishing and consumption on a central package repository known as NuGet Gallery.

\n

Prerequisites

\n\n

Create a class library project

\n

For a .NET package to be published in the NuGet Gallery, it should be a valid class library project. The following instructions can be used to create a simple class library project:

\n\n

For a real useful NuGet package, you should write necessary code which can be used by others to develop applications. However, a class library from the template is sufficient to create a package.

\n

Configure Package Properties

\n
    \n
  1. Go to Project > Properties, select Package tab.
    2. \n
  2. Provide a unique identifier for your package and fill out other required properties. For a description of various properties, please visit here. The properties provided at this stage will be defined in .nuspec manifest that is created by Visual Studio for the project.
    3. \n
  3. To view the properties directly in the project file, right-click the project in Solution Explorer and select Edit AppLogger.csproj.
    4. \n
\n

Run the pack command

\n
    \n
  1. Set the configuration to Release.
    2. \n
  2. Right click the project in Solution Explorer and select the Pack command.
    3. \n
  3. Visual Studio builds the project and creates the .nupkg file. Please note that the built package is in bin\\Release\\netstandard2.0 as befits the .NET Standard 2.0 target.
    4. \n
\n

Acquire API Key

\n
    \n
  1. Sign in to your nuget.org account or create an account if it doesn’t already exist.
    2. \n
  2. Select your user name on the top right, then select API Keys.
    3. \n
  3. Select Create, provide a name for your key, select Select Scopes > Push.
    4. \n
  4. Under API Key, enter * for Glob pattern, then select Create.
    5. \n
  5. After the key is created, select Copy to retrieve the access key needed for publishing the package.
    6. \n
\n

Important: Save your key in a secure location because you cannot copy the key again later on. If you return to the API key page, you need to regenerate the key to copy it.

\n

Publish with nuget push

\n
    \n
  1. Open Command Prompt.
    2. \n
  2. Change to the folder containing the .nupkg file.
    3. \n
  3. \n

    Run the following command, specifying your package name and replacing the key value with your API key:

    \n
    nuget push <PACKAGE-NAME>.nupkg <API-KEY> -Source https://api.nuget.org/v3/index.json
    \n
    4. \n
  4. nuget.exe displays the results of the publishing process.
    5. \n
\n

Manage the published package

\n

You can view your published package in your profile on nuget.org. Select Manage Packages to see the one that was just published. It might take a while for your package to be visible in search results.

\n

If you want to unlist the package and hide it from search results, follow the steps listed below:

\n
    \n
  1. On nuget.org, select your user name on top right, then select Manage Packages.
    2. \n
  2. Find the package to be unlisted under Published and select the trash can icon on the right.
    3. \n
  3. On the next page, clear the box labeled List (package-name) in search results and select Save.
    4. \n
\n","frontmatter":{"date":"June 28, 2018","updated_date":null,"description":null,"title":"Using NuGet to publish .NET packages","tags":["NuGet",".NET"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Hitesh Pamnani","github":null,"avatar":null}}}},{"node":{"excerpt":"Time Required : less than 10 minutes. Technologies : None. Prerequisites : None. This tutorial will go over how to configure the ‘Actions on…","fields":{"slug":"/engineering/how-to-configure-the-actions-on-google-console-for-google-assistant/"},"html":"

Time Required : less than 10 minutes.

\n

Technologies : None.

\n

Prerequisites : None.

\n

This tutorial will go over how to configure the ‘Actions on Google’ console so that it can be used for your Google Assistant actions/events that can be accessed anywhere the Google Assistant is available from phones to Google Home products.

\n

Steps

\n
    \n
  1. \n

    Create an Actions project and a Dialogflow agent here.

    \n
      \n
    1. Add/import project.\n
      2. \n
    2. Click on Skip(in the upper right corner) choosing a category and click Build -> Actions in the left nav to add your first actions.
      \n\n \n \n
      3. \n
    \n
    2. \n
  2. \n

    Configuration for your action intent in the dialogflow console.

    \n
      \n
    1. In the Intent section, enter your training phrases. Start with “talk to”, “speak to”, “ask” and etc, learn more here.\n
      2. \n
    2. Enter the default text response. This will be the default response for your action until you link your account with LoginRadius and build your customized response. (This will return errors if you leave this empty, even if you handle the response in your code.)
      3. \n
    \n
    3. \n
\n

By then, you should have finished the setup for google assistant.

\n","frontmatter":{"date":"June 18, 2018","updated_date":null,"description":null,"title":"How to configure the 'Actions on Google' console for Google Assistant","tags":["Engineering","GoogleAssistant"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/8744b7a7d1a64b8263651675a3ff555f/58556/google-home-max-13.webp","srcSet":"/static/8744b7a7d1a64b8263651675a3ff555f/61e93/google-home-max-13.webp 200w,\n/static/8744b7a7d1a64b8263651675a3ff555f/1f5c5/google-home-max-13.webp 400w,\n/static/8744b7a7d1a64b8263651675a3ff555f/58556/google-home-max-13.webp 800w,\n/static/8744b7a7d1a64b8263651675a3ff555f/99238/google-home-max-13.webp 1200w,\n/static/8744b7a7d1a64b8263651675a3ff555f/7c22d/google-home-max-13.webp 1600w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vincent Lin","github":null,"avatar":null}}}},{"node":{"excerpt":"Time Required: 20 minutes. Technologies: Express, Node.js, JavaScript. Prerequisites: Basic knowledge of Express, Node.js, and JavaScript…","fields":{"slug":"/engineering/creating-a-google-hangout-bot-with-express-and-node-js/"},"html":"

Time Required: 20 minutes.
\nTechnologies: Express, Node.js, JavaScript.
\nPrerequisites:

\n\n

This tutorial will go over how to build a bot that will respond to pings (i.e. @), and send messages to a chat room. On a high level, the bot will run on an express server, and receive pings via an HTTP endpoint. Responses to pings will be sent synchronously through a payload in the HTTP response, while bot-initiated messages will be sent asynchronously using the Google Hangout Chat API.

\n
Outline
\n
    \n
  1. Environment setup.
    2. \n
  2. Get bot to respond to pings.
    3. \n
  3. Send bot-initiated messages.
    4. \n
  4. Deploy.
    5. \n
\n
Environment Setup
\n

Create a new project with the file ‘app.js’.
\nOpen command line/terminal, and navigate to your project directory. Run ‘npm init’, and press enter until package.json is created. Next, install the following dependencies:

\n\n

In ‘app.js’, let’s setup our server:

\n
const express = require('express');\nconst bodyParser = require('body-parser');\nconst { google } = require('googleapis');\n\nconst app = express();\n\napp.use(bodyParser.urlencoded({\n  extended: false\n}));\n\napp.use(bodyParser.json());\n\napp.listen(8100, function() {\n  console.log('App listening on port 8100.');\n});
\n

Running ‘node app.js’ will now create a local server on port 8100.

\n
Responding to Pings
\n

The bot will respond to pings through a HTTP POST endpoint. Create one with express:

\n
app.post('/', function(req, res) {\n  console.log('someone pinged @');\n\n  if (req.body.type === 'MESSAGE') {\n    return res.json({\n      text: 'sleeping...'\n    });\n  }\n});
\n

The bot will respond with the text: ‘sleeping…’.

\n

Synchronously responding to messages simply requires us to return a response to Google. The downside to this is the 30 second time limit before Google no longer accepts responses to the request. For instance, this would be a problem if you were building some kind of reminder app; the bot wouldn't be able to synchronously respond after 30 seconds. This is where async responses come in.

\n
Bot-initiated Messages
\n

To show this, we will have our bot post to a chat room every 1 minute.

\n

Sending async messages to Google API requires a Service Account for authentication. Once authenticated, we can make a POST request to a Google API URL that will create a message.

\n

So first, create a Google Service Account following these steps. Take the downloaded JSON file and put it in the root directory of your project. Here, we renamed it to googlekeys.json:

\n
const gkeys = require('./googlekeys.json');
\n

We will be making POST requests using Unirest:

\n
const unirest = require('unirest');
\n

Now generate a JWT that will be used in our POST request:

\n
function getJWT() {\n  return new Promise(function(resolve, reject) {\n    let jwtClient = new google.auth.JWT(\n      gkeys.client_email,\n      null,\n      gkeys.private_key, ['https://www.googleapis.com/auth/chat.bot']\n    );\n\n    jwtClient.authorize(function(err, tokens) {\n      if (err) {\n        console.log('Error create JWT hangoutchat');\n        reject(err);\n      } else {\n        resolve(tokens.access_token);\n      }\n    });\n  });\n}
\n

Here is our function for posting messages. ROOM-ID can be found in the URL of the hangout chat room page i.e.: https://chat.google.com/u/0/room/{ROOM-ID}

\n
function postMessage(count) {\n  return new Promise(function(resolve, reject) {\n      getJWT().then(function(token) {\n          unirest.post('https://chat.googleapis.com/v1/spaces/' + {ROOM-ID} + '/messages')\n              .headers({\n                  "Content-Type": "application/json",\n                  "Authorization": "Bearer " + token\n              })\n              .send(JSON.stringify({\n                  'text': 'Hello! This is message number ' + count,\n              }))\n              .end(function(res) {\n                  resolve();\n              });\n      }).catch(function(err) {\n          reject(err);\n      });\n  });\n}
\n

Finally, add the code that will repeat our post every minute.

\n
const timer = require('timers');\n\napp.listen(8100, function() {\n  console.log('App listening on port 8100.');\n\n  let count = 0;\n  timer.setInterval(function() {\n      postMessage(count += 1);\n  }, 60000);\n});
\n
Deploy
\n

Expose your local server to public (we used ngrok).

\n

Login to developer console. Create a new project, and enable Hangout Chat API. Under configuration, set:

\n\n

Restart your local server, and that’s it! Make sure you have your bot added to the chat room, and you can ping it by sending @. The bot will also post to the chat room every minute.

\n

There are a lot of different ways to further extend this bot, such as setting reminders/notifications, making to-do lists, displaying server logs, and interacting with API’s.

\n

\n

\n","frontmatter":{"date":"June 06, 2018","updated_date":null,"description":null,"title":"Creating a Google Hangout Bot with Express and Node.js","tags":["Express","NodeJs","Hangout"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/ce69f8b38834ee73f9b8821830d73c87/0c543/hangoutchatimgage2.webp","srcSet":"/static/ce69f8b38834ee73f9b8821830d73c87/61e93/hangoutchatimgage2.webp 200w,\n/static/ce69f8b38834ee73f9b8821830d73c87/1f5c5/hangoutchatimgage2.webp 400w,\n/static/ce69f8b38834ee73f9b8821830d73c87/0c543/hangoutchatimgage2.webp 630w","sizes":"(max-width: 630px) 100vw, 630px"}}},"author":{"id":"Andy Yeung","github":null,"avatar":null}}}},{"node":{"excerpt":"Which character do you consider as the end of line or newline? Most developers will answer \\n (except for front-end developers, they would…","fields":{"slug":"/engineering/eol-end-of-line-or-newline-characters/"},"html":"

Which character do you consider as the end of line or newline? Most developers will answer \\n (except for front-end developers, they would say: \"</br>tag\" 😊 ). But this is not true, let's understand why.

\n

What is an End of Line character:

\n

It is a character in a string which represents a line break, which means that after this character, a new line will start. There are two basic new line characters:

\n

LF (character : \\n, Unicode : U+000A, ASCII : 10, hex : 0x0a): This is simply the '\\n' character which we all know from our early programming days. This character is commonly known as the ‘Line Feed’ or ‘Newline Character’.

\n

CR (character : \\r, Unicode : U+000D, ASCII : 13, hex : 0x0d) : This is simply the 'r' character. This character is commonly known as ‘Carriage Return’.

\n

As matter of fact, \\r has also has a different meaning. In older printers, \\r meant moving the print head back to the start of line and \\n meant starting a new line.

\n

OS support

\n

Unix: Unix systems consider '\\n' as a line terminator. Unix considers \\r as going back to the start of the same line.

\n

Mac (up to 9): Older Mac OSs consider '\\r' as a newline terminator but newer OS versions have been made to be more compliant with Unix systems to use '\\n' as the newline.

\n

Windows: Windows has a different style of newline, Windows supports the combination of both CR and LF as the newline character - '\\r\\n'.

\n

How to check
\nThere are lots ways to check this. I use Notepad++ as my text editor for this because it is easy to use and is widely used by developers.
\nNPP show all characters

\n

Open any text file and click on the pilcrow (¶) button. Notepad++ will show all of the characters with newline characters in either the CR and LF format. If it is a Windows EOL encoded file, the newline characters of CR LF will appear (\\r\\n). If the file is UNIX or Mac EOL encoded, then it will only show LF (\\n).

\n

NPP Extended search

\n

Press the key combination of Ctrl + Shift + F and select 'Extended' under the search mode. Now search '\\r\\n' - if you find this at end of every line, it means this is a Windows EOL encoded file. However, if it is '\\n' at the end of every line, then it is a Unix or Mac EOL encoded file.

\n

How to convert

\n

Let's stick with notepad++ for this, too. Open any file that you would like to convert, click on the Edit menu, scroll down to the EOL conversion option, and select the format that you would like to convert the file to.

\n

Reference

\n\n","frontmatter":{"date":"September 06, 2017","updated_date":null,"description":"Learn what are EOL (End of Line) or LF (Line Feed) or NL (New Line) ascii characters (\\n\\r) and why there are two (\\n\\r) newline characters.","title":"EOL or End of Line or newline ascii character","tags":["Engineering","EOL","LF","Linux","Mac","Windows"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/c54e66c499f461eea5df725fac0348d7/58556/eol.webp","srcSet":"/static/c54e66c499f461eea5df725fac0348d7/61e93/eol.webp 200w,\n/static/c54e66c499f461eea5df725fac0348d7/1f5c5/eol.webp 400w,\n/static/c54e66c499f461eea5df725fac0348d7/58556/eol.webp 800w,\n/static/c54e66c499f461eea5df725fac0348d7/99238/eol.webp 1200w,\n/static/c54e66c499f461eea5df725fac0348d7/135cd/eol.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

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

\n

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

\n

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

\n

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

\n

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

\n

What is JWT?

\n

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

\n

A JWT consists of three parts:

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

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

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

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

\n

JWT Authentication with LoginRadius: Overview

\n

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

\n

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

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

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

\n\n

Configuration Steps:

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

\"Screenshot

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

Example Response:

\n

{

\n

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

\n

\"expires_in\": 1800

\n

}

\n

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

\n

2. Direct API Implementation – Self Managed Login

\n

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

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

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

\n

Step 2: Get JWT in Response

\n\n

{

\n

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

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

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

\n

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

\n

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

\n

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

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

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

\n

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

\n

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

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

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

    Client Stores the Token

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

    Access Token Expiry

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

    Token Renewal

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

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

\n\n

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

\n

\"illustration

\n

How to Store JWT Tokens?

\n

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

\n

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

\n\n

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

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

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

Conclusion

\n

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

\n

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

\n

FAQs

\n

1. What is JWT authentication used for?

\n

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

\n

2. How does LoginRadius simplify JWT integration?

\n

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

\n

3. Is JWT authentication secure?

\n

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

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

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

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