{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/11","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"In this tutorial, we will be covering some authentication concepts and learn about authentication and how to use JSON JWTweb tokens to…","fields":{"slug":"/engineering/implementing-authentication-on-vuejs-using-jwt/"},"html":"

In this tutorial, we will be covering some authentication concepts and learn about authentication and how to use JSON JWTweb tokens to authorize a Vue app. To continue in this tutorial, you should be comfortable using vue, vuex, and express.

\n

Overview

\n

In our app, we have a login form. The user enters a username and password that is then posted to an endpoint. The flow of the app is the user opens the app, then the login page appears, the user submits the login form, which makes a post request to a login endpoint, then we check if the username and password check out, then we return a JWT and store the token in vuex and depending on the token we display a different page.

\n

\"App

\n

Setting up our Vue app

\n

You can start a new project using the vue cli, but you have to install the CLI first by running-

\n
npm install -g @vue/cli\n OR\nyarn global add @vue/cli
\n

after the cli is installed, you can create a new project by running-

\n
vue create jwt-auth-app
\n

You will then be prompted to select some basic setup. In your setup, select Babel, Linter, Vue Router, and Vuex!. That’s all we need.

\n

Setup Express Server

\n

To set up our server, we need to install cors, dotenv, express, and nodemon

\n
npm install cors dotenv express
\n

Our server.js file is simplistic in a way that we just import express, tell it what port to listen to, and return “hello world” when we hit the base URL, and then we listen on that port.

\n
require("dotenv").config();\nconst express = require("express");\nconst cors = require("cors");\nconst app = express();\nconst port = 3000;\napp.use(cors());\napp.use(express.json());\n\napp.get('/', (req, res) => {\n  res.send('Hello World!')\n})\napp.listen(port, () => {\n  console.log(`Example app listening at http://localhost:${port}`)\n})
\n

Building a login form

\n

In our views folder, we add login.vue and welcome.vue files, and in the login.vue file, we build out the login form. But before that, we want to add a route to our vue router so that we can navigate to the login and welcome page.\nSo for the index.js file of our router folder, we import the login and welcome view, and we add login and welcome routes for the components to point to.

\n
import Vue from "vue";\nimport VueRouter from "vue-router";\nimport Login from "../views/Login.vue";\nimport Welcome from "../views/Welcome.vue";\nVue.use(VueRouter);\nconst routes = [\n  {\n    path: "/",\n    name: "Welcom",\n    component: Welcome,\n  },\n  {\n    path: "/login",\n    name: "Login",\n    component: Login,\n  },\n];\nconst router = new VueRouter({\n  mode: "history",\n  base: process.env.BASE_URL,\n  routes,\n});\nexport default router;
\n

We can now navigate to both pages. On our welcome page, we want to check if the user is not logged in, then present the link they can click to navigate to the login page. We use a router link to achieve this.

\n
<template>\n  <div>\n    <h1>Welcome</h1>\n    <router-link  to="/login"><button>Login</button></router-link> \n  </div>\n</template>
\n

In our login view, we scaffold our form. In the form, we are going to have two input boxes, one is the username input, and the other is a password. We then add a button with the type submit to submit the form. When we submit, we perform a login function in our script then set preventDefault on our form to stop the page from refreshing each time we click the login button.\nIn the script of our application, we model our input data by doing a two-way binding to the data state.

\n
<template>\n  <div>\n    <h1>LOGIN</h1>\n    <form @submit.prevent="login">\n      <input v-model="username" placeholder="username" />\n      <br />\n      <br />\n      <input v-model="password" placeholder="password" type="password" />\n      <br />\n      <br />\n      <button type="submit">Login</button>\n    </form>\n  </div>\n</template>\n<script>\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n};\n</script>
\n

\"login

\n

For the login method that runs when you click the button, we would like to perform an HTTP request to our express backend. We want to make a post request to our /login route we will create in our server.\nIn the fetch method, the first parameter is the URL you are sending a request to. Then the second is the object you are posting containing the headers, which contain information about the request, and the body containing the form data.

\n
<script>\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n  methods: {\n    login() {\n      fetch("http://localhost:3000/login", {\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        body: JSON.stringify({\n          username: this.username,\n          password: this.password,\n        }),\n      });\n    },\n  },\n};\n</script>
\n

