{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/38","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"This blog is a short guide on implementing AWS Lambda and SQS together. First we’ll introduce these technologies and explain why they work…","fields":{"slug":"/engineering/working-with-aws-lambda-and-sqs/"},"html":"

This blog is a short guide on implementing AWS Lambda and SQS together. First we’ll introduce these technologies and explain why they work well together, then walkthrough some configurations and invocation using a simple Nodejs script.

\n

\n

What are they?\nAWS Lambda is a popular choice in serverless computing. As an event-driven platform, AWS Lambda requires users to configure event sources in order to run a function. Their built-in support for many AWS services like S3 and SQS as event sources allow for relatively simple configuration. Note that Lambda functions can also be triggered via HTTP(S) by using AWS API Gateway service.

\n

AWS SQS (Simple Queue Service) is a queue service with 2 types: standard and FIFO. The major difference is that standard queues guarantee “at-least once” delivery of its messages, while FIFO queues guarantee “exactly-once” delivery. FIFO queues, however, provide lower maximum throughput than standard.

\n

As previously mentioned, AWS SQS can be an event source for AWS Lambda. This means that when a message is added to the queue, the configured Lambda function will be invoked with an event containing this message.

\n

\n

But why use them together?
\nCommon reasons include better handling Lambda function invocations and errors. For function invocations, the default concurrency limit is 1000. If a function has reached this limit, any additional invocations will fail with a throttling error. However, with SQS as an event source, events resulting in throttling errors are automatically retried based on set configs. This prevents the loss of events due to unexpected jumps in usage. Additionally, dead-letter queues (DLQ) can be configured as a place where failed events go, to avoid retrying indefinitely. Failed events in DLQ can then be sent somewhere like a DB for analysis.

\n

One limitation for many use cases was the “at-least once” delivery model of events with standard queues. Essentially, there was no guarantee that an event will only be delivered once to a consuming Lambda function. In cases where each event can strictly only be processed once, one would have to employ various strategies resulting in higher overhead and complexity. But, this is no longer an issue because recently the AWS team added support for FIFO queues as event sources to Lambda functions.

\n

Walkthrough
\nLet’s set up a basic “Hello World” application with SQS and Lambda.

\n

1. Starting with SQS, add a standard queue.

\n

2. Now, add a Lambda function:

\n

\n

3. Create a new execution role with the following configs:
\na. Trusted Entity: Lambda
\nb. Permissions: AWSLambdaBasicExecutionRole; AWSLambdaSQSQueueExecutionRole

\n

\n

4. Use newly created role in Lambda function. Remember to save (top right).

\n

\n

5. Add a trigger:
\na. Batch size set to 1, so the Lambda Function will process 1 message at a time.

\n

\n

6. Programmatically enqueue a message into SQS with the following code in Nodejs:

\n
const AWS = require("aws-sdk");\nAWS.config.update({\n  region: <AWS_SQS_REGION>, // TODO\n  accessKeyId: <AWS_ACCESS_KEY_ID>, // TODO\n  secretAccessKey: <AWS_SECRET_ACCESS_KEY> // TODO\n});\n\nconst sqs = new AWS.SQS({ apiVersion: "2012-11-05" });\nsqs.sendMessage({\n  MessageBody: JSON.stringify({hello: "world"}),\n  QueueUrl: <AWS_SQS_URL> // TODO\n}, (err, data) => (err) ? console.log("Error", err) : console.log("Success", data.MessageId));
\n

a. Create package.json with `npm init`
\nb. Install aws sdk dependency with `npm i aws-sdk --save`
\nc. Fill in your specific AWS account details. Find AWS_SQS_URL by selecting the queue you created, while AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY require creating a new IAM user with programmatic access. This user also needs permission to push messages into SQS.
\nd. Run script with `node app.js`
\ne. Navigate to Monitoring tab in your Lambda function, the invocations graph should have a new data point (may take a few minutes to update).

\n

\n","frontmatter":{"date":"February 13, 2020","updated_date":null,"description":null,"title":"Working with AWS Lambda and SQS","tags":["Engineering","General"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.127659574468085,"src":"/static/ee2d9bd3978930dc685480ceac45286e/b594c/blog-aws-lambda.webp","srcSet":"/static/ee2d9bd3978930dc685480ceac45286e/61e93/blog-aws-lambda.webp 200w,\n/static/ee2d9bd3978930dc685480ceac45286e/1f5c5/blog-aws-lambda.webp 400w,\n/static/ee2d9bd3978930dc685480ceac45286e/b594c/blog-aws-lambda.webp 448w","sizes":"(max-width: 448px) 100vw, 448px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"In this blog, we’ll be implementing OAuth in node js application via Google. For this, we’ll be using Passport.js, an authentication…","fields":{"slug":"/engineering/google-authentication-with-nodejs-and-passportjs/"},"html":"

In this blog, we’ll be implementing OAuth in node js application via Google. For this, we’ll be using Passport.js, an authentication package for Node.js. Here’s a quick guide on implementing OAuth 2.0 in node js​.

\n

Before You Get Started

\n

This tutorial assumes you have:

\n\n

Step 1: Create a Google client ID and client secret

\n

We can create a client ID and client secret using its Google API Console. You need to follow below steps once you open Google Auth API Console

\n\n

Note: If Google doesn't support http://localhost:3000, then use http://127.0.0.1:3000

\n

Step 2: Initialize a node.js project with all the dependencies

\n

To create OAuth nodejs authentication, first in an empty folder run the below command

\n
npm init
\n

It essentially just creates the package.json file with all the basic information you will provide. after that, we will install all the dependencies needed in our project

\n\n
npm install express ejs express-session passport passport-google-oauth --save
\n

Step 3: Writing express server code to accept web requests

\n

Create a file index.js in the root folder of your app and add the following code:

\n
// index.js\n\n/*  EXPRESS */\n\nconst express = require('express');\nconst app = express();\nconst session = require('express-session');\n\napp.set('view engine', 'ejs');\n\napp.use(session({\n  resave: false,\n  saveUninitialized: true,\n  secret: 'SECRET' \n}));\n\napp.get('/', function(req, res) {\n  res.render('pages/auth');\n});\n\nconst port = process.env.PORT || 3000;\napp.listen(port , () => console.log('App listening on port ' + port));
\n

Our web server has been set up, now we will add the code related to the passport at the bottom of the index.js file:

\n
// index.js\n\n/*  PASSPORT SETUP  */\n\nconst passport = require('passport');\nvar userProfile;\n\napp.use(passport.initialize());\napp.use(passport.session());\n\napp.set('view engine', 'ejs');\n\napp.get('/success', (req, res) => res.send(userProfile));\napp.get('/error', (req, res) => res.send("error logging in"));\n\npassport.serializeUser(function(user, cb) {\n  cb(null, user);\n});\n\npassport.deserializeUser(function(obj, cb) {\n  cb(null, obj);\n});
\n

Now, at last, we are ready to implement Google Authentication in our app, Add the following code at the bottom of your index.js file, use your client Id and Secret instead of placeholders:

\n
// index.js\n\n/*  Google AUTH  */\n \nconst GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;\nconst GOOGLE_CLIENT_ID = 'our-google-client-id';\nconst GOOGLE_CLIENT_SECRET = 'our-google-client-secret';\npassport.use(new GoogleStrategy({\n    clientID: GOOGLE_CLIENT_ID,\n    clientSecret: GOOGLE_CLIENT_SECRET,\n    callbackURL: "http://localhost:3000/auth/google/callback"\n  },\n  function(accessToken, refreshToken, profile, done) {\n      userProfile=profile;\n      return done(null, userProfile);\n  }\n));\n \napp.get('/auth/google', \n  passport.authenticate('google', { scope : ['profile', 'email'] }));\n \napp.get('/auth/google/callback', \n  passport.authenticate('google', { failureRedirect: '/error' }),\n  function(req, res) {\n    // Successful authentication, redirect success.\n    res.redirect('/success');\n  });
\n

Note: The callback URL should be the same as used in the google app configuration.

\n

Step 4: Creating a Login and Profile page

\n

Create an ejs file under path views/pages/auth.js, it will render into a nice looking social login page:

\n
<!-- views/pages/auth.ejs -->\n<!doctype html>\n<html>\n<head>\n    <title>Google SignIn</title>\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n    <style>\n        body        { padding-top:70px; }\n    </style>\n</head>\n<body>\n<div class="container">\n    <div class="jumbotron text-center text-primary">\n        <h1><span class="fa fa-lock"></span> Social Authentication</h1>\n        <p>Login or Register with:</p>\n        <a href="/auth/google" class="btn btn-danger"><span class="fa fa-google"></span> SignIn with Google</a>\n    </div>\n</div>\n</body>\n</html>
\n

After it we wll create an ejs file under path views/pages/success.js, it will be used to show the user profile information we will get after authenticated by google

\n
<!-- views/success.ejs -->\n<!doctype html>\n<html>\n  <head>\n    <title>Google SignIn</title>\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- load bootstrap css -->\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- load fontawesome -->\n      <style>\n          body        { padding-top:70px; }\n      </style>\n  </head>\n  <body>\n    <div class="container">\n      <div class="jumbotron">\n          <h1 class="text-primary  text-center"><span class="fa fa-user"></span> Profile Information</h1>\n          <div class="row">\n            <div class="col-sm-6">\n                <div class="well">\n                        <p>\n                            <strong>Id</strong>: <%= user.id %><br>\n                            <strong>Email</strong>: <%= user.emails[0].value %><br>\n                            <strong>Name</strong>: <%= user.displayName %>\n                        </p>\n                </div>\n            </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>
\n

Note: Here we are also using bootstrap and font-awesome css to make our web pages look good.

\n

We have finished building our social login page, let's run the application by below command

\n
node index.js
\n

Once our server is running, we can see our social login page on http://localhost:3000/

\n

\"Social

\n

We need to click on SignIn with Google button, which will redirect us to the google login page.

\n

\"Google

\n

After login with our google credentials, it will redirect back to our application and on the success page, we can see the details of the logged-in user and can save this detail in a database for future use also.

\n

\"Social

\n

As we have seen it is fairly easy to build a google social authentication system with Node.js and Passport.js, You can found the complete code used in this tutorial on our Github Repo

\n","frontmatter":{"date":"February 12, 2020","updated_date":null,"description":"Learn how to implement Google OAuth2 Authentication in NodeJS using Passport","title":"Google OAuth2 Authentication in NodeJS - A Guide to Implementing OAuth in Node.js","tags":["NodeJs","SocialLogin","Oauth"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3071895424836601,"src":"/static/af2ca4c70d0c3c2c4c6726e14a1b25ad/e9589/google_cover.webp","srcSet":"/static/af2ca4c70d0c3c2c4c6726e14a1b25ad/61e93/google_cover.webp 200w,\n/static/af2ca4c70d0c3c2c4c6726e14a1b25ad/1f5c5/google_cover.webp 400w,\n/static/af2ca4c70d0c3c2c4c6726e14a1b25ad/e9589/google_cover.webp 500w","sizes":"(max-width: 500px) 100vw, 500px"}}},"author":{"id":"Puneet Singh","github":"puneetsingh24","avatar":null}}}},{"node":{"excerpt":"The official supported drivers for Mongo for Go have been officially released for several months now and is slowly seeing more usage…","fields":{"slug":"/engineering/custom-encoders-in-the-mongo-go-driver/"},"html":"

The official supported drivers for Mongo for Go have been officially released for several months now and is slowly seeing more usage. Although many of the features of standard Mongo drivers have been implemented within the supported driver, the documentation for a majority of the features are still in the process of being created. This post will provide some information on how to set up custom JSON encoders so you can change how BSON operators are processed whenever Mongo documents are marshalled into JSON. For this blog, a custom date and object id encoder will be created to handle the BSON operators and transform them into more easily processed JSON.

\n

This blog assumes that you have a basic understanding of Go and how to write some code in the language. If you want to follow along with the guide, you will also require a working Mongo instance, as well as your environment set up for Go.

\n

Before interacting with the database, we can set up a quick Go application that finds data from a Mongo database and outputs it. For this example, the Mongo database is set up with a collection containing documents with a name, a date and the object id. For our blog, the Mongo document that is being worked with is quite simple:

\n
{\n    "_id" : ObjectId("5de6b0850f3c7b5cce642529"),\n    "Name" : "dateOne",\n    "Date" : ISODate("2019-04-08T11:55:02.658Z")\n}
\n

A simple main function that retrieves data from Mongo and outputs the JSON string is as follows:

\n
func main() {\n\tvar result struct {\n\t\tID   primitive.ObjectID `bson:"_id"`\n\t\tName string             `bson:"Name"`\n\t\tDate primitive.DateTime `bson:"Date"`\n\t}\n\n\tctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)\n\tclient, connErr := mongo.Connect(ctx, options.Client().ApplyURI(""))\n\n\tif connErr != nil {\n\t\tlog.Fatal(connErr)\n\t}\n\n\tcollection := client.Database("test").Collection("dates")\n\n\tfilter := bson.M{"Name": "dateOne"}\n\tfindErr := collection.FindOne(ctx, filter).Decode(&result)\n\tif findErr != nil {\n\t\tlog.Fatal(findErr)\n\t}\n\n\tfmt.Print(result.Date)\n\n\tdata, writeErr := bson.MarshalExtJSON(result, false, false)\n\tif writeErr != nil {\n\t\tlog.Fatal(writeErr)\n\t}\n\n\tfmt.Print(string(data))\n\tcancel()\n}
\n

The function MarshalExtJSON is a part of the bson package that is a part of the driver. It uses a default registry to define the rules when converting Mongo primitive types into JSON. The arguments it takes are the Go struct being passed in, whether the result should be returned in canonical form (For more details, check this link, and whether HTML strings are escaped.

\n

The output of this function when reading our document produces a JSON string with all the BSON operators included.

\n
{\n\t"_id": {\n\t\t"$oid":"5de6b0850f3c7b5cce642529"\n\t},\n\t"Name":"dateOne",\n\t"Date":{\n\t\t"$date":"2019-04-08T11:55:02.658Z"\n\t}\n}
\n

Using custom encoders, we can change how the bson package marshals the JSON and remove all the BSON operators. The first thing to do is to define package level variables that will hold the types of the Mongo primitives that need to be changed in the JSON response. Outside the main function, include these two lines:

\n
var tOID = reflect.TypeOf(primitive.ObjectID{})\nvar tDateTime = reflect.TypeOf(primitive.DateTime(0))
\n

Next, we can make new functions to customize how these types are handled. For the date encoding, we want to have the Date key matched with the returned date string.

\n
func dateTimeEncodeValue(ec bsoncodec.EncodeContext, vw bsonrw.ValueWriter, val reflect.Value) error {\n\tconst jDateFormat = "2006-01-02T15:04:05.999Z"\n\tif !val.IsValid() || val.Type() != tDateTime {\n\t\treturn bsoncodec.ValueEncoderError{Name: "DateTimeEncodeValue", Types: []reflect.Type{tDateTime}, Received: val}\n\t}\n\n\tints := val.Int()\n\tt := time.Unix(0, ints*1000000).UTC()\n\n\treturn vw.WriteString(t.Format(jdateFormat))\n}
\n

The parameters in this function are pre-defined within the driver package of the driver. This involves passing in the BSON encoding context, the value writer and the value that is being processed. The value writer and the value are the parameters that we use within our function.

\n

First, we check if the value passed in is the correct type. If there is an issue with the value, then an error is thrown during the encoding. Next, we can set the format we want our date string to appear in, and process our value into a Go Time object. After that, we can use the value writer to write the formatted date into our JSON string.

\n

Similar to the custom date encoding, the object id encoding function has the same structure.

\n
func objectIDEncodeValue(ec bsoncodec.EncodeContext, vw bsonrw.ValueWriter, val reflect.Value) error {\n\tif !val.IsValid() || val.Type() != tOID {\n\t\treturn bsoncodec.ValueEncoderError{Name: "ObjectIDEncodeValue", Types: []reflect.Type{tOID}, Received: val}\n\t}\n\ts := val.Interface().(primitive.ObjectID).Hex()\n\treturn vw.WriteString(s)\n}
\n

First, we check if the type is valid, and if it is, we simply write out the object id as a hex string. To create the hex string, we first convert the value into an interface, then cast it as an object id to allow the Hex function to be called.

\n

Now that our two functions are created to handle the BSON types, we can create our custom registry.

\n
func createCustomRegistry() *bsoncodec.RegistryBuilder {\n\tvar primitiveCodecs bson.PrimitiveCodecs\n\trb := bsoncodec.NewRegistryBuilder()\n        bsoncodec.DefaultValueEncoders{}.RegisterDefaultEncoders(rb)\n        bsoncodec.DefaultValueDecoders{}.RegisterDefaultDecoders(rb)\n\trb.RegisterEncoder(tDateTime, bsoncodec.ValueEncoderFunc(dateTimeEncodeValue))\n\trb.RegisterEncoder(tOID, bsoncodec.ValueEncoderFunc(objectIDEncodeValue))\n\tprimitiveCodecs.RegisterPrimitiveCodecs(rb)\n\treturn rb\n}
\n

In this function, we are setting up our registry to use our custom encoders, while also setting up default encoders for all other types that are being marshalled. Using the bsoncodec package, the NewRegistryBuilder function is called to initialize a new registry. Next, we set up this registry with the default encoders and decoders that are pre-programmed in the driver using RegisterDefaultEncoders. During this step, we can also register encoders and decoders for raw types by calling RegisterPrimitiveCodecs. Finally, we can include our custom encoders by calling RegisterEncoder on the custom registry struct. Our encoder will be called whenever the type defined in the first argument in RegisterEncoder is found in the struct being marshalled.

\n

To ensure our new custom registry is being used, we have to do two things. The first is to build the custom registry. This should be done before the marshalling of the struct.

\n
var customRegistry = createCustomRegistry().Build()
\n

Next, we need to change the marshalling method to use the new custom registry instead of the default one. We can do this by changing the method being used to marshal the struct.

\n
customData, writeErr := bson.MarshalExtJSONWithRegistry(customRegistry, result, false, false)
\n

The function MarshalExtJSONWithRegistry takes the same parameters as MarshalExtJSON, but also requires a custom registry to be passed in as the first parameter. We pass in the custom registry we created into the method to allow the marshalling to use our custom encoders. As a result, when printing our new JSON string output, we get this:

\n
{"_id":"5de6b0850f3c7b5cce642529","Name":"dateOne","Date":"2019-04-08T11:55:02.658Z"}
\n

The Mongo driver for Go is still in active development and new versions continue to be released. Hopefully this blog provides some useful information on how the driver works while new documentation is being created.

\n","frontmatter":{"date":"December 03, 2019","updated_date":null,"description":null,"title":"Custom Encoders in the Mongo Go Driver","tags":["Go","Golang","MongoDriver"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.25,"src":"/static/5101a7134dd4fbb552b2c92ea342e1e4/58556/mongo-drivers.webp","srcSet":"/static/5101a7134dd4fbb552b2c92ea342e1e4/61e93/mongo-drivers.webp 200w,\n/static/5101a7134dd4fbb552b2c92ea342e1e4/1f5c5/mongo-drivers.webp 400w,\n/static/5101a7134dd4fbb552b2c92ea342e1e4/58556/mongo-drivers.webp 800w,\n/static/5101a7134dd4fbb552b2c92ea342e1e4/5d27d/mongo-drivers.webp 936w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Chris Yee","github":null,"avatar":null}}}},{"node":{"excerpt":"Overview The “reconciliation” algorithm in React is how the decision to re-render the component is made. In the browser, DOM manipulation…","fields":{"slug":"/engineering/reacts-reconciliation-algorithm/"},"html":"

Overview

\n

The “reconciliation” algorithm in React is how the decision to re-render the component is made. In the browser, DOM manipulation is expensive and time consuming, both in mounting and unmounting. Part of what makes React very performant is its reconciliation algorithm.

\n

In short, it watches closely for differences, and only updates the DOM when necessary and tries to update only the parts which need to be changed.

\n

The “Virtual DOM”

\n

The Virtual DOM is a theoretical DOM tree generated by React when a change is made to a component’s state. This is modeled after the state of your application upon modification of the state, for example, after calling this.setState(). React uses what is called a “snapshot” to make this comparison and analysis between the DOM before the update, and the DOM after. This is the point in time when React utilizes its reconciliation algorithm.

\n

Updating the Virtual DOM is much faster than the real DOM, since the browser doesn’t need to show a visualization of it.

\n

How updates are determined

\n

The reconciliation algorithm is run whenever the component level state is updated. It analyzes the current DOM with the Virtual DOM, in order to determine which changes need to be made to the real DOM. After this step, it has determined which DOM nodes on your application require updates, and it calls the render method.

\n

Effect on DOM elements and their attributes

\n

The reconciliation algorithm does not only look at whole DOM elements, it also looks at individual attributes. You can think of the difference as a PUT request vs. a PATCH request, where it only updates the parts which have changed, rather than updating the entire object if there was a change.

\n

While it doesn’t unmount and remount the entire element if it doesn’t have to, sometimes it does have to. An example of this would be if you render an element of a different type.

\n

Suppose you wanted to switch between two components or elements, perhaps for conditional rendering. This would result in a full unmounting of the component, regardless of whether or not they contain the same child nodes.

\n

This differs from switching attributes on the same type of elements, an example of which might be dynamic class names, based on component state. In this scenario, the DOM element is not destroyed, and only the modified attributes are changed. This is useful because it performs minimal operations on the DOM, which as we know, is more resource-intensive than standard object operations.

\n

Keys and rerenders

\n

The \"key\" attribute in React can be used to mark whether or not a DOM node is stable. You may have seen a message in the console if you’ve ever attempted to map over a collection and return a JSX element each iteration. This is because the reconciliation algorithm uses the keys to determine if the content has changed, and not including a key may cause unexpected behaviour. For this reason, the keys should be unique so that reconciliation can recognize and identify which elements are stable, and which elements are not.

\n

Suppose that you have a list of items, which is derived from an array. If you were to splice an item into the middle of it, that will change all of the indices of the subsequent items. In this scenario, since the keys will not be a stable, unique representation of each item, React can end up mutating the unintended item, which can cause major bugs.

\n

A detailed explanation of keys can be found on the official React docs:

\n

Lists and Keys

\n

Reconciliation-Keys

\n

For an in-depth exploration of how and why reconciliation was implemented, please visit the official React docs:

\n

Reconciliation

\n","frontmatter":{"date":"December 03, 2019","updated_date":null,"description":null,"title":"React's Reconciliation Algorithm","tags":["React"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.2988505747126435,"src":"/static/3b049b298332c75b5f5768c066fe56fa/58556/react-fiber.webp","srcSet":"/static/3b049b298332c75b5f5768c066fe56fa/61e93/react-fiber.webp 200w,\n/static/3b049b298332c75b5f5768c066fe56fa/1f5c5/react-fiber.webp 400w,\n/static/3b049b298332c75b5f5768c066fe56fa/58556/react-fiber.webp 800w,\n/static/3b049b298332c75b5f5768c066fe56fa/e30b5/react-fiber.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"You'll learn about JavasScript NaN in this tutorial, how to check whether a value is NaN, and how to effectively handle NaN. What is NaN in…","fields":{"slug":"/engineering/checking-for-nan-in-javascript/"},"html":"

You'll learn about JavasScript NaN in this tutorial, how to check whether a value is NaN, and how to effectively handle NaN.

\n

What is NaN in Javascript?

\n

NaN, in JavaScript, can be many things. In fact, it can be almost anything, so long as it is Not a Number. Its type is technically “number” (when evaluated with “typeof”), although it stands for Not a Number.

\n

Values in NaN Javascript

\n

Values can become NaN through a variety of means, which usually involve erroneous math calculations (such as 0/0), or as a result of type coercion, either implicit or explicit.

\n

A common example is when you run parseInt on a string that starts with an alphabetical character. This isn’t exclusive to parseInt, as it also applies when using explicit coercion with Number(), or with the unary “+” operator.

\n

How to check NaN in Javascript?

\n

Before selecting a method for checking for NaN, how should you not check for NaN?

\n

NaN is a bizarre value in JavaScript, as it does not equal itself when compared, either with the loose equality (==) or strict equality (===) operator. NaN is the only value in the entire language which behaves in this manner with regards to comparisons.

\n

For example, if parseInt(“a”) returns NaN, then parseInt(“a”) === NaN will return false. This may seem strange, but it makes perfect sense after thinking about what NaN really is.

\n

NaN doesn’t tell you what something is, it tells you what it isn’t.

\n

These two different strings being passed to parseInt() will both return NaN.

\n
parseInt(“abc”) // NaN\nparseInt(“def”) // NaN
\n

Both statements return NaN, but are they really the same? Maybe, but it certainly makes sense why JavaScript would disagree, given that they are derived from different string arguments.

\n

Here are a few examples of strict inequality comparisons, which demonstrate the inconsistency of NaN.

\n
2 !== 2 // false\ntrue !== true // false\n“abc” !== “abc” // false\n...\nNaN !== NaN // true
\n

Method 1: isNaN or Number.isNaN

\n

JavaScript has a built-in method, appropriately named “isNaN,” which checks for NaN. There is a newer function called Number.isNaN, which is included in the ES2015 spec.

\n

The difference between isNaN and Number.isNaN is that isNaN coerces the argument into a number type. To avoid complicated and unexpected outcomes, it is often advised to use the newer, more robust Number.isNaN to avoid these side effects.

\n

Number.isNaN does not perform any forcible type conversion, so it simply returns the boolean based on the parameter.

\n

Here is an example of the difference between the two methods:

\n
isNaN(undefined) // true\nNumber.isNaN(undefined) // false
\n

isNaN, when passed undefined, returns true because undefined becomes NaN after number coercion. You can test this yourself by running Number(undefined). You will find that it returns NaN.

\n

Number.isNaN, on the other hand, returns false. This is because no coercion takes place, and undefined is not NaN, it is simply undefined.

\n

It is also important to note that Number.isNaN is a newer (ES2015) method in JavaScript, so browser support for Number.isNaN is not as stable as isNaN, which has been around since ES1 (1997).

\n

Method 2: Object.is

\n

Object.is is a JavaScript method which checks for sameness. It generally performs the same evaluations as a strict equality operator (===), although it treats NaN differently from strict equality.

\n

Object.is(0, -0) will return false, while 0 === -0 will return true. Comparisons of 0 and -0 differ, as do comparisons of NaN. This concept is called “Same-value-zero equality.”

\n
NaN === NaN // false\nObject.is(NaN, NaN) // true
\n

Object.is(NaN, NaN) will in fact return true, while we already know that NaN === NaN returns false. That makes this yet another valid way to check if something is not a number.

\n

Conclusion

\n

Between the given methods of checking for NaN, the most common is to use the global isNaN function, or the ES2015 Number.isNaN method. While method #2 is valid, most people will typically use isNaN or Number.isNaN, which were created specifically for checking for NaN.

\n","frontmatter":{"date":"November 22, 2019","updated_date":null,"description":"In this guide you'll learn about JavasScript NaN, how to verify whether a value is NaN, and how to manage NaN effectively.","title":"NaN in JavaScript: An Essential Guide","tags":["JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/64b659badd7a09c3d955b9c49a7f271f/1f5c5/numbers-1.webp","srcSet":"/static/64b659badd7a09c3d955b9c49a7f271f/61e93/numbers-1.webp 200w,\n/static/64b659badd7a09c3d955b9c49a7f271f/1f5c5/numbers-1.webp 400w","sizes":"(max-width: 400px) 100vw, 400px"}}},"author":{"id":"Greg Sakai","github":null,"avatar":null}}}},{"node":{"excerpt":"We're delightfully Announcing SDK Version 10.0.0. This full-version release includes major changes with several improvements and…","fields":{"slug":"/engineering/sdk-version-10-0-0/"},"html":"

We're delightfully Announcing SDK Version 10.0.0.

\n

This full-version release includes major changes with several improvements and optimizations, the details have been given below. For complete information please visit LoginRadius API documents.

\n

New Features Added:

\n\n

Improvements and optimizations:

\n\n

New APIs:

\n

We have added new APIs in this release, that will complement the existing ones.

\n\n

Removed APIs:

\n

To cope up with the changes around the social platforms, we have removed some existing APIs as they are no longer supported by the social providers. Below are the details of those APIs.

\n\n","frontmatter":{"date":"October 31, 2019","updated_date":null,"description":null,"title":"SDK Version 10.0.0","tags":["Engineering","SDK","Version"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/b5a4efdaf136c68376dc3010819e3e7e/1f5c5/SDK.webp","srcSet":"/static/b5a4efdaf136c68376dc3010819e3e7e/61e93/SDK.webp 200w,\n/static/b5a4efdaf136c68376dc3010819e3e7e/1f5c5/SDK.webp 400w","sizes":"(max-width: 400px) 100vw, 400px"}}},"author":{"id":"Indrasen Kumar","github":"indrasen715","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":222,"currentPage":38,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}