{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/18","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Enum is a typed constant that is specified for the new data form of Enumeration. An effective way to describe a set of named integral…","fields":{"slug":"/engineering/enum-csharp/"},"html":"

Enum is a typed constant that is specified for the new data form of Enumeration. An effective way to describe a set of named integral constants assigned to a variable is to include a Typesafe enumeration. Enums make the code more readable and less vulnerable to mistakes. If you have a set of functionally important and unchanged values, Enums are useful for developers.

\n

Enums' key benefit is to make it possible in the future to adjust values. Enums are a robust alternative to the short String or Int constants used to describe sets of similar objects in far older APIs.

\n

Sometimes we must use the constant variable in our application to not be changed throughout the application. One of the methods to declare the continuous variables are Enum. Let's discuss it.

\n

Using Enum in C Sharp

\n

Enum is the short form of Enumeration. Enum consumes less memory and space because they are value types, which means they store memory value. Also, Enums are strongly typed named constants.

\n

Enums written by developers are used in the .NET system to develop numeric constants. A numeric value must be allocated to all the members of an enum. Here are the main points about Enums:

\n\n

Enums are of two types in C#

\n

Simple Enum - The members of this enum contain a single value.

\n

Flags Enum - The members of this enum contain multiple values or multiple values combined using a bitwise OR operator. These enums are often used for bitwise operators.

\n

Here we will talk about the Simple Enum only.

\n

How to declare an Enum

\n

Enum is declared by the enum keyword followed by the enum name and then its enum members. Like an example below

\n
public enum Vehicle\n{\n    Car,\n    Bike=3,\n    Truck,\n    Taxi,\n}
\n

In the above code, an enum for the Vehicle is created. The enum values are started from 0 by default if we do not assign them the values and incremented by 1 for the next enum member.

\n

That means the Car enum has the value 0 and the Bike enum assigned the value 3 that means the Bike enum now has the value 3 and the next enums are incremented by 1 means Truck and Taxi enum have the value 4 and 5 respectively.

\n

By default, the type for enum elements is int. We can set different type by adding a colon like an example below.

\n
public enum Vehicle: byte\n{\n    Car,\n    Bike=3,\n    Truck,\n    Taxi,\n}
\n

The different types which can be set are sbyte, byte, short, ushort, uint, ulong, and long.

\n

Get the value of an Enum

\n

To get the value of enum we can simply typecast it to its type. In the first example, the default type is int so we have to typecast it to int. Also, we can get the string value of that enum by using the ToString() method as below.

\n
Console.WriteLine((int)VehicleEnum.Car);\nstring vehicle = Vehicle.Bike.ToString();\nConsole.WriteLine(vehicle);
\n

Output:

\n
0\nBike
\n

Parse the string value into an Enum

\n

For parsing the string value into enum we have 2 methods

\n
    \n
  1. Enum.Parse(Type enumType,string value) - This method directly parses the string representation of the name or numeric value of enum member into enumType object. If the string representation of the name is not found, then it will give the exception.
    2. \n
\n
Console.WriteLine(Enum.Parse(typeof(Vehicle),"Car"));
\n

Output:

\n
Car
\n
    \n
  1. Enum.TryParse(string? value,out enumType result) - This method gives the result in bool value. if the string representation of the name or numeric value of enum member into enumType object is parsed, then the result will be true, and the parsed value will be in the out variable. If the string value is not parsed, then the result will be false.
    2. \n
\n
Enum.TryParse("0",out Vehicle value);\nConsole.WriteLine(value);
\n

Output:

\n
Car
\n

Note - Both the methods also have overload methods.

\n

Check if a string value is defined in the Enum

\n

We can check if a given integral value, or its name as a string, exists in a specified enum.

\n
Console.WriteLine(Enum.IsDefined(typeof(Vehicle), 0));
\n

OR

\n
Console.WriteLine(Enum.IsDefined(typeof(Vehicle), "car"));
\n

Output:

\n
True
\n

Loop through all the Enum

\n

For looping through the enums you can write the below code -

\n
foreach (var data in Enum.GetNames(typeof(Vehicle)))\n{\n    Console.WriteLine(data+" - "+ (int)Enum.Parse(typeof(Vehicle), data));\n}
\n

Here Enum.GetNames(Type enumType) method is used, which retrieves an array of the names from the specified enum.

\n

Output:

\n
Car - 0\nBike - 3\nTruck - 4\nTaxi - 5
\n

Call an enum by the integral value

\n

We can call the enum member by its integral value. If there is no corresponding value related to that integral value, then it will print that integral value.

\n
 Console.WriteLine((Vehicle)3);
\n

Output

\n
Bike
\n

Conclusion

\n

The advantages of using enums are that they are very easy to use and represented as strings but processed as integers. Enums are easy to maintain and improve code readability because they provide symbolic named constants, which means you need to remember the names, not the integer values.

\n

If you want to learn more about C programming, here is another article written on C# Exceptions and Exception Handling in C# I hope you learn something new today and will going to try it out, if you have any questions feel free to drop a comment below.

\n","frontmatter":{"date":"December 18, 2020","updated_date":null,"description":"Would you like to become more proficient in your C# programming in the use of enums? To learn the basics and use cases for Enum in C#, read this post.","title":"How to Use Enum in C#","tags":["C#","Enum"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4730f4a49850d621c2969f5405e589e1/58556/coverimage.webp","srcSet":"/static/4730f4a49850d621c2969f5405e589e1/61e93/coverimage.webp 200w,\n/static/4730f4a49850d621c2969f5405e589e1/1f5c5/coverimage.webp 400w,\n/static/4730f4a49850d621c2969f5405e589e1/58556/coverimage.webp 800w,\n/static/4730f4a49850d621c2969f5405e589e1/210c1/coverimage.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"The goal of this post is to learn about the various ways of data migration in MongoDB that can help us to write scripts that change your…","fields":{"slug":"/engineering/live-data-migration-mongodb/"},"html":"

The goal of this post is to learn about the various ways of data migration in MongoDB that can help us to write scripts that change your database by adding new documents, modifying existing ones.

\n

If you're coming here for the first time, please take a look at the prequel Self-Hosted MongoDB.

\n

Alright then, picking from where we left off, let's get started with the data migration in MongoDB.

\n

Now, the basic steps to migrate data from one MongoDB to another would be:

\n
    \n
  1. Create a zipped backup of the existing data
    2. \n
  2. Dump the data in a new DB
    3. \n
\n

This is very straight forward when the source database is not online because we know that there won't be any new documents created/updated during the migration process.\nLet's look at simple migration first before diving into the live scenario.

\n
\n

Migrating from an offline database in MongoDB

\n

Creating a backup

\n

We're going to use an existing utility program mongodump for creating the database backup.

\n

Run this command in the source database server

\n
mongodump --host="hostname:port" \\\n  --username="username" --password="password" \\\n  --authenticationDatabase "admin" \\\n  --db="db name" --collection="collection name" --query='json' \\\n  --forceTableScan -v --gzip --out ./dump
\n

--host: The source MongoDB hostname along with the port. It defaults to localhost:27017. If it is a connection string you can use this option —-uri=\"mongodb://username:password@host1[:port1]...\"

\n

--username: Specifies a username to authenticate to a MongoDB database that uses authentication.

\n

--password: Specifies a password to authenticate to a MongoDB database that uses authentication.

\n

--authenticationDatabase: Specifies the authentication database where the specified --username has been created.

\n
\n

If you do not specify an authentication database or a database to export, mongodump assumes the admin database holds the user's credentials.

\n
\n

--db: Specifies the database to take a backup from. If you do not specify a database, mongodump collects from all databases in this instance.

\n
\n

Alternatively, you can also specify the database directly in the URI connection string i.e. mongodb://username:password@uri/dbname.
Providing a connection string while also using --db and specifying conflicting information will result in an error.

\n
\n

--collection: Specifies a collection to backup. If you do not specify a collection, this option copies all collections in the specified database or instance to the dump files.

\n

--query : Provides a JSON document as a query that optionally limits the documents included in the output of mongodump.
\nYou must enclose the query document in single quotes ('{ ... }') to ensure that it does not interact with your environment.
\nThe query must be in Extended JSON v2 format (either relaxed or canonical/strict mode), including enclosing the field names and operators in quotes e.g. '{ \"created_at\": { \"\\$gte\": ISODate(...) } }'.

\n
\n

To use the --query option, you must also specify the --collection option.

\n
\n

--forceTableScan: Forces mongodump to scan the data store directly. Typically, mongodump saves entries as they appear in the index of the _id field.

\n
\n

If you specify a query --query, mongodump will use the most appropriate index to support that query.
Hence , you cannot use --forceTableScan with the --query option.

\n
\n

--gzip: Compresses the output. If mongodump outputs to the dump directory, the new feature compresses the individual files. The files have the suffix .gz.

\n

--out: Specifies the directory where mongodump will write BSON files for the dumped databases. By default, mongodump saves output files in a directory named dump in the current working directory.

\n

Restoring the backup

\n

We will use a utility program called mongorestore for restoring the database backup.

\n

Copy the backup directory dump to the new Database instance and run the following command:

\n
mongorestore --uri="mongodb://user:password@host:port/?authSource=admin" \\\n  --drop --noIndexRestore --gzip -v ./dump
\n

Replace the credentials with the new database credentials. Unline in the previous step, the --authenticationDatabase option is specified in the URI string.

\n

Also, use --gzip if used while creating the backup.

\n

--drop: Before restoring the collections from the dumped backup, drops the collections from the target database. It does not drop collections that are not in the backup.\n--noIndexRestore: Prevents mongorestore from restoring and building indexes as specified in the corresponding mongodump output.

\n
\n

If you want to change name of the database while restoring, you can do so using
--nsFrom=\"old_name.*\" --nsTo=\"new_name.*\" options.

However, it won’t work if you were to migrate with oplogs which is a requirement in migration from an online instance.

\n
\n
\n

Migrating from an online database in MongoDB

\n

The only challenge with migrating from an online database is not able to pause the updates during migration. So here is the overview of the steps,

\n
    \n
  1. Run an initial bulk migration with oplogs capture
    2. \n
  2. Run a sync job to mitigate the database connection switch latency
    3. \n
\n
\n

Now, to capture oplogs, a replica set must be initialized in the source and destination databases. This is because the oplogs are captured from local.oplog.rs namespace, which is created after initializing a replica set.

You can follow this guide to configure a replica set.

\n
\n

Initial Migration with Oplog Capture

\n

Oplogs, in simple words, are the operation logs created per operation in the database. They represent a partial document state or, in other words, the database state. So we are going to capture any updates in our old database during the migration process using these oplogs.

\n

Run the mongodump program with the following options,

\n
mongodump --uri=".../?authSource=admin" \\\n  --forceTableScan --oplog \\\n  --gzip -v --out ./dump
\n

--oplog: Creates a file named oplog.bson as part of the mongodump output. The oplog.bson file, located in the top level of the output directory, contains oplog entries that occur during the mongodump operation. This file provides an effective point-in-time snapshot of the state of our database instance.

\n

Restore the data with oplog replay

\n

In order to replay the oplogs, a special role is required. Let's create and assign the role to the database user being used for migration.

\n

Create the role

\n
db.createRole({\n  role: "interalUseOnlyOplogRestore",\n  privileges: [\n    {\n      resource: { anyResource: true },\n      actions: [ "anyAction" ] \n    }\n  ],\n  roles: []\n})
\n

Assign the role

\n
db.grantRolesToUser(\n  "admin",\n  [{ role:"interalUseOnlyOplogRestore", db:"admin" }]\n);
\n

Now you can restore using the mongorestore program with the following options,

\n
mongorestore --uri="mongodb://admin:.../?authSource=admin" \\\n  --oplogReplay \n  --gzip -v ./dump
\n

In the above command, using the same user admin with whom the role was associated.

\n

--oplogReplay: After restoring the database dump, replays the oplog entries from a bson file and restores the database to the point-in-time backup captured with the mongodump --oplog command.

\n

Mitigating database connection switch latency

\n

Alright, so far we are done with most of the heavy lifting. The only thing that remains is maintaining consistency between the databases during the connection switch in our application servers.

\n
\n

If you're running MongoDB version 3.6+, it's better to go for the Change Stream approach, which is a event-based mechanism introduced to capture changes in your database in an optimized way. Here is an article that covers it : An Introduction to Change Streams

\n
\n

Check out the generic sync script, which you can run as a CRON job every minute.

\n

Update the variables in this script and run as

\n
$ ./delta-sync.sh from_epoch_in_milliseconds\n\n# from_epoch_in_milliseconds is automatically picked with every iteration if not supplied
\n

Or you can set up a cron job to run this every minute.

\n
* * * * * ~/delta-sync.sh
\n

The output can be monitored with the following command (I'm running RHEL 8, refer to your OS guide for cron output)

\n
$ tail -f /var/log/cron | grep CRON
\n

This is a sample sync log.

\n
CMD (~/cron/dsync.sh)\nCMDOUT (INFO: Updated log registry to use new timestamp on next run.)\nCMDOUT (INFO: Created sync directory: /home/ec2-user/cron/dump/2020-11-03T19:01:01Z)\nCMDOUT (Fetching oplog in range [2020-11-03T19:00:01Z - 2020-11-03T19:01:01Z])\nCMDOUT (2020-11-03T19:01:02.319+0000#011dumping up to 1 collections in parallel)\nCMDOUT (2020-11-03T19:01:02.334+0000#011writing local.oplog.rs to /home/ec2-user/cron/dump/2020-11-03T19:01:01Z/local/oplog.rs.bson.gz)\nCMDOUT (2020-11-03T19:01:04.943+0000#011local.oplog.rs  0)\nCMDOUT (2020-11-03T19:01:04.964+0000#011local.oplog.rs  0)\nCMDOUT (2020-11-03T19:01:04.964+0000#011done dumping local.oplog.rs (0 documents))\nCMDOUT (INFO: Dump success!)\nCMDOUT (INFO: Replaying oplogs...)\nCMDOUT (2020-11-03T19:01:05.030+0000#011using write concern: &{majority false 0})\nCMDOUT (2020-11-03T19:01:05.054+0000#011will listen for SIGTERM, SIGINT, and SIGKILL)\nCMDOUT (2020-11-03T19:01:05.055+0000#011connected to node type: standalone)\nCMDOUT (2020-11-03T19:01:05.055+0000#011mongorestore target is a directory, not a file)\nCMDOUT (2020-11-03T19:01:05.055+0000#011preparing collections to restore from)\nCMDOUT (2020-11-03T19:01:05.055+0000#011found collection local.oplog.rs bson to restore to local.oplog.rs)\nCMDOUT (2020-11-03T19:01:05.055+0000#011found collection metadata from local.oplog.rs to restore to local.oplog.rs)\nCMDOUT (2020-11-03T19:01:05.055+0000#011restoring up to 4 collections in parallel)\nCMDOUT (2020-11-03T19:01:05.055+0000#011replaying oplog)\nCMDOUT (2020-11-03T19:01:05.055+0000#011applied 0 oplog entries)\nCMDOUT (2020-11-03T19:01:05.055+0000#0110 document(s) restored successfully. 0 document(s) failed to restore.)\nCMDOUT (INFO: Restore success!)
\n

You can stop this script after verifying that no more oplogs are being created, i.e., when source DB went offline.

\n

This concludes the complete self-hosted MongoDB data migration guide. If you want to learn more about MongoDB here is a useful resource on how to use MongoDB as datasource in goLang.

\n","frontmatter":{"date":"December 14, 2020","updated_date":null,"description":"This article covers the guide to migrate data from offline or live MongoDB instance using oplog replay alongside mitigate connection switch latency with existing utilities.","title":"How to Migrate Data In MongoDB","tags":["MongoDB"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4184397163120568,"src":"/static/358a76df2469bd65a47d7ec0a70675d7/58556/index.webp","srcSet":"/static/358a76df2469bd65a47d7ec0a70675d7/61e93/index.webp 200w,\n/static/358a76df2469bd65a47d7ec0a70675d7/1f5c5/index.webp 400w,\n/static/358a76df2469bd65a47d7ec0a70675d7/58556/index.webp 800w,\n/static/358a76df2469bd65a47d7ec0a70675d7/e30b5/index.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Chinmaya Pati","github":"cnp96","avatar":null}}}},{"node":{"excerpt":"This guide uses LoginRadius API for authenticating React apps. It provides React developers with a more straightforward way to add user…","fields":{"slug":"/engineering/user-authentication-react-application/"},"html":"

This guide uses LoginRadius API for authenticating React apps. It provides React developers with a more straightforward way to add user authentication to react apps. To handle a lot of authentication implementation information, LoginRadius offers a high-level API. Using security best practices, now you can protect your response apps while writing less code.

\n

This article focuses on helping developers learn how to integrate user authentication in the React application. Practice the following security principles to improve authentication on React applications:

\n\n

In the React application, we can easily and quickly add authentication by using LoginRadius. If you already have a customized login/registration page ready, then I'll guide you to the next step of adding authentication in react apps.

\n

Configure LoginRadius for React Application

\n

A new application was created for you when you signed up for LoginRadius. From here, you get some essential information.

\n
    \n
  1. API Key How to get API Key?
    2. \n
  2. Sott Work with Sott
    3. \n
\n

Add following LoginRadius JS library into your application

\n
<script type="text/javascript" src="https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>
\n

Add Authentication when you have customized Login Page

\n

Add Login to your react application

\n

We will use an API framework to call LoginRadius APIs for authentication. Create a new file LoginPage.js, and add the following code.

\n
    import  React, { useState } from  "react";\n    const  lrconfig = {\n    apiKey:  "*************************", //LoginRadius API key\n    };\n    const  loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new  window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n    const  LoginButton = () => {\n      const  loginButtonHandler = () => {\n      loginradius.api.login({emailid:  emailValue,\n      password:  passwordValue},\n      (successResponse)=>{\n      //Here you will get the access Token of \n      \n      \n      console.log(successResponse);\n      },\n      (errors) => {\n      console.log(errors);\n      });\n      }\n      const [emailValue, updateEmailValue] = useState("");\n      const [passwordValue, updatePasswordValue] = useState("");\n      return (\n      <React.Fragment>\n      <input  type="text"  value={emailValue}  onChange={(e)=>{updateEmailValue(e.target.value)}}  placeholder={"email"}/>\n      <input  type="password"  value={passwordValue}  onChange={(e)=>{updatePasswordValue(e.target.value)}}  placeholder={"Password"}  />\n      <button  onClick={() =>  loginButtonHandler()}>Log In</button>\n      </React.Fragment>\n      );\n      };\n      export  default  LoginButton;
\n

In the above code, you will see the lrConfig object, which has apikey that you will get from the LoginRadius account. After calling loginradius.api.login, you will get the response in which you will get the access Token. Through this access token, you can get the user profile.

\n

Add Logout to your react application

\n

Create LogoutPage.js file and add following code:

\n
    import React, { useState } from "react";\n\n    const lrconfig = {\n      apiKey: "*************************", //LoginRadius API key\n    };\n\n    const loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n\n    const LogoutButton = () => {\n      const token  = '************'; // Access Token that you got after login\n      const logoutButtonHandler = () => {\n        //Note: Call invalidate token api to invalidate the token.**\n        loginradius.api.invalidateToken(\n               token,\n               (successResponse)=>{\n           console.log(successResponse);\n           },\n               (errors) => {\n                 console.log(errors);\n               }\n             );\n       }\n      return (\n        <React.Fragment>\n       <button onClick={() => logoutButtonHandler()}>Logout</button>\n       </React.Fragment>\n       );\n    };\n    export default LogoutButton;
\n

In the above code, we have called invalidated token api, which expires your access token.

\n

Add Signup to your react application

\n

Create SignupPage.js file and add the following code:

\n
    import  React, { useState } from  "react";\n    const  lrconfig = {\n    apiKey:  "*************************", //LoginRadius API key\n    sott:  "***************************"  //Secure Token for signup functionality\n    };\n    const  loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new  window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n    const  SignupButton = () => {\n      const  signupButtonHandler = () => {\n      loginradius.api.registration({\n        email: [{ type: "Primary", value: emailValue }],\n              password: passwordValue\n            },\n      (successResponse)=>{\n      //Here you will get the response after registration\n      console.log(successResponse);\n      },\n      (errors) => {\n      console.log(errors);\n      });\n      }\n      const [emailValue, updateEmailValue] = useState("");\n      const [passwordValue, updatePasswordValue] = useState("");\n      return (\n      <React.Fragment>\n      <input  type="text"  value={emailValue}  onChange={(e)=>{updateEmailValue(e.target.value)}}  placeholder={"email"}/>\n      <input  type="password"  value={passwordValue}  onChange={(e)=>{updatePasswordValue(e.target.value)}}  placeholder={"Password"}  />\n      <button  onClick={() =>  signupButtonHandler()}>Log In</button>\n      </React.Fragment>\n      );\n      };\n      export  default  SignupButton;
\n

In the above code, You will get a success/error response after calling the registration api.

\n

Wrap up

\n

The most common authentication use case for a React application gets covered in this tutorial: quick login and logout. However, LoginRadius is an expandable and versatile platform that can help you accomplish much more. In this guide, We have used the LoginRadius API Framework. If you want to incorporate our hosted page into your application, follow this documentation.

\n

Let me know what you think of this tutorial in the comments below. Thanks for reading :)

\n","frontmatter":{"date":"December 10, 2020","updated_date":null,"description":"This article focuses on helping developers learn how to integrate user authentication in React applications and determine the basic principles of authentication with React.","title":"A Guide To React User Authentication with LoginRadius","tags":["Authentication","LoginRadius","React"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a877f5fa04ac6dd24b63bb101cc8302d/58556/authentication-main.webp","srcSet":"/static/a877f5fa04ac6dd24b63bb101cc8302d/61e93/authentication-main.webp 200w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/1f5c5/authentication-main.webp 400w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/58556/authentication-main.webp 800w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/99238/authentication-main.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"Web authentication or WebAuthn is a new standard for authentication published by the World Wide Web Consortium and supported by the FIDO…","fields":{"slug":"/engineering/webauthn-authentication-application/"},"html":"

Web authentication or WebAuthn is a new standard for authentication published by the World Wide Web Consortium and supported by the FIDO alliance. The standard works by providing a way for users to authenticate through a third-party authenticator. These authenticators can be built into the operating system software, like Windows Hello or Android biometrics, or through external authenticators, like a USB authenticator.

\n

This article will cover a high-level description of how WebAuthn works and two different ways an application can be set up to use the WebAuthn standard to authenticate users. One is through a basic registration flow where the authenticator data is stored upon registration and must be used to log in. The other is a flow where the authenticator can be used as a second-factor authentication method, prompted after a user logs in. For more information on this, resources like the World Wide Web Consortium documentation can be useful.

\n

WebAuthn Introduction

\n

The WebAuthn authentication process involves the interaction between three entities: The relying party, which is the server that handles the credentials of the authenticator and verifies it, a web browser that should support the web authentication protocol, and the authenticator itself.

\n

The registration process begins when the client generates some sort of identifying information about themselves. Typically, this would be a user name or an email from the user but could be another identifier sent from the client, such as a randomly generated GUID. Using the Web Authentication APIs with JavaScript, the client can request the relying party to register the authenticator credentials.

\n

\"WebAuthn

\n

After receiving the request from the client, the relying party generates a challenge based on the options provided by the client. The client receives the response and attempts to get the user to verify the authenticator being used. For example, with Windows Hello as the authenticator, the user can enter their PIN. After verifying the authenticator, it signs the challenge-response back with identifying details and returns it to the relying party, which validates the authenticator and registers the user.

\n

When the registration begins, options are set from the relying party that changes how the flow will work. You can find a list of the options in this document on W3C. Here are some examples of the significant options that one might set for their flows:

\n\n

The authentication or login process is similar to the registration process. Using the JavaScript libraries, the authenticator passes identifying information to the relying party. The relying party returns a challenge, which should be validated by the user, processed by the authenticator, and finally validated by the relying party. User verification is checked from the options, but a majority of the options have been reduced as no credentials are generated or saved on either end.

\n

Setting up WebAuthn for your Application

\n

When setting up WebAuthn as an authentication method for your application, two considerations are to use the standard as a primary registration and authentication method or as a second-factor authentication method.

\n

As a primary authentication method, the authenticator identification and credentials are stored by the server at the same time the user account is created.

\n

To begin, use the Web Authentication API to initiate the flow:

\n
Let publicKeyCredentialCreationOptions = {\n    user: {\n        id: “1234”,\n        name: "example@example.com",\n        displayName: "example",\n    },\n    authenticatorSelection: {\n    authenticatorAttachment: "platform",\n    },\n    attestation: "direct"\n};\n\nconst credential = await navigator.credentials.create({\n    publicKey: publicKeyCredentialCreationOptions\n});
\n

For this section, the creation options are generated by the client. In other scenarios, including this blog's example, the options are generated from the relying party by retrieving them via an API call.

\n

After the browser triggers this code, the authenticator will be prompted for validation. Since the authenticatorAttachment is set to 'platform', it would use the device's authenticator, like Windows Hello or an Android fingerprint scan.

\n

The data returned from the creation of the credentials will have a structure like this:

\n
PublicKeyCredential {\n    id: 'ADSUllKQmbqdGtpu4sjseh4cg2TxSvrbcHDTBsv4NSSX9...',\n    rawId: ArrayBuffer(59),\n    response: AuthenticatorAttestationResponse {\n        clientDataJSON: ArrayBuffer(121),\n        attestationObject: ArrayBuffer(306),\n    },\n    type: 'public-key'\n}
\n

This object should be passed to the relying party to complete the registration. The relying party verifies that the credentials passed in are correct and stores the identifier and credentials in the data store. In addition to storing the credentials object, any other registration variables should be passed in this step to register on your data store.

\n

To use this flow as part of a second-factor authentication process, the user account should be created before initiating this process with an already existing authentication method, like a password system. After the user account is created, running this flow should update the current user in the data store with the credential data. This will allow the second-factor authentication credentials to be configured and triggered after a password login.

\n

Most programming languages have a library built that supports WebAuthn for a relying party server. For example, Duo has created them for Python and Go. Using one of these libraries during the development of the relying party server will simplify the process. These resources also provide demos on how to implement their libraries to handle the credential data generated by the JavaScript Web Authentication APIs.

\n

Conclusion

\n

Although the usage of WebAuthn is not widespread at the moment, the potential to authenticate a user passwordless or with the extra security of an authenticator allows it to be a strong contender in the future over regular password authentication flows. Hopefully, this blog helps you get started on your authentication apps with WebAuthn.

\n","frontmatter":{"date":"December 09, 2020","updated_date":null,"description":"Web authentication, or WebAuthn in short. A go-to guide for developers to learn more about WebAuthn API, and how to set it up in their services..","title":"WebAuthn: A Guide To Authenticate Your Application","tags":["WebAuthn","FIDO","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/23998a17044eadfc099cb67908b28ac8/58556/webauthn-logo.webp","srcSet":"/static/23998a17044eadfc099cb67908b28ac8/61e93/webauthn-logo.webp 200w,\n/static/23998a17044eadfc099cb67908b28ac8/1f5c5/webauthn-logo.webp 400w,\n/static/23998a17044eadfc099cb67908b28ac8/58556/webauthn-logo.webp 800w,\n/static/23998a17044eadfc099cb67908b28ac8/99238/webauthn-logo.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Chris Yee","github":null,"avatar":null}}}},{"node":{"excerpt":"Let's walk through how to build and push Docker images programmatically using Go. To do this, we need to talk to the Docker daemon via the…","fields":{"slug":"/engineering/build-push-docker-images-golang/"},"html":"

Let's walk through how to build and push Docker images programmatically using Go. To do this, we need to talk to the Docker daemon via the Docker Engine API. This is similar to how the Docker CLI works, but instead of entering commands through a CLI, we'll be writing code with Docker's Go SDK.

\n

At the time of writing, the official Docker Go SDK docs provide great examples of running basic Docker commands with Go. However, it's missing examples on building and pushing Docker images, so we'll go over those in this blog.

\n

Before we begin, this blog assumes you have a working knowledge of Docker and Go. We'll go over the following:

\n\n

Environment Setup

\n

First, we need to set up the environment. Create a project and include the app we want to containerize:

\n
mkdir docker-go-tutorial && cd docker-go-tutorial && mkdir node-hello
\n

We'll add a simple Node.js app:

\n
// node-hello/app.js\nconsole.log("Hello From LoginRadius");
\n

with the Dockerfile:

\n
// node-hello/Dockerfile\nFROM node:12\nWORKDIR /src\nCOPY . .\nCMD [ "node", "app.js" ]
\n

Next, install the Go SDK. These are the Docker related imports we will be using:

\n
"github.com/docker/docker/api/types"\n"github.com/docker/docker/client"\n"github.com/docker/docker/pkg/archive"
\n

Build Docker Image

\n

One way to build a Docker image from our local files is to compress those files into a tar archive first.

\n

We use the archive package provided by Docker:

\n
"github.com/docker/docker/pkg/archive"
\n
tar, err := archive.TarWithOptions("node-hello/", &archive.TarOptions{})\nif err != nil {\n    return err\n}
\n

Now, we can call the ImageBuild function using the Go SDK:

\n\n

To print the response, we use a scanner to go through line by line:

\n
scanner := bufio.NewScanner(res.Body)\nfor scanner.Scan() {\n    lastLine = scanner.Text()\n    fmt.Println(scanner.Text())\n}
\n

This prints the following:

\n
{"stream":"Step 1/4 : FROM node:12"}\n{"stream":"\\n"}\n{"stream":" ---\\u003e e4f1e16b3633\\n"}\n{"stream":"Step 2/4 : WORKDIR /src"}\n{"stream":"\\n"}\n{"stream":" ---\\u003e Using cache\\n"}\n{"stream":" ---\\u003e b298b8519669\\n"}\n{"stream":"Step 3/4 : COPY . ."}\n{"stream":"\\n"}\n{"stream":" ---\\u003e Using cache\\n"}\n{"stream":" ---\\u003e 1ff6a87e79d9\\n"}\n{"stream":"Step 4/4 : CMD [ \\"node\\", \\"app.js\\" ]"}\n{"stream":"\\n"}\n{"stream":" ---\\u003e Using cache\\n"}\n{"stream":" ---\\u003e 6ca44f72b68d\\n"}\n{"aux":{"ID":"sha256:238a923459uf28h80103eb089804a2ff2c1f68f8c"}}\n{"stream":"Successfully built 6ca44f72b68d\\n"}\n{"stream":"Successfully tagged lrblake/node-hello:latest\\n"}
\n

The last step would be checking the response for errors, so if something went wrong during the build, we could handle it.

\n
errLine := &ErrorLine{}\njson.Unmarshal([]byte(lastLine), errLine)\nif errLine.Error != "" {\n    return errors.New(errLine.Error)\n}
\n

For example, the following error can occur during build:

\n
{"errorDetail":{"message":"COPY failed: stat /var/lib/docker/tmp/docker-builder887191115/z: no such file or directory"},"error":"COPY failed: stat /var/lib/docker/tmp/docker-builder887191115/z: no such file or directory"}
\n

All together, the file looks like this:

\n
package main\n\nimport (\n\t"bufio"\n\t"context"\n\t"encoding/json"\n\t"errors"\n\t"fmt"\n\t"io"\n\t"time"\n\n\t"github.com/docker/docker/api/types"\n\t"github.com/docker/docker/client"\n\t"github.com/docker/docker/pkg/archive"\n)\n\nvar dockerRegistryUserID = ""\n\ntype ErrorLine struct {\n\tError       string      `json:"error"`\n\tErrorDetail ErrorDetail `json:"errorDetail"`\n}\n\ntype ErrorDetail struct {\n\tMessage string `json:"message"`\n}\n\nfunc main() {\n\tcli, err := client.NewClientWithOpts(client.FromEnv, client.WithAPIVersionNegotiation())\n\tif err != nil {\n\t\tfmt.Println(err.Error())\n\t\treturn\n\t}\n\n\terr = imageBuild(cli)\n\tif err != nil {\n\t\tfmt.Println(err.Error())\n\t\treturn\n\t}\n}\n\nfunc imageBuild(dockerClient *client.Client) error {\n\tctx, cancel := context.WithTimeout(context.Background(), time.Second*120)\n\tdefer cancel()\n\n\ttar, err := archive.TarWithOptions("node-hello/", &archive.TarOptions{})\n\tif err != nil {\n\t\treturn err\n\t}\n\n\topts := types.ImageBuildOptions{\n\t\tDockerfile: "Dockerfile",\n\t\tTags:       []string{dockerRegistryUserID + "/node-hello"},\n\t\tRemove:     true,\n\t}\n\tres, err := dockerClient.ImageBuild(ctx, tar, opts)\n\tif err != nil {\n\t\treturn err\n\t}\n\n\tdefer res.Body.Close()\n\n\terr = print(res.Body)\n\tif err != nil {\n\t\treturn err\n\t}\n\n\treturn nil\n}\n\nfunc print(rd io.Reader) error {\n\tvar lastLine string\n\n\tscanner := bufio.NewScanner(rd)\n\tfor scanner.Scan() {\n\t\tlastLine = scanner.Text()\n\t\tfmt.Println(scanner.Text())\n\t}\n\n\terrLine := &ErrorLine{}\n\tjson.Unmarshal([]byte(lastLine), errLine)\n\tif errLine.Error != "" {\n\t\treturn errors.New(errLine.Error)\n\t}\n\n\tif err := scanner.Err(); err != nil {\n\t\treturn err\n\t}\n\n\treturn nil\n}
\n

The equivalent Docker CLI command would be:

\n
docker build -t <dockerRegistryUserID>/node-hello .
\n

Push Docker Image

\n

We'll push the Docker image we created to Docker Hub. But, we need to authenticate with Docker Hub by providing credentials encoded in base64.

\n\n

Now, call the ImagePush function in the Go SDK, along with your encoded credentials:

\n
opts := types.ImagePushOptions{RegistryAuth: authConfigEncoded}\nrd, err := dockerClient.ImagePush(ctx, dockerRegistryUserID + "/node-hello", opts)
\n

Together, this looks like:

\n
func imagePush(dockerClient *client.Client) error {\n\tctx, cancel := context.WithTimeout(context.Background(), time.Second*120)\n\tdefer cancel()\n\n\tauthConfigBytes, _ := json.Marshal(authConfig)\n\tauthConfigEncoded := base64.URLEncoding.EncodeToString(authConfigBytes)\n\n\ttag := dockerRegistryUserID + "/node-hello"\n\topts := types.ImagePushOptions{RegistryAuth: authConfigEncoded}\n\trd, err := dockerClient.ImagePush(ctx, tag, opts)\n\tif err != nil {\n\t\treturn err\n\t}\n\n\tdefer rd.Close()\n\n\terr = print(rd)\n\tif err != nil {\n\t\treturn err\n\t}\n\n\treturn nil\n}
\n

The equivalent Docker CLI command (after docker login) would be:

\n
docker push <dockerRegistryUserID>/node-hello
\n","frontmatter":{"date":"December 08, 2020","updated_date":null,"description":"Guide on how to build and push Docker images programmatically using Go.","title":"Build and Push Docker Images with Go","tags":["Docker","Go"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.680672268907563,"src":"/static/2f998a173a852a0b3670b1ac58fba74e/58556/cover.webp","srcSet":"/static/2f998a173a852a0b3670b1ac58fba74e/61e93/cover.webp 200w,\n/static/2f998a173a852a0b3670b1ac58fba74e/1f5c5/cover.webp 400w,\n/static/2f998a173a852a0b3670b1ac58fba74e/58556/cover.webp 800w,\n/static/2f998a173a852a0b3670b1ac58fba74e/e30b5/cover.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Andy Yeung","github":null,"avatar":null}}}},{"node":{"excerpt":"What is Istio? Istio is an Open Source service mesh (developed in partnership between teams from Google, IBM, and Lyft), providing a…","fields":{"slug":"/engineering/istio-service-mesh/"},"html":"

What is Istio?

\n

Istio is an Open Source service mesh (developed in partnership between teams from Google, IBM, and Lyft), providing a dedicated infrastructure layer for creating service-to-service communication that is safe, fast, and reliable. Having such a fanatical communication layer can provide various advantages, like providing observability into communications, providing secure connections, or automating retries and backoff for failed requests.

\n

A service mesh also often has more complex operational requirements, like A/B testing, canary rollouts, rate limiting, access control, and end-to-end authentication.

\n

Istio does this by adding a sidecar proxy which intercepts all network communication between microservices, then configures and manages Istio using its control plane functionality, which incorporates:

\n
    \n
  1. Granular control over the service-to-service communication and its routing with the additional functionality of retries, fault injection, circuit breakers.
    2. \n
  2. Providing secure mTLS without any changes in the application code.
    3. \n
  3. Cluster to cluster communication using ingress and egress gateways.
    4. \n
\n

Istio Architecture

\n

An Istio service mesh is logically split into a data plane and a control plane.

\n

The data plane is composed of Envoy proxy deployed as sidecars. Envoy itself is an L7 proxy and communication bus designed for modern microservices-based architecture. These proxies intercept and control all network communication between microservices. They also collect and report telemetry on all mesh traffic.

\n

The control plane manages and configures the proxies to route traffic.

\n

\"Istio

\n

Istio Core Components

\n

Pilot

\n

Istio Pilot manages and configures all the Envoy proxy instances deployed. It takes the rules for traffic behavior provided by the control plane and converts them into configurations applied by Envoy.

\n

Citadel

\n

Responsible for controlling the authentication and identity management between services. Allow developers to build a zero-trust network based on service identity.

\n

Mixer

\n

Responsible for enforcing access control and usage policies across the service mesh and collects telemetry data from the Envoy proxy and other services.

\n

Istio Features

\n

Traffic Management

\n

It is the basic feature of Istio, which facilitates the routing between services. Istio simplifies the configuration of service-level properties like circuit breakers, timeouts, and retries.\nAll traffic that your mesh services send and receive (data plane traffic) is proxied through Envoy, making it easy to direct and control traffic around your mesh without making any changes to your services.

\n

For discovering all the services in the ecosystem, Istio connects to the Service discovery System and populates its service registry. The Envoy sidecar proxy then uses this registry to route traffic to the correct service.

\n

Here are a few resources you can add for your deployment apart from the basic service discovery and load balancing:

\n

Virtual Services

\n

Virtual services play a key role in making Istio's traffic management flexible and powerful. They do this by strongly decoupling where clients send their requests from the destination workloads that actually implement them.
\nSo, instead of sending requests directly to a service data plane, you send traffic through this virtual service. Using virtual service, you can route requests to different versions of the same service or different hostnames based on particular endpoints. This helps us to do various other things like A/B testing or doing canary rollouts.

\n

A typical example:

\n
apiVersion: networking.istio.io/v1alpha3\nkind: VirtualService\nmetadata:\n  name: bookinfo\nspec:\n  hosts:\n    - bookinfo.com\n  http:\n  - match:\n    - uri:\n        prefix: /reviews\n    route:\n    - destination:\n        host: reviews  <-- Resolves to reviews.<namespace>.svc.cluster.local\n  - match:\n    - uri:\n        prefix: /ratings\n    route:\n    - destination:\n        host: ratings
\n

Destination Rule

\n

We use destination rules to configure what happens to traffic for that destination. Destination rules are applied after virtual service routing rules are evaluated, so they apply to the traffic's real destination.
\nUsing destination rules, we specify the subsets of the service using labels, which are then used by the virtual service to route requests to a particular subset. In addition to that, we can also customize traffic policy, load balancing policy, connection pool settings, mTLS, etc.

\n
apiVersion: networking.istio.io/v1alpha3\nkind: DestinationRule\nmetadata:\n  name: my-destination-rule\nspec:\n  host: my-svc\n  trafficPolicy:\n    loadBalancer:\n      simple: RANDOM\n  subsets:\n  #### This will work only if we have defined version label in the deployment\n  - name: v1\n    labels:\n      version: v1\n  - name: v2\n    labels:\n      version: v2\n    trafficPolicy:\n      loadBalancer:\n        simple: ROUND_ROBIN\n  - name: v3\n    labels:\n      version: v3
\n

Here we have defined destination rule for service my-svc and defined subsets and traffic policy global and per subset.

\n

Gateway

\n

It is used to manage inbound and outbound traffic for your mesh, letting you specify which traffic you want to enter or leave the mesh. Gateway configurations are applied to standalone Envoy proxies running at the edge of the mesh, rather than sidecar Envoy proxies running alongside your service workloads. Using this, we can expose our services to the internet.

\n

A typical example would be:

\n
apiVersion: networking.istio.io/v1alpha3\nkind: Gateway\nmetadata:\n  name: my-svc-gateway\n  namespace: test\nspec:\n  selector:\n    istio: ingressgateway\n  servers:\n  - port:\n      number: 80\n      name: http\n      protocol: HTTP\n    hosts:\n    - my-svc.example.com
\n

istio: ingressgateway is the gateway which is enabled by default after installation. We can create our custom gateway. Here, the hosts my-svc.example.com will resolve to the load balancer provided by the Istio by default. To use this gateway, one has to add config in the virtual service like for example:

\n
apiVersion: networking.istio.io/v1alpha3\nkind: VirtualService\nmetadata:\n  name: my-svc\nspec:\n  hosts:\n  - my-svc\n  - my-svc.example.com   <-- The host should match\n  gateways:               <--- gateway config\n    - my-svc-gateway\n  http:\n  - route:\n    - destination:\n        host: my-svc.test.svc.cluster.local\n        port:\n          number: 80
\n

Network Resilience

\n

This feature provides network configuration dynamically at runtime, which includes retries, fault injection, circuit breakers, and timeouts.

\n

Service Entries

\n

This object is used to add an external service as part of the service mesh, including a service running in a VM or other K8s cluster in case of multi-cluster installation.

\n

A typical example would be connecting a service to a database cluster that is not part of the mesh.

\n
apiVersion: networking.istio.io/v1alpha3\nkind: ServiceEntry\nmetadata:\n  name: elasticsearch\n  namespace: test\nspec:\n  hosts:\n  - elasticsearch.elasticsearch.svc.cluster.local\n  location: MESH_INTERNAL\n  ports:\n  - name: https\n    number: 9200\n    protocol: TCP\n  resolution: DNS
\n

The Service Entry should be in the same namespace as that of the calling service. This is helpful, especially in the case where the service is not exposed to a public endpoint and can be accessed using internal service DNS like the above example.

\n

Security

\n

Istio provides security features that will help us to establish a zero-trust network. Istio enables security by default and provides various authentication and authorization policy to regulate security.

\n

For example:

\n
apiVersion: security.istio.io/v1beta1\nkind: PeerAuthentication\nmetadata:\n  name: dsl-es\n  namespace: pdp-test\nspec:\n  selector:\n    matchLabels:\n      app: dsl-es\n  mtls:\n    mode: STRICT
\n

Here we define a peer authentication object for a service labeled my-svc, which tells that any service that needs to talk to my-svc will communicate using mtls. The service will accept only TLS connection. By default, Istio enables PERMISSIVE mode, which accepts both plaintext and encrypted communication.

\n

We can define peer authentication on the mesh, namespace, and pod level.

\n

That is all for the introduction to Istio. In the next part, we will look at installing Istio and configuring services to use Istio.

\n","frontmatter":{"date":"December 07, 2020","updated_date":null,"description":"This post will give a high-level introduction to Istio and its related concepts and terminologies.","title":"Istio Service Mesh: A Beginners Guide","tags":["Istio","Service Mesh"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d8ff8c7b29395837a840c4013f351290/58556/Istio.webp","srcSet":"/static/d8ff8c7b29395837a840c4013f351290/61e93/Istio.webp 200w,\n/static/d8ff8c7b29395837a840c4013f351290/1f5c5/Istio.webp 400w,\n/static/d8ff8c7b29395837a840c4013f351290/58556/Istio.webp 800w,\n/static/d8ff8c7b29395837a840c4013f351290/210c1/Istio.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Piyush Kumar","github":"kpiyush17","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":102,"currentPage":18,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}