In our server.js, we create a post request to the /login route and send back some json to test it out. Now, if we click login now, we get back a 200 ok message.

\n

Note: Make sure you set up *cors* so that you don't encounter an error message when hitting the */login* route

\n
app.post("/login?", (req, res) => {\n  res.json({\n    message: "hello ma guy"\n  })\n})
\n

Check if the username and password exist

\n

The next step is to check if the username or password exists in a database or somewhere else. To not waste time dealing with a database, we can use a hardcoded username and password. In the post route, if somebody tries to log in with the exact login information we just hardcoded, we want to give the person a green light and log the person into the application; otherwise, we throw an error.

\n

Using the login payload we got from submitting the form, we can now check if the username and password are the same; else, we throw an error and respond with a status of 403 and a wrong login information message.

\n
app.post("/login", (req, res) => {\n  const USERNAME = "uma victor";\n  const PASSWORD = "8888";\n  const { username, password } = req.body;\n  if (username === USERNAME && password === PASSWORD) {\n    const user = {\n      id: 1,\n      name: "uma victor",\n      username: "uma victor",\n    };\n  } else {\n    res.status(403);\n    res.json({\n      message: "wrong login information",\n    });\n  }\n});
\n

JWT Authentication in our app

\n

This is the interesting part of the tutorial. Now, if you provide the correct login information and it checks out, the next step is to sign a JWT web token. Let’s first install the JWT plugin.

\n
npm install jsonwebtoken
\n

also, make sure to import it at the top of your server.js file

\n
const jwt = require("jsonwebtoken");
\n

Then when the user login is successful, we want to send a JWT that is signed. So we import the JWTpackage. Then you sign in with a unique password. In a real application, we will want to have a .env file where we store the secret key. Then use process.env to grab and use it when signing our user model. Imagine we have a user object which we got back from our database with a unique ID, name, and username.

