{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/29","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Before You Get Started This tutorial assumes you have: A basic understanding of Go Language Latest GoLang version installed on your system…","fields":{"slug":"/engineering/mongodb-as-datasource-in-golang/"},"html":"

Before You Get Started

\n

This tutorial assumes you have:

\n\n

In this tutorial, we will use the official MongoDB Go Driver to manage our MongoDB database. In the due process, we will write a program to learn how to install the MongoDB Go Driver and perform CRUD operations with it.

\n

Installation

\n

First in an empty folder run the below command

\n
go mod init gomongo
\n

go mod init creates a new go.mod file and automatically imports dependencies when you will run go program. Then create the file main.go and write the below code, We will explain what this code will do in a min.

\n
package main\n\nimport (\n    "context"\n    "fmt"\n    "log"\n\n    "go.mongodb.org/mongo-driver/bson"\n    "go.mongodb.org/mongo-driver/mongo"\n    "go.mongodb.org/mongo-driver/mongo/options"\n)\n\n// Book - We will be using this Book type to perform crud operations\ntype Book struct {\n  Title     string\n  Author    string\n  ISBN      string\n  Publisher string\n  Copies     int\n}\n\nfunc main() {\n    \n  // Set client options\n  clientOptions := options.Client().ApplyURI("mongodb://localhost:27017")\n\n  // Connect to MongoDB\n  client, err := mongo.Connect(context.TODO(), clientOptions)\n\n  if err != nil {\n    log.Fatal(err)\n  }\n\n  // Check the connection\n  err = client.Ping(context.TODO(), nil)\n\n  if err != nil {\n    log.Fatal(err)\n  }\n\n  fmt.Println("Connected to MongoDB!")\n  booksCollection := client.Database("testdb").Collection("books")\n}
\n

In the above code, we have imported the bson, mongo, and mongo/options packages of mongo-driver and defined a Book type which will be used in this tutorial

\n

In the main function first, we created clientOptions with MongoDB URL and credentials and pass it to mongo.Connect function, Once connected we can check our connection by client.Ping function.

\n

The following code will use booksCollection variable to query the books collection from testdb.

\n
booksCollection := client.Database("testdb").Collection("books")
\n

Insert Documents

\n

First Let's create a Book struct to insert into the collection, in below code we are using collection.InsertOne function to insert a single document in the collection

\n
// Insert One document\nbook1 := Book{"Animal Farm", "George Orwell", "0451526341", "Signet Classics", 100}\ninsertResult, err := booksCollection.InsertOne(context.TODO(), book1)\nif err != nil {\n    log.Fatal(err)\n}\n\nfmt.Println("Inserted a single document: ", insertResult.InsertedID)
\n

To insert multiple documents at once we need to create a slice of Book object and pass it to collection.InsertMany

\n
// Insert multiple documents\nbook2 := Book{"Super Freakonomics", "Steven D. Levitt", "0062312871", "HARPER COLLINS USA", 100}\nbook3 := Book{"The Alchemist", "Paulo Coelho", "0062315005", "HarperOne", 100}\nmultipleBooks := []interface{}{book2, book3}\n\ninsertManyResult, err := booksCollection.InsertMany(context.TODO(), multipleBooks)\nif err != nil {\n    log.Fatal(err)\n}\n\nfmt.Println("Inserted multiple documents: ", insertManyResult.InsertedIDs)
\n

Update Documents

\n

We can update a single document by function collection.UpdateOne. It requires a filter document to match documents in the collection and an updated document to describe the update operation. You can build these using bson.D types. The below code will match the book with ISBN 0451526341 and increment the copies field by 10

\n
//Update one document\nfilter := bson.D{{"isbn", "0451526341"}}\n\nupdate := bson.D{\n    {"$inc", bson.D{\n        {"copies", 10},\n    }},\n}\n\nupdateResult, err := booksCollection.UpdateOne(context.TODO(), filter, update)\nif err != nil {\n    log.Fatal(err)\n}\n\nfmt.Printf("Matched %v documents and updated %v documents.\\n", updateResult.MatchedCount, updateResult.ModifiedCount)
\n
\n

You can also update more than one documents at once in a single collection by function collection.UpdateMany, In it, we need to pass filter document and update document same as collection.UpdateOne

\n
\n

Find Documents

\n

To find a single document, we can use function collection.FindOne(), we will pass a filter document and decode the result in the Book type variable

\n
// A variable in which result will be decoded\nvar result Book\n\nerr = booksCollection.FindOne(context.TODO(), filter).Decode(&result)\nif err != nil {\n    log.Fatal(err)\n}\n\nfmt.Printf("Found a single document: %+v\\n", result)
\n

To find multiple documents, we use function collection.Find(). This method returns a Cursor, It provides a stream of documents on which we can iterate or we can get all the docs by function cursor.All() in a slice of Book type.

\n
cursor, err := booksCollection.Find(context.TODO(), bson.D{{}})\nif err != nil {\n  log.Fatal(err)\n}\nvar books []Book\nif err = cursor.All(context.TODO(), &books); err != nil {\n  log.Fatal(err)\n}\nfmt.Printf("Found multiple documents: %+v\\n", books)
\n

Delete Documents

\n

We can delete documents from a collection using functions collection.DeleteOne() or collection.DeleteMany(). Here you pass bson.D{{}} as the filter argument, which will match all documents in the collection.

\n
deleteCollection, err := booksCollection.DeleteMany(context.TODO(), bson.D{{}})\nif err != nil {\n    log.Fatal(err)\n}\nfmt.Printf("Deleted %v documents in the books collection\\n", deleteCollection.DeletedCount)
\n
\n

Entire collection can be dropped using the collection.Drop() function, it will remove all documents and metadata, such as indexes from the collection

\n
\n

Once you have done all the operation, don't forget to close the MongoDB connection

\n
err = client.Disconnect(context.TODO())\n\nif err != nil {\n    log.Fatal(err)\n}\n\nfmt.Println("Connection to MongoDB closed.")
\n

Now you can easily use MongoDB as Datasource in your go application, You can found the complete code used in this tutorial on our Github Repo

\n","frontmatter":{"date":"September 21, 2020","updated_date":null,"description":"Learn how to use MongoDB as a data source for your Go application using the mongo-go driver","title":"Using MongoDB as Datasource in GoLang","tags":["Go","MongoDB"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c46c9414b00b97863489d5b361d13210/58556/gomongo.webp","srcSet":"/static/c46c9414b00b97863489d5b361d13210/61e93/gomongo.webp 200w,\n/static/c46c9414b00b97863489d5b361d13210/1f5c5/gomongo.webp 400w,\n/static/c46c9414b00b97863489d5b361d13210/58556/gomongo.webp 800w,\n/static/c46c9414b00b97863489d5b361d13210/99238/gomongo.webp 1200w,\n/static/c46c9414b00b97863489d5b361d13210/7c22d/gomongo.webp 1600w,\n/static/c46c9414b00b97863489d5b361d13210/25f09/gomongo.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Puneet Singh","github":"puneetsingh24","avatar":null}}}},{"node":{"excerpt":"We often hear that JavaScript is a single-threaded programming language, which means it executes all of the instructions line by line in a…","fields":{"slug":"/engineering/understanding-event-loop/"},"html":"

We often hear that JavaScript is a single-threaded programming language, which means it executes all of the instructions line by line in a synchronous manner. Thus since everything works on the main thread, there seems to be no possibility of executing parallel processes in JavaScript.

\n

But now let's assume that we have a function which is taking some time to execute, for example in the below function which is having a loop over 10k times, the console.log() would be executed once the loop is over and in the meantime, our UI interaction with the browser would be interrupted.

\n
function someTimeTakingFunc() {\n  for(var i = 0; i < 10000; i++) {\n\n  }\n  console.log("Loop has been executed")\n}
\n

The above scenario seems to be impractical, but there might be cases where any function can take an indeterminate amount of time and our main thread would be blocked, for example calling an API for fetching data from the server-side. And this is the practical use case we are dealing with in development every day. So how JavaScript handles this and where does the event loop come into the picture? We will surely get to know this, but before moving further, let's understand the basic memory architecture in JavaScript.

\n

Memory Organization of JavaScript:

\n

The Javascript Engine consists of two main components:

\n\n

Understanding the Call Stack

\n

Call stack is a LIFO (last in first out) data structure. All of the function calls are pushed into this call stack and are said to be a frame. In short function, a stack is nothing but the simple stack data structure which keeps track of the function currently being executed.

\n

Let's understand the above concept with the example of the following code snippet:

\n
 function square(b) {\n   return b * b ; \n }\n\n function cube(x) {\n   return x * square(x)\n }\n\n console.log(cube(8));
\n

The above snippet is an example of defining a cube function, which is calling a square function, to find the cube of a number passed in the argument. But how does this work in call stack? Let's understand step by step:

\n
    \n
  1. When we call the console.log() line, this code/function is pushed into the call stack.
    2. \n
  2. Now the above console.log() function is called the cube function, hence this function is pushed into the stack.
    3. \n
  3. After this the cube function is calling the square function, and now this would be pushed into the stack.
    4. \n
  4. Now once the square function is executed, and the result is returned, then the square function is popped out of the stack.
    5. \n
  5. Since at this step, we have got the square function result, so cube function would be executed and popped out of the call stack.
    6. \n
  6. At last, the console.log() would be executed and this function would be popped out of the stack and the stack would now be empty.
    7. \n
\n

\"Call

\n

Now since we have understood that call stacks are possible to execute the function in a step by step manner, there seems to be no possibility of keeping something into parallel. But there is something called \"WEB APIs\" in the browser environment, which is some additional capabilities provided by browsers in addition to JavaScript Engine.

\n

Javascript Web APIs

\n

These are the additional functionality, that helps us perform some additional tasks which cannot be run using the main thread. However, since our JavaScript runtime is single-threaded, it can export some tasks to the WEB APIs which helps us to respond to multiple threads. Example of some web APIs are:

\n\n

For instance, setTimeout() is called, the browser delegates the task to a different thread to calculate the time interval specified in the argument of the setTimeout() method, and once done this tread would then call the desired function in callback stack.

\n

Since JavaScript is single-threaded, the browser has the capability of delegating the task in multiple threads. But how does the event loop help in these executions? But now we are good to go ahead with Event Loop.

\n

Event Loop && Event Queue

\n

Since we know that Web APIs delegate some of the tasks to different threads, on completion of these tasks, how the main or desired functions are sent to the call stack.

\n

Event Queue is a special queue, which keeps track of all the functions queues, which are needed to be pushed into the call stack.\nThe event queue is responsible for sending new functions to the track for processing. The queue data structure is required to maintain the correct sequence in which all operations should be sent for execution.

\n

Let's take an example, in the following example, we are using a setTimeout function, which will log the \"executed\" string after 2000 milliseconds.

\n
  \n  setTimeout(function(){\n    console.log("Executed";)\n  }, 2000);
\n

Now when a setTimeout operation is processed in the call stack. On its execution, it calls a web API which fires a timer for 2000 milliseconds. After 2000 milliseconds has been elapsed, the web API, place the callback function of setTimeout in the event queue.

\n

Here need to mention that, just placing our function does not necessarily imply that the function will get executed. This function has to be pushed into the call stack for execution and here the event loop comes into the picture. The event loop waits for the function stack to be empty, once the call stack is empty this will push the first function from the event queue to the call stack, and in this way, the desired function will be called.

\n

\"Event

\n

Thus event loop works in a cyclic manner, where it continually checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

\n","frontmatter":{"date":"September 19, 2020","updated_date":null,"description":"Learn the basic concepts about the JavaScript Event Loop.","title":"Understanding event loop in JavaScript","tags":["JavaScript","event-loop","call stack","event queue","multi-threaded"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a6f240c6e67891e816aa9b6541eeb62b/58556/index.webp","srcSet":"/static/a6f240c6e67891e816aa9b6541eeb62b/61e93/index.webp 200w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/1f5c5/index.webp 400w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/58556/index.webp 800w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/99238/index.webp 1200w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/135cd/index.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}},{"node":{"excerpt":"Have you ever thought about what the world would be like if open-source didn't exist? It's hard to imagine a world without open source these…","fields":{"slug":"/engineering/loginradius-supports-hacktoberfest-2020/"},"html":"

Have you ever thought about what the world would be like if open-source didn't exist?

\n

It's hard to imagine a world without open source these days. Open source powers the biggest organizations of today's world. Open-source software like Linux runs most of today's servers and also powers the Android Operating System.

\n

Introducing Hacktoberfest 2020

\n

In a gist hacktoberfest is a festival of \"giving back to the community\".

\n

Hacktoberfest is a month-long celebration of open-source software in October month run by DigitalOcean in partnership with GitHub and DEV. Hacktoberfest is open to everyone in our global community!

\n

From Official Website:

\n
\n

Hacktoberfest is open to everyone in our global community. Whether you’re new to development, a student, long-time contributor, event host, or company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

\n
\n

The purpose of this month-long celebration is to get people started in open source and give back to the open-source community.

\n

It is the easiest way to get into open source for people who have never contributed to open-source community or find it difficult to contribute.

\n

How to contribute to Hacktoberfest?

\n

Anyone can contribute to hacktoberfest by registering at hacktoberfest website anytime between 1st October to 31st October.

\n

During this time, anyone who wishes to be part of this month-long fest needs to open four quality pull requests on any of the open-source projects on Github.

\n

How to find Projects?

\n

Finding projects can be a bit challenging. It can be the tools you are already using, or different tools can be used to find the issues based on various labels. Tools like issuehub are really helpful for the same.

\n

This year LoginRadius is going to be part of Hacktoberfest by open-sourcing a lot of its projects and accepting contributions on them including its Engineering Blog.

\n

Getting LoginRadius branded swags

\n

Like I said, this year LoginRadius will be part of hacktoberfest and yes, we are here with some cool swags. We have got around 500 t-shirts for people contributing to our open source repositories. We will soon share details on how to get LoginRadius swags as well as our open source repositories on our Blog.

\n

Stay tuned and don’t forget to mention your open-source projects for us to contribute.

\n","frontmatter":{"date":"September 18, 2020","updated_date":null,"description":"Open Source is changing the world, One Pull Request at a time. Join LoginRadius this year in supporting hacktoerbest 2020 by contributing to open source and get cool swags from LoginRadius","title":"LoginRadius Supports Hacktoberfest 2020","tags":["hacktoberfest","open-source","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp","srcSet":"/static/9a2056972f92077b2af8b32ecc2fcbdd/61e93/hacktober-fest-banner.webp 200w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/1f5c5/hacktober-fest-banner.webp 400w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp 800w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/e30b5/hacktober-fest-banner.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"excerpt":"There are more than 1 million websites or apps are using \"SignIn with Facebook\" or \"Login with Facebook\". Do you know why they are using…","fields":{"slug":"/engineering/login-with-facebook/"},"html":"

There are more than 1 million websites or apps are using \"SignIn with Facebook\" or \"Login with Facebook\". Do you know why they are using Facebook login and how it is beneficial in conversion?

\n

According to multiple surveys, there are more than 3 billion users worldwide are using social media and it is around 50% of the world's population.

\n

\"login-with-facebook\"

\n

The biggest challenge and most important things are to make user registration and login quick and easy while developing our application. The registration forms required a lot of data that need to be filled by users manually and it causes lost, potential users. Additionally, users need to enter their usernames/emails and passwords in the login forms to authenticate themselves and also need to remember more individual IDs and passwords.

\n

Social Login allows customers to bring their existing social identities and use them to register and log in without creating a new profile explicitly.

\n

Facebook is the most favorite social media provider in comparison to other social media providers and the number of active Facebook users growing day by day.

\n

In this article, I will explain how you can implement “Log in with Facebook” on your website or mobile app in a very easy manner.

\n

Facebook work on the OAuth 2.0 protocol and most of the social providers like Facebook, Google, Microsoft, Linkedin are supporting OAuth 2.0. Refer to this article Getting Started with OAuth 2.0 to know about OAuth flow.

\n

Create Your Facebook Login App

\n

Here you can find the complete step by step guide to create your Facebook Login App.

\n

Step 1

\n

Go to Facebook Developer and log in using your Facebook credentials.

\n

NOTE: Please do not log in using a business account as Facebook will not allow you to create an app if you do so.

\n

\"Facebook

\n

Step 2

\n

Select the My Apps as displayed on the below screen.

\n

\"Facebook

\n

Step 3

\n

Click on Add a New App as displayed in the below screen.

\n

\"Facebook

\n

Step 4

\n

Input display name and contact email. Once you have done so, click on Create App ID

\n

\"Facebook

\n

Step 5

\n

In the security check, Complete the security steps and click on the submit button.

\n

\"Facebook

\n

Step 6

\n

Once you land on the App dashboard, Select Facebook Login, and click Set Up.

\n

\"Facebook

\n

Step 7

\n

Click on Settings in the sidebar under Facebook Login. Turn on Client OAuth Login. Turn on Web OAuth Login. Put the valid redirect URL on \"Valid OAuth redirect URIs\". Click on the Save button.

\n

\"Facebook

\n

Step 8

\n

Click on Basic under settings in the sidebar. Under App, Domains include your website Url. Enter all the required details. Change the status of the app from Development to Live from the top-right corner. Click on the Save Changes button.

\n

Now your Facebook app is ready. You can start implementing Facebook login\n\"Facebook

\n

Data Selection

\n

When a user logs into your website or app via Facebook Login, you can access the user's data stored on Facebook. Facebook only allows the basic profile data permissions for a new Facebook app. To get more data according to your business requirement, you need to enable additional permissions on your Facebook app. Facebook is supporting around 42 permissions. You need to choose user data that you want to collect from Facebook.

\n

Submit Your Facebook Login App For Review

\n

To grab more than basic profile data points or asking for additional permissions from your users, your Facebook apps go through the review process. Sometimes businesses require some additional permissions on the Facebook app and for that, you need to submit your Facebook app for approval before starting to ask for additional information.

\n

The Facebook app review process is pretty much simple, Please refer to this document here for the Facebook App Review Process.

\n

Add Login with the Facebook button on Your Site

\n

Implement Facebook login to a web page is very easy using Facebook’s JavaScript SDK. Facebook is providing documentation and instructions along with code examples to implement the login system.

\n

Let's see how we can add the Facebook login interface. For this, we just need to copy and paste the code provided to us by Facebook. Here I have added some customization to the existing code

\n

Place this code in the body section of your HTML code.

\n
<!-- The JS SDK Login Button -->\n\n<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">\n</fb:login-button>\n\n<!-- The JS SDK Login Button -->\n<div id="status">\n</div>
\n

Now you need to include the JavaScript section. It'll loads the Facebook SDK JavaScript asynchronously.

\n
<!-- Load the JS SDK asynchronously -->\n<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
\n

Next, we'll add the Facebook init function. We just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId: '{your-app-id}'.

\n
window.fbAsyncInit = function() {\n    FB.init({\n      appId      : '{your-app-id}',\n      cookie     : true,                     // Enable cookies to allow the server to access the session.\n      xfbml      : true,                     // Parse social plugins on this webpage.\n      version    : 'v7.0'           // Use this Graph API version for this call.\n    });
\n

Next, we need to add the function that handles the response and alters the page contents based on the type of response. I have added this function at the very top of the scripts section.

\n
function checkFacebookLoginStatusCallback(response) {  // Called with the results from FB.getLoginStatus().\n    console.log(' Checking Facebook Login Status');\n    console.log(response);                   // The current login status of the person.\n    if (response.status === 'connected') {   // Logged into your webpage and Facebook.\n      getUserProfile();  \n    } else {                                 // Not logged into your webpage or we are unable to tell.\n      document.getElementById('status').innerHTML = 'Please login with Facebook into this webpage.';\n    }\n  }
\n

As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. When the login is not authorized, this function changed the HTML on your page to ask you to log in.

\n
function checkLoginState() {               // Called when a person is finished with the Login Button.\n    FB.getLoginStatus(function(response) {   // See the onlogin handler\n      checkFacebookLoginStatusCallback(response);\n    });\n  }\n\n    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.\n      checkFacebookLoginStatusCallback(response);        // Returns the login status.\n    });\n\n     function getUserProfile() {                      // Get User Profile using Facebook Graph API after login.\n    console.log('Welcome!  Fetching your profile information.... ');\n    FB.api('/me', function(response) {\n      console.log('Successful login for: ' + response.name);\n      document.getElementById('status').innerHTML =\n        'Thanks for logging in, ' + response.name + '!';\n    });\n  }
\n

Now if you save this page as login.html and open it in a browser you should see the Facebook Login button. You can also download this code from my GitHub Repo and I have customized it to make it a bit shorter for an explanation.

\n

Now just Log In and check the console output. You’ll now see some basic info including id, email, firstname, gender, lastname.

\n

This is all there is to it. Of course, there are many more options and features available in Facebook documentation to discover.

\n

Closing Thoughts

\n

Social Media platforms are growing day-by-day and simplifying the registration and login process. Consumers can use their existing social identities to register and log in. They don't need to create a separate username/password combination so it is simplifying the Sign in/Signup process.

\n

LoginRadius supports Sign with Facebook with more than 40 other popular social networks google, twitter, Linkedin, etc. You can implement all the popular social media providers on your website or mobile app in less than 60 seconds.

\n

Source

\n

statista

\n

netcraft

\n","frontmatter":{"date":"September 16, 2020","updated_date":null,"description":"This article will explain about social login benefits and how we can implement Sign In using Facebook on our website or mobile app.","title":"How to implement Facebook Login","tags":["Login With Facebook","Facebook","Facebook Login","Login","Oauth"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6666666666666667,"src":"/static/d16e503b9517b5df8496efd994380504/25338/index.webp","srcSet":"/static/d16e503b9517b5df8496efd994380504/61e93/index.webp 200w,\n/static/d16e503b9517b5df8496efd994380504/1f5c5/index.webp 400w,\n/static/d16e503b9517b5df8496efd994380504/25338/index.webp 550w","sizes":"(max-width: 550px) 100vw, 550px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Assuming that the reader of this blog has a fair idea of the docker ecosystem! Docker has changed the world of software development! Since…","fields":{"slug":"/engineering/production-grade-development-using-docker-compose/"},"html":"
\n

Assuming that the reader of this blog has a fair idea of the docker ecosystem!

\n
\n

Docker has changed the world of software development! Since the last few years, docker has helped the developer community, enterprises, and startups to create solutions quickly and effectively. Also, deployment is relatively hassle-free with docker (conditions apply). And worth mentioning is, it resolves the “Works fine on my system” problem.

\n

Well, just not docker, there are many container ecosystems available as an alternative to Docker. For example, Mesos by Apache and Vagrant by Hashicorp. Docker is more loved for what it is not, and that is Bulky! Docker is otherwise lightweight, works mostly with Linux and eventually was identified by Kubernetes in 2015. But, that story... some other time!!

\n

Straight to the context, Docker Compose! Docker compose is a powerful utility that is bundled with Docker installation. Docker-Compose can be used for production and development, to make things virtually seamless.

\n

Microservices and Docker

\n

Docker is doing a great job when it comes to describing and developing microservices.

\n

While working on microservices where quite a few ( being reasonably complicated, in our example 6 ) containers talk to each other to complete a task and since it is an end to end task, the whole thing looks very complicated. To rectify :

\n\n

the developer has two choices, create a script in a scripting language of choice, or choose docker-compose. Well, docker-compose is an easier option.

\n

Here in this kind of practical example, we are going to demonstrate a similar situation, where multiple containers talk to each other. We are going to use docker-compose as our primary tool to build and deploy images.

\n

\"title\"

\n

The picture above depicts the architecture of a hypothetical portal of flash sale.

\n

Flash Sale is an e-commerce concept, where an item is made available for sale to the public on a portal at a specific time and in a limited quantity.

\n

The components of the application are

\n\n

The application is otherwise fairly simple. Go to the portal, hit the green button which calls an API, the API drops a message to the queue, the listener picks the messages, grabs the item from the database reduces the quantity and updates the datastore again.

\n

So far so good!

\n

Code

\n

You may fork a copy from here.

\n

git clone https://github.com/LoginRadius/engineering-blog-samples/tree/master/Docker/docker-compose-dev-sample

\n

\"So

\n

The use of docker-compose and why?

\n

Exactly! What is the problem? As such, there is no problem, but it may arise if we do not program or develop it well in an integrated manner. Programming a component and managing it well reduces the time-to-production to a greater degree.

\n
\n

I am not a great programmer; I am just a good programmer with great habits.

\n\n
\n

While designing and developing complicated systems where microservices are involved, integration and debugging become cumbersome.

\n

To ease it up docker-compose acts a friend.

\n

For the example above we are going to write a docker-compose. Docker-Compose has got powers to

\n\n

First things first, the Dockerfile.

\n

Starting from the API. The API needs a docker image to build. The following is the Dockerfile for the same.

\n
FROM node:alpine\nWORKDIR '/app'\nCOPY ./package.json ./\nRUN npm install \nCOPY . .\nCMD ["npm", "run", "start"]
\n

Since the other two components, listener and frontend are also written in JavaScript the Dockerfile does not change at all for them too, for this particular example.

\n

The following is a two-liner Dockerfile for gateway. The conf file targets apiserver and frontend. Please have a look at the configuration file in the repository itself.

\n
FROM nginx\nCOPY ./nginx.conf /etc/nginx/conf.d/default.conf
\n

The other 2 components :

\n\n

Action!

\n

First things first, file version. Since it is all yaml out there, the file version tells docker-compose about the data structure. The data structure which is expected by docker \"compose\".

\n

so we start the docker-compose as

\n
version: '3'
\n

All the components in the docker-compose are known as services. Next, we are going to write some services. Yes, the services we have written for our business.

\n

Message Queue :

\n

The message queue shall use softwaremill/elasticmq image out of the box and the applications will access that on port 9324. The service description in docker-compose shall look like this.

\n
mqserver:\n        image: softwaremill/elasticmq\n        ports:\n            - '9324:9324'
\n

That is analogous to docker run -it -p '9324:9324' softwaremill/elasticmq.

\n

A bit more complicated service next, mongodb.

\n
mongodbdb: \n        depends_on: \n            - mqserver\n        image: mongo\n        container_name: mongo\n        volumes:\n            - /data/db:/mongodata\n        ports:\n            - '27017:27017'
\n

There are a couple of things one may notice more here.

\n

depends_on shall wait for the container of mqserver service to come up, before mongodbdb service goes on air.

\n
\n

Docker is only liable to check the containers when we use depends_on, if you want to check whether your service (which you have embedded) is ready to use or not, use healthcheckand link.

\n
\n

Apart from this, we are mounting a volume and exposing ports for an image mongo which gets pulled directly from the docker container registry. container_name will give the service a name, so that it can be discovered *in the network. *Kind of a domain name in the internal docker-compose network.

\n

Now the developer's proprietary API service:

\n
apiserver:\n        restart: always\n        depends_on: \n            - mqserver\n            - mongodbdb\n\n        build:\n            dockerfile: Dockerfile\n            context: ../fs-express-api/.\n        volumes:\n            - /app/node_modules\n        environment: \n            - NODE_ENV=production\n            - AWS_SQS_URL=http://mqserver:9324/\n            - AWS_SQS_FQ_URL=http://mqserver:9324/queue/fsqueue\n            - AWS_ACCESS_KEY=na\n            - AWS_SECRET_ACCESS_KEY=na\n            - AWS_REGION=REGION\n            - QUEUE_NAME=fsqueue\n            - MONGODB_CONNECTION=mongodb://mongo:27017/fsorder\n            - API_APP_PORT=5000\n        ports:\n            - '5000:5000'
\n

The buildtag will be used by the docker-compose build command to build an image. The build is defined as Dockerfile and the context is docker context, the directory which you want to use as context. Equivalent to: docker build -f filename.

\n

The more you are seeing here is environment and restart options. Environment variables are used to set environment variables while running the image. This is another part where docker-compose comes handy. Think about setting all nine environment variables with docker run.

\n

restart is a bit interesting. One may specify a restart policy if the application crashes, which leads to stopping the docker image itself. always specifies to restart the container if it exit.

\n

In the environment section, one can see mqserver and mongo, instead of the regular localhost and loopback address. This is because when we run docker-compose, it creates a DNS recordset of all the services mentioned. The services can be referred to by their names. A slight deviation here may happen when the container is explicitly named. Here, container_name = mongo is used for service mongodbdb. Hence, the other containers in the environment shall refer to it by mongo and not mongodbdb.

\n

The pollingmod and frontend services are quite the same.

\n
    pollingmod:\n        restart: always\n        depends_on: \n            - mqserver\n            - mongodbdb\n        build:\n            dockerfile: Dockerfile\n            context: ../polling-mod/\n        volumes:\n            - /app/node_modules\n        environment: \n            - AWS_QUEUE_URL=http://mqserver:9324/queue/fsqueue\n            - AWS_ACCESS_KEY=na\n            - AWS_SECRET_ACCESS_KEY=na\n            - AWS_REGION=REGION\n            - MONGODB_CONNECTION=mongodb://mongo:27017/fsorder   \n\n    frontend:\n        build:\n            dockerfile: Dockerfile\n            context: ../fs-frontend\n        volumes:\n            - /app/node_modules\n            - ../fs-frontend:/app\n        stdin_open: true\n        ports:\n            - '3000:3000'
\n

Finally, the gateway. So, a gateway is created on the front using Nginx to make the development production-grade. If you go through the gateway code you will find that the services are accessed by their name frontend and apiserver.

\n
upstream frontend{\n    server frontend:3000;\n}\n\nupstream apiserver{\n    server apiserver:5000;\n}
\n

The Nginx container opens port 80 to an external port 5500. The Nginx container keeps configuration where the user can see just one port 5500 from out of the system, everything else is gray.

\n

\"User

\n

And this is, how it happens in the real world as well!

\n

Finally, we have docker-compose.yml. And following are simple commands which make life even simpler when we need to build and run & stop the entire ecosystem.

\n

To build

\n

docker-compose build

\n

To start

\n

docker-compose up

\n

To stop

\n

docker-compose down

\n

This scratches the surface of using docker-compose for a production-grade development environment.

\n

\"No

\n

Thanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:

\n\n","frontmatter":{"date":"September 11, 2020","updated_date":null,"description":null,"title":"Production Grade Development using Docker-Compose","tags":["Docker","Docker-compose"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/e913b33dfd194b83cdd0b013f0871d4d/58556/index.webp","srcSet":"/static/e913b33dfd194b83cdd0b013f0871d4d/61e93/index.webp 200w,\n/static/e913b33dfd194b83cdd0b013f0871d4d/1f5c5/index.webp 400w,\n/static/e913b33dfd194b83cdd0b013f0871d4d/58556/index.webp 800w,\n/static/e913b33dfd194b83cdd0b013f0871d4d/99238/index.webp 1200w,\n/static/e913b33dfd194b83cdd0b013f0871d4d/7c22d/index.webp 1600w,\n/static/e913b33dfd194b83cdd0b013f0871d4d/25f09/index.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anurag Choudhary","github":"choudharyanurag","avatar":null}}}},{"node":{"excerpt":"In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be…","fields":{"slug":"/engineering/adding-multi-threading-to-javascript-using-web-workers/"},"html":"

In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be performed at the same time by applications. It is helpful to consider the importance of web staff as an example of how humans benefit from parallel tasks.

\n

Web workers give us the ability to write multi-threaded Javascript that doesn't block the DOM. To some extent, even asynchronous operations block the DOM. On the other hand, Web employees help us solve this problem, escape from the single-threaded world, and achieve higher performance on our web pages.

\n

What are web workers in JS?

\n

Web Workers are a simple means of running scripts in background threads for web content. Without interfering with the user interface, the worker thread may perform tasks.

\n

Furthermore, they can use XMLHttpRequest to perform I/O (although the responseXML and channel attributes are always null) or fetch (with no such restrictions). Once created, by posting messages to an event handler defined by that code, a worker can send messages to the JavaScript code that made it (and vice versa).

\n

Why Use JavaScript Web Workers?

\n

Web workers let you build background threads separate from the main execution thread, where the logic of the user interface is usually executed.

\n

The key benefit of this separation of workload is that inside an isolated thread and without interrupting or impacting the main thread's responsiveness and usability, you can perform costly operations.

\n

When the background thread completes its mission, the main thread is informed of the results seamlessly via an event handled by standard JavaScript event handling.

\n

Setting Up Web Workers & Multi-threading to JavaScript

\n

Step 1: Create a project folder and add index.html in the root of it.

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Club JavaScripters</title>\n  </head>\n  <body>\n    <button>Can you click me?</button>\n    <h2>Let's do the party. 👯‍♂️‍</h2>\n    <ul id="club"></ul>\n    <script src="./main.js"></script>\n  </body>\n</html>
\n

We just created a simple HTML page with a link to our javascript file which we will create in a moment.

\n

Step 2: Let's add our JavaScript code in two separate files, main.js and worker.js in the same folder.

\n

main.js

\n
const persons = [\n  {\n    name: "Hriday",\n    isMember: true,\n  },\n  {\n    name: "Hridayesh",\n    isMember: false,\n  },\n  {\n    name: "Bob",\n    isMember: true,\n  },\n  {\n    name: "Daisy",\n    isMember: true,\n  },\n]\n\n// Our club container\nconst club = document.getElementById("club")\nlet worker\n\n/**\n * Function entry allows entry to people coming to our club\n */\nfunction entry(persons) {\n  persons.forEach(person => {\n    const { isMember, name } = person\n    const listItem = document.createElement("li")\n    listItem.textContent = name\n    // if a person is not registered, register them first\n    if (!isMember) {\n      // create a new worker thread\n      worker = new Worker("worker.js")\n      // pass data to worker thread\n      worker.postMessage(name)\n      // listen to any data passed from worker thread\n      worker.addEventListener("message", event => {\n        if (event.data) {\n          club.appendChild(listItem)\n        }\n      })\n    } else {\n      // if they are registered let them in\n      club.appendChild(listItem)\n    }\n  })\n}\n\nentry(persons)
\n

worker.js

\n
// addEventListener is directly accessible in worker file\naddEventListener("message", event => {\n  // extract person passed from main thread from event object\n  let person = event.data\n  registerMember(person)\n})\n\nfunction registerMember(member) {\n  // generating membership card takes some amount of time\n  let i = 0\n  while (i < Math.pow(10, 10)) {\n    i++\n  }\n  // send result back to the main thread\n  postMessage(true)\n  close()\n}
\n

Step 3: On to some Explanations about what just happened.

\n

Now, the problem I faced when I went to the club with Hriday was that I (and everyone else after me) had to wait for my registration process to complete. We don't want that to happen to our virtual club and therefore we added one more person (thread) who is in charge of the whole registration process. Once registration is done, he will tell the main guy(thread) to let the new person in.

\n

Here's what we did to solve it in our code.

\n
    \n
  1. First of all we check for each person if they are a member or not. If they are, we let them in.
    2. \n
  2. If someone is not a member of the club yet, we create a worker thread for it using new Worker('path to worker code') and pass that person to the worker thread using worker.postMessage() and add the person as a member after registering them.
    3. \n
  3. To simulate the registration process we are doing some processing using a long while loop. In real life this could be some cryptographic code, image processing or anything that is CPU intensive and might block the main thread and make the page unresponsive.
    4. \n
  4. Once registered, the worker thread let's the main thread know about it by sending data using postMessage and the main thread listens for it using onmessage handler and lets the person in the club i.e add to DOM.
    5. \n
  5. Once we get the result from the worker thread, we close it using close().
    6. \n
\n

Web Workers FAQs

\n

How do the main thread and worker threads talk to each other?

\n

They talk to each other by message passing. Both workers and the main thread use postMessage to send data to each other and onmessage event handler to get data. The data is available inside the event's data property.\nYou can only pass one argument to postMessage. If you wish to pass multiple arguments use an object instead.

\n

Can I update DOM in a worker thread or access window object?

\n

No you can not update DOM in a worker thread as worker threads run in a separate context from the main window and don't have access to window object and document object but they do have access to some of the window object's capabilities like Websockets and indexedDB.

\n

Why did you add worker code in a separate file?

\n

It's important that the worker code must be in a separate file, which we can use to create a separate worker thread by using the Worker constructor and passing it the path of the file.

\n

Why did you add that button? I can easily click it.

\n

You were able to click that button because we did not block the main thread.\nTo see the difference add the following code to main.js and see the difference.

\n
const persons = [\n  {\n    name: "Joe",\n    isMember: true,\n  },\n  {\n    name: "Hriday",\n    isMember: true,\n  },\n  {\n    name: "Hridayesh",\n    isMember: false,\n  },\n  {\n    name: "Bob",\n    isMember: true,\n  },\n  {\n    name: "Daisy",\n    isMember: true,\n  },\n]\n\n// Our club container\nconst club = document.getElementById("club")\nlet worker\n\nfunction entry() {\n  persons.forEach(person => {\n    const { isMember, name } = person\n    const listItem = document.createElement("li")\n    listItem.textContent = name\n    if (!isMember) {\n      let memeberAdded = registerMember(person)\n      if (memeberAdded) club.appendChild(listItem)\n    } else {\n      club.appendChild(listItem)\n    }\n  })\n}\n\nentry()\n\nfunction registerMember(member) {\n  let i = 0\n  while (i < Math.pow(10, 10)) {\n    i++\n  }\n  return true\n  close()\n}
\n

Could you still click the button?

\n

You can share that answer in the comment section 😉 To get the full code you can visit to Github Repo

\n

Conclusion

\n

We introduced web workers in this article, a technology that helps the web industry keep up with demanding web applications. This is achieved by providing web apps with a way to exploit multiprocessor and multi-threaded machines by granting JavaScript some multi-threaded superpowers.

\n

Do you have any tips on web workers and the web as a forum for programming? Let us know in the comment section below.

\n","frontmatter":{"date":"September 09, 2020","updated_date":null,"description":" Learn how web workers help with the success of the web app and get started by creating a simple web worker for JavaScript.","title":"Web Workers: How to add multi-threading in JS","tags":["JavaScript","Web"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp","srcSet":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/61e93/cover.webp 200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/1f5c5/cover.webp 400w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp 800w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/99238/cover.webp 1200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/135cd/cover.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","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":168,"currentPage":29,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}