\n
app.post("/login", (req, res) => {\n  const USERNAME = "uma victor";\n  const PASSWORD = "8888";\n  const { username, password } = req.body;\n  if (username === USERNAME && password === PASSWORD) {\n    const user = {\n      id: 1,\n      name: "uma victor",\n      username: "uma victor",\n    };\n    const token = jwt.sign(user, process.env.JWT_KEY);\n    res.json({\n      token,\n      user,\n    });\n  } else {\n    res.status(403);\n    res.json({\n      message: "wrong login information",\n    });\n  }
\n

It is the user object we want to sign, so when you send it to the client. We can uniquely identify them. The unique ID is also very important because when a server gets a request with a token, we want to know what uniquely identifies the request.\nNow when we enter the username and password in our form, we can see in the console that our JWT token is generated but is not encrypted.

\n

You can visit jwt.io and paste in the token that was generated, and your token will be decoded and return information about your payload

\n

Note: The token is not encrypted, and anyone who gets access to the token can hit your server with it. Tokens normally have an expiry period of between 30 - 60 minutes

\n

Store Token in vuex

\n

In our fetch method in the login view, we want to get back the token and the user and store it somewhere. Now we make our login method async, then we set our response to equal to the fetch method that returns the user and token, and we get back the user and token from the response.

\n
<script>\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n  methods: {\nasync login(e) {\n      e.preventDefault();\n      const response = await fetch("http://localhost:3000/login", {\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        body: JSON.stringify({\n          username: this.username,\n          password: this.password,\n        }),\n      });\n    },\n  },\n};\n</script>
\n

In our store, we add the user and token data in our state and set them to null initially. You can use the token to see if the user is logged in or not. If the token is null, then we are not logged in, but if it’s set to something, then we are probably logged in.\nWe create a setUser mutation in our mutation object that sets the state to the user object. We also create a setToken mutation to assign our token.

\n
import Vue from "vue";\nimport Vuex from "vuex";\nVue.use(Vuex);\nexport default new Vuex.Store({\n  state: {\n    user: null,\n    token: null,\n  },\n  mutations: {\n    setUser(state, user) {\n      state.user = user;\n    },\n    setToken(state, token) {\n      state.token = token;\n    },\n  },\n  actions: {},\n  getters: {},\n});
\n

Note: It is best practice to always call mutations from our actions, but since our mutations can easily be traced, we are calling the mutations directly

\n

In the login view, we can import mapMutations from vuex and map the setUser and setToken mutation. We can now call the mutations from the login method.

\n
<script>\nimport { mapMutations } from "vuex";\nexport default {\n  data: () => {\n    return {\n      username: "",\n      password: "",\n    };\n  },\n  methods: {\n    ...mapMutations(["setUser", "setToken"]),\n    async login(e) {\n      e.preventDefault();\n      const response = await fetch("http://localhost:3000/login", {\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        body: JSON.stringify({\n          username: this.username,\n          password: this.password,\n        }),\n      });\n      const { user, token } = await response.json();\n      this.setUser(user);\n      this.setToken(token);\n    },\n  },\n};\n</script>
\n

Now that we're logged in, our state has been mutated and updated with the information from our form. But after we login, we want to redirect to our welcome page using the $router.push(\"/\") method to redirect to the home page, which is also our welcome page.

\n
this.$router.push("/");
\n

// image of the welcome page here\nSince you are logged in, you don’t want the login button showing anymore on the welcome page. You can use a getter from our store to do this. We check if the token is null or not and return true or false.

\n
getters: {\n  isLoggedIn(state) {\n    return !!state.token;\n  },\n},
\n

then in our welcome component template, we can use now map to our Getter and use the v-if directive to display the login button if isLoggedIn is true or false

\n
<template>\n  <div>\n    Welcome\n    <router-link v-if="!isLoggedIn" to="/login"><button>Login</button></router-link>\n  </div>\n</template>\n<script>\nimport { mapGetters } from "vuex";\nexport default {\n  computed: {\n    ...mapGetters(["isLoggedIn"])\n  }\n};\n</script>
\n

Conclusion

\n

In this tutorial, we looked at how to authenticate a person using the JSON web token. We created a login form and used an express server for the login route in the application using Vue.js as a frontend framework.

\n

Resources

\n\n","frontmatter":{"date":"June 02, 2021","updated_date":null,"description":"In recent times, when building a modern application, users are required to verify their identity. The process by which we carry out this verification is what we call authentication, and in this tutorial, we would look at how we can carry out this task using JWTauthentication on a Vuejs app.","title":"Implementing Authentication on Vue.js using JWTtoken","tags":["Auth","JWT","Vue.js"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8867924528301887,"src":"/static/eb6480e4e97fc3f7f136edd312b36f17/58556/coverimage.webp","srcSet":"/static/eb6480e4e97fc3f7f136edd312b36f17/61e93/coverimage.webp 200w,\n/static/eb6480e4e97fc3f7f136edd312b36f17/1f5c5/coverimage.webp 400w,\n/static/eb6480e4e97fc3f7f136edd312b36f17/58556/coverimage.webp 800w,\n/static/eb6480e4e97fc3f7f136edd312b36f17/99238/coverimage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Uma Victor","github":"uma-victor1","avatar":null}}}},{"node":{"excerpt":"Introduction Dictionaries Dictionary is used for storing a key-value pair. It is a generic collection that is defined in the…","fields":{"slug":"/engineering/how-to-create-and-use-dictionary-csharp/"},"html":"

Introduction

\n

Dictionaries Dictionary<TKey, TValue> is used for storing a key-value pair. It is a generic collection that is defined in the System.Collection.Generic namespace and implements the IDictionary<TKey, TValue> interface.

\n

Create a dictionary

\n

Suppose we want to store the scores of a player in a cricket match, Then we have to save the key as the name of the player and score as value.

\n

To create a dictionary of key and value type as a string and int, respectively, we just simply need to initialize as below.

\n
Dictionary<string, int> dict = new Dictionary<string, int>();\nDictionary<string, int> dict1 = new Dictionary<string, int>(5); // Creates a dictionary with default initial capacity of 5
\n

The first line will create a dictionary with string type of key and int type of value and will have the initial default capacity as well default equality comparer for the key type.

\n

The Second line will create the same dictionary as line 1 except for the initial default capacity. It will create a dictionary with an initial default capacity of 5.

\n

We can create the dictionary by using the different constructors of the dictionary. Here I have talked about the two constructors only.

\n

Add elements

\n

We can add the elements in the dictionary by using add method of it.

\n
dict.Add("Player",42);\ndict.Add("Player1",38);
\n

It will add the elements in the dictionary.

\n

Note: Keys can not be null or duplicate. If we add the duplicate or null as a key, then the application will throw the run time exception, but Values can be null or duplicate.

\n

Traverse

\n

To traverse through a dictionary, we can use a foreach loop or a for a loop.

\n

foreach loop

\n
foreach (var item in dict)\n{\n    Console.WriteLine("Key "+ item.Key +" Value "+ item.Value);\n}
\n

for loop

\n
for (int i = 0; i < dict.Count; i++)\n{\n     Console.WriteLine("Key " + dict.ElementAt(i).Key + " Value " + dict.ElementAt(i).Value);\n}
\n

In the above code, we are using the

\n
    \n
  1. Key Property of dictionary element which will return the Key of the dictionary element.
    2. \n
  2. Value Property of dictionary element, which will return the value of the dictionary element.
    3. \n
  3. Count Property which will return the number of elements in the dictionary.
    4. \n
  4. ElementAt(int index) method of a dictionary, which will return the element at the specified index.
    5. \n
\n

Get/Update specified key's value

\n

To get the specified key's value from the dictionary, we can directly use the key as an index.

\n
Console.WriteLine(dict["Player"]); // Prints 42\nConsole.WriteLine(dict["Player1"]); // Prints 38
\n

To update the specified key's value of the dictionary, we can set it as below.

\n
dict["Player"]=45;\nConsole.WriteLine(dict["Player1"]); // Prints 45
\n

Note:

\n
    \n
  1. It will give the run time exception if the given key is not present in the dictionary, and we try to access the value of that key so we can first check for the key using the ContainsKey(TKey) method of the dictionary which will return true/false if the key is present or not in the dictionary.
    2. \n
  2. Suppose if we want to set the value of a key that is not present in the dictionary, then it will automatically add that element into the dictionary and sets the value of it.
    3. \n
\n

Remove

\n

To remove elements from a dictionary, we can use the below methods.

\n

Remove specific key

\n

To remove a specific key, we can use the Remove(TKey) method of the dictionary.

\n
dict.Remove("Player1"); // Removes Player1 from dictionary
\n

Clear dictionary

\n

To clear all the elements of the dictionary, we can use the Clear() method of the dictionary.

\n
dict.Clear(); // Clears all the elements and count will be 0
\n

Conclusion

\n

In this article, We have learned about some of the basics of dictionaries. Dictionaries help to use to manage data in Key-Value pair, which we can easily access and manipulate the data accordingly.

\n","frontmatter":{"date":"May 27, 2021","updated_date":null,"description":"In this article, we will talk about how to create and use the Dictionary in C#.","title":"How to create and use the Dictionary in C#","tags":["C#","Dictionary"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/871aa846ba5748cf0934c5c38659bb08/58556/coverimage.webp","srcSet":"/static/871aa846ba5748cf0934c5c38659bb08/61e93/coverimage.webp 200w,\n/static/871aa846ba5748cf0934c5c38659bb08/1f5c5/coverimage.webp 400w,\n/static/871aa846ba5748cf0934c5c38659bb08/58556/coverimage.webp 800w,\n/static/871aa846ba5748cf0934c5c38659bb08/99238/coverimage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"While most of you — developers and architects — understand the need for strong password security and practice it, your users might not. For…","fields":{"slug":"/engineering/risk-based-authentication/"},"html":"

While most of you — developers and architects — understand the need for strong password security and practice it, your users might not.

\n

For years security researchers have been hollering about the risks of weak, repeated passwords. Still, average Joe seems to be complacent about it and reuses the same or similar passwords across multiple logins, despite the fact that even a strong password is secure only if used for a single login.

\n

\"https://twitter.com/JohnLegere/status/371699808014462976/photo/1\"

\n

A good password manager can alleviate the problem of remembering tens of passwords, if not hundreds. However, in reality, the average Joe doesn't invest in a password manager and carries on with life.

\n

So, what's the greater risk? You may ask.

\n

Millions of data records, including login credentials, are being exposed in data breaches, which continue to make headlines around the world. In fact, data breaches globally exposed more than 36 billion records in 2020.

\n

Cybercriminals get access to these exposed records in black markets (generally on the dark web) and use them to perform credential stuffing and account takeover attacks or commit fraud.

\n

Whether it's yours or your users' fault, such type of attacks damage brand reputation, make your business liable to legal damages, and impact user experience.

\n

You should take the onus upon yourself to ensure user access to your apps or portals is as secure as possible without impacting user experience. This is where risk-based authentication (RBA) — also known as adaptive authentication — comes into play.

\n

What is Risk-based Authentication (RBA)?

\n

RBA is a process of assessing the risk of an authentication request in real-time and requesting additional layers of authentication and identification based on the risk profile to validate that a user attempting to authenticate is who they claim to be.

\n

The risk is usually assessed based on various parameters and the environment from which the user is attempting to authenticate. Some common parameters used for risk profiling include:

\n\n

Based on the risk assessed, an RBA system requests additional methods of authentication, such as:

\n\n

RBA is different from multi-factor authentication (MFA). MFA is a static authentication method — that is, regardless of the risk of an authentication request, this method requires an additional layer(s) of validation.

\n

On the other hand, RBA is a non-static authentication method that requires additional authentication factors only when necessary based on the risk profile — as a result, RBA provides a better user experience.

\n

Now, it's clear that better safe than sorry when it comes to authenticating users, and implementing RBA reduce account compromise risk on your apps.

\n

That said, RBA doesn't have to stop at user authentication; you can extend it to signups, payments, and other types of online transactions.

\n

How to Implement Risk-based Authentication (RBA)?

\n

You have two options:

\n\n

Yes, developing an RBA system in-house is possible. But, you should ponder upon some important details:

\n\n

If you got convincing responses to the above questions, you may go ahead and develop your in-house RBA system.

\n

But a lot of you might not have that sort of resources or just don't want to focus on non-core development projects. In this case, you can rely on a reputed RBA provider -- for example, LoginRadius.😉

\n

When choosing an RBA provider, make sure the solution meets the following criteria:

\n\n

Once you have evaluated and finalized the vendor, it is vital to test the RBA solution and ensure that the user experience is as expected while minimizing risk.

\n

Want to learn more about RBA and test how RBA works in LoginRadius? Signup for a free account here.

\n","frontmatter":{"date":"May 25, 2021","updated_date":null,"description":"RBA is a process of assessing the risk of an authentication request in real-time and requesting additional layers of authentication and identification based on the risk profile to validate that a user attempting to authenticate is who they claim to be.","title":"What is Risk-Based Authentication? And Why Should You Implement It?","tags":["RBA","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/5b01c860ee1c60243f1ede7dc2a060c2/58556/cover.webp","srcSet":"/static/5b01c860ee1c60243f1ede7dc2a060c2/61e93/cover.webp 200w,\n/static/5b01c860ee1c60243f1ede7dc2a060c2/1f5c5/cover.webp 400w,\n/static/5b01c860ee1c60243f1ede7dc2a060c2/58556/cover.webp 800w,\n/static/5b01c860ee1c60243f1ede7dc2a060c2/99238/cover.webp 1200w,\n/static/5b01c860ee1c60243f1ede7dc2a060c2/7c22d/cover.webp 1600w,\n/static/5b01c860ee1c60243f1ede7dc2a060c2/15103/cover.webp 3999w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},{"node":{"excerpt":"When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on…","fields":{"slug":"/engineering/react-error-boundaries/"},"html":"

When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on, which break the application and result in a blank web page, which is not ideal. To resolve this, many methods are created that handle these errors and improve the user and developer experience.

\n

In React, Error Boundaries comes in the picture, which was introduced in React v16 that catch the javascript errors found in UI and handle them efficiently.

\n

React Error Boundaries are React components that catch tricky javascript errors, log those errors and render them into a fallback UI instead of crashing the whole application.

\n

Now let's understand the concept with the code.

\n

Without Error Boundaries

\n
class UpdateCount extends Component {\n  state = {\n    count: 0\n  };\n  handleClick = () => {\n    this.setState({\n      count: this.state.count + 1\n    });\n  }\n  render() {\n  const {count} = this.state;\n    if (count === 4) {\n      // Imitate an error!\n      throw new Error('Application crashed!');\n    }\n    return (\n      <div>\n        <h1>{count}</h1>\n        <button onClick={this.handleClick}>+</button>\n      </div>\n    );\n  }\n};
\n

When an application encounters an error, the component unmounts completely, leaving the user/developer with a blank web page and no idea what to do next.

\n

React Error Boundaries provides a method to handle these errors efficiently!

\n

With Error Boundaries

\n

First, let's make an error boundary component. Here is an example:

\n
class ErrorBoundary extends Component {\n  state = {\n    error: ''\n  }\n  static getDerivedStateFromError(error) { \n    // will update the state \n    return {error: error.toString()}\n  }\n  \n  render() {\n  const {error} =  this.state;\n    if (error) {\n      return (\n      <div>\n  <p>Looks like an error occurred!</p>\n        <p>\n          {error}\n        </p>\n          <div>\n      )\n    }\n    return <div>{this.props.children}</div>\n  }\n}
\n

In the above example code, you will see a static method getDerivedStateFromError(error). This method is a lifecycle method in which we catch the error and see it as the state. If an error occurs, the state is updated, and instead of a blank web page, a human-friendly error message appears in rendering; if no error occurs, the control is returned to the original element.

\n

Now let’s see how we can use this class for our component.

\n
function App() {  \n  return (  \n    <div>  \n      <p><b>Error Boundary Example code</b></p>  \n      <hr />  \n      <ErrorBoundary>  \n        <p>Two updatecounts component use same error boundary component.</p>  \n          <UpdateCount />  \n          <UpdateCount />  \n      </ErrorBoundary>  \n      <hr />  \n      <p>Two updatecounts component use their own error boundary component.</p>  \n        <ErrorBoundary><UpdateCount /></ErrorBoundary>  \n        <ErrorBoundary><UpdateCount /></ErrorBoundary>  \n    </div>  \n  );  \n}  \nexport default App
\n

In the above code, when we click on the plus (+) button, it increases the count. The program is programmed to throw an error when the count reaches 4. It simulates a JavaScript error in a component. Here, we have used the error boundary in two ways, which are given below.

\n

First, these two updatecounts are within the same error boundary. If one of the updateCount components crashes, then the error boundary will replace them both.\nSecond, these two updatecounts are within their individual error limits. So if one crashes, the other component is not affected because both have their own error boundary component.

\n

React Error boundary is a really nice feature in React, and it is comparatively less used.\nThere are a lot of nice error boundary packages out there; you should look into them. Here is a link react-error-boundary

\n","frontmatter":{"date":"May 20, 2021","updated_date":null,"description":"Error Handling in React using React Error Boundaries","title":"React Error Boundaries","tags":["React","Error Handling","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/fbbddc79e1423b5aad77631cb84f527d/58556/error_boundary_cover.webp","srcSet":"/static/fbbddc79e1423b5aad77631cb84f527d/61e93/error_boundary_cover.webp 200w,\n/static/fbbddc79e1423b5aad77631cb84f527d/1f5c5/error_boundary_cover.webp 400w,\n/static/fbbddc79e1423b5aad77631cb84f527d/58556/error_boundary_cover.webp 800w,\n/static/fbbddc79e1423b5aad77631cb84f527d/99238/error_boundary_cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"There are several Consumer/User data protection regulations in place to protect customer data and privacy. With data protection act like the…","fields":{"slug":"/engineering/user-privacy-data-masking-in-nginx-logs/"},"html":"

There are several Consumer/User data protection regulations in place to protect customer data and privacy. With data protection act like the California Consumer Privacy Act (CCPA) and the European Union's GDPR improving awareness of privacy rights, many data-driven businesses have sought to determine which of their applications contain sensitive data, where the sensitive data goes, and why data is going. As a result, they are re-evaluating their data protection controls for employee and consumer data.

\n

Your program must record vast volumes of data to meet business requirements. It's likely that the application log data contains highly sensitive information. Email addresses, URL parameters such as tokens, credit card data, jobs data, Login Credentials, and Official ID Numbers (passport numbers, driver's license numbers, social security numbers), and authentication tokens may be included in specific log messages. It is important to mask sensitive details such as authentication tokens or credit card info while logging.

\n

A few years ago, Twitter requested users to reset their passwords. According to Twitter's release, passwords were written in the logs without masking, allowing those with access to the logs to see the password. In most startups or small businesses, all staff members have access to all tools, so masking confidential data is critical. Most log management tools allow you to mask any information until it is saved in the logs. Most of the log monitoring tools provide the feature for masking any information before it will save in the logs.

\n

Masking Sensitive Data in Nginx Logs

\n

By default, Nginx logs predefined format is combined. As you know, we can overwrite access log formatting as per the requirement. The NGINX JavaScript plugin can be used to enforce data masking in NGINX logs. This module is a kind of JavaScript implementation for NGINX and NGINX Plus that is intended for server-side use cases and per-request processing. When each request is logged, we run a small amount of JavaScript code to masking the sensitive data.

\n

Instructions for enabling the NGINX JavaScript module

\n

The NGINX JavaScript module is by default included in the official NGINX Docker image. if your installed version is 1.9.11 or later, then you can install NGINX JavaScript as a prebuilt package for your platform

\n
    \n
  1. \n

    Install the prebuilt package.

    \n

    Ubuntu and Debian systems

    \n
    $ sudo apt-get install nginx-module-njs
    \n

    RedHat, CentOS, and Oracle Linux systems

    \n
    $ sudo yum install nginx-module-njs
    \n
    2. \n
  2. \n

    Enable the module by adding a load module directive in the nginx.conf

    \n
       load_module modules/ngx_http_js_module.so;\n   load_module modules/ngx_stream_js_module.so;
    \n
    3. \n
  3. \n

    Reload NGINX service

    \n
        sudo nginx -s reload
    \n
    4. \n
\n

How to mask Query String in NGINX and NGINX Plus

\n

An application can be passed some potentially confidential information as query string parameters like tokens, public key, etc., this information logged as part of the request URI. If your program sends personal information in this manner, you can use the NGINX JavaScript module for masking customer/user personal information in the query string.

\n
    \n
  1. \n

    Create a new file maskQueryString.js

    \n
       vi maskQueryString.js\n\n   function fnv32a(str) {\n   var hval = 2166136261;\n       for (var i = 0; i < str.length; ++i ) {\n           hval ^= str.charCodeAt(i);\n           hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);\n       }\n       return hval >>> 0;\n   }\n\n   function maskQueryStringParameters(req) {\n   var query_string = req.variables.query_string;\n   if (query_string.length) {                     // Proceed if we have query string\n       var keyvaluepairs = query_string.split('&');     // Convert to array of key=value\n           for (var i = 0; i < keyvaluepairs.length; i++) { // Iterate through each Key Value pairs pair\n               var keyvaluepairs = keyvaluepairs[i].split('=');    // Split Key Value pair into new array\n               \n               if (keyvaluepairs[0] == "token") {              // Mask token query paramter\n               // Use first 5 digits of masked value\n               kvpairs[i] = kvpair[0] + "=" + fnv32a(kvpair[1]).toString().substr(5);\n               } \n               ekse if (keyvaluepairs[0] == "accountno") {              // Mask account no\n               // Use first 7 digits of masked value\n               keyvaluepairs[i] = keyvaluepairs[0] + "=" + fnv32a(keyvaluepairs[1]).toString().substr(0,7);\n               } else if (keyvaluepairs[0] == "email") {     // Mask email\n               // Use hash as prefix for a single domain\n               keyvaluepairs[i] = keyvaluepairs[0] + "=" + fnv32a(keyvaluepairs[1]) + "@sample.com";\n           }\n   }\n   return req.uri + "?" + keyvaluepairs.join('&');  // Construct masked URI\n}\nreturn req.uri; // No query string, return URI\n}
    \n

    The maskQueryStringParameters function loops through and key-value pair in the query string, searching for individual keys that have been identified as containing personal data. The value is converted into a masked value for each of these keys.

    \n
    2. \n
  2. Include maskQueryString.js file in the nginx.config file
    3. \n
\n
     http {\n\n js_include maskQueryString.js;\n js_set     $request_uri_masked maskQueryStringParameters;\n\n log_format custom_log_format '$remote_addr - $remote_user [$time_local] '\n                        '"$request" $status $body_bytes_sent $request_uri_masked '\n                        '"$http_host" "$upstream_response_time"'\n                         '"$http_referer" "$http_user_agent" clientId="$clientid"';\n\n access_log /spool/logs/nginx-access.log custom_log_format;\n....................\n\n  }
\n

In the above example, I am using the maskQueryStringParameters js function and Since we only need to mask the query string, so using a different variable $requesturimasked and then using the same variable in the log format.

\n

3.Reload NGINX service

\n
      sudo nginx -s reload
\n

Now nginx will store token, accountno, and email in the logs after sanitizing the data.

\n

Summery

\n

These best practices will help you keep confidential information out of your logs. It's not a full package that will get you ready for a HIPAA or SOC2 audit, but it'll get you started.

\n

The NGINX JavaScript module provides a quick and efficient approach for adding custom logic like data sanitizing to request processing. I showed how NGINX JavaScript could be used to mask personal data in the log files.

\n

You can get more detail about the Nginx logs and mask from here -\nNginx - Everything you want to know about the Nginx logs in 10 minutes

\n","frontmatter":{"date":"May 18, 2021","updated_date":null,"description":"Learn about data masking in nginx logs for user data privacy and compliance.","title":"Data Masking In Nginx Logs For User Data Privacy And Compliance","tags":["Nginx","Logs","Data Masking","Compliance","Privacy"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/e50f9d5601792a8e4e32b1b89444ca3b/991d2/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.webp","srcSet":"/static/e50f9d5601792a8e4e32b1b89444ca3b/61e93/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.webp 200w,\n/static/e50f9d5601792a8e4e32b1b89444ca3b/1f5c5/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.webp 400w,\n/static/e50f9d5601792a8e4e32b1b89444ca3b/991d2/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.webp 640w","sizes":"(max-width: 640px) 100vw, 640px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code…","fields":{"slug":"/engineering/react-code-splitting-with-lazy-suspense/"},"html":"

Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code and set the priority loading of the code snippet.

\n

But how do we set the priority or load them whenever required?

\n

1. React.lazy()

\n

Using this we can set code priority to the lower or it will load only whenever required. So how to do that? it's easy, let's understand through an example.

\n
 //generally approach to import Component\n import Blog from './BlogComponent';
\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));
\n

2. React.Suspense()

\n

Once the component is set for a lazy load then we need to set some kind of fallback option as well, till that code is rendered. This fallback option either could be a loader icon, screen, image, etc.

\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));\n\nfunction AppComponent() {\n  return (\n    // Displays <LoaderSpinner> until BlogComponent loads\n    <React.Suspense fallback={<LoaderSpinner />}>\n      <div>\n        <BlogComponent />\n      </div>\n    </React.Suspense>\n  );\n}
\n","frontmatter":{"date":"May 13, 2021","updated_date":null,"description":"Load Application faster with code spliting and dynamic loading","title":"Code spliting in React via lazy and suspense","tags":["React"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d480583c72a493c3dcd199f93b058a7d/58556/react.webp","srcSet":"/static/d480583c72a493c3dcd199f93b058a7d/61e93/react.webp 200w,\n/static/d480583c72a493c3dcd199f93b058a7d/1f5c5/react.webp 400w,\n/static/d480583c72a493c3dcd199f93b058a7d/58556/react.webp 800w,\n/static/d480583c72a493c3dcd199f93b058a7d/99238/react.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","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
    • LoginRadius returns an access token (JWT) and, optionally, a refresh token.
      • \n
    \n
    2. \n
  2. \n

    Client Stores the Token

    \n
      \n
    • Access tokens are stored in memory, sessionStorage, or secure cookies.
      • \n
    • They’re sent on every request via the Authorization: Bearer header.
      • \n
    \n
    3. \n
  3. \n

    Access Token Expiry

    \n
      \n
    • These tokens are short-lived by design (e.g., 15–30 minutes).
      • \n
    • Once expired, the client can use the refresh token to request a new access token.
      • \n
    \n
    4. \n
  4. \n

    Token Renewal

    \n
      \n
    • LoginRadius validates the refresh token and issues a new JWT, i.e., no user re-authentication is needed.
      • \n
    • Refresh tokens can be revoked at any time.
      • \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":60,"currentPage":11,